With more and more people reaching for their mobile devices, responsive design has become quite the buzzword lately. Many websites are now employing these techniques to present a layout that looks at home on a handheld phone or tablet, but is still able to stretch its legs and take advantage of the wider screens of a laptop or desktop display.

Because responsive design relies on modern layout techniques, javascript libraries and/or CSS media queries, HTML emails did not seem like a good candidate due to the restrictive nature of many email clients. A developer needs to party write their code like it’s 1999 in order to ensure that an HTML email renders properly on all clients (especially the painfully prohibitive Outlook, which uses a Microsoft Word rendering engine instead of a standard HTML one). Therefore, divs are sacrificed in favor of table layouts, the limited CSS tags that are fair game need to be written inline for every single element on the page, and background images are left on the cutting room floor. With all these barriers, how is one ever supposed to create a responsive email layout?

The good news is that many of these necessary evils are aimed at the lowest common denominator (ahem, Outlook), and a clever developer can still take advantage of CSS media queries to pass more robust CSS rules to mobile and tablet email clients (which typically are far better at handling more modern CSS and layout techniques). So while you’ll still want to leave your layout in tables and your styles inline for the Outlook crowd, using some fancy CSS targeting you can swap out content and formatting optimize for smaller screen real estate and retina resolutions. As for those stubborn table layouts, Antwort is an extremely helpful framework that can help you collapse those cells into a streamlined column.

Now that more than half of all American adults own smartphones and mobile is increasingly becoming the primary way that users access the Web, offering just one version of your content for all devices just isn’t going to work anymore. The era of ‘pinch and zoom’ to read emails and websites is coming to a close. To see an example of how I-SITE is adapting with the times, check out the responsive email layout we did for the Fuel Up to Play 60 newsletter. Be sure to visit on both your desktop and your mobile device to see how the same code uses the responsive techniques described above come into play. It’s even Outlook safe!

Need help kicking off your own mobile strategy? Give us a shout.