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.

Mobile-friendly layouts and design elements

Designing for mobile isn’t simply a matter of taking a crack at writing mobile-specific CSS. Other things to consider are:

• Single-column layouts that are no wider than 500 to 600 pixels work best on mobile devices. They’re easier to read, and if they fall apart, they’ll do so more gracefully.
• Links and buttons should have a minimum target area of 44 × 44 pixels, as per Apple guidelines. Nothing is more unusable than clouds of tiny links on touchscreen devices.
• The minimum font size displayed on iPhones is 13 pixels. Keep this in mind when styling text, because anything smaller will be upscaled and could break your layout. Alternately, you can override this behavior in your style sheet (do so with care).
• More than ever, keep your message concise, and place all important design elements in the upper portion of the email, if possible. Scrolling for miles is much harder on a touchscreen than with a mouse.
• When possible, use display: none; to hide extraneous details in your mobile layout. Elements like social sharing buttons may be great in the desktop inbox, but aren’t always easy to use by the recipient on mobile devices.

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.