Designing a responsive HTML email presents many of the same challenges as designing a responsive website. However, far fewer businesses bother to create mobile-friendly email templates. Despite the prevalence of mobile device usage, only 25% of businesses are creating mobile-optimized marketing emails. According to estimates from InMobi, 60% of Internet users are using a mobile device to browse, and Litmus estimates that just over half (51%) of all emails are opened on mobile devices.
Tips for Developing an Email Template
In order to capture the attention of mobile email viewers, an email must be easily readable and designed to engage mobile viewers. If you’re thinking of creating your own responsive email, here are five things to keep in mind when designing and developing your email template.
1. Focus Your Content
The first step for creating mobile-friendly designs is often the hardest. Trimming down the content of your email allows readers who are on the go to stay focused on your message, and will translate to more results from your campaign.
2. Consider the Customer’s Experience
Having a mobile-friendly landing page for your viewers is almost as important as creating a responsive HTML email. According to a post by Google Mobile Ads Blog, 61% of mobile users are unlikely to return to a website that is not responsive friendly. Users are also easily frustrated when sites take a long time to load, and will leave before completing your call to action.
3. Design Responsive First
There are innumerable articles and publications advocating for responsive-first design. With just over half of all Internet users now opening emails via mobile devices, it’s time to put that practice to use. Start with a single-column grid layout, and eventually scale up as appropriate for content. Web fonts are still unavailable in HTML emails, which is important to keep in mind while designing.
4. Create Your CSS Inline
Any CSS used in email marketing campaigns must be created inline. There are a number of great tools called ‘inliners’ which will convert your semantic HTML/CSS into a single in-line HTML document. Unfortunately, there are many CSS options that are not available when coding HTML emails. Campaign Monitor has published a fantastic reference tool for quickly seeing what CSS is available to you.
5. Test Your Results
Testing your email is the last step before sending it out to your subscribers. Mailchimp and Litmus are popular options for testing out your HTML email. However, if possible, it’s always best test on real devices instead.
Tools to Help You Create a Responsive Email
There are an increasing number of tools available for businesses interested in creating responsive emails. Here are a few to consider:
Ink, by Zurb
Ink, created by product design company Zurb, is an open-source CSS framework for creating emails that are both responsive and Microsoft Outlook-friendly. Many web developers will be familiar with Zurb’s Foundation, which is a MIT-licensed responsive framework. It offers a number of email templates for getting started quickly, and a more in-depth process for creating custom emails.
Mailchimp
Arguably the largest email marketing platform, Mailchimp was created in 2001 and has grown to over 6 million users. They have a large number of email templates that are mobile-friendly and an easy to use ‘drag and drop’ email creator for those without coding experience. Mailchimp is a paid service that offers flexible subscription models and offers great tools such as email analytics.
Campaign Monitor
Designed for both marketing departments and creative agencies, Campaign Monitor is a paid service that offers a wide variety of pricing models. However, there are many templates that are free to download and use, and an easy-to-use template builder that offers the option to create and download a custom email template. Campaign Monitor also has tools to monitor subscriber analytics, social reporting, and will automatically remove invalid email addresses from your subscriber list.
Creating a responsive email template can be a challenging task for any business. However, those that do create responsive-friendly email designs will find higher click and engagement rates from their customers. Responsive email design is a skill that few have mastered, but by using these tools, anyone with a basic understanding of email marketing can create a custom email template for their business.
I agree, content is the most important yet often one of the hardest things to do. One of my suggestions is to make sure other people proofread it before the content goes live. Thanks for sharing!