Tools of the trade
As with any profession, email marketers have many tools in their bag to help them do their jobs more effectively. We take a look at some of the most popular tools and how they are used in the email creation process.
Balsamiq / Pen & Paper: Email template wireframe mock-ups
Before you jump into Photoshop to design your email you will probably want to mock-up the basic outline and structure of your template. Some designers prefer to do this simply with a pen and paper, others are now using specialized software for this such as Balsamiq. The wireframe which is created during this stage of the process is super useful for helping structure the content within your email and also forces you to think about how to approach the code.
Fireworks / Photoshop: Designing and slicing images
The traditional way to build an email is to first design it in Adobe Fireworks or Photoshop, get it approved by your stakeholders and then slice the images into tiny pieces. This is an example of how an email from Gap has been sliced:
There are a few reasons that email marketers do this instead of just using one big image:
- It allows you to link images to different parts of your website, for example, the man in the email above could be linked to menswear and the women to womenswear.
- You can optimize the email for image blocking by putting descriptive Alt text within each image
- Background colors within each table cell can be used to create a more interesting look
- HTML text can be inserted around the images
- The images will download faster if they are sliced into smaller files
Here is an example of an email which incorporates most of these techniques:
Some email marketers go to extreme lengths to make their emails look more attractive with images turned off by creating art with dozens of tables. This example from Sony for the launch of the new Transformers video game is one of the most well-known examples of pixel art inside of an email:
As you can imagine, this is a very time-consuming process!
In regards to using Photoshop or Fireworks, I prefer to use Fireworks as it’s much simpler to use and allows you to zoom into an individual pixel, which is useful for making sure that you slice the image in the correct place. Now that we’ve sliced some images it’s time to put them into a template.
Dreamweaver / Sublime / Coda / Litmus Builder: Creating your email code
There are several tools which have become popular amongst email coders, but Dreamweaver has arguably become the most popular. Dreamweaver is the tool of choice for many email marketers because it allows you to see a split view of the email design and code at the same time. You can also click on the creative and it will take you to that part of the code. Adobe recently announced that they are going to integrate Dreamweaver with their own email platform, Adobe Campaign.
Other popular tools that email marketers use include Sublime, Coda and Litmus Builder.
Litmus Scope: Inspecting and sharing code
Email marketers tend to keep their own inboxes pretty full, looking for cool ideas to borrow. Scope allows you to easily pull the code out of an email in your Gmail inbox so that you can see what someone has done. You can also review how the design looks on desktop and mobile and share the email.
Litmus / Email on Acid: Email previews
Tools such as Litmus or Email on Acid allow you to easily test the HTML of an email across 50+ email clients, devices and screen sizes at the same time. I used to set up inboxes at all of the main ISPs such as AOL, Yahoo, Gmail, Hotmail, etc. and then manually sent myself tests to see how they rendered. As you can imagine, these tools are a huge time saver.