As my intrepid Content Bureau colleague Todd predicted, 2013 was a year in which we saw the rise of responsive design, with apps including Facebook and Instagram becoming much more device-aware. We also saw a continued rise in smartphone users and their nearly obsessive email habits. Another trend observed firsthand: More and more clients requesting branded email templates that will work great no matter where the audience receives them. Based on our experience, we’d like to share some guiding principles for crafting responsive emails that will work well on a wide range of devices: Measure twice, code once As with any creative project, particularly email templates, the first step is planning. It’s worthwhile to wireframe both desktop and mobile versions. Consider how many departments will be utilizing the templates, what level of customization they require, and what common repeating elements all stakeholders need to use the system successfully. Time and again, we find it’s better to measure twice and code once. Keep it simple An unfortunate side effect of the exponential growth of mobile is the corresponding decrease in the attention span of our audiences. As such, a golden rule of responsive email design—and any email design, really—is to keep things simple. Keeping your message clear and concise is more important than ever when communicating through mobile channels, and a simple, clear design should follow suit. Make branding a “top” priority The top of the email should contain little more than your branding. You’ll want to retain the brand’s visual integrity when it shrinks down and then waste no time getting to the headline. Ideally, you can utilize background color specified in the code and a transparent PNG for the logo, as this gives you the maximum amount of flexibility in the implementation. Focus on headline appearance Headlines should be brief, big, and set in type that is universal. While support for web fonts in email is on the rise, it’s still (sadly) safest to use fonts like Verdana, Arial, Georgia, and (gasp) Times. Type size should be a design element you rely on to communicate hierarchy of information, with the most important messages being big enough to read quickly or skim on a mobile device. Lean on columns The body is where you’ll be glad you planned well. If you’re likely to have lots of inserted images or graphics, sidebars, and several areas of content, have no fear, multiple columns are here. They can collapse easily into a single column for mobile. One thing to keep in mind (and control in your code) is the order in which your email elements—columns, graphics, and other content—will appear once they collapse. Also remember to size and specify images, so they won’t dominate the screen when they shift to a one-column layout. Once you’ve finished designing and coding your email template, we highly recommend using a service like Litmus to test your email on a variety of devices. These basic principles will help you get started with creating a responsive email design template. Of course, if you’d like a little expert help, contact us. Benjamin Lovejoy, Creative Director
Originally published by The Content Bureau. Click here for the original post.
