In days of old, web content was built with table-based HTML. It was really unsightly. While advancements in website development has eliminated the table-based website. Hooray! Unfortunately, email design has not moved away from tables. And the number of browsers, email clients, and devices that newsletters are viewed on has grown. But that doesn’t mean that you are doomed to deliver unsightly email campaigns. In this month’s Homegrown, Newsletter Wizard Tim Rosenberg, of Quillor, showed us how to create better email newsletters.
Tim uses Photoshop for creating design assets, Foundations for Email, a framework to create responsive HTML emails that work on all devices and email clients, and Sublime text editor to custom code the email framework.
Designing your newsletter
Tim’s checklist for designing your newsletter includes:
- keep the design simple,
- design for mobile first
- use a 12 column grid
- make it 600 px wide
Prepare your assets
- Slice your assets
- Use Photoshop’s “Save for Web” option
- Use Progressive Scan when exporting
- GIF & PNG files: Interlace
- JPG files: Progressive
- If using animated gifs, keep in mind that some email clients only display the first frame of the gif, so make sure the design works with the first frame of the animation
- export individual assets. Background images should be separate from images that are layered over them.
Coding your newsletter
Now that you have designed your newsletter and exported the assets, it’s time to put them in the framework.
Download the template from Foundations for Email. The template is the framework that holds your email design together. It is flexible to that it can adapt to the myriad of browsers, email clients, and devices in which it is viewed. The table rows are the scaffolding that holds the design together. Use sub columns within a row to layout the design, so that the design won’t break on mobile devices. Begin assembling the email by creating a content skeleton, basically the text-only version of the email. Then begin placing the images into the design to flesh it out.
Tim shared many pro tips for best practices:
- Use HTML buttons, rather than image buttons
- use Hex codes to assign colors, do not use rgba values
- use inline CSS to styles to your rows and text
- because email client spam filters don’t like images, use ALT tags to describe your images, and for accessibility screen readers
- you can use inline CSS here to style your ALT tag text
- while you are at it, style the background too, by assigning it a color
- If using custom fonts, set a web-safe fall back font
- Easily create inline styles from your stylesheet with Foundation for Emails Inliner tool
Testing your newsletter
Once your newsletter is ready upload the code to Mail Chimp, or whatever email service you use. Then head to Litmus to test it across all platforms to see how it will display on each. This will let you know if you need to make any adjustments to the code.
You are almost ready to hit that send button, but first do a quality assurance check:
- Are there any missing images?
- Are all stock images purchased?
- Do the images have “alt tags” for email clients?
- Are images optimized for progressive scan?
- Are images loading quickly?
- Do all hyperlinks go to correct page?
- Do they have a description on hover?
- Is all content spelled correctly.
- Do you use correct industry terms?
- Avoid spammy subject lines with this tool:
- Are all clickable items accessible?
- Does it pass the Litmus Test?
- Is your “unsubscribe” button and company info included?
- Is it optimized for mobile?
Now, as Tim says, go forth and conjure magically responsive and compatible email newsletters.