New guide: Responsive Email Design

Have you been designing for the responsive web and want to make that leap to doing the same for email campaigns? Or do you simply want to get your head around some of the techniques used to create more readable designs for the small screen?

We've just launched a guide to Responsive Email Design to take savvy designers and coders like you from sufficient to proficient in a few short chapters. Included are tips and techniques both old and new, from how to design links and buttons that are easily tappable, to adapting two-column email newsletters for single-column display. Don't worry, we also cover the fundamentals of using media queries and mobile stylesheets, too.

Not wanting to stop at designing newsletters, we've even added a chapter on optimizing email subscribe forms. There's even added a real-world case study so you can see some of our techniques in action. All up, Responsive Email Design is a holistic view of mobile email, in an easy-to-digest format.

Don't just sit there, check out Responsive Email Design, or one of the other 6 email marketing publications in our newly-minted Guides section.

Have a suggestion for a guide? Be sure to let us know in the comments below.

Posted by Ros Hodgekiss

14 Comments

  • Antonio Volpon
    21st July

    Would it be possible for you to provide a version of the guides in mobi / epub and PDF format?

  • Shana H.
    24th July

    When I try to adapt your examples and send myself tests to view on my iPhone 4 in the Mail reader (not mobile safari) the whole email is being shrunk down as it’s trying to fit the full original size onto the screen, the view is not filling the content in the full space. Do you have any advice? Have you seen this issue?

  • Ros Hodgekiss
    24th July

    Hey there Antonio, thanks for the great suggestion. We’ll certainly consider this, however one thing to note is that the guides are something we’ll be updating regularly as conditions change. In all likelihood, a PDF or printed version of any guide will soon be made out of date, so we recommend reading the online version at any rate :)

    Shana, the most common reason for this happening is that something in the email content is wider than 320px and forcing the email client to zoom out in order to display the entire width of the email. You’re more than welcome to contact our team with campaign details, so we can take a look and make recommendations as to how you can fix this issue. :)

  • Responsive Design
    3rd August

    Thanks Ros,
    Responsive design is hot topic now. And i really want to keep my self updated with the latest trends in RD. Thanks for the links to your resources

  • James C
    7th August

    I have been looking at your example on Adding Wikipedia-style progressive disclosure and found it very interesting. I have been trying to test it out within mobile and regular email clients but cannot seem to get it to work conculsively.

    The main problem I seem to be coming across is that I cannot work out a way of hiding the show/hide buttons within regular email clients, do you know a way I could overcome this issue? I found that using display:none or visibility:hidden doesnt seem to work.

    I have managed to do this by hiding it with inline css, but then i cannot work a way to over ride this for the mobile clients.

    Thanks

  • Ros Hodgekiss
    8th August

    Hey there James C, have you tried using display: none !important; ? This is generally how we get around Gmail and others. At worst, you can try ‘whiting out’ the text (ie. making it the same color as the background) and/or reducing the font size to 1px.

    Let us know how you go here, or feel free to post your code in our forums :)

  • jimmy
    7th October

    this is very useful guide i have used many techniques discussed in it
    for coding a set of mobile optimized email templates , plz check at this link

    http://www.mojo-themes.com/item/shopmail-product-offer-responsive-email-template/

  • Darren Grant
    18th October

    Hi, I have a different technique for 2-1 columns that I think works a bit better so I want to share it. Basically it involves marking up the columns as TD elements rather than separate tables and applying “display:block; width: 100%” to the TDs to force one column. This technique makes it possible to have one fixed-width column and even 3-1 columns. Set up a codepen here - http://codepen.io/DarrenGrant/pen/ACqup Hope .this is helpful.

  • Ros Hodgekiss
    23rd October

    This is great, Darren - thank you so much for passing this on! This is a pretty clever approach, which hopefully will help others overcome the spacing issues that occur when using ‘align’ in Outlook. Well done - we’ll do a touch of testing and give you credit if this is something we publish. Keep the tips coming! :D

  • Tara
    8th November

    Ooooo I want this book - we’re getting ready to redo our site in responsive!

  • George
    10th January

    Before downloading it… I knew Gmail did not allow CSS or media queries, so how would responsive design work there?

  • Chuck
    2nd March

    How about an epub or PDF version of your guides? It would be great to be able to read these on the go on my ipad.

  • Ros Hodgekiss
    5th March

    @George - The skinny is that it doesn’t. Gmail on mobile devices doesn’t support media queries, so you’ll have to fall back on having a generally mobile-friendly design.

    @Chuck - That’s a great suggestion, thank you! At present, we’ll be keeping it online-only, as the content changes regularly. But we’ll be sure to let you know if we release a PDF at a later date.

  • Hugh Roper
    15th August

    Unfortunately, my clients want pixel perfect designs. I’ve spent a lot of time trying to remove a 1px right space (border) from responsive email designs. Attempted border-collapse, mso-table-etc and lots of other hacks with no luck.

    But I think you and I have been approaching responsive email (tables) design from the wrong direction.

    This morning I read http://css-tricks.com/examples/ResponsiveTables/responsive.php then while discussing responsive email design issues with a co-worker, it hit me…

    Rather than trying to make responsive design work with Outlook. Change your standard table designed html to be responsive with media querries.

    media only screen and (max-width: 639px) {
    [class=mobile-td] { width: 320px !important; display:block; float:left }
    [class=hide] { display:none }
    }

    Just display:block;float;left; <td>s in media queries. Or display:none; spacer <td>s in media queries.

    No more mso-table-etc crap. Make it work in Outlook. Then style for the box-model with @media queries.

    What do you think? Am I missing something?

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account