Responsive Email Templates for Mobile Marketing

I remember putting together my first email list in excel way back in 1998 when I use to promote events. Email marketing really sucked back then. It was tedious and cumbersome. Getting a custom newsletter design to work in all email clients consistently was an exercise in futility.

An onslaught of tables and inline styles that would make modern, standards based front-end developers cringe. When I describe programming email templates, I liken it to the way a Vietnam veteran describes going to war. It’s not something you are particularly proud of and if at all possible, you would rather not talk about it.

Although there are some exceptional email marketing services that have popped up over the years, the code that delivers those emails hasn’t changed much at all. Each time me or my team have to code an email template I am reminded of the 90’s – like the feeling you get watching a rerun of Doogie Howser or an old episode of the Simpsons. On a vintage 22 inch cathode ray tube television.

Fast forward to 2013.

No flying cars. No hover-boards.

Bummer.

On the bright side we did get really awesome smart phones. With mobile internet use on smart phones skyrocketing, it’s safe to say that making your next email marketing campaign mobile friendly is not a bad idea. Think about how frequently you browse the Internet and check your email on your phone day to day. If you are a business, this is something you should think about. Potential customers now have access to their email accounts all day, every day, so the opportunities our businesses have to reach these consumers are greater than ever.

The overwhelming use of smartphones and tablets has caused some issues with the design of marketing emails. More people use their mobile devices to connect to the Internet than those who are still using home or office computers. This means that all email marketing campaigns must be geared toward mobile device users.

What is Responsive Design?

If you are reading this and you don’t actually even know what responsive design is, this section is for you. Basically, when your mobile device connects to a website, there are two different ways you can view the information. Some sites offer a mobile alternative, meaning that the way the site is coded is slightly different than the code used to create the desktop version of the site. Sometimes, it’s even a completely different version of the website altogether on a subdomain or subfolder of the primary domain. You may have noticed that these mobile versions typically feature altered images and designs than the way the site is viewed from a desktop computer.

Often these are bad implementations and do not work as effectively, and many times the page is just not set up at all to match the desktop version. These discrepancies can cause confusion and annoyance for potential customers, and they could even cause them to turn away from a particular site altogether.

One emerging method for reaching mobile devices in a more user-friendly design is through responsive email templates. Responsive design allows you to create a single code for all Internet users, whether they are accessing your site through their desktop computer or their mobile device. This makes it simpler and easier for everyone involved in the business: the site designer can create just one version of the website, and the customers can get used to a single layout. This makes your site consistently user-friendly and accessible no matter what device is being used.

One Code To Rule Them All

In responsive design, a single code base is used to create the website. No longer do you need to create separate mobile themes (except when you do need to), or even worse, separate websites for mobile. For example, imagine a site that has five images aligned across the top of the page. This can take up a great deal of space, but it will look just fine across the monitor of a desktop computer. However, six images will not fit easily across the top of the screen of a smartphone.

The code of most responsive designs keeps these same six images, but it gives them a 100% width so they adjusts to the screen size (versus a fixed width). In other designs the images will rearrange themselves and convert to a single column so that there are three images in the first row and three in the second row, or two per row, or even just one depending on the layout. In any of these situations, the same code is used, but various elements that make up the page can adjust to fit the device that is being used to access the site.

What are Responsive Email Templates?

Responsive email templates work on the same basic principles as responsive design. Many businesses in the hospitality and travel industries have picked up on this practice more quickly than retail, mainly because people on-the-go are more likely to use their mobile devices.

As more and more people continue to adopt mobile Internet tendencies, responsive email templates seem to be the way to go for effective marketing. Responsive design is truly the wave of the future, and templates are part of that.

When using responsive email templates, you have several important considerations:

Blocks of text will be extended vertically, making scrolling down through an email a necessity.

Buttons and links need to be larger to allow users to select them with their fingers.

Buttons and links need to be carefully placed for easy access.

Text and images must be shortened to just the essential information to prevent extensive emails.

Thankfully, once the initial decisions about content and design are complete, you can use the same responsive email templates for each new marketing campaign with some simple tweaking of the content.

Examples of Responsive Email Templates

Now that you understand responsive email templates and some of their main benefits, you may be wondering what a successful template may look like and how you can create one of your own. There is not one particular correct way to create responsive email templates, but there are several examples of effective ones. Consider each of these models for further explanation.

Zurb’s Free Responsive Email Templates

Designed to help you create useful, effective, and engaging marketing emails, Zurb offers five different basic responsive designs for download and adaptation. The site does caution that you will need to use its templates in conjunction with an email campaign tool such as Campaign Monitor or MailChimp (see below).

Campaign Monitor’s Responsive Email Design

Although this site does not offer downloadable templates, it does provide a comprehensive explanation why you should consider responsive email templates for your marketing needs. In addition, continued chapters suggest good design techniques, tips for coding mobile emails, and uses for images on mobile devices.

MailChimp Mobile-Friendly Campaigns

A sort of combination of the previous two models, MailChimp provides some downloadable responsive email templates in addition to helping you code, preview, and study your email results. I have always been a huge fan of the messaging and voice of MailChimp’s brand and their templates are great, but if you are a more advanced email marketer, creating something custom in their services was too time consuming for my liking.

Conclusion

Some of the top companies in the technology industry are currently making use of responsive design and email templates. Simply check out the newsletters and mobile sites for Internet favorites Toms shoes, Twitter, and Smashing Magazine for examples of the right way to do responsive web design. Successful responsive design sites and emails are simple and user-friendly.

The companies that are ahead of the design game are the ones that will keep their customers coming back again and again for their easy-to-navigate websites and email marketing campaigns.

You're one step closer to greatness! Confirm your email so we can start sending you awesome stuff.

Analytics & AdWords certified growth engineer with over a decade experience in making businesses successful. I own and operate AXZM and often speak at top national industry conferences on the topics of strategy, design and marketing technology. Work with me or learn more about me here. Follow me @nawlready View all posts by Steve Floyd

We have just had responsive email templates done for our previous 3 emailers and while desktop devices haven’t exhibited much difference, it has made a ton of difference to the open rate as well as referral to our website via mobile devices.

This we did via an A/B testing where we sent out the same mail to a select few clients without responsiveness and to another group a responsive email. The results have been really positive. Thanks for the post and for mentioning those websites.