Responsive HTML Emails: a Different Strategy
blog.fogcreek.com
Responsive HTML Emails: a Different Strategy
1–10 of 46 posts
Re: Responsive HTML Emails: a Different Strategy
#2Nice 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?
Re: Responsive HTML Emails: a Different Strategy
#3HTML 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.
Re: Responsive HTML Emails: a Different Strategy
#4OT - minor pet peeve: When did "responsive" become synonymous with "handle different screen layouts gracefully" vs "responsive to the user"?
Re: Responsive HTML Emails: a Different Strategy
#5Why can't emails just be text :(
Re: Responsive HTML Emails: a Different Strategy
#6Awesome, 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? ;)
Re: Responsive HTML Emails: a Different Strategy
#7Why 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.
Re: Responsive HTML Emails: a Different Strategy
#8At 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
Re: Responsive HTML Emails: a Different Strategy
#9Nice 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...
Re: Responsive HTML Emails: a Different Strategy
#10At 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 m…
> 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.