from Hacker News

Responsive HTML Emails: a Different Strategy

by kevingessner on 11/1/13, 7:05 PM with 43 comments

  • by blowski on 11/1/13, 9:01 PM

    At TechHub more than half our emails are opened on mobile (and mostly on iPhones, although there is some selective bias in there because of default image display settings). So mobile-first makes sense in every way.

    > We began by asking, what layouts work well on mobile? The answer for us was to think “single column.”

    This is nearly always the case. You can include pictures, and then use `align="right"` (or left) to make text float round the picture. You can use media queries to hide the picture entirely on mobile.

    You can also use two buttons, one for mobile (which stretches to 100% width and more height) and one for desktop.

    We use Litmus (http://litmus.com) to render test everything.

    I have a strange love for coding HTML emails, so if I can help anyone with a bit of free advice, feel free to ask. @blowski

  • by Tharkun on 11/2/13, 10:37 AM

    E-mail has always been responsive: use plain text. Keep your images and your fancy graphical jibberjabber on the www and out of my mailbox. Kthxbai.

  • by Demiurge on 11/1/13, 8:42 PM

    Why can't emails just be text :(

  • by ecesena on 11/1/13, 8:43 PM

    Awesome, thanks! There should be more about responsive emails, both in terms of information and default templates.

    One of the bests to my knowledge is by Zurb [1], but the lack for Outlook support makes it almost unusable (at least for us). We ended up hacking from "the bigs" (Twitter, Facebook, Linkedin), although at the very beginning their templates also had issues here and there.

    This said, testing on so many devices is a pain... email services like Mailchimp or Mailup should definitely add tools for that! (anyone listening? ;)

    [1] http://zurb.com/playground/responsive-email-templates

  • by GrinningFool on 11/1/13, 8:26 PM

    OT - minor pet peeve: When did "responsive" become synonymous with "handle different screen layouts gracefully" vs "responsive to the user"?

  • by sergiotapia on 11/1/13, 8:22 PM

    HTML Emails are a can of worms I always postpone learning about. It's a learned skill that takes time to perfect and more often than not if the design is complex I deffer to a more specialized developer.

    I wish all email clients behaved properly and used their browser counterpart's engine.

    Meaning, Outlook would use IE9 or 10 render engine, et al.

  • by monsterix on 11/1/13, 8:13 PM

    Nice post!

    Another challenge on mobile is that most of the times images/ background-images aren't served at all. So as long as there is just text and style on your email this strategy would just work. The moment you decide to step-up the visuals, you'd start thinking why the hell does the world still use email at all?