While an email (E-Blast) newsletter can look superb in the inbox, when squeezed onto a small screen, it can become unusable with small fonts, narrow columns and broken layouts. Users are able to zoom in but are then constantly and infuriatingly required to scroll horizontally. Links appear small and congested, with no regard for large fingers on touch-screen displays and low-contrast designs on small viewports, dimmed to save power, often become unreadable.
Over the past few years, mobile usage has sparked an evolution in the way that we approach delivering content to online users. The ultimate goal is a fluid, mobile and one school of thought has emerged: responsive design.
What this means is that getting your email newsletter to display optimally on mobile devices is just as important as ensuring it can be read in email clients like Outlook and Gmail.
GETTING STARTED
HTML E-mails suffer from a lack of standards. Email layouts must be created with tables because of the outdated HTML rendering engines of some email clients plus CSS must be applied inline. Several email clients will completely disregard any style declarations made in the <head> section as well. Now that you understand this, let’s work on correcting it.
Coding for responsive emails
When designers talk about “Media Queries”, they’re not talking about a separate style sheet, but the code/CSS that appears within the curly brackets of a media query. Here’s what a basic one looks like:
@media only screen and (max-device-width: 480px) {
/* mobile-specific CSS styles go here */ {
}
}
Let’s break down what is the @media declaration. In order to make it mobile-specific, we have some criteria that have to be met before the email client uses the styles. The @media only screen specifies, “use only” on a specific screen size. This is important, as many, but not all mobile devices have a viewable area of 480px wide or less. While max-device-width: 480px is commonly used (as it’s the width of an iPhone display in landscape mode), you can tweak this to accommodate larger mobile displays, such as those on tablet devices.
Designing The Responsive Layout
While one-column HTML email layouts are generally the way to go when optimizing for mobile devices, there is an elegant way to create responsive 2-column layouts, without resorting to mile-long style sheets in media queries.
While 2-column layouts often allow more content to feature above-the-fold on desktop email clients like Outlook, they’re a pain to read and navigate on mobile devices.
Single column layout
Single column layouts don’t have particular needs. Since they do not need to rearrange elements, we have only to take care that all widths degrades gracefully to match device sizes (width: 100%;). Rather than Responsive design, this is a classic example of scalable design.
Multicolumn layout
Multicolumn layouts require your columns to be rearranged as device width decreases. It makes no difference whether you’re working with two columns, three or more: you will need to display them vertically instead than horizontally.
There are two ways to accomplish this:
Using nested tables or Changing table cells display property.
Nested Tables Layout
Email composition often requires you to use nested tables. This has always been considered the best way to ensure client compatibility, but on the other hand the resulting code is very dirty and practically illegible.
The trick is the use of the table align=”left” attribute that causes tables to align horizontally.
Every element must have a specific width and their total must have the same value as their container.
When the device width decreases, we have to resize the container and force all the tables-columns to 100% width.
table[class="body_table"] {
width: 600px;
}
table[class="column_table"] {
width: 180px;
}
table[class="spacer_table"] {
width: 30px;
height:30px;
}
@media only screen and (max-width: 480px) {
table[class="body_table"] {
width: 420px!important;
}
table[class="column_table"] {
width: 100%!important;
}
}
This technique ensures compatibility with most of the email of clients.
Changing table cells display property
The second way to built multi-columns email, is more elegant and uses native CSS rules.
This technique consists in changing the default table cells display property when device width decreases. This causes the cells to re-stack vertically:
table[class="body_table"] {
width: 600px;
}
table td[class="column"] {
height:100px;
width:200px;
}
@media only screen and (max-width: 480px) { table[class="body_table"] {
width: 440px!important;
}
table td[class="column"] {
width:100%!important;
display: block!important;
}
}
Optimizing images for mobile
In responsive emails, images don’t require anything more than the responsive technique (img {max-width: 100%;}) we currently use.
Now to make sure the messages on images are readable is a different story. Because of the limited amount of screen available on mobile viewports that images have we need to consider on how to property display our message. However, solid CSS support in clients like iPhone has gives us a number of ways you can be clever about their use.
Using background images for better headers
Normally you wouldn’t recommend that anyone use background images in their email, but in the case of iPhone and Android default Mail, we’re using clients with solid CSS support and all the benefits that media queries can bring. One of these benefits is being able to substitute images when an email campaign is viewed on a mobile device, by hiding the original and letting the beautiful, mobile-friendly image shine through.
Traditionally, we’ve recommended that images be resized as to fit within the viewport of mobile devices. However, the issue with resizing images in this way is that it can make any information therein too small to read or understand. A better option is to create a unique image specifically for mobile subscribers. Surrounding the image in a table cell or div does this, then creating a media query that hides the original and shows another header image as a background image instead.
IN CONCLUSION
Responsive email design is still a compromise. But as technology progresses it’s becoming easier to provide users with appropriate layouts that they can effortlessly consume and interact with. Growing support for media queries in email has changed the landscape of mobile email optimization and provides us with a platform to improve the user experience on more devices.
The mobile landscape is changing and likewise, so is the techniques for best catering your email for the variety of email clients out there.
