Designing a responsive HTML email

Written by: JBi Digital

Published on: 24.07.13

Mobile usage has significantly changed the way we access data and in turn the way we deliver content to our online client base. Device-agnosticism is becoming more common when we look to the future of how we’d like the web to function. All web-based content should be accessible, regardless of their specific means of access. Responsive design has been heralded as the step required to achieve device-agnosticism and whilst responsive websites are rife, other web functionalities including the email have been left behind.

HTML emails are known for being difficult to develop. Email technology tends to be out of date so modern coding tricks are void. However, email marketing is such a powerful tool it cannot be overlooked and web professionals need to learn how to design responsive HTML emails.

The Problem with Email

Chances are you’ve had the experience of opening a fixed-width email on your mobile. Even trying to open such an email will have shown you that responsive design is necessary. Multicolumn layouts often zoom out, meaning fonts become completely illegible. You can zoom in but then you have to keep scrolling and it’s easy to lose your spot on the screen. Links become tightly congested with no heed paid to the difficulty of selecting such small areas on a touchscreen. Mobile optimization isn’t at the forefront of many designers’ minds but it should be.

Mobile Design: The Golden Rules

Before getting stuck into your development you need to consider the following points and ensure they’re worked into your plan for the benefit of your client.

Keep it Clear
Small screens mean that you need to focus on concision and clarity. The onus is on efficiency over decoration.

Single Column
Simplicity is your main aim. A single column layout ensures no content will be lost outside any screens’ viewport when zoomed in.

A Subject Line to draw them in
The most powerful weapon of the email marketer is their content but to get your customers interested you need a sharp and snappy subject line which stands out in each and every inbox.

Super-size your Point
Make your Call to Action stand out and don’t penalize over sized digits. Apple have set out guidelines which recommend that the minimum ‘tappable’ area should be 44×44 points.

Designing your Responsive HTML Email

There are plenty of email boilerplates available, many of them free but professional designers really should learn the tricks behind the template. Below are some of the key points you need for your responsive email design.

Doctype

If you’re using Hotmail or Gmail the XHTML 1.0 Strict doctype will automatically be inserted and therefore it makes sense to test your email with and without the inclusion of doctype. See the following code:

Media Queries

Now is the time to insert your viewport meta tag to ensure your email is displayed properly on mobile devices. You should also specify your content-type and title tags too. Many email clients will skip over this code but it’s essential if you’re providing a link to the browser version of your email too.

It’s recommended that you encode all special character as HTML entities. You should also include relevant style resets to ensure the email responds and renders correctly across platforms.

Now is the time to insert media queries. The number depends on your specific client brief. In the below example we’re using just one media query on the assumption that most devices with screen sizes of up to 600px are modern and have touchscreen functionality. Media queries are used in the same way as when you design websites and below as stated you can see we’ve highlighted the maximum screen size for our design.

The above example shows the basic principle of responsive design in action: overriding style declarations in the body of the HTML document with !important style code placed in the <head> area. These style overrides are then targeted to individual screen sizes with media queries.

Call-to-Action Buttons

The call to action is the most important part of any marketing email. It needs to be eye-catching, positioned perfectly and easy to access. Finger-friendly buttons are essential for responsive email design to work. Sadly not all buttons cannot be displayed universally as they’re dependent on padding which some email clients don’t support.

The above style declarations will transform tags in your code with the class of “button” into engage, coloured buttons which span the whole content area, as long as the screen width is no greater than 600px.

The alternative approach is to avoid images altogether and use styling.

The type of styling allows the link to stand out sufficiently enough to make it accessible even to over sized fingers. This approach doesn’t rely on images which is ideal for devices where image blockers are used.

Responsive email design is still developing, there are so many different devices that it may feel impossible to create anything truly universal. However, it also presents a creative challenge for designers and developers to tackle.