During a meeting at work today, someone mentioned that they were looking for responsive HTML email examples and templates. My first thought was, “Responsive HTML email? Is there such a thing?”
The more I thought about it, the more appealing the concept became, which lead to my next thought, “Responsive HTML email! But… can we do it?”
It turns out that we can. It also turns out that we should:
If you send email newsletters, it’s likely that a growing percentage of your subscribers are reading your messages on an iPhone, tablet or similar. When we last surveyed email client popularity in 2011, we found that almost 20% of email opens occurred on a mobile device, rising dramatically from a mere 4% of the market when we last ran the numbers in 2009. iOS devices accounted for over 90% of these reported opens.
What this means for designers is that getting your email newsletter to display optimally on mobile devices is just as important as ensuring it can be read in long-standing email clients like Outlook and Gmail. In fact, mobile email client usage is soon set to eclipse both that of webmail and desktop clients, meaning that providing a less-than-optimal reading experience on the small screen may not only inconvenience a few recipients, but eventually the majority [emphasis added].
The previous quote is from Campaign Monitor’s excellent responsive email design guide, which is a great place to start. The guide opens with why it’s important to optimize for mobile, and then moves into how to design and code responsive HTML emails as well as how to target mobile devices with media queries.
In my next post on HTML email, I’m going to step through the code in Campaign Monitor’s mobile email template (zip).