Real Magnet

Now is the Time to Consider Responsive Design

With more than 50% of U.S. mobile phone users now on Smartphones and more email accessed through mobile (44%) than desktop (33%) or webmail (23%), designing emails from a purely html, 600 pixel-wide format is like driving irresponsibly on cruise control. Without sacrificing traditional email viewing, Responsive Design allows you to optimize your emails for mobile devices by using simplified layouts and media queries within the code to render a mobile-friendly email. Responsive design can also limit what shows up on the mobile device so the most important information is not drowned out.

So what to do? Get with your internal html coder or Real Magnet’s Graphics Team to get media queries added to your email templates. Simplify your email design, preferably using a single column and navigation simplified for finger scrolling. Limit images/design elements and keep them towards the top of the email and include links not tied to images.  Place your main call to action at the top of the email and use lists instead of columns.

See below for a sample of a responsive design email as viewed from pc and iPhone


For more information, check out:

A great overview of Responsive Design

A perspective for Marketers to understand what coders need to know

A gallery of Responsive Design Websites