Strategy

Digital Advertising Solutions 
Email Campaign Platforms 
Social Media Marketing 
Search Engine Optimization (SEO) 
Digital Analytics

Design

Web Design 
Graphic Design 
Client Relationship Management (CRM) 
User Experience Design (UX)

Development

Web Development 
Content Management Systems (CMS) 
Mobile Apps 
E-commerce Platform Solutions 

HTML Email Template Design

Designing a responsive HTML email can present challenges that differ from creating a responsive website. The popular email and website testing platform, Litmus (https://litmus.com/blog/email-client-market-share-where-people-opened-in...), estimated in 2013 that just over half (51%) of all emails are opened on mobile devices. In 2015, Litmus followed up by showing an increase to 53% (https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decr...) which provides evidence of the steady growth of mobile use for emails and the decrease in the use of desktop email clients. The mobile first advertising platform, InMobi, (http://www.inmobi.com/), estimates that 60% of Internet users globally are using a mobile device to browse and make purchases.

The ideal experience would be to have the responsive email contain a call to action that brings the viewer to a responsive landing page. To have an email that can fit the multi-screen landscape of email clients and deliver the viewer to a conversion is the goal of successful email marketing. According to Google Mobile Ads Blog (http://googlemobileads.blogspot.com), 61% of users are less likely to return to a non-responsive site that they had trouble accessing from their phone.

As the way emails are read changes, the current state of email clients (the software or app you use to read a responsive email), varies and presents challenges. The main challenge of responsive design for email is within the conceptual artwork of the email. The essential fact to keep in mind when designing a responsive email template is that the email will be read on a mobile device. The key word within this observation is ‘mobile’. The viewer will be on the go, within transit, using public transportation, eating lunch, etc. Keeping the attention of the mobile email viewer is key.

Here are a few tips to help achieve the goals of a good responsive email marketing campaign:.

1. Streamline Your Content
Are you able to get your message across within one or two sentences? Reducing the email content down to the basic message of your campaign can be the hardest step within the responsive mobile first design process. Within this fast-paced environment, getting viewers to stay focused on your message depends on the these first few decisions.

2. Responsive Mobile First Design
The single-column small screen width design is now the new addition to designer’s art boards. The expectation is to have this single-column design blossom into the flower that would be the desktop version. With over half of all internet users opening their email with mobile devices, this multi-screened experience should be seamless. One major difference between responsive email design and responsive website design is that web fonts are currently unavailable in most HTML email clients. We are anticipating that this may change in the future, but for now standard web fonts should be used for responsive HTML email designs. There are a few other differences based on css rules that vary across email clients.

3. Inline CSS
Cascading Style Sheet markup language is used to control the styling and formatting of an HTML document. In this case the HTML email, it also controls the responsiveness of the email according to the email client and screen size which is being viewed in. Within a responsive email, it is best practice to place the CSS markup at the head of the document. There are a few email clients that ignore this portion of the document and rely on what is called ‘inline CSS’. This version of the css markup language is written directly into the HTML tags themselves throughout the document. In essence, this technique works as a backup if the CSS markup placed at the head of the document is prevented to render the email correctly.

4. Test Across Email Clients
Testing is an essential part of the email development process. There are a few platforms available to test the newly developed responsive email across various email clients. It is recommended that actual live email accounts across different devices be used to obtain more concrete results.

Responsive email design is very challenging and if you are looking to pursue the development process yourself, the tips mentioned within the post was written to guide you in the right direction. If you are not a developer and are interesting in creating a responsive email for your advertising campaign, Creative Rodriguez, LLC is here to be at your service. Creative Rodriguez, LLC works daily to implement and improve the process of creating responsive HTML emails for email marketing campaigns. If you would like to have an email designed and developed, a strategy on how to run a successful email campaign, or just have a question or comment, contact Creative Rodriguez, LLC today.