Just as most web designers take a ‘design-first’ approach to their projects, we’re going to cover the visual side of creating a mobile-optimized email newsletter in this guide, before going elbows-deep into coding. This will help you make informed decisions when next planning an email newsletter, plus make it that much easier to conceptualize the techniques we’ll be discussing later on.
We’ve already started talking about responsive email design. If you’re familiar with the use of this term in the context of the web, then you’ll be pleased to know that we’ll be using the same concepts and techniques here for email. If things like ‘adaptive layouts’ are new to you, I highly recommend reading this primer by ‘A List Apart’.
The skinny is that we’ll be designing two CSS layouts of the same newsletter - one layout that looks great in webmail and desktop clients, plus another layout that can be easily read on the smaller screens of mobile devices. For example, here’s an HTML email in Outlook:
Below is the same email, only this time viewed in Apple's iPhone Mail. As you can see, there are significant differences between the two layouts. The mobile version is skinnier, lacks visual clutter and is just as readable as the desktop version. This can be attributed to the use of mobile-specific CSS:
As a point of comparison, the right image is the same newsletter, without this stylesheet. See how tiny and unreadable the text is? Well, that’s the problem that faces millions of email newsletters received on mobile devices, everyday.
Designing for mobile isn’t simply a matter of taking a crack at writing mobile-specific CSS. Other things to consider are:
When mocking up an HTML email or template, our advice is to create two sketches or wireframes - one of the desktop/webmail layout and one of the mobile layout. Keep in mind where your call to action (CTA), such as ‘View deal’ appears on both - is it immediately visible when the email is opened? Or does the recipient have to scroll in order to see it?
Now you’ve seen what mobile stylesheets can do, lets get into the code.Coding Mobile Emails
Sign up for free.
Then send campaigns for as little as $9/month