
Responsive HTML Emails: a Different Strategy - kevingessner
http://blog.fogcreek.com/responsive-html-emails-a-different-strategy/
======
blowski
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
> 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
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
They're also small and self-contained. It's like a poem.

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

------
Demiurge
Why can't emails just be text :(

~~~
benihana
Because the vast majority of people enjoy pretty emails with non-monospaced
fonts, whitespace and colors. It's mostly hackers who want to show off how old
school they are that complain about html emails. Also, most emails like this
have a text version you can receive - I believe it's necessary for CANSPAM
compliance.

~~~
b6
I very much prefer for emails to contain text only, or with HTML only as
attachments, and it has absolutely zero to do with any desire to show off to
other people.

For me, it's all about keeping some control over technology. I tell a very
limited program like mutt what to do, and it does it. This is in contrast to
begging an incredibly complicated program like a browser to do something,
where much of what it is doing is controlled by invisible embedded code
written by people who may be hostile toward me.

~~~
blowski
> For me, it's all about keeping some control over technology.

That's fair enough, but you are very much in a minority.

~~~
Demiurge
Do you know of any usability research or somesuch that confirms this?

~~~
blowski
I spent some years working at an email-specific agency. They sent more than 5
billion emails during that time for some very big clients, and we did most of
the data analysis. They also did a lot of usability testing.

I can tell you that on just about every metric - brand recall, clickthrough
rates, ROI, unsubscribes - HTML outperformed plain text. There were
exceptions, both in terms of types of campaign and types of sender - say, if
your list includes lots of Hacker News readers.

We found, for example, that including just one image will increase open rates
by more than 50% but I can't find it now. Another article on the same topic is
here -
[http://www.alchemyworx.com/alchemy_worx/2009/newsletter/issu...](http://www.alchemyworx.com/alchemy_worx/2009/newsletter/issue7/lp/lp3_email_design_images.html).

~~~
Demiurge
Ok, I am aware of the higher click rates, but that is part of my point. Well
crafted imagery is no doubt more catchy and attention getting than plain text.
However, is visual stimulation (manipulation?) supposed to be a part of
communication medium? Between the reasons for why HTML should be in emails,
where do you rank recipients well-being compared to ROI?

~~~
pwhython
Unfortunately, an un-branded email looks suspicious and unprofessional
nowadays. You'll get more complaints and unsubs than ever versus a well-
crafted (not over-the-top) engaging layout.

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

~~~
rodriguezcommaj
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-
desig...](http://stylecampaign.com/blog/2013/03/responsive-email-design-red/)

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.

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

~~~
lstamour
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.

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

------
monsterix
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
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-
pix...](http://www.campaignmonitor.com/blog/post/3642/email-with-pixel-art-
fallback-when-images-are-blocked)

