Navigation

How to design a responsive HTML email

By Jack Filose | How To, Web Design | Jun 11, 2013

Over the past few years, soaring mobile usage has sparked an evolution, or perhaps revolution, in the way that we approach delivering content to online users. The ultimate goal is a fluid, mobile and device-agnostic web, and one school of thought has emerged as the widely favoured means to this end: responsive design. However, while the responsive zeitgeist has gathered steam, email design and development has struggled to keep pace.

This is due, in part, to the fact that HTML emails are a notoriously tricky medium for developers to work with. Archaic email client technology and a lack of standards have rendered many of the rules of modern, semantic code useless. But email is still a key marketing channel too important to be overlooked: over a six-month period in 2012, Litmus reported an 80% increase in email opens on mobile devices. In the same year, Campaign Monitor revealed that, for the very first time, their mobile email open rate had actually surpassed desktop and webmail.

Obviously it’s important to conduct proper analysis of your audience before taking the decision to invest in mobile-optimization. But a well-executed responsive email design can ensure an excellent user experience for both desktop and mobile users – and with widespread 4G just around the corner, the trend towards mobile is inexorable, so why not future-proof?

 

Square peg, round hole

If you’ve ever had the misfortune of opening a fixed-width email on a mobile device then you’ll understand the need for responsive email design. Screen-bursting, multi-column layouts can appear zoomed out so that font sizes are reduced to the point of illegibility. Users may zoom in but are then constantly and infuriatingly required to scroll horizontally left-to-right and back again in order to read content. Links appear small and congested, with no regard for fat fingers on touch-screen displays. And low-contrast designs on small viewports, dimmed to save power, often become unreadable. Clearly, mobile optimization is important but what’s the best way to go about it?

internal_img1

 

Mobile best practice

Before writing a single line of code, consideration of design features can vastly improve the user experience for those on mobile, although arguably these are advisable concessions regardless of screen size.

  • Clear, concise content: small screens mean it’s more important now than ever to engage the user as efficiently as possible. 
  • Single-column layout: simplicity is key. Layouts no wider than 640px will degrade gracefully. A single-column ensures no content will be completely lost outside the viewport when zoomed in.
  • An engaging subject line: this is one of the email marketer’s most effective weapons in an overcrowded inbox. Keep it short and snappy.
  • Large call to action (CTA): don’t punish fat fingers! Apple’s iOS Human Interface Guidelines recommend a minimum ‘tappable’ target area of 44×44 points.
  • Generous font sizes: make sure your message can be easily read.
  • Pre-header: another key area when it comes to visibility in the inbox. Try to avoid simply displaying ‘view in browser’ text.
  • Left-aligned text: there are a number of reasons for aligning important elements to the left-hand side of the content area. (Eye tracking research suggests that western users focus the majority of their attention on the left-hand side of email content. This is hardly surprising since we read text from left to right. Certain operating systems, notably android, will not scale content to fit the screen, therefore displaying only the left half of an email. From an ergonomic perspective, the majority of users will find it easiest to interact with elements in the bottom left/middle of their hand-held screen.)
  • Vertical hierarchy: diminished screen real estate places more credence than ever on the idea of ‘the fold’. Significant CTAs should be placed as near to the top as possible; if they are not seen immediately, perhaps they will not be used.
  • Use images carefully: don’t assume that images will be seen. iPhone’s native email app will display images by default but many clients won’t.

These tips can improve the user experience for mobile customers, but you can, and probably should, optimize further. Thanks to growing CSS3 support among mobile email clients, responsive email design is now possible.

 

Getting started

As I mentioned earlier, HTML emails suffer from a woeful lack of standards – to the uninitiated, much of what follows will be a journey back in time to the early days of web development. Layouts must be arranged with tables due to the out-dated HTML rendering engines of some email clients and CSS must be applied inline. Several email clients will completely disregard any style declarations made in the <head> section of the document.

There are some fantastic email boilerplates available, I recommend Sean Powell’s excellent HTML Email Boilerplate as a starting point, but for the sake of demonstration, let’s begin from scratch.

For those of you that like to follow along with the code, you can download a template for this article from here.

 

Doctype

Hotmail and Gmail will automatically insert the XHTML 1.0 Strict doctype. It’s therefore not a bad idea to use it but it’s important to thoroughly test your email with and without a doctype as many email clients will simply strip it out altogether. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Email on Acid has conducted extensive research on email doctypes here.

 

Media queries

We can now insert a viewport meta tag to make sure our email is correctly displayed on mobile devices. It’s also a good idea to specify the content-type and a title tag too. These will be ignored by many email clients but are a good idea if you’re planning on providing a link to a ‘browser version’ of your email.

Since the content-type will most likely be ignored, it’s advisable to encode all special characters within your email as HTML entities.

Also, we’ll include a couple of sensible style resets to ensure our email is rendered how we want it to be across platforms.

<head>
<meta name="viewport" content="width=device-width, initial scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Email subject or title</title>
<style type="text/css">
.ExternalClass {width:100%;}
img {display: block;}
</style>

Note that the viewport meta tag has negative implications for Blackberry.

Now we can insert our media queries; how many depends on the level of specificity you wish to deliver to each device. In this example we are going to use just one — making the reasonable assumption that most devices with a screen size no greater than 600px are modern, mobile and touch-screen and will benefit from mobile-optimized styling. Furthermore, we are going to assume that by following the universal mobile best practice techniques, outlined earlier, mobile users on larger devices receiving the desktop layout will encounter no major usability issues.

We are using media queries in the same way we would when building a website; if the viewport size is within the constraints set in the media query then apply that style.

@media only screen and (max-width: 600px) {
    table[class="hide"], img[class="hide"], td[class="hide"] {
      display:none!important;
    }
  }

In the example above we are telling some elements with a class of “hide” to display:none on screens narrower than 600px. The !important property ensures that any inline style is overridden. This is the basic principle of responsive email design: overriding inline style declarations made in the body of the HTML document with !important style declarations made in the <head> section, and targeting these style overrides to specific screen sizes with media queries. A glaring exception is the gmail app that will ignore any style declarations in the <head> section. However, conscientious left-aligning of content should ensure a satisfactory user experience for gmail fans in your mailing list. Obviously this isn’t an ideal solution but at present, responsive email design is as much about considered compromises as it is about cutting edge techniques.

It is worth noting that we are targeting our HTML elements with CSS attribute selectors to overcome a rendering quirk of Yahoo! Mail.

So we can see that media queries are a useful tool for selectively displaying content but we can also use them to manipulate other features of our layout. Perhaps most importantly, we can constrain the column width of our email — the key to a great mobile experience. 

@media only screen and (max-width: 600px) {
    table[class="content_block"] {
    width: 92%!important;
    }
}

We have now stated in our media query that all tables with a class of “content_block” should scale to 92% width on devices with a screen size of up to 600px. Now all we have to do is specify a width attribute inline (600px) for any table with a class of content_block and we have a fixed width container that then scales proportionally on screens under a certain size. Provided that the width attributes of the child elements of this container are all specified as percentages, this is a basic responsive email template.

Take care when disabling webkit automatic text size adjustment on the body tag, as a rule of thumb, try to keep font sizes above 12px minimum.

 

Buttons

Calls to action (CTAs) are usually the most important part of a marketing email. They should be eye-catching, well-placed and above all, usable. The criteria for a great CTA are different depending on whether it is to be selected by a cursor or a finger. This is a powerful function of responsive email; to provide users on smaller touch-screen devices with finger-friendly buttons that are not affected by image blockers.

internal_img2

Unfortunately, such buttons cannot be displayed universally as they rely on padding properties that are not supported in some desktop email clients.

@media only screen and (max-width:600) {
a[class="button"]{
      display: block;
      padding: 7px 8px 6px 8px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      color: #fff!important;
      background: #f46f62;
      text-align: center;
      text-decoration: none!important;
}
}

The style declarations above will transform tags with a class of  “button”, like the one below, into large, engaging, coloured buttons that span the width of the content area, so long as the device screen width is not greater than 600px. CSS3 support shouldn’t be a problem as we can assume the mobile technology we are targeting is reasonably modern.

<a href="#" style="color:#f46f62; font-weight: bold; text-decoration: underline;">Click me!</a>

The inline styling is sufficient for mouse users that may select links with greater accuracy but overriding these styles to make links large and clear for touch-screen users decreases the likelihood of interaction mistakes. Importantly, this approach does not rely on images and so avoids the usability issues that image blockers would otherwise present.

 

In conclusion

Responsive email design is still a compromise. The baffling array of different devices, email clients and rendering engines present designers and developers with a daunting task. But as technology progresses it’s becoming easier to provide users with appropriate layouts that they can effortlessly consume and interact with. Growing support for media queries in email has changed the landscape of mobile email optimization and provides us with a platform to drastically improve the user experience on more devices. It is now up to us, the designers and developers, to experiment with creative ways to reach the mobile audience.

 

Have you designed for email? Did you use a responsive approach? Let us know in the comments.

Featured image/thumbnail, via mattw1ls0n

Share this post
Comments (no login required)
  • Sloupok Sloupok

    good post, thank you

  • http://seoservices4smallbusiness.com/search-engine-optimization.html Hemanth Malli

    Very good tutorial.. its a helpful share!! Responsive design is the new trend and its becoming popular as the mobile internet users are increasing rapidly and many are converting their websites to responsive. I made it but not do responsive email. I will try it !!

  • leighjeffery

    Excellent tutorial! thanks for the examples to work from:)

  • Thomas

    Microsoft Outlook has ruined all my attempts at cross-client responsiveness.

    • Jack

      Hi Thomas, cheers for reading the article. A Microsoft product causing developers headaches..? Surely not ;)

      I tend to presume that the vast majority of Outlook users will be using the desktop client so a responsive solution isn’t essential. However, with the advent of the new Outlook.com – we must now consider how our emails are going to perform for mobile Outlook users. I believe it doesn’t support media queries but I haven’t done a great deal of testing with it. I’d be interested to hear your experiences if you have. Otherwise, following the ‘mobile best practice’ techniques outlined above should provide, at the very least, a satisfactory user experience.

      • Thomas

        The company I work with had me put together e-mail templates for them, and with older versions of Outlook still holding a fair amount of use (including ours) it really put responsive out the window. Table layouts won.

  • stephen hutch
  • http://www.spinxdigital.com/ Stephen Moyers

    Really nice post! I’ve personally implement media queries and viewport meta for mobile site and I really like this functionality. It’s great that it’s working for mobile device mail also. It’s really essential for mobile era when everything is going responsive because most of the people are using mobile devices for surfing the web.

  • emarketing .

    Excellent Tutorial shared! It was indeed very helpful. Thanks a lot for sharing!

  • Ash Pennington

    Nice post, and helpful template :) I’ve noticed that in the html you’ve used 3 digit hex references (which aren’t picked up in some earlier versions of outlook) so best sticking to 6 all the time. (Y)

    • Jack

      Hi Ash, cheers for reading. That’s an extremely good point – thank you!

  • Jack

    Have you had a look at the Antwort responsive email template by Julie Ng (@jng5)? Got to admit I haven’t used it myself but have heard good things.

    • Ash Pennington

      I’ll definitely have a look into that mate, cheers! :)

  • Rakesh Prajapati

    It is very good post. I am designing weekly 10 to 15 newsletter. Let me try with this. I hope this will be make nice experience.

  • Carey Miller

    I very much enjoyed your post and will be trying out some of your suggestions. However, with the lack of standards across email clients and the various versions of Microsoft Outlook still in use, creating an email, responsive or not, which works across all platforms is still frustrating.

    I have found one axiom which still works to create a final email product which works across most platforms. Code it like its 1999!

  • http://www.mathewporter.co.uk/ Mathew Porter

    Email is abit of a mine field due to the poor support, especially in widely used desktop clients… As with using particular markup on a site development alot of users will still have dated browsers, but as time passes then hopefully users setups will have increased support.

  • bealzebubba

    The agency I work for is doing responsive emails, though all we really do is design it for responsive and slice out images. It’s not really ‘the correct way’ in my experience but it is responsive in the sense that images will either scale down and stack above each other. Our email width is 604 for normal viewing and 3092 for responsive. It’s worked well for our application.

  • Manaday Mavani

    Very good tutorial, Jack! Thank you. Keep sharing.

  • http://emailwizardry.nightjar.com.au/ Nicole Merlin

    Great post Jack! That’s an interesting point about left-aligning content because Gmail for Android (and Yahoo and Outlook.com) will all only display the left-hand side. I have been playing a little with the new Gmail on Android.. it does a kind of pseudo-media-query obedience in that it does set outer tables to have a max-width of 100%. Tricky but potentially better than how it currently works! Still a lot of experimentation to go before I fully understand it.

    • Jack

      Hi Nicole, thanks for reading! I’ve had a brief look at the new Android Gmail too – far from perfect but a step in the right direction perhaps. Your comment really just backs up my point that responsive email design is unfortunately, at present, a compromise. There is no Holy Grail. It’s frustrating to me that bleeding-edge companies like Google who are capable of producing state-of-the-art browser software, give no apparent thought to the rendering capabilities of their email clients. Historically, desktop email clients have lagged woefully behind the rendering capabilities of their browser contemporaries; Microsoft citing ‘security benefits’ for using the Word (!) rendering engine… But I thought the ‘mobile revolution’ would mark a departure from archaic email client technology – it was a chance for email clients to embrace the more advanced rendering capabilities of modern browsers. And I think largely, this was the case – the native iPhone mail app being a shining example of CSS3 support. But that makes the total lack of progress in other mobile email apps (namely Gmail) even more inexplicable/infuriating. I think the whole thing boils down to a lack of standards. Have you come across the Email Standards Project? It’s exactly the kind of project that could encourage progress, but by the look of dates of the latest blog posts it died in 2010…

      I’d be interested to hear if you have any thoughts on email standards? Have you seen any similar projects?

      • http://emailwizardry.nightjar.com.au/ Nicole Merlin

        I agree, it’s really weird that Gmail aren’t leading the charge on email. I have seen the Email Standards Project, I believe that was started by Campaign Monitor, perhaps it took too much time and there wasn’t enough of a response? fixoutlook.org had 30,000 supporters but I am not sure if Microsoft are bothering to do anything about it. They could just make Outlook for PC the same as Outlook for Mac — it just uses webkit to render email so they come out beautifully!

  • http://www.proweb365.com/ Minneapolis Web Design

    Thanks for informative tutorial. It was indeed very helpful.

  • marquizzo

    I have a quick question. You said that “Several email clients will completely disregard any style declarations made in the section of the document.”

    If that’s the case, where should we place the @media style declarations? Won’t e-mail clients ignore them because we’re placing them within the tag?

    (Sorry if I’m posting this question twice… I can’t find my previous post)

    Thanks, Jack!

    • Jack

      Unfortunately that is just an inconvenient truth of email development at the moment; some email clients, notably Gmail, strip out style tags WHEREVER they appear in the document. Including style tags in the body of an HTML document is technically invalid anyway so I wouldn’t recommend it but in any case – some email clients will still strip it out: http://www.campaignmonitor.com/css/#clients

      The best solution (or compromise) at present is to make sure that you pay attention to the ‘mobile best practice’ I have outlined above. If you apply these techniques to the ‘desktop’ version of your email design then you won’t suffer serious performance issues when users try to view your email in a client that doesn’t support media queries.

      N.B. The new Gmail app still doesn’t support media queries but does automatically constrict the width of emails. I know Nicole Merlin (see below) has been doing some testing with it. Might be worth dropping her a line on twitter if you’re interested in finding out more: https://twitter.com/moonstrips

      • http://emailwizardry.nightjar.com.au/ Nicole Merlin

        True that — you still put the media queries in the head but yes, Gmail will ignore it. You put them there so that every client that will use them, can. Litmus recently posted a neat round-up of what works where: https://litmus.com/blog/mobile-email-compatibility-guide-what-works-where.

        I have messed about with the new Gmail on Jelly Bean a little and found that Gmail does some faux-responsiveness… it makes tables a maximum of 100% of the width of the viewport. I found that when I had lots and lots of nested tables, the widths and alignment (after about the second nested table) turned into a bit of a mess and lots of things were being ignored. If I had as few nested tables as possible, I was able to get pretty good results. Investigations are ongoing :)

  • Aleksandra

    I was playing with the template and noticed that the mobile version of Yahoo messes up the buttons. Any work-around you would suggest for that?

    Thank you,
    Aleksandra

  • Kirgy

    Really helpful article – its interesting seeing where responsive design is going in the mobile world. I can see some major issues there with styling in the head section; hopefully we will get some more liberty for media queries from clients in the future. Also interesting is the either overly large mobile phone or tiny hand pictures above!

  • Dimaz Prasetya

    Thanks a lot, bro. It’s really really helpful share for me. I’ve tested in Gmail and Outlook, it runs nicely.. :)

  • Mehnaz Khan

    Really helpful to learn about