Comments on Can Email Be Responsive?

54 Reader Comments

Back to the Article
  1. Many email clients including Outlook and Gmail make plain text URLs “clickable”, it is not entirely accurate to claim this as a specific advantage over plain text.

    Copy & paste the code below to embed this comment.
  2. Being that emails are a huge part of the fundraising world for nonprofits, this article is a great one for designers who need to sharpen their email skills.

    Copy & paste the code below to embed this comment.
  3. Technically, you can make images always work by base-64 encoding the images and embedding them within the email. It’d make the emails huge, but this can be done if it’s absolutely critical for them to be displayed.

    Second, can we get some stats on how many people actually use the default email apps on android and iOS? Every I know uses the Gmail app. I know that is anecdotal but with so many people with Gmail and Google apps based email, and Gmail being pre-installed on Android I find that odd that most people would ignore it for the default app that’s buried away usually.

    Copy & paste the code below to embed this comment.
  4. Ok using the border on the bulletproof button is genius. I’ve been using the tool at buttons.cm to create buttons previously, but a quick litmus test shows that this works just about as well (a few quirks on outlook with the left/right borders) in terms of creating a button. Any idea why outlook doesn’t respect the stated border widths?

    Thanks for the tip!

    Copy & paste the code below to embed this comment.
  5. Obviously you would promote Litmus, which I also think is a great tool, if a little bit pricey. I’ve always found there is great documentation over at campaignmonitor.com. Their CSS Support is incredibly useful.

    Looking at that and then reflecting on this article, media queries are still a no go, right? I would like to see a design you’ve made, using media queries, go through the Litmus testing software. At least I’ve just resolved to using % based widths to handle smaller screen sizes.

    Copy & paste the code below to embed this comment.
  6. David - see http://alistapart.com/article/can-email-be-responsive#section11 for Media Query support - they work on the mobile clients accounting for the majority of opens

    Copy & paste the code below to embed this comment.
  7. Hey Jason, great post! I recently wrote a post detailing my experiences building emails at Artsy, and covered a lot of the same topics you did (which is heartening to see). I also use Litmus quite a bit to test appearance of the finished layout in different mail clients to give me that confidence.

    Here’s my post (in case anyone is interested): http://artsy.github.io/blog/2014/03/17/some-tips-for-email-layout-and-responsiveness

    Thanks for the great writeup Jason!

    Copy & paste the code below to embed this comment.
  8. I’ve been using Zurb’s Ink framework on a couple projects with a fair amount of success. For someone jumping into the world of email markup, this has been incredibly useful.

    I’m sure I’ll be forced to internalize every arcane rule and exception eventually, but Ink works well out of the box.

    Are there other frameworks or tools people have found useful?

    Copy & paste the code below to embed this comment.
  9. Not mentioned but the HTML email boiler plate http://github.com/dwightjack/grunt-email-boilerplate uses a 600px width on the td element where as your article states a smaller width.

    Copy & paste the code below to embed this comment.
  10. @Jason Superb article, as usual! Email coding has definitely been a pain for years, and especially responsive coding (nowadays).

    We were fed up with it, and that’s why we are working on a drag and drop responsive email editor. It is really flexible and is based on basic elements like Title, Text, Image, Button.

    Would love to hear your thoughts about EDMdesigner!
    We are building it for you and ourselves to ease the “pain”.

    ps. We will feature this article in our next newsletter, that’s for sure.

    Copy & paste the code below to embed this comment.
  11. Hi Jason, thank you for contributing to the wonderful world of Responsive HTML email design eduction with this insightful article. If it is any constellation (and I don’t mean to plug, only to provide further resources for interested readers), I wrote an extensive tutorial recently on this exact subject with plenty of helpful links to other amazing resources.

    Here’s the link to my tutorial and free template for a Responsive HTML Email.

    Copy & paste the code below to embed this comment.
  12. Very informative tips for the email design niche. Thanks!

    Copy & paste the code below to embed this comment.
  13. @RSpil - Outlook 07+ unfortunately restricts CSS borders to a max of 8px! I recently posted about this on the Campaign Monitor forums, looking to see if anyone has a work-around: https://www.campaignmonitor.com/forums/post/30447

    It would be nice to use this method versus the one at buttons.cm because then there’s no need for the VML code!

    Copy & paste the code below to embed this comment.
  14. Jason,

    Great article. I am involved with creating pixel perfect email designs all the time and have found the following to be helpful.

    Thought I would share this recently discovered insight on resolving missing left side border in Outlook 2013 on <td>.

    I discovered recently that Outlook 2013 (not sure about previous versions) will not render the left border on a <td> or <img>. To resolve this, I use the following solution:

    <table cellpadding=“0” cellspacing=“0” border=“0”>
    <tr>
      <td width=“1px”  1px solid #color;”>
      <td 1px solid #color; border-right: 1px solid #color; border-bottom: 1px solid #color;”>
        <img>
      </td>
      </tr>
    </table>

    Essentially you add an additional 1px width table cell using border-right on that cell. And then use another table cell next that that for the image table cell declaring the top, right and bottom border for that table cell.

    Copy & paste the code below to embed this comment.
  15. Jason - Yeah, I’ve done many buttons built that way, and is usually the go-to. Would love a workaround for the border restriction in Outlook, but I haven’t seen any discussion about it.

    Copy & paste the code below to embed this comment.
  16. Thanks for such an awesome article.  I will lock this info into the good ol’ knowledge bank!

    http://jonathanrogers2014.blogspot.com/

    Copy & paste the code below to embed this comment.
  17. I love adding extra comments by accident.

    Copy & paste the code below to embed this comment.
  18. Great article! Although I’ve been doing HTML emails for the past 2 years it’s good to see what others are using. In terms of mail client specific attributes, is this something you enforce or tend to leave aside as it is more code to cater for etc?

    Also, there are different ways of making an Email responsive; I work at Equator, a digital agency in Glasgow, and at the moment we have 2 main ways of making responsive emails and created our own templates based on these, but is there somewhere where we can see what other people are doing or even discuss best practices for this, even though there are no standards?

    Finally - Litmus is great! :) learnt a lot from it

    Copy & paste the code below to embed this comment.
  19. Can I just add that you forgot to change the arrow character in your example code to the html character? It should be & rarr ; (without the spaces) not →

    Copy & paste the code below to embed this comment.
  20. One caveat with the bullet-proof buttons: our campus email client (Groupwise 8, I believe) removes background colors, defaulting to white.

    So we have to be careful not to use white text—whatever color we use to contrast the button’s background needs to be dark enough to show up if the background color is removed, otherwise, we get lots of complaints from colleagues saying “you sent this out without x, y and z in it!”

    Otherwise, great article!

    Copy & paste the code below to embed this comment.
  21. I would love to see a solution for Outlooks page brake bug at around 1800px tall.

    Copy & paste the code below to embed this comment.
  22. This is a great article Jason. Thank you. As an email marketer that has adopted the Responsive Email Design paradigm, it is great to see all the available resources we have today. Litmus analytics are awesome and the email client testing they do is most helpful. The designers I worked with used that tool for testing purposes. I am very happy that Jason mentioned Anna Yeaman of @StyleCampaign in his article. She is my RED email sensei. Her RED video from March 2013 is still outstanding over a year later. I strongly urge you to watch this video and subscribe to their blog.

    Video: http://youtu.be/T6GajEVabP4

    Blog: http://stylecampaign.com/blog/

    Copy & paste the code below to embed this comment.
  23. Jason mentioned the that mobile email opens were over 50%. That is aggregated data for Litmus clients. Your clients will see something else. My experience has been all over the place depending on email, audience, day, time, etc. When discussing with marketers mobile email opens I like to use this data point—

    Ultimate mobile email usage stat:

    Mobile email will account for 15 to 70% of email opens, depending on your target audience, product and email type. eMailmonday- “the Ultimate mobile email stats” (2014)

    Source Link: http://www.emailmonday.com/mobile-email-usage-statistics

    This data point matches many real world mobile open stats I have been told in confidence.

    The link above is an aggregation of many email stats. I highly recommend it.

    Copy & paste the code below to embed this comment.
  24. Jason - Yeah it only appears to happen in Outlook 2007+. If the borders are quite large (say 15px) the difference is noticeable when comparing, though the button still looks okay - it’s not nearly as horrible as padding!

    Copy & paste the code below to embed this comment.
  25. Several years ago I used to work as an email analyst for a giant news publisher in the US. We sent 100’s of millions of emails monthly. 90% of the emails were simple tables with a giant image pasted into the row/cell. We knew it wasn’t right and I would hand code + split images as much as possible. But with the sheer volume, silos of operation at the company and bureaucracy there was very, very little you could do.

    I still wonder what kind of improvements on their metrics they’d would have seen by following better standards like these. Great article, look forward to reading more-

    Graham
    Thoughts In Action
    http://www.thoughtsinaction.org

     

    Copy & paste the code below to embed this comment.
  26. It’s amazing that media-queries don’t work on a modern client like Gmail desktop and android. Last week I’ve to build a simple show/hide block media query for a newsletter and I couldn’t make it work on Gmail (and outlook of course), in the rest work perfect… so I can’t understand how it’s google don’t fix this…

    Copy & paste the code below to embed this comment.
  27. We gave more stress on content of email when sent to existing and futuristic clients but never thought that email formatting plays vital role in it. After reading your detailed research on email format we are going to change our email campaign strategy. Thanks Jason.

    Copy & paste the code below to embed this comment.
  28. For anyone looking for a bulletproof button. You can try this code that I’ve been using for years :)

    <!—start button—>
    <table width=“100%” border=“0” cellpadding=“0” cellspacing=“0” >
    <tr>
    <td align=“center”>

    <table border=“0” cellpadding=“0” cellspacing=“0” bgcolor=”#ffac33” width=“200px” height=“34”  background=“http://images.tweet.twitter.com/EloquaImages/clients/TwitterInc/{5abf6eb0-a4c9-4e46-bb04-b2f3a66fb332}_btn_orange.png”>
    <tr>
    <td align=“center” valign=“middle”  height=“34” width=“174”  center;”>
    <span -1px 0 rgba(0,0,0,.2);display:block;line-height:30px;”>Kevin’s Bulletproof Button</span>

    </td>
    </tr>
    </table>

    </td>
    </tr>
    </table>
    <!—end button—>

    Copy & paste the code below to embed this comment.
  29. Maybe I’m alone in this, but I have never found the process of developing html emails any more miserable or exciting as developing websites. Once you learn the differences between the clients and what you can and can’t do, it’s really not a problem. I’ve been doing this for a while, and my experience is that things are always changing and that you are always “hacking” whether you are dealing with different email clients, different browsers and browser versions or different devices, resolutions, download speeds, etc.  There is always a problem that you need to deal with in the process. If there is no “standards” way to deal with this problem then you fix it another way. Some people call this a “hack,” I just call it a solution. The problem with standards is that you are led to believe that there is a perfect way of doing something and that the environment just needs to change so that you can perform this work of art in a perfect way. It’s never going to happen.

    Copy & paste the code below to embed this comment.
  30. Thanks. This is a very informative post. Information for beginners and tips for the pros.

    The fact that the gmail app doesn’t support @media queries has always kept me away from Responsive Emails. But my bias towards thinking gmail is by far the most popular may be misleading. Here’s the breakdown of mobile client usage based on Litmus’ research:

    https://litmus.com/blog/email-client-market-share-where-people-opened-in-2013

    Copy & paste the code below to embed this comment.
  31. I have not seen this much depth post on email responsiveness. It has everything, formatting, interaction etc. Here is another guide to format email http://kb.mailchimp.com/article/how-to-code-html-emails/ . Enjoy!

    Copy & paste the code below to embed this comment.
  32. Great article Jason! I wasn’t aware that you could style alt text, which is kind of nice. Also, the bullet proof email button generator looks like pure awesomeness! Also, what’s always been surprising to me about Gmail is how far behind they are in supporting CSS compared to other email clients. They get so much praise and have so many users, yet their CSS support is much lower than Outlook and Yahoo. Go figure.

    Copy & paste the code below to embed this comment.
  33. Thank you so much . This is nice post .
    Visit my website , please .
    www.dacsanmientrung.info

    Copy & paste the code below to embed this comment.
  34. CampaignMonitor has a great template generator for responsive emails. I already used it to design responsive mails for the use “outside” (within other newsletter systems) but also for mails within CampaignMonitor. It’s a good point to start and learn from.

    Copy & paste the code below to embed this comment.
  35. Thanks for a great article Jason, and for sharing salted.  I am curious what your process is for inlining your CSS.  In the salted repository on GitHub, all CSS except the media queries is already inline, and I’m wondering if you are actually inlining “by hand”, so to speak, or if you’re using an inline tool such as the Mailchimp tool or the Premailer tool.  In other words, is the html file in the salted repository the actual file you develop with, or is that outputted from another tool?

    Copy & paste the code below to embed this comment.
  36. I’m new to media queries.  I’m trying to do a $25 jobbie for a client’s email newsletter.  Right now what’s working is:

    img src=“images/imagename.jpg” style=“width:100%; max-width: 500px”

    Afraid that that coding might not be good for emails, I came here.  I don’t think copying and pasting this into the <style> area in the head is complete, is it?
    img[class=“img-max”] {
    width:100% !important;
    height: auto !important;
    }

    I tried @media img…...etc.etc.
    I tried taking out the brackets and making them parentheses.

    Could you post the Exact coding for the head?  I must be missing something here.

    This is what I have copied exactly from your blog:

    <style type=“text/css”>

    @media screen and (max-width:500px) {
    table[class=“wrapper”] {
      width:100% !important;
    }
    }
    @media screen and (max-width:500px) {
    body, table, td, a, p {
      font-size:16px !important;
    }
    table[id=“responsive-table”] {
      width:100% !important;
    }
    }
    @media img[class=“img-max”] {
    width:100% !important;
    height: auto !important;
    }
    }

    </style>

     

    Copy & paste the code below to embed this comment.
  37. Good article, thank you for encouraging and enlightning the subject.

    Here is an interesting result using gif for now(svg animation are still a little complicated), that model should be subject to serious optimisation, playing on some awckward hacks, and not completely cross email clients.

    Responsive newsletter

    Have fun ! thank you

    Copy & paste the code below to embed this comment.
  38. Great article, learned some new things.

    Only thing that I would point out is there are problems applying bgcolor to the table-cell level. I code emails where there are alternating rows where in each row there are up to three sibling tables each with their own nested tables. (this is done for complicated layouts with aligned tables, but I’ll save the details for brevity unless someone is curious why everything is in tables instead of table-cells)

    Some email clients (looking at you, iPad, but can’t remember the others off the top of my head) will render a 1px border/gap in-between rows where each row has a different background color. This gap may not show up at first, but it may show up/disappears randomly when you pinch-open/pinch-closing the email (to make the email larger/smaller).

    The solution/work around is defining the bgcolor into the <table> instead of the <td> cell. Admittedly, I’ve sometimes had to do a combo of both setting in the <td> and <table> - so you may have to play around to get it to work.

    Copy & paste the code below to embed this comment.
  39. Have you tested adding role=“presentation” to these layout tables?  I’d sure like to recommend that to my clients (from an accessibility point of view).

    Copy & paste the code below to embed this comment.
  40. Just wanted to point out an inaccuracy in this article: Windows Phone 8 *does* support media queries (and full CSS3), when the meta element X-UA-Compatible is included. See this thread for details: https://www.campaignmonitor.com/forums/topic/7989/windows-phone-8-has-full-css3media-query-support/

    Copy & paste the code below to embed this comment.
  41. Thanks so much Jason for a really practical guide. Lots of great links as well as examples. Many Thanks:-)

    I’ve been using FreshMail’s Coding HTML Email Guide on a couple projects with a fair amount of success. Apart from the analysis of the most popular email clients and their HTML/CSS3 properties, you will also find advice regarding Responsive Email Design.  It contains the recipe for a perfect newsletter, analysis of animation and video in emails, etc.

    Copy & paste the code below to embed this comment.
  42. Great article! If you need a deeper expertise of your HTML email we are offering a free service, where we take a look at you HTML find the problems and point you to the right direction. As an example, due to the fact the new laptops come with the default 125% DPI and also some users had enabled desktop DPI scaling because of poor eyesight, 98% emails/templates do not render well in Outlook 2007,2010 & 2013 at 125% DPI. We’ll find find all the problems with your HTML, if there are any. We are offering this service, free of charge:
    www.code4email.com/free_email_test.php

    Copy & paste the code below to embed this comment.
  43. The link at the end of section 4 linking to the screenshots at Litmus doesn’t work anymore. ;)

    Copy & paste the code below to embed this comment.
  44. Thanks for sharing! It’s so important to create responsive emails because these days a lot of people check their mailbox on smartphones. I’m glad that my email marketing platform (I have GetResponse) offers a lot of beautiful and responsive email templates.

    Copy & paste the code below to embed this comment.
  45. Responsive and well designed emails are difficult to design and code. We just release a free AND open source email template editor. Give it a try, looking forward for feedback! Mosaico.io

    Copy & paste the code below to embed this comment.
  46. Responsive and mobile friendliness are going to be increasingly important heading into 2016 and beyond. With the amount of people browsing on mobile devices, it will probably reach north of 75% of all traffic at some point. As a web consultant it’s my job to inform my clients of the best strategy, and responsive will always factor in to the decision.

    Copy & paste the code below to embed this comment.
  47. Sorry, commenting is closed on this article.