If you’ve spent your career dealing with web standards, and enjoyed watching the progressive disappearance of legacy browsers, your first contact with email newsletter building will be painful. You’re going to need to throw out a lot of your golden rules to get the compatibility you’ll need with email clients.
In fact, while in 2013 the Standard Web Project Team had been able to say “Our Work Here is Done”, the road to email standards still appears to be very long indeed.
You can see an example of how email clients render the same content looking at Email Standard Project Acid tests. In the screenshot below, you can see how the same mail appears in Apple Mail and Gmail:
Email design does require you to reinvent some of your skills, but don’t consider this as a limit to your creativity – instead treat it as a real challenge.
So, let’s start by summarizing the main points of email design to grant you maximum email-clients compatibility:
DO NOT:
- use CSS3 rules and selectors
- use pseudo selectors or pseudo elements
- use floating or positioned objects
- use background images
- use forms
- use linked web fonts
DO:
- use tables for layout
- use inline CSS rules
- limit email content width to around 600px
- test
- test
- TEST!
Email building workflow
Set up a prototype
As you would with a standard web project, I recommend you start by drawing a prototype. This will help you to make each graphic adjustment you need and will help you present your work to your client before you start coding.
In this phase you’ll want to create a design that:
- catches customer attention
- draws them through to the end of the mail (you have a maximum of 8-10 seconds before a reader decides to delete a mail or not)
- brings them to some call to action (i.e. the “Buy now” or “Contact us” buttons)
You can find a lot of inspiration on the web. I’ve found some good resources are htmlemaildesigns.com, Really Good Emails or Newsletter monitor, provided by ContactLab and these are mainly focused on marketing strategies.
Coding Your Email
As we said earlier, email is rendered by mail clients in many very different ways: our efforts must be directed to cancel out, or at least to minimize, these variations.
Fortunately, emails tend to have a relatively simple structure, and in most cases this work is not particularly complicated.
Continue reading %Crash Course: Building an Email Newsletter%
