Responsive Email Design
Responsive design is not a new concept, but with the explosive growth of mobile devices it’s starting to get noticed again, especially by email marketers.
Cisco recently conducted a GIGANTIC report on global mobile data usage that estimates there will be more internet connected mobile devices on the planet than humans by the year’s end. What’s more, they predict that by 2016 there will be over 10 billion devices worldwide...that’s 1.4 for every person in the world - WOW!
More people reaching for their smartphone as their portal to the web also means more people are checking email on those devices. For email marketers, this means your work must look good on small screens, too.
So what is responsive design?
Responsive design is basically a fluid layout that can expand or shrink to best fit the screen of the device on which it’s being viewed. If you’re familiar with HTML and have ever declared the width of of a table 100% instead of a fixed pixel width, you’re familiar with responsive design in its most basic form. The magic happens through the use of a media query, which is a special snippet of code placed within the <head> tag that looks something like this:
@media only screen and (min-device-width : 480px){insert CSS here}What the snippet above does is to check if the device viewport is less than 480 pixels, which is the width of the average smartphone screen in landscape view, and activates a special set of style commands if that condition is met. So if you're looking at a responsive design on a smartphone, the style commands that are triggered by the media query can do all sorts of handy things like increase font size to improve readability, collapsing a two column layout into one column or change the size of an image you don't want to take up prime real-estate on a mobile screen.
This is all well and good for web developers, but many email marketers still use a 600px wide template that looks good on a PC, but would trigger horizontal scrolling on a mobile device in landscape view. To achieve the best of both worlds email marketers can employ the max-width property in a media query to establish a hard upper limit a template can expand to, then set the width property to 100%. The key thing to remember here is that we’re using the max-width property to define the maximum width a table can expand to on a PC, but then establishing the width to be 100% on devices with a viewport less than 480px so it fills the entire screen of a mobile device. Max-width and width are separate properties. Make sense? It would look something like this:
@media only screen and (min-device-width : 480px){ table[id=”templateName”]{ max-width:600px !important; width:100% !important; } }
If you use a big bold header image to make your email beautiful, you’re probably thinking to yourself, “how can I get my images to resize like this too?” An excellent question, and again using the media query this can be a snap. The code looks very similar except we’re now targeting the main image of our hypothetical template and using a specific rule (-ms-interpolation-mode:bicubic;) that helps Internet Explorer 7 cope with image scaling. We’ve also set the height property to auto, it looks something like this:
@media only screen and (min-device-width : 480px){ img[id=”mainImage”]{ -ms-interpolation-mode:bicubic !important; height:auto !important; max-width:600px !important; width:100% !important; } }
Last but not least, email marketers need to be concerned about font sizes on mobile devices. 12-14px may look fine on a PC, but a font that small can be very hard to read on a small screen. Ideally, you want an end user to be able to read your copy at arms length without having to zoom or strain the eye. Again, the media query can be employed to bump up your font size for better reading on small screens. Apple recommends a font size of 17-22px for optimal iPhone viewing at arms length. To blow font size up a bit we’ll target the content in our table data cells like this:
@media only screen and (min-device-width : 480px){ td[class=”content”]{ font-size:19px !important; } }
These 3 things working together can make for a much better mobile viewing experience and keep your email subscribers happy! That being said, responsive email templates aren’t for everyone. They will definitely work best with text heavy vs. image heavy emails. Additional thought and development time needs to be put into design if you intend to make it responsive. Check to see if a large enough portion of your list is reading email on mobile devices to see if the opportunity costs of developing a responsive template are warranted.
Need help getting started? Give us a ring to evaluate your needs!