Responsive HTML Emails: a Different Strategy | Hacker News Reader

Responsive HTML Emails: a Different Strategy

blog.fogcreek.com

107 pointskevingessner43 comments

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

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

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.

They're also small and self-contained. It's like a poem.

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.

I'm actually the Community Manager at Litmus. If you still use the service and have issues, don't hesitate to shoot us an email at hello@litmus.com - we're always trying to improve the service and help out our customers.

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.

Why can't emails just be text :(

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.

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.

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.

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.

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.

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.

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

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

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

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

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?

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.

Images and fonts are a very valid and useful tools for communication. Even the most old-school, respectable newspapers use images, graphics, and a variety of fonts--even in their most serious news stories.

The minority that won't get hit by the next worm.

It's boring to see everything being reinvented again, just with more color and horrible mistakes.

A quick note to web.de and gmx.whatever who send mails as HTML-only: you suck

I don't think anyone is better off getting graphics and colors in their email, even if they enjoy it. After all, the email is supposed to inform of something. A website can be an interactive app, but email?

Also, text-only doesn't mean monospace. I'm happy to read email in whatever sans-serif font the email client picks, with nice whitespacing.

>A website can be an interactive app, but email?

Fortunately, most e-mail clients support a "show this e-mail in text only" view mode. This means that you can have it your way, and others can have it theirs!

Yeah, I do that every time!

The problem is that "show this E-mail in text only" relies on the fact that whatever they use send out the E-mail also sends plain text as well as HTML as a multipart. I find most of places do that, but there are some services/implementations that simply sends out HTML, pretty much leaving it up to the mailer to interpret that E-mail.

Either you will be sending in HTML or plain text, I feel there shouldn't be any excuse of not attaching plain text version of it.

I have been a text-email lover and html-email hater until early this year (2013). I realize that almost everyone neither have any clue of the difference nor do they care. As mentioned elsewhere in this comment thread, people do love beautiful emails - the html kind.

I have dealt with quite a bit of clients and they love to use colors as separation for various degree and scaffolds of conversations.

For now, if I'm initiating an email and do not really need to be HTML, I try to stay with text. For other, I just follow the format the current email thread is in.

HTML can be +much+ more effective than text.

...at distracting and confusing readers.

If your goal is to distract and confuse people, by getting them to click on your ads and buy your products, then use HTML e-mail. If you want to communicate clearly, then stop worrying about layout & typography and concentrate on the words you are writing.

> If you want to communicate clearly, then stop worrying about layout & typography

That's just wrong. Layout and typography are important elements to clear communication.

Right, because when people are talking to you, all you hear is an incomprehensible stream of blah, blah, blah.

So do you think a Steve Jobs presentation would be as effective audio-only?

It would be preferable. Does that count?

And people use single tone of voice, never emphasize their voice, and never use hand gesture, right?

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

As blowski said (https://news.ycombinator.com/item?id=6656393), Litmus is very good for testing automatically in every possible configuration.

The Zurb one is a cool start - you may also like Antwort - http://internations.github.io/antwort/ - and Brian Grave's Responsive Email Patterns - 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...

Shameless self promotion, I also wrote a book on the subject called Modern HTML Email - http://modernhtmlemail.com - good way to get into responsive email design and email marketing in general.

Err, doesn't Mailchimp already offer that? http://mailchimp.com/features/inbox-inspector/

I think most ESPs do these days.

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

May 25, 2010. http://alistapart.com/article/responsive-web-design

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.

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.

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?

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

Reply on news.ycombinator.com