Responsive Email Templates

 4   Tweet

Note: This post hasn't been updated in over 2 years.

Responsive web design is accepted across the internet as a great solution for viewing sites on a multitude of different devices. It wasn’t always this way— when responsive design was in its infancy, there were naysayers and those who were reluctant to jump on the bandwagon. My question, and the reason behind this article, is why hasn’t responsive email design taken off in the same way?

It’s likely the major reason for this is a technical one, rather than a lack of demand. Email clients don’t support JS media queries, making responsive design as it is created for the web impossible. Fortunately, the hurdle-jumpers over at Zurb have built responsive emails without using media queries, and they’ve provided a template framework so that others can give it a go.

Image ©Zurb

The downside is that Outlook 2007-2013 is not supported, which limits the customer base that’ll be able to easily access the emails. If you’re looking to support mobile viewers only, or have confidence that your customer base doesn’t use Outlook, those templates are certainly a great option for responsive email opportunities.

The good news is, this might be less of a problem in the future— if you look at some of the data coming from CampaignMonitor it seems that the trends for email reading are shifting so quickly towards a smartphone majority that it would be wise to make sure that your emails are attractive to mobile customers.

Image ©CampaignMonitor

Plain text emails are naturally responsive, which makes them effective on all devices. It’s when you want to get creative with HTML and are improving your marketing campaigns targets that you run into headaches. It’s difficult enough to get the email looking good across a range of email clients, without considering what those HTML emails will look like on a mobile device. Nobody wants to have to pinch and squeeze around their smartphone screen to squint their way through an important email.

To achieve the best of both worlds and have an email that’s readable on a multitude of devices while still including all the frills and providing the best possible user experience, there’s no better path than responsive email design. For the time being, it might be worth it for Outlook subscribers to “view it in the browser”.

I’ve seen some email templates appearing here on ThemeForest that are supporting newsletters on smartphones and receiving good interest as the demand rises. These templates get the job done by giving the user a better experience and they tick all the boxes when it comes to mail clients, however, they aren’t truly responsive templates as they work by downsizing the email rather than using responsive techniques.

Storesletter HTML email-marketing template to sell

Sinterklas – Christmas Mobile Scalable HTML Email

MarkDown – Clean and Minimalistic Newsletter

Quantumleaper – 280 Templates

Lightning Express

Given the shift towards mobile devices and the interest and support shown by the ‘big players’ in the email game (check out MailChimp’s research and guides, and Github if you’re looking for further proof), now is a great time to get invested in responsive email templates. Authors, if you’re looking for a new niche, this might be it! The market need is there, they’re just waiting for the right solution.

  • Jakartanese

    Nice article… thank you! 🙂

  • Josh Sprague

    Great info!

  • derek

    Great article, but until outlook supports responsive layouts, creating emails in a responsive format is just busy work… and when / if outlook ever does support responsive layouts, you have to realize most people are checking their email on while at work, usually from the work email account through outlook.

  • Sergie

    Yep, Derek hit it on the nail. It’s the sad truth but until outlook supports responsive layouts designers will be hesitant. I do see responsive templates on theme forest become increasingly popular though.