6 ms·

Responsive HTML Emails: a Different Strategy

107 points by kevingessner 13y ago

monsterix 13y ago
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?
- blowski 13y ago
  Images on any Apple device are shown by default. If you don't give any dimensions to the image, it will collapse when images are blocked. You can use a table with a background-color as a fallback when images are blocked so it still looks good even without images. That said, some folks go with image-heavy emails to encourage people to turn on the images. ASOS are particularly well known for this. And if you want to get really creative when dealing with image-blocking - http://www.campaignmonitor.com/blog/post/3642/email-with-pixel-art-fallback-when-images-are-blocked http://www.campaignmonitor.com/blog/post/3642/email-with-pix...
sergiotapia 13y ago
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.
GrinningFool 13y ago
OT - minor pet peeve: When did "responsive" become synonymous with "handle different screen layouts gracefully" vs "responsive to the user"?
- benihana 13y ago
  May 25, 2010. http://alistapart.com/article/responsive-web-design http://alistapart.com/article/responsive-web-design
- lstamour 13y ago
  The original intent was to overlap the two meanings: to be both responsive as the user resizes the browser rather than to add scroll bars and to be responsive to the device capabilities: try to make buttons bigger for touch screens, etc. More direct responsive behaviour would likely be called user-centred, focused or, well, quick and efficient. :) perhaps even user-friendly AJAX to dip into some buzzword stew.
Demiurge 13y ago
Why can't emails just be text :(
- blowski 13y ago
  Newsletters should include a text version as well, and you can set your client to show that instead of the HTML. "Normal" users (i.e. the non-geeks) do seem to prefer HTML emails, and in usability studies, A/B testing, and deliverability reports, HTML emails usually outperform text. In short, HTML emails are better for and preferred by recipients and senders in all but edge cases.
  - ams6110 13y ago
    I find that sadly, more and more HTML email does not include a plain text part. I realize I'm in in a small minority of people who don't use a graphical email app. But if you care about that at all (and you probably should so that you also make life easier for your visually impaired clients who use screen readers) you should include plain text. Otherwise I simply won't read the email that you spent so much time and effort painstakingly formatting.
    - victorhooi 13y ago
      Unfortunately, you appear to be a minority. Look, it's all well and good to say "I'm 1337! I use Mutt, or I use Links!". But let's be honest, the majority of people are not going to use a text mode web browser or a text mode email client. And this isn't something you're born with, like a vision impairment, so people need to make a website accessible for you. This is a personal preference. Hence, as much as some of us neckbeards might like to go back to a works where 256 colours was the bomb =), the rest of the world has moved on.
      - alextingle 13y ago
        Text only e-mail is more productive for everyone, in exactly the same way that text only authoring applications are more productive. When you are writing something, fiddling around with the layout is just a distraction. Many people might prefer it, but lots of people also like to play Patience on their workstation rather that getting on with what they are supposed to be doing.
ecesena 13y ago
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 http://zurb.com/playground/responsive-email-templates
- Keats 13y ago
  As blowski said (https://news.ycombinator.com/item?id=6656393 https://news.ycombinator.com/item?id=6656393), Litmus is very good for testing automatically in every possible configuration.
- rodriguezcommaj 13y ago
  The Zurb one is a cool start - you may also like Antwort - http://internations.github.io/antwort/ http://internations.github.io/antwort/ - and Brian Grave's Responsive Email Patterns - http://briangraves.github.io/ResponsiveEmailPatterns/ http://briangraves.github.io/ResponsiveEmailPatterns/ For general information, Anna Yeaman over at STYLECampaign made an amazing video on Responsive Email Design, a must-view if you're interested in the topic - http://stylecampaign.com/blog/2013/03/responsive-email-design-red/ http://stylecampaign.com/blog/2013/03/responsive-email-desig... Shameless self promotion, I also wrote a book on the subject called Modern HTML Email - http://modernhtmlemail.com http://modernhtmlemail.com - good way to get into responsive email design and email marketing in general.
- eli 13y ago
  Err, doesn't Mailchimp already offer that? http://mailchimp.com/features/inbox-inspector/ http://mailchimp.com/features/inbox-inspector/ I think most ESPs do these days.
blowski 13y ago
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 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
- Keats 13y ago
  > I have a strange love for coding HTML emails That's a sentence I never thought I would ever hear. And I also recommend Litmus, pretty much the only sane way to test the rendering that I found.
  - blowski 13y ago
    Most of the time as a developer I am merely bluffing my way through, but with HTML email I can actually claim some degree of expertise.
    - eli 13y ago
      They're also small and self-contained. It's like a poem.
- benihana 13y ago
  I actually have grown to dislike Litmus to be honest. I've sent an email to Litmus and to a device it was emulating, and it looked great on the device and busted as hell on Litmus. Leads to some false negative bugfixes.
  - rodriguezcommaj 13y ago
anotherbadlogin 13y ago
"Responsive" to what?
Tharkun 13y ago
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.

107 points by kevingessner 13y ago

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?

blowski 13y ago
Images on any Apple device are shown by default. If you don't give any dimensions to the image, it will collapse when images are blocked. You can use a table with a background-color as a fallback when images are blocked so it still looks good even without images. That said, some folks go with image-heavy emails to encourage people to turn on the images. ASOS are particularly well known for this. And if you want to get really creative when dealing with image-blocking - http://www.campaignmonitor.com/blog/post/3642/email-with-pixel-art-fallback-when-images-are-blocked http://www.campaignmonitor.com/blog/post/3642/email-with-pix...

sergiotapia 13y ago

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.

GrinningFool 13y ago

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

benihana 13y ago
May 25, 2010. http://alistapart.com/article/responsive-web-design http://alistapart.com/article/responsive-web-design
lstamour 13y ago
The original intent was to overlap the two meanings: to be both responsive as the user resizes the browser rather than to add scroll bars and to be responsive to the device capabilities: try to make buttons bigger for touch screens, etc. More direct responsive behaviour would likely be called user-centred, focused or, well, quick and efficient. :) perhaps even user-friendly AJAX to dip into some buzzword stew.

Demiurge 13y ago

Why can't emails just be text :(

blowski 13y ago
Newsletters should include a text version as well, and you can set your client to show that instead of the HTML. "Normal" users (i.e. the non-geeks) do seem to prefer HTML emails, and in usability studies, A/B testing, and deliverability reports, HTML emails usually outperform text. In short, HTML emails are better for and preferred by recipients and senders in all but edge cases.
- ams6110 13y ago
  I find that sadly, more and more HTML email does not include a plain text part. I realize I'm in in a small minority of people who don't use a graphical email app. But if you care about that at all (and you probably should so that you also make life easier for your visually impaired clients who use screen readers) you should include plain text. Otherwise I simply won't read the email that you spent so much time and effort painstakingly formatting.
  - victorhooi 13y ago
    Unfortunately, you appear to be a minority. Look, it's all well and good to say "I'm 1337! I use Mutt, or I use Links!". But let's be honest, the majority of people are not going to use a text mode web browser or a text mode email client. And this isn't something you're born with, like a vision impairment, so people need to make a website accessible for you. This is a personal preference. Hence, as much as some of us neckbeards might like to go back to a works where 256 colours was the bomb =), the rest of the world has moved on.
    - alextingle 13y ago
      Text only e-mail is more productive for everyone, in exactly the same way that text only authoring applications are more productive. When you are writing something, fiddling around with the layout is just a distraction. Many people might prefer it, but lots of people also like to play Patience on their workstation rather that getting on with what they are supposed to be doing.

ecesena 13y ago

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 http://zurb.com/playground/responsive-email-templates

Keats 13y ago
As blowski said (https://news.ycombinator.com/item?id=6656393 https://news.ycombinator.com/item?id=6656393), Litmus is very good for testing automatically in every possible configuration.
rodriguezcommaj 13y ago
The Zurb one is a cool start - you may also like Antwort - http://internations.github.io/antwort/ http://internations.github.io/antwort/ - and Brian Grave's Responsive Email Patterns - http://briangraves.github.io/ResponsiveEmailPatterns/ http://briangraves.github.io/ResponsiveEmailPatterns/ For general information, Anna Yeaman over at STYLECampaign made an amazing video on Responsive Email Design, a must-view if you're interested in the topic - http://stylecampaign.com/blog/2013/03/responsive-email-design-red/ http://stylecampaign.com/blog/2013/03/responsive-email-desig... Shameless self promotion, I also wrote a book on the subject called Modern HTML Email - http://modernhtmlemail.com http://modernhtmlemail.com - good way to get into responsive email design and email marketing in general.
eli 13y ago
Err, doesn't Mailchimp already offer that? http://mailchimp.com/features/inbox-inspector/ http://mailchimp.com/features/inbox-inspector/ I think most ESPs do these days.

blowski 13y ago

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

Keats 13y ago
> I have a strange love for coding HTML emails That's a sentence I never thought I would ever hear. And I also recommend Litmus, pretty much the only sane way to test the rendering that I found.
- blowski 13y ago
  Most of the time as a developer I am merely bluffing my way through, but with HTML email I can actually claim some degree of expertise.
  - eli 13y ago
    They're also small and self-contained. It's like a poem.
benihana 13y ago
I actually have grown to dislike Litmus to be honest. I've sent an email to Litmus and to a device it was emulating, and it looked great on the device and busted as hell on Litmus. Leads to some false negative bugfixes.
- rodriguezcommaj 13y ago

anotherbadlogin 13y ago

"Responsive" to what?

Tharkun 13y ago

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.