So how important is responsive email? Well the numbers speak for themselves: 47% of emails are now opened on mobile devices, according to a study of over 250 million opens worldwide by email analytics providers Litmus. Simply put, people now consume email on the go.
As a result, it’s only natural that users expect email to evolve and accommodate to their needs when interacting with smaller screens and touch interfaces. Just as websites have with responsive designs. With all this in mind, what should we do in order to develop responsive emails? Here are some handy hints and tips to help you think about the potential process.
Start with the Brief
This usually includes detailing the objective of the email and the target audience the email is aimed at. When developing the brief, it’s often worth having a draft copy of the content available as is an understanding of potential images that are to be used. All of this influences the design and the feel of the email, which is one of the most important parts of a brief.
The content components of an email will need to be considered carefully when developing the layout of the responsive design framework for the email. This is essentially the additional work that is required to be undertaken to ensure that the email adapts to the device it is being viewed on. Typically, this would as a minimum involve the following areas:
- Main image
- Heading 1
- Paragraph (or two) of body copy
- A main call to action (CTA) button
- Contact details
- Social media icons
- Small print
- Unsubscribe link
- View in a browser link
- Physical mailing address
What Email Clients Are Your Users Using?
It’s worth trying to find out as much information as you can about the recipients as early as possible as this will affect the design as well as the build of the email.
If your audience are using modern email clients you might want to try some cutting edge techniques like moving images or web fonts.
The bad news is, despite community efforts, the state of email standards is a lot worse than the state of web standards and many very popular email clients (like Gmail) are reluctant to get on board with a consistent approach.
The reality is that you will probably need to support a range of web, mobile and desktop clients, including the notorious Outlook (which in case you don’t know, is like the Internet Explorer of email clients).
Once you have got the brief, it is best to scribble all the elements on a piece of paper. First just list them, marking them up as h1, paragraph, call to action, small print etc.
This helps develop a hierarchy and a source order and by initially limiting to a single column, it forces you to think in a mobile-first kind of way.
Next, sketch a layout, slowly grouping the elements together into a very rough design.
If this is the first ever campaign, or the design is a big departure from previous campaigns, then it could be worth using Photoshop at this point to mock-up a concept. This is useful as it helps to experiment with and gather any fonts, colours and imagery etc.
How Big Should an Email Be?
Although it’s becoming less clear cut with responsive design, its best to keep design of emails to around 600px wide.
Because you have already sketched out the source order, you will have a good idea how things will look on mobile too, so you don’t spend any time mocking things up at different widths.
In terms of email height and file size, the smaller the better is a good rule of thumb. Your content should be focused and concise and this in-turn should result in a small email size.
Keep Things Simple
Keep things simple, just because you might be working with a 12 column grid, doesn’t mean you should use every one.
Complicated designs take a very long time to test once it has been built. And more importantly, at 600px wide, any more than 2 or 3 columns of text is unlikely to give a comfortable read and is going to start to feel very cramped.
Don’t forget how cluttered many email clients can be, don’t let your complicated design contribute to the noise or your users probably won’t want to waste time and effort reading your email. Try to design with 1 column and plenty of space between elements to make things as easy as possible.
Consider also how the email copy will read in the inbox view too. The user may be presented with just the name of the sender, the subject line, and just a few words from the beginning of the email, before they decide whether to read it, swipe it straight to archive, or even worse, mark it as spam.
On the note of spam, take it seriously and don’t bombard people.
Testing is the most difficult and tedious part about building an email. So ensure that you develop testing scenarios that captures all the elements that your responsive design is adapting itself for. As a starting point consider different email clients on different devices first, then move onto different web browsers on different devices. Don’t forget to check it in horizontal and portrait views as well. Tablets, mobiles, laptops and desktops are all rendering things slightly differently. Operating systems also plays a part as for instance Android and Apple will not use the same rendering engines… if your audience is using web email clients like Hotmail, then you all of a sudden have another element to test.
Before You Start Testing, Don’t Forget to…
- Proof read of the copy
- Double check phone numbers and email addresses
- Check you’ve included alt text and titles attributes where appropriate
- Remove any unused CSS
- Optimise images
- Check your email with images turned-off
- Update images to have absolute paths
Try To Test On The Following Email Clients…
- Gmail.com (Chrome, Firefox & Internet Explorer)
- Outlook.com (Chrome, Firefox & Internet Explorer)
- Yahoo.com (Chrome, Firefox & Internet Explorer)
- AOL.com (Chrome, Firefox & Internet Explorer)
- Mail (OSX)
- Thunderbird (OSX)
- Outlook (Windows)
- Windows Live Mail (Windows)
Hopefully you found this write-up of the email design process useful. It’s worth reiterating that you should keep the design as simple as possible and leave plenty of time for testing.