• Sean Klope

    I can’t agree more. The headers are crucial for many elements I would love to use in my email designs. Gmail and Outlook are the two platforms most used and most difficult to develop for.

  • http://twitter.com/cstudabaker Chris Studabaker

    @kaldrich Not to get around it, but here’s some context: In general, we don’t really care if the media query isn’t supported in email clients outside of mobile. The rendering is determined by the email client used to view the email rather than dictated by the service provider.

    For example, the embedded stylesheet including the media query will be stripped out for desktop Gmail users, but it wasn’t being used to target their experience so the impact is essentially zero. If that same user checks Gmail via the iPhone Mail client, the media query will still be in effect.

    When it comes to @media support for mobile apps and mobile webmail, support is varied. (Check this support list from Style Campaign: http://stylecampaign.com/blog/2012/10/responsive-email-support/) Please note, though, data from Litmus and others show the vast majority of mobile users rely on native email apps, rather than 3rd party apps or mobile webmail, so the native email apps are the places to invest energy in testing.

  • http://twitter.com/cstudabaker Chris Studabaker

    Exactly. And we basically don’t care if the query isn’t supported by email clients we weren’t targeting in the first place.

  • ividence

    Great post! Couldn’t agree more that we all need to be looking at examples in the wild. We shared this in our email marketing news roundup at http://blog.ividence.com/en/archives/email-marketing-new-december-3-2012

  • http://twitter.com/cstudabaker Chris Studabaker


  • http://twitter.com/cstudabaker Chris Studabaker

    Hopefully the above explanation helps. Drop a line if you still have questions.

  • http://www.facebook.com/MJRfilms Mark Robbins

    Very interesting stuff.

    I’m curious about the Hero image replacement in the Seagate email. Are they doing this with a in-line image or a background image? I’d love to replicate this however I want to make sure an image will always appear, even in Gmail :)

    I’m guessing it could be done with a display:none; type method. Any ideas?