Responsive email design (#RED)

My 1hr video  - plus 187 slides - on responsive email design. Besides an explanation of what responsive design is; I take a look at what’s possible, going through some of the responsive layout patterns we’ve deployed. I’ve also got a section on tablets, touch, performance and techniques for dealing with clients that don’t support media queries. I finish up by looking at testing…hope you find it useful.



Grab the deck

187 slides and links to any resources mentioned (click green blocks). There’s a few slides that aren’t in the video - though the video shows responsive emails working in the browser - so its worth checking out both.


14 Responses to “Responsive email design (#RED)”

  • David Gerbino | @dmgerbino
    March 28th, 2013 13:13


    thank you so much for sharing.


  • Rachel
    April 18th, 2013 20:29

    What a brilliant presentation! I’ve been teaching myself a lot about html and responsive email, but you’ve included a lot more elements there for me to think about as well. I’ve even more respect for your design work now!

  • Anna Yeaman
    April 23rd, 2013 07:12

    Thanks so much Rachel and Dave!

  • Jared Armstrong
    April 25th, 2013 03:52

    This is great, thank you for posting the video and slides.

  • Stuart Edwards
    June 7th, 2013 03:49

    Thank you for that information Anna. Really interesting to see the way you approached the challenges. Lots to think about and some good tips ive not seen in one place before. Well shared!

  • Matt Neibert
    June 20th, 2013 08:53

    Great post Anna!

  • Luke Glasner
    June 21st, 2013 06:41

    This was a really great presentation, with a lot solid examples. Awesome Job!

  • Anna Yeaman
    June 23rd, 2013 09:47

    Thanks guys appreciate it, glad you found it useful!

  • Andrei Potorac
    January 23rd, 2014 05:56

    Thanks a lot for the great presentation and the case studies. We’ve been looking into email marketing and there’s so much focus on mobile now, that your presentation is on top of our list for designers and front-end devs before they work on emails. :-)

  • Anna Yeaman
    January 25th, 2014 13:48

    Thanks so much Andrei!

  • Ale Castellano
    February 11th, 2014 07:50

    Hi Anna:
    Thank you for the great content.
    I’ve found a problem while building my responsive templates. Gmail won’t take the media queries and nor the content of the tag, so everything for Gmail must be inline styles… but then… where can I put the media queries for other email clients so they afect the design? they take the inline styles and the responsive won’t work… I’ve tried !important, but it does not work either… Only iPhone obeys my responsive coding :S
    It’s being quite a headache to find the good way to go responsive for email :(
    Thank you so much…

  • Mark Palka
    August 6th, 2015 11:39

    Excellent presentation,

    I was wondering if there’s a chance to get the code of the newsletters mentioned in the presentation. I’d really like to look inside the Boss newsletter cause I’ve a similar case here. Gotta make a layout which has to change form 3-column to a 2-column one on mobile. Hmm?

    Greetings from Poland!
    Best wishes. :)

  • Anna Yeaman
    August 7th, 2015 16:54

    Thanks Mark,

    we can’t give out our clients code I’m afraid, though there are various responsive email tutorials/frameworks around that might help such as:

  • Mark Palka
    August 9th, 2015 00:30

    Thanks a bunch! :)


Leave a comment: