Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

From Monitor To Mobile: Optimizing Email Newsletters With CSS

HTML email has a reputation for being a particularly tough design medium. So tough, in fact, that many designers regard coding and testing even the simplest email design to be almost as bad as fixing display quirks in Internet Explorer 6, and only slightly better than a tooth extraction. So, it’s with much courage that I tell you today about using CSS in email newsletters: what works, where it’s going and what you should do next.

After reading this article, you will hopefully come away with a few ideas on how to start coding email designs with improved readability and usability when viewed in Web, mobile and email desktop clients alike. Also included are a variety of resources to get you on the right path with using CSS in email.

Then again, the shaky state of email standards today may convince you that plain-text email is the way to go. The choice is yours.

CSS In HTML Email: The Good, The Bad And The Mobile-Ready Link

If you’re about to embark on your first HTML email coding job, then you probably come from a Web background and are keen to flex a little CSS3 muscle, get a little JavaScript action happening, drop those shadows…

Not so fast. As any old hat to the email game can tell you, what works on the Web and what works in email are about as far apart as Sydney and Stockholm. For the most part, this is because pretty much every email client has its own way of doing things; while there are perhaps half a dozen browsers to test against when coding a Web page, there are literally dozens of email clients, many of which feature radically different CSS implementations.

But before you give up hope, here’s some advice to get you through the night:

  • A lot of CSS properties (such as font, color and border) work fine across many of the most popular email clients. Once you know which ones they are1, you can tailor your designs accordingly.
  • When a CSS property doesn’t work so well, there are often workarounds (such as using cellpadding in tables instead of padding).
  • When workarounds don’t exist, focus on graceful degradation.
  • Your design will never look exactly the same across all email clients, no matter how you use CSS. Once you (and your clients) make peace with this, I guarantee you will sleep better at night.
  • Keep it simple. The less complicated your design and layout, the less likely something will go wrong. Favor table layouts over divs, and make sure your message is readable (which means text, not images).

At this point, you may be saying to yourself, “Well, this all just sounds too hard.” So, perhaps I should remind you how beautiful an HTML email can look, with just a sprinkling of CSS:

HTML email with a sprinkling of CSS
(View expanded version2)

For a more realistic view of what this design will look like in the inbox, here’s the same email in Gmail, a notoriously tricky email clients to work with:

HTML email in Gmail
(View expanded version3)

See? Ain’t so bad after all. But what’s more exciting is how you can use CSS to adapt an HTML email for optimal display on mobile devices. Here’s the same newsletter as viewed on a smartphone:

Newsletter displayed on smartphone

Applying a mobile-specific style sheet has improved the readability of the email considerably, allowing us to remove unnecessary whitespace that would have taken up valuable real estate on a small screen.

So, we’ve gone from an email layout that may have required a lot of pinching and zooming, to one that can be easily read with a linear scrolling motion, using CSS alone. We’ll look at how you can apply similar improvements to your email campaigns in a moment. But first, let’s start with some of the fundamentals of using CSS in your HTML email designs.

The State Of CSS Support In Email Today Link

When I mentioned that a lot of CSS properties out there work fine in many email clients, I wasn’t trying to be vague. Thankfully, the research into what works and what doesn’t has already been done. You need only skim this guide to CSS support in email clients4 to see what properties are within and off limits. Or just know that most of your CSS rendering troubles will come from Outlook 2010, Lotus Notes and Gmail, due to their refusal to do anything useful with CSS style sheets.

These issues are nothing new. Indeed, the battle for market share between email clients that play nice with CSS versus those that don’t has been pitched for years now. But progress is being made. Looking at the data from over 4 billion emails sent5, we found that mobile email clients have gained ground dramatically, with 42% of emails now opened on a mobile device. Here is how desktop, Web and mobile email clients have fared comparatively over the last five years:

Desktop, Web and mobile email client market share, 2011 to 2014
Desktop, Web and mobile email client market share, 2011 to 2014. (View large version6)

Mobile’s ascent is great news for email designers everywhere for one reason: nearly 90% of mobile email is read on an iOS device. iOS devices use the WebKit rendering engine7, which means they can display really nice-looking HTML emails.

Our friends at Panic8 (the creators of such popular Mac titles as Coda) were well aware of this when they got started on their email announcements. As purveyors of Mac software, they can pretty much always count on their emails being read in Webkit-powered email clients like Apple Mail and the iPhone. As a result, they’ve been able to pull a lot of CSS3 trickery out of the toolbox, including web fonts and SVG masks:

Diet Coda’s newsletter
(View expanded version9)

But what really impressed me was their use of CSS3 animation10. Here’s the code they used to achieve the “Ken Burns” zoom effect:

@-webkit-keyframes kennethburns {
from { -webkit-transform: scale(1.5) }
to { -webkit-transform: scale(1) }

And you thought HTML email was a boring medium? Well, to temper things a bit, CSS3 still has very limited support beyond a handful of Webkit-powered email clients, so use it with discretion.

Inside An HTML Email Builder’s Toolkit Link

Before we go charging in and dropping @media queries by the dozen, let’s make sure we have the tools for the job. We’ll need the following:

  • An email marketing service like MailChimp11 or Campaign Monitor12 to send HTML email campaigns (you can’t do this from desktop or Web email clients like Gmail — sorry);
  • Code editing software, such as Coda13 or Sublime Text14;
  • A mobile device to test on (like an iPhone or Android device);
  • A variety of Web and desktop email accounts to test, either set up individually or automated via a service such as Litmus15;
  • An intermediate-level understanding of HTML and CSS;
  • A lot of patience.

In addition, you’ll need a way to move your CSS inline, for the benefit of clients like Gmail, which strip out the head section of HTML email code. Many email marketing apps can do this automatically when you import your campaign, but if yours doesn’t, then you can use a service like inliner.cm16 for the job.

Now that you’re armed and dangerous, let’s launch into the theory and code behind mobile email design.

Using CSS To Optimize Your Email For Mobile Devices Link

If you’ve created mobile style sheets for the Web or have read into responsive design, then you probably know a bit about @media queries17. If not, then here’s the skinny: they allow you to provide targeted CSS style sheets that are triggered when a device’s capabilities match specific criteria. For example, you could use a media query to specify that a couple of lines of CSS be applied exclusively to devices with a display width of up to 480 pixels, in order to make your website or email easier to read on these screens.

The following is a snippet of code from the earlier newsletter, telling mobile email clients and browsers to scale down the width of the email layout to 300/325 pixels wide, so that it fits comfortably on displays that are no wider than 480 pixels (i.e. the width of an iPhone 5 in landscape mode):

@media only screen and (max-device-width: 480px) {
   table[class=table], td[class=cell] { width: 300px !important; }
   table[class=promotable], td[class=promocell] { width: 325px !important; }

Note how we’re using attribute selectors here. This is to prevent Yahoo! Mail from accidentally calling this style sheet18.

One thing to note at this point is that, while you can shrink the dimensions of a design (or hide bits, as we’ll do later) using an @media query, the user will still be downloading all of the content. Adding mobile-specific styles shouldn’t be confused with providing a slimmer or faster-loading version of your content. Mobile-specific styles just make the content easier to read.

The great news is that mobile email clients such as iOS Mail and Android’s default mail client follow @media queries to the letter. So, for example, you could pop one into a style sheet in the head of your HTML email code to transform the design into an easily readable, mobile-friendly layout like the one pictured above. You can also do things like shrink the dimensions of images, and use display: none to hide visual elements that don’t work on small screens.

For a more hands-on look at mobile email design, I highly recommend the Guide to Responsive Email Design3019, which includes both the fundamentals and some advanced techniques like progressive disclosure20.

What’s Next For HTML Email Designers? Link

So, while CSS-unfriendly email clients like Outlook will always be here to rain on our parade, the good news is that the rise of mobile email has meant that we may soon be at liberty to create more Web-like email experiences. It has also meant that optimizing your newsletters for handheld and touch displays has gone from being a “nice thing to have” to a given. This doesn’t just affect email newsletters at the code level, but it also changes the way we display design elements. For example, in the following two mobile designs, which do you think is the more effective call-to-action (CTA) button?

Call to action

Or consider the CTA in the following mobile-friendly email. If it’s not visible “above the fold,” as they say, then will it be seen at all? Or worse, will recipients end up accidentally tapping the toolbar instead?


If designers aren’t asking these questions, they sure will be soon. You need only visit Style Campaign’s blog21 (which provided the examples above) or read up on “Optimizing for Touch Across Devices22” to grasp the importance designing good experiences for mobile.

Here are a few other important things to consider when designing adaptive layouts:

  • 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 sucks more 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. Alternatively, you could override this behavior23 in your style sheet.
  • 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.

Now it’s your turn to design wicked HTML email newsletters that, with a dash of CSS, look just as effective on the small screen as they do in your Web browser or desktop inbox. I have no doubt that your readers will appreciate the effort.

Mobile-friendly email design from InVision
Example of a beautiful, mobile-friendly design from InVision.

Resources To Help You Make The Most Of CSS In Email Link

With funky CSS support and coding practices from circa 1994, designing HTML emails might seem like rocket science. Thankfully, quite a bit of solid documentation exists on effective HTML email design, so below is my recommended reading list if you want to take your newsletters to the next level.

Getting Started with HTML Email Link

HTML and CSS in Email Clients Link

Mobile Email Design Link

Email Design Inspiration And Templates Link

(al, il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Ros Hodgekiss is the Community Manager for Campaign Monitor, an email marketing and copywriting nerd, Disaster Volunteer with the American Red Cross and an enthusiastic, but not polished dancer. Her experiences from 8 years of creating and sending email campaigns have resulted in countless resources for email coders, including blog posts and Smashing Magazine articles, the Guide to CSS support in Email and the Guide to Responsive Email Design. When not cycling around San Francisco, Ros spends her time educating designers on the black art of email marketing.

  1. 1

    Great article Ros. Love where html email is headed!

  2. 3

    Good article. But as long as Microsoft decide to use not IE-Rendering for their Outlook, HTML-Mails are made in HTML4 :-(

    • 4

      The best way to get mail to mobile via sms is to use 3rd party service called it allows you to receive email notifications on mobile through SMS within seconds. I tried it and it works perfect for me.

  3. 5

    Definitely up there with fixing design quirks in IE6! HTML Email’s are something I (thankfully) don’t have to do very often, but when I do – maaan it’s a pain.

    Many thanks for the article. I’ll have to put the kettle on and sit down and read this in depth. Several times.

  4. 6

    Thank you, Ros. Just yesterday we had to struggle again with HTML eMail newsletter rendering in older Outlook versions. About 40 percent of our client’s recipients use Outlook as their mail application. This is the reality…

    • 7

      Supporting Outlook, Gmail and less CSS-friendly email clients will be the norm for a while yet, sadly. It’s still worthwhile to add nice optimizations, but you have to be careful to ensure they degrade nicely.

  5. 8

    A very very solid article Ros. Explains a lot of stuff for inexperienced e-mail designers or HTML designers who have do design e-mails like me. Just a question since you are experienced, would you recommend E-mail on Acid or Litmus for e-mail acid tests ?

    • 9

      Both testing tools have their strengths. While Litmus has a very elegant interface and is very straightforward to use, Email on Acid is far more verbose about why rendering issues may be occurring in individual email clients and is in my opinion, better suited to more technical users. I’d give both a go and decide from there :)

      • 10

        Unless this has changed recently Email on Acid will render your HTML by the rules it’s determined the email client uses.

        In other words, it doesn’t actually send your email to a (for example) gmail account.

        It parses your code according to it’s interpretation of gmails rendering engine and provides you with that.

        When Litmus (as well as others) test you email they’ll literally deliver to a gmail account and send you a screenshot of the results.

        I’ll usually use Email on Acid or Get Fractel for error detection and will then run the email through Litmus as a final test.

        EoA also produces test results much faster then Litmus which is helpful when troubleshooting.

        I find both methods useful, but not for the same uses.

  6. 11

    As someone who relies pretty heavily on their mobile device for checking emails, there’s been too many times I see newsletters that you have to resize for “proper” viewing. This alone makes keeping my interest in all of the email content somewhat of a struggle. But the future is looking good! With the incredible increase of smartphone users viewing emails on their mobile devices, I hope to see big changes sooner than later.

  7. 12

    Nice one Ros, been waiting for you to pull this all together in one place. It’s worth mentioning that testing media queries couldn’t be easier with a modern browser. If you use:

    @media only screen and (max-width: 480px) {

    Instead of ‘max-device-width‘, then you can just resize your browser to see the changes take effect (don’t replace proper testing on the device itself though). Is there a reason you use a media query that targets devices specifically, rather than just small screens?

    I put together an example using a a Starbucks email a while ago, which shows how you can hide images completely and make use of background images, which is something I haven’t seen used in the wild.

    This test page is helpful in showing how to prevent mobiles downloading background images meant for the desktop. Is it definitely the case that if you set the parent object to display:none then the images contained within are downloaded? And if so, does anyone have any smart ideas to prevent this that don’t rely on being clever server-side?

    • 13

      Hi Ed, thank you for your kind words :) We’ve used max-device-width with the assumption that both senders and subscribers want the mobile version of an email to display on mobile devices only. For example, it may not be appropriate to have this version show up in desktop or webmail clients, because their preview pane has been shrunk down. This is a matter of taste, though.

      Secondly, max-width and max-device-width have different meanings on mobile devices. QuirksMode has a good discussion on this (scroll down to the ‘Media Queries’ section).

      The Starbucks example you have there is excellent and I can see why using max-width could be a sensible alternative for folks who want to optimize their designs for small displays in general. I’d be keen to test this approach (with the above in mind) and potentially cover the pros/cons in a later resource. With kudos to you, of course :)

      Yes, using display:none; still results in background images being downloaded, even if they aren’t displayed. I don’t know of a way to prevent this server-side (especially seeing as we can’t add any scripting to email), but I’d be keen to hear comments from others.

      • 14

        That makes a lot of sense, thanks – I’d be lost without Quirksmode, but there’s only so much I can read about CSS vs actual pixels before my brain turns to mush.

        I had in mind this example at Style Campaign that uses a dynamic image server to look at the UA string and serve different images based on that. That article is helpful in laying out some of the down-sides of using media queries for the task, but for the majority of people (especially on smaller campaigns) I don’t think it’s a tenable solution. Plus I love the simplicity of being able to govern all this entirely in the HTML/CSS.

  8. 15

    I really enjoy designing email campaigns, just like tight budget projects, the limitations require everyone to keep things simple and effective.

  9. 16

    A lot of designers try to bypass the css issues in emails by making them image heavy – it is really important to remember what your email looks like if the images are not downloaded! In the top ‘abc widgets’ example, in a small window, the email would simply look like a blank page until the user scrolled down to see the text.

    • 17

      Agree, if anything the example in this article shows the benefit of purposefully using text early on in email designs, over featuring a large, flashy header image (as is common). Thank you for pointing this out :)

  10. 18

    Great stuff!

    Let’s have more like this. I just finished coding an email that took 14 hours and nested tables 6 layers deep. I need more of these articles!

  11. 19

    I love you Smashing Team!
    Always useful articles :)

  12. 20

    Aside from the obvious punt for Campaign Monitor… I use it and can recommend it as the very best service on the web. We’ve tried a whole bunch of HTML email / Email Marketing services and Campaign Monitor are far ahead of everyone else.

    I run a web dev & design company – Black Square Web Solutions – in South Africa (which means my support guy at Campaign Monitor is in Norway…). In SA we have ridiculously slow and expensive bandwidth, a very inexperienced market which is only just starting to understand how email marketing works, and on top of that we have a very small mobile internet market compared to the USA. Nonetheless we are finding more and more people coming to us wanting content to work on mobile. Campaign Monitor’s latest update has made this all a lot more possible and easy to work with.

    Good work.

  13. 21

    good work Ros – we’ve been using this for a while from the stuff on the CM blog. Still need to shoot over some examples!

    Guys – to the point about Outlook – you’re right, it’s always going to be an issue, and the reality is even if outlook added decent html support tomorrow it’d still take years to become adopted worldwide. However the stats for mobile email opens are rising sharply – which is starting to erode Outlook’s share.

    At the most basic level using this technique, you can use media queries to have two complete sets of HTML – one for desktop and one for mobile. I know that’s incredibly dirty and has duplication of content issues, but it’s a start.

    btw – as you’ve probably guessed I work with html emails every day, give me a shout on Twitter if the code’s doing your head in and I’ll try to help! –!/iamelliot

    • 22

      Love your work, Elliot – I’m keen to see more mobile email examples in the wild (especially by you)!

      A +1 for following @iamelliot on Twitter – it’s great to see experienced email marketers out there sharing their knowledge with the wider design community.

  14. 23

    Thanks Ros Hodgekiss,

    I love working with Campaign Monitor, I’ve working with Mailchimp, Copernica (and used to work with E-mark (Dutch).

    The future for e-mailmarketing looks hopefull again. Outlook 2010 is terrible for e-mailing HTML but more and more people check there e-mail on a mobile device. And I must say, the iPhone seems to handle e-mailing HTML quite well.


  15. 24

    Excellent article as always!!!!!
    May I suggest an article regards Formating & Optimizing RSS and RSS by email.

    I love you guys,


  16. 25

    I’d also suggest using Email on Acid to test your HTML emails. They offer code-analysis which is very helpful in troubleshooting why an email is not displaying correctly.

    Great Article! I am definitely going to use some of the suggested techniques.

  17. 26

    Love the article!

    I wanted to point out that I’ve used attribute selectors for the Yahoo issue and found that I still got the mobile version. But then, I used “div:not” ALONG with the regular CSS and that seemed to work!

  18. 27

    It looks so good. it makes me want to give them my email and subscribe to it.

  19. 28

    Just when i needed this the most :) tx

  20. 29

    hahahahahaha what. A float? Just hope your clients don’t open that on, say, outlook?

    I agree with stuff not looking the same but images not floating just look retarded. Table that shiz already. It is still 1998.

    • 30

      I believe float’s work in Outlook (or at least won’t mess it up) though you’ll need to use the img align attribute as well.

      Something like:

      However adding margins or padding into that img tag will cause it to screw up.

      It’s not always possible to hardcode in image placement into an email that’s going to be used as a template as you can’t always be certain the end user will want an image included.

      • 31

        The code got stripped.

        It was an image tag with an a l i g n = ” left ” and a s t y l e=” float: left; “


↑ Back to top