How to Establish Proficiency & Efficiency with Responsive Email Design

Dec 4, 2013 | Posted by

As we near the end of 2013, the year has marked a major shift in the digital marketing landscape, most notably with the dramatic rise in email opens on mobile devices. Digital marketers have acknowledged this change in consumer behavior and responded by relying more and more on responsive design. Because responsive design allows for an email to be optimized for viewership on mobile devices (visually and functionally), it yields a consistent, controlled, and better all-around user experience.  This improved experience for mobile users has proven to increase the level of engagement on email campaigns, as measured by click through rate.

As more and more emails are being designed and programmed with responsive design in mind, the work required to drive an email campaign has increased drastically. Prior to responsive, emails were simply programmed in one format (desktop) and featured a link to a separate mobile version. These mobile versions were typically all text and very generic. However, in the world of responsive design, programmers must create one template that includes code for desktop AND mobile. Now, the time and complexity for the programmer is increased, as they must create the required code to mesh the two formats into one template. Email marketers must therefore strike a balance between the additional cost associated with responsive design emails, and the benefits of improved email engagement with increased conversions.

In this blog post we will be looking at how digital/email marketers can mitigate the negative impact of the added programming dollars needed to execute email campaigns using responsive design.

There is surprisingly a high variance in the time needed to create one responsive design email from another. Two different email templates can appear equally complex, yet due to certain “responsive design email programming pitfalls,” there can be a variance of 10+ programming hours between them. Companies appreciate options, and approaching a client with money saving suggestions on how to tweak their template demonstrates a high understanding of email as a medium, quality customer service and a powerful value add.

Below, I will highlight key design elements found in email templates that can quickly eat up programming time and burn valuable resources. There are instances, however, where from a branding perspective there is no room for changes in design. Nevertheless, in most cases, small template changes make for dramatically reduced coding complexity.

1. Variations from the “Grid” layout. 

When it comes to creating responsive emails, a desktop template that follows a grid layout is a programmer’s dream. The perfect grid layout is divided vertically 50/50 and has even horizontal rows.  This allows the programmer to simply stack the buckets in a logical fashion, moving from 2, to 1 column. See below:

However, when the email design does not follow a grid layout, or uses images that breach the frames of the grid, complications arise while creating a mobile version. The boxes of the desktop version can no longer be used in the mobile version and secondary “mobile only” images must be coded.  Creating the code for these images, as well as the code to hide/reveal the image based on what version is being viewed adds significant time and costs. See below:

*Creating a mobile version for this template requires: 1. Image scaling  2. Image swapping (mobile versions of image)   3. Image hiding  4. Text hiding

**Extra time saving tip: It is always easier to scale an image than to swap an image. If image swapping/hiding is necessary, it is always easier to hide images on the mobile version and display everything on the desktop version.

2. Avoid textures/gradients

Textures and gradients are visually appealing and add character to an email template. However, they unfortunately react in an inconsistent manner across email applications, most notably in Outlook and Gmail. (Technically, gradients are acceptable if they are used as images. They present rendering issues however, when text is used on a gradient.) In terms of saving time and dollars, limiting the use of gradients and using flat colors only is ideal.

Textures and Gradients


3. Use HTML Buttons

HTML buttons are essentially a clickable colored space that can house text. The use of HTML buttons has its advantages. Firstly, they scale well because they use flat colors, and allow for the same button to be used in the desktop and mobile versions.  Another key advantage is that the text within an HTML button is visible/clickable in the email before images are downloaded.

4. Use Fluid text

Fluid text resizes itself to perfectly fit its containing element. Like HTML buttons, using fluid text saves a programmer time as it allows for the same component of the template to be used in both the desktop and mobile version.

It’s important to note that whether the desktop or mobile version is being displayed, the code (representing images and text) for both versions is downloaded.  Using these tips will lead towards smaller email size in terms of code. This is important because expectedly, the longer an email takes to load on a mobile device, the higher the abandonment rate.

While responsive design is a great tool to increase visibility for mobile users, the success and ROI on any campaign is hinged on great design.  The race for responsive design email adoption as an ability is over. As we move into 2014 the competitive focus of Digital Marketing agencies will centered in responsive design email efficiency and proficiency

Be Sociable, Share!