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.

  • http://www.bluelaserdesign.com/ Tara

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

  • http://volpon.com Antonio Volpon

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

  • http://pose.com Shana H.

    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?

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    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. :)

  • http://responsivedesign.net.au Responsive Design

    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

    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

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    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 :)

  • http://www.socialtechnow.com jimmy

    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/

  • http://intechcenter.com George

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

  • https://twitter.com/darrenthedev Darren Grant

    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.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    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! 😀

  • http://norrisdesign.com Chuck

    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.

  • http://www.campaignmonitor.com/our-story/meet-the-team/#rosh Ros Hodgekiss

    @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.

  • http://hughroper.com Hugh Roper

    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; s in media queries. Or display:none; spacer 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?

  • wheelyweb

    @Antonio:
    If you want a PDF, you could simply select Print > To PDF , which will also store the original URL in the printed footer, so you can refer back for updates, as Ros so diplomatically put it.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 120,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free