Designing and Coding Effective Adaptive Email Layouts

Today, HTML emails need to render well across desktops, tablets and smartphones to create a positive user experience - learn how you can effectively design and code adaptive email layouts.   

With the explosion of responsive/adaptive techniques on the web in the last few years, it is surprising to see how slowly these concepts have been adopted into email marketing. While we can't technically make email page layouts dance and flex with the bells and whistles seen on websites, we can alter the layout to give subscribers on mobile devices a better reading experience and increase the chances that they will follow through on your priority messaging.

Take a look at some of the emails in your smartphone's inbox: Are you squinting trying to read the text? How can you click on that tiny little textual link? Should you have to view all emails in landscape mode? Why is the email copy so long? You may not even remember subscribing.

Gone are the days of coding an HTML email that only needs to render well on desktop email clients (such as Microsoft Outlook and Mozilla Thunderbird, for example). Subscribers access their email on the go more than ever: the latest stats tell us that over 40% of emails are now opened on mobile devices. As web designers and developers it's our responsibility to create email templates that can render equally well on a smartphones, tablets, and desktops. So, how do we satisfy the mobile email masses while still presenting a well-designed email to desktop subscribers?

HTML Email Coding Practices

First, it's important to understand the principles behind coding HTML emails. We can't simply use the same responsive/adaptive coding techniques we use on the web. Email clients face technical limitations that we do not encounter with web browsers like Google Chrome and (yes, it's a good browser) Internet Explorer 10. Starting with an xHTML doctype declaration instead of an HTML5 declaration is necessary, because xHTML seems to have the fewest inconsistencies across email clients. Gmail and Hotmail will toss out any doctype declaration and replace it with xHTML Strict right off the bat, so xHTML Strict is always my starting point (and this extra picky doctype helps me to make sure my HTML code is valid).

You cannot load JavaScript into an email (so Modernizr, Respond.js and other nifty JavaScript helper libraries aren't going to be able to be utilized, as well as any JavaScript in the <head> of the document, the support just isn't there in most email clients). Most email clients will block external links, so external stylesheets cannot be utilized. Many email clients strip <style> tags out of the head of the document to prevent conflicts with their own interface layout stylesheets, so all of your CSS needs to go inline as a rule of thumb (with !important tags sometimes needed as well). I like to code all of my styles inside the <head> of the document and then transfer them inline. The rendering limitations of email clients (I'm looking at you Outlook) force us to code rigid table based layouts because they are the most consistent from client to client. <div> based layouts with floats and percentage widths simply won't render in many email clients, so we have to stick with what we know will work across the board. If you inspect the code in any email in your inbox, it is almost certainly structured within a table. Old style!

Make sure your images are optimized for the email. Cut them at the exact dimensions that the layout requires and optimize them when saving similarly to web images. The smaller the filesize and number of images there are, the faster the email will load for lower bandwidth users on slower connections. Putting in an image over 1000px wide and then using inline width and height attributes to control the size is not the right technique because the filesize of the images is still too bulky and certain email clients will render them at their actual dimensions regardless. Alt text is important for the images you do use, because many email clients prompt a user to download images and don't do so automatically.

You need to be picky about what assets you load to keep the email as lightweight as possible. Embedded fonts can't be used consistently and are another asset that mobile subscribers will have to load, so you'll want to rely on websafe fonts that best match the branding of your client. Lots of image resources are also frowned upon because users on WiFi or cellular data networks will experience increased load times. It can seem like we are coding in 1999 all over again, but it can also be a real challenge to present an elegant and well-designed email within these limitations.

How Can We Optimize Our Emails for Mobile Subscribers?

Now more than ever, we need to create simple and concise email blasts. A simple, one-column layout not only helps organize the content of the email into a logical hierarchy, but it is also easier to adapt to smaller screens as well. I've found that keeping an email at or under a width of 600px provides the least amount of rendering issues. You can't foresee what sidebar or gutter elements the email client might include (which can take up considerable real estate on newer tablets in portrait mode), so we can't assume we have a clean, large, full canvas to work with like a web browser. I like to keep email templates even narrower now, starting at around 550px wide to give subscribers on tablets in portrait mode a nice gutter for swiping and scrolling the content. But email layouts tailored for 550-600px do not translate very well onto a mobile device that may only have 320px of canvas to work with.

HTML emails are coded with the desktop layout in mind first, as opposed to the mobile-first approach seen on responsive/adaptive websites. While most modern mobile email clients like Apple Mail and Android Mail render CSS3 features and read media queries, many desktop clients do not. By utilizing a CSS media query, you can optimize the content and layout of your email for a mobile device. Although some email clients strip out <style> tags out of the head, mobile email clients for the most part will read them and also read media queries. Campaign Monitor provides this chart that has been really useful when I've been scratching my head wondering why certain smartphones weren't adjusting my layout. Surprisingly, mobile apps for Gmail and Yahoo! Mail do not support media queries. Not surprisingly, you'll have more luck with media query support on iOS and Android devices than Windows based phones and tablets.

Media queries are powerful, and give us information about many aspects of the canvas and device we have to work with, such as pixel density and available width. The following media query allows you to specifically set styles for devices whose width does not exceed 480px:

<style type="text/css">
    /* mobile-specific CSS styles go here */
    @media only screen and (max-device-width: 480px) { 		

    }
</style>

Due to a glitch in Yahoo! Mail, we have to use old-school attribute selectors in this media query. I have found that using these selectors has the most consistency in being rendered across a variety of email clients. I almost always follow the CSS rules with "!important" tags within the media query:

<style type="text/css">
    @media only screen and (max-device-width: 480px) { 		
        /* mobile-specific CSS styles go here */
        table[id=contentTable] { 
        width: 320px !important;
        }		
    }
</style>

Note that we are only trying to target devices with a maximum width 480px. We're not making the email adaptive within tablets, desktop email clients or a web browser via the online version. What kind of stuff can you do within the above media query? A good rule of thumb is to structure the email with one outermost container table controlling the width of the layout, and shrinking that down to 320px or less for mobile users. All elements within that table can then be set to 100% width, making them essentially flexible elements within a strictly controlled inflexible container. Use one big bold header image that shrinks down appropriately on a mobile device. Use "display: none;" to hide irrelevant or distracting elements from the mobile layout. Keep your message concise: your mobile user is only going to see what's at the very top of the email initially. This is where your big header image and priority messaging should be. Try to get the user to click through to the website, but don't overload them with too many links. Use button graphics for links, because they are much easier to click on a mobile device than textual links. You'll have to use an image because CSS3 button techniques will be too inconsistent across email clients.

Many newer email boilerplates include media queries targeting high definition Android devices and retina iOS devices. Feel free to use these as you see fit, but make sure that your mobile media query is adjusting the layout appropriately first and foremost. Tweaks for retina and high definition devices should be treated like icing on the cake. You can swap images with CSS using the background property for different devices and resolutions, allowing you to serve up higher res versions of images to retina displays

Most importantly, test, retest and then test again. You can't assume someone will be using the latest version of iOS or using the default email client on an Android device. The Gmail and Yahoo! Mail apps also behave differently between iOS and Android. There are still plenty of users out there on older iOS devices like 3rd and 4th generation iPhones and there are certainly plenty of users out there on older devices running older versions of Android. Keeping your layout and design simple will only help rendering consistency, and help ensure the validity of the HTML. I hand code every piece of content I put into an email to ensure it validates; I don't put too much trust into WYSIWYG editors to do that for me. Sending someone invalid HTML code is going to drastically increase rendering inconsistency.

Take a look at the gallery below for an example of how a recent email layout for the Adirondack Regional Tourism Council changes on a mobile screen.

Where Are Your Subscribers Being Sent?

It's important to understand the end destination of all links in your email. Optimally, the goal is to create one email blast to send to all subscribers, so it would make sense then to link all of those subscribers to a common destination on a (hopefully) adaptive or responsive website. If you have a separate mobile site, it is likely that mobile subscribers will get redirected to that site when they click links instead, and could just end up sitting on a mobile homepage scratching their head. The page they land on may be a redirect that has nothing to do with what they were reading about in the first place. If you have an adaptive or responsive website, everyone lands on the same page and reaches the target content. It does not seem feasible to have a separate mobile version of an email when we can create one message using the CSS techniques we have discussed. By adopting some of the responsive/adaptive practices described here into email layout, we further achieve a uniform experience for email subscribers regardless of which device they choose to utilize.

Andy Carolla - 2013-06-26

Bionique
Chugach Powder Guides
Cooperstown/Otsego County Tourism
Elk Lake Lodge
Inspire Network
Paul Smith's College
SPAC
Whiteface/Lake Placid
About Adworkshop

Adworkshop is an employee-owned integrated marketing agency providing strategic consulting and creative marketing solutions that help clients solve their evolving business challenges. Rooted in destination marketing from the 1980 Winter Olympic Games, Adworkshop has grown into an agency of 30+ talented employees whose expertise across marketing disciplines leads to innovative strategies and measurable results for destination marketing organizations, tourism businesses, active outdoor companies, educational institutions, health care companies, economic development agencies, and other businesses.

Latest News

LAKE PLACID, NY - Adworkshop, a certified women-owned marketing agency with offices in Lake Placid and Troy, announces the addition of Tait Wardlaw and Sarah Harris to its staff....

July 20, 2016

Adirondack Regional Tourism Council’s ‘Real Adirondack Stories’ Receives International Recognition

April 5, 2016
Newsletter
Sign up and stay tuned for the latest in industry news and marketing trends.
Where To Find Us
44 Hadjis Way, Cold Brook Plaza
Lake Placid, NY 12946
ph: (518) 523-3359
f: (518) 523-0255
333 Broadway, Suite 360
Troy, NY 12180
ph: (518) 687-1350