I recently attended the first ever Email Design Conference in San Francisco (#TEDC13), hosted by Litmus and responsive email design was THE red hot discussion topic and it’s easy to see why:
- 48% of all emails opened are now opened on a mobile device (Source: ReturnPath)
- 56% of U.S. consumers now have smartphones and are seeing a heavy share of usage compared to desktop usage (Source: Google’s Our Mobile Planet)
- A whopping 80% of subscribers will delete their email if it doesn’t look good on a mobile device (Source: Litmus)
This means that more and more people are seeking out content any and everywhere they are – and they’re going to expect that experience to be optimized for the device they’re using.
Even though responsive design is now expected by subscribers, TEDC13 Speaker Ros Hodgekiss revealed that only 11% of newsletters are actually optimized for mobile devices! That’s an extremely low number considering that majority of people say they will delete your email if it isn’t optimized. That’s a lot of good email going in the trash! And don’t think subscribers will check your email again on a desktop either – only about 2-3% of folks will actually do that.
The two biggest challenges (in my opinion) as to why only 11% of newsletters are optimized for mobile devices are knowledge and time. Admittedly, coding for responsive email is a little advanced and you’ll need to be pretty comfortable with HTML and CSS and have quite a bit of patience (read: time).
Also, now that there are more devices out there than we can keep up with, we’ve noticed things are starting to get confusing with the terminology and methods that are used when coding for devices: responsive, scalable, fluid, and skinny. We have had clients ask which coding method should be used based on the device when that’s not the purpose of the different methods. The method used should be based on the challenges you have for creating an email along with what works for your subscribers.
We won’t go into how to code – there’s tons of articles out there that will show you (check the links at the end of this post) but we’ll breakdown the different coding methods to make sense of them and when it’s best to use them to overcome the challenges of knowledge, time or even both. Part 1 will focus on the two most advanced methods, Responsive & Scalable and we’ll discuss the two easier methods, Fluid & Skinny in Part 2!
Responsive Email: High Intermediate – Advance+ Level
The rundown –
The email makes use of media queries to apply different sets of CSS that affect the layout, the font and the image sizes depending on the width of the device being used to view the email. The entire layout of the email will shift, allowing two and three columns that are viewed on a desktop email client to become one column, stackable sections on a mobile device.
Advantages -
Not only does the email adapt to any screen it’s being viewed on, other features can be implemented like hiding/revealing sections, swapping content and images, using fixed position Call To Actions (where the button will stay at the top or bottom of the screen while scrolling) and changing colors for better contrast. It also eliminates the need to create a different “mobile” version and having a link pointing to it.
Disadvantages -
Regardless of knowledge level, responsive email design does take a little bit of time due to coding several sets of CSS and testing them all in different mobile environments. If you’re not CSS savvy, the coding techniques can seem intimidating so it’s not really “easy” implement if you’re looking to get an email out sooner rather than later. Because responsive design gives ultimate control, it’s better to use raw HTML code instead of a template where you don’t have access to the code in case you need to tweak something. If you’re not comfortable with HTML, it might be easy to get lost in all the <table>, <tr>, and< td> tags and might be hard to troubleshoot.
Best to use when -
You have time to dedicate for experimenting; it’s a perfect way to beef up your CSS skills! Best to use when you’re ready to make your email campaigns awesome and engaging for both your desktop and mobile subscribers – you’ll find the time and patience to get your responsive email just right.
Does it meet the two challenges?
The benefits of responsive design outweigh the fact that when it comes to time, responsive isn’t a quick solution – at least not initially. When we first integrated responsive design into our newly designed newsletter, there were learning curves to overcome, previous techniques to revise, design decisions that were hard to make, lots of time dedicated to testing, tweaking and even starting over on some of the sections. But once the code was completed and rendering tests came back without errors, it was well worth it. We now have code that is optimized for most mobile devices and it saves time from coding from scratch for future sends (even though we may have to tweak classes here and there). Not to mention from all the sweat and frustration (maybe even a few tears), we now have a pretty solid experience that added to our knowledge. We’ll know what to expect when making the next responsive email and will be better and faster at troubleshooting!
Scalable Email: Any Intermediate Level
The rundown -
The email is designed with only one layout for both desktop and mobile devices. However, when viewed on a mobile device, the layout dimensions naturally shrink just like viewing a desktop version of an email on a mobile device would while the text and images are still large enough for easy reading.
Advantages -
Pretty easy to implement, there aren’t any new coding techniques that need to be learned. As long as the designer considers the outcome for a smaller device, like button and font sizes by keeping them big but still looking good for desktop, this is an easy way to start considering mobile devices. The creation of the email should be a lot faster than using responsive design as you won’t have to fiddle with the code as much and there won’t be a need for so much testing to see if columns stack properly.
Disadvantages -
The time dedicated to a scalable email will need to be directed at the design, not the code – specifically simple design. When it’s viewed on a mobile device, simple images won’t lose their context and simple, minimal text won’t be too much in a small space. Two and more columned sections are typically not used but in some cases, like the JetBlue example, sections can still be used as long as content is minimal and/or good sized images are used. So more time in the design, code and testing areas will be needed to make sure columned sections render properly across all devices. Because there’s only one layout for both groups, the experience isn’t so much optimized for each group, but rather it’s a common ground between the two of them.
Best to use when -
You’re not quite ready to leap into responsive email design but want to consider your mobile subscribers for an upcoming send. You’ll still need a little bit of time to test the design results to find that common ground but it can be used relatively faster than responsive design. Scalable is also perfect for an email that doesn’t contain a lot of content as it won’t look crammed on a smaller screen.
Does it meet the two challenges?
Scalable definitely takes care of time and knowledge when you’re short on both – but you’ll have to figure out if you’re willing to put in the extra time to go ahead and make your emails responsive. You’ll need to consider if not having different optimal experiences for desktop and mobile subscribers, but more of a common ground experience, gives the subscriber what they ultimately want. You can also use scalable as a way to “dip your toe” into responsive design by incorporating a hybrid method, using one layout for both desktop and mobile with optimized content (scalable) but including media queries (responsive) to have ultimate control over font and image sizes and use features like hiding elements for a mobile device. A hybrid method helps you gain knowledge over time and you’ll feel more comfortable if you decide to convert your email completely to responsive.
Recommended resources:
Responsive Email Design from Campaign Monitor
An awesome online guide on why you should optimize for mobile, how to code responsive layouts and handling other elements like images.
Creating a Responsive HTML Email Video series
If you’re a Lynda.com subscriber, this video course gives you hands on training for designing an email for different screen sizes and email clients.
Hold The Phone – A Look at Designing for Smartphones
We explain scalable email design with a hybrid twist. There’s also an email example that you can download and experiment with on your own.
I Just Called To Say: There’s More Designing for Smartphone Tips!
An extension of our scalable email design guide that contains results from pushing the envelope with images, coding and layouts.
If responsive and scalable email design are a little much for you, check out part 2 for easier methods!
Until next time – happy designing!