Email Marketing

Responsive Design for Ecommerce Marketing Emails

Roughly one-half of email is now opened on mobile devices like the Apple iPhone or the Android-powered Samsung Galaxy S4. There is significant research indicating that between 70 and 80 percent of users will simply delete a message that doesn’t look good on their mobile device.

If ecommerce marketers want to get their message through to smartphone and, perhaps, tablet users, they are going to need to design for mobile.

Of course, the other half of email marketing messages is being opened on laptop and desktop computers with relatively wide viewing windows, and, frequently more capable email clients. Marketers don’t want to forget these users either.

Responsive Design for Emails

The solution to designing for smartphones, tablets, laptops, and desktops may be the same approach used for website mobile optimization, namely, responsive design.

In general, responsive design seeks to present content to users in a way that is both functional and attractive regardless of the size or mobility of the user’s device. Responsive design focuses on providing good customer experiences and requires marketers and designers to do a little extra work on the user’s behalf.

In the case of mobile-optimized emails, responsive design generally depends on three techniques or capabilities: media queries, mobile first design, and fluidity.

CSS Media Queries for Responsive Emails

CSS media queries allow designers to specify different styles based on the width of the user’s screen. In this way, it is possible to, as an example, set the width of an HTML table to 600 pixels for devices with large viewing areas and set the width of the same HTML table to 300 pixels on mobile devices.

Media queries are placed within a style sheet. In the context of an HTML email, this generally means that the media query will go inside of a style tag <style> at the document’s head.

<code>

<style type=”text/css”>

@media only screen and (min-width: 481px;){

table { width: 600px; }

}

</style>

</code>

Notice that the media query begins with an at-rule, @media, and goes on to specify some parameters. The “only screen” section indicates that the enclosed styles will apply only to screens and not, as an example, to printers.

Notice that there is also a minimum width set, so that the styles in this example would only apply to screens larger than 481 pixels.

Within the media query, the email designer can add any style required to make the email look good across devices.

It is important to note that style declarations are often made inline within HTML emails. This means that is customary to place styles directly in an HTML tag, which is something that MailChimp pointed out in its brief explanation of responsive email design.

<code>

<table cellpadding=0 cellspacing=0 style=”width: 300px;” >

</code>

Adding the styles this way is generally considered poor form for website design, but makes sense in HTML email design because not every email client can or will read style sheets. It is also worth noting that inline styles override style sheet declarations, so that even if an email client understood the media query, it would not use it, if our “default” styles are added inline.

To get around this problem, you can indicate that the media query styles are important, so the email client will use them in spite of the presence of inline style declarations.

<code>

<style type=”text/css”>

@media only screen and (min-width: 481px;){

table { width: 600px !important; }

}

</style>

</code>

Mobile First Design

Not every mobile email client can read and understand a media query. For this reason, consider designing for mobile first and using media queries to adapt the HTML email to larger devices like laptops, which are also more likely to have email clients capable of using CSS media queries.

In practice, this means that inline styles will be used to create the mobile layout, and the media query in the style tag will be used to up-scale the layout for other devices, potentially eliminating the problem of having to guess which mobile email clients will or will not support Media Queries.

Fluidity or Fluid Widths

When designing a responsive, HTML email layout, it can also be helpful to use fluid design principles that don’t specifically declare widths, but rather allow designs to flow, filling the available space.

In most cases, this will be as simple as using percentages for widths rather than a specified number of pixels. Fluid layouts can be a bit harder to control, so you will want to test your email template before sending out an emails to your customers.

What Should Change in a Responsive Email’s Layout, Design

An ecommerce marketer or designer can control just about any aspect of an HTML email’s appearance using media queries, a mobile-first design approach, and fluid design when it makes sense.

With this in mind, here are some of the elements that should respond to the user’s device.

  • Email layout. Generally mobile optimized HTML emails should have a single column, while HTML emails for desktops will frequently be the easiest to read with two columns.

  • Buttons and links. On mobile devices, links and buttons would have a finger-friendly target area of no less than 44 pixels square. But for HTML emails aimed at desktops and laptops, it is acceptable to have lists of links, since a mouse pointer should have no problem selecting them.

  • Font size. Fonts must be significantly larger on mobile devices than they are on a large monitor.

  • Image size. Images should be resized to match the viewing area.

  • Padding and margins. Since mobile devices often use every pixel so that words can go right to the edge of a screen, be certain to include the proper padding and margins.

Not All Email Service Providers are Equal

Not all email service providers treat styles and HTML templates the same way. So it is important to understand the limitations and capabilities available before jumping into a responsive HTML email design.

Responsive Email Resources

These links will take you to other responsive email resources.

Armando Roggio
Armando Roggio
Bio   •   RSS Feed


x