Increase relevancy by thinking responsively

Sean Shoffstall, Ozone

Mobile has become the norm, and marketers are challenged to coordinate their efforts with this chameleon landscape. Responsive email design takes the idea of “the right message at the right time” to the next level by delivering the right “experience” to their audience.

Using a technique that automatically reformats and resizes email for optimal viewing on various screens, responsive design ensures that the most important messages fit the viewing screen while hiding nonessential elements from the mobile reader. Marketers can therefore provide optimized experiences seamlessly across platforms (mobile, tablet, and desktop) within a single email.

With 88% of smartphone users checking email on their phones daily, responsive design is now a must for your arsenal. By tailoring your user experience, copywriting, and technical specs to both mobile and desktop audiences, you can modify your email marketing campaigns to be better consumed across devices.

Accounting for the device as well as the content ensures the best user experience and, of course, drives conversions.

UX: Consider how you could modify your current templates for mobile devices, bearing in mind the following four factors.

1. The maximum width for content on each device type.
2. How the content needs to wrap or stack based on device.
3. Readability: On mobile devices, larger font sizes and buttons are key to higher conversions. Don't use fonts smaller than 14px. Buttons should be 40px high. (Remember, it's a finger not a mouse.)
4. Secondary content can be hidden in the mobile version.

Copywriting: Responsive design is further motivation for crafting your message as concisely as possible. Thinking responsively means shorter copy for mobile with stronger calls to action, and, as screen size increases, being more descriptive.

1. Make sure the payoff is in the first sentence of a paragraph so copy is easily edited down for phones.
2. Make bullets your friend with short punches at the front.
3. Think about line wrapping and how increased font size will affect copy real estate.
4. Keep the detail on the desktop version—people check both.
5. Consider whether the call-to-action will vary between devices.

Technical: This is where everything pays off. By using media queries in style sheets and doing something all email marketers have been told not to—putting style in the header—marketers can target only the viewports that are necessary for a particular campaign.

Fleshing out all the technical considerations is a topic for a separate article, but here are some ‘gotchas' to watch out for:

1. Separate your mobile and desktop actions with discrete tracking tags.
2. Remember Retina Displays when using your @media queries.
3. If your CSS isn't working, try important tags; they are your best friend when coding responsively.
4. Develop images appropriate for the screen size.
5. Stack your table layouts using CSS.

Responsive emails require more setup at the get-go, but once you've nailed down a process and have templates that accommodate new designs, they become much more turn-key. Enjoy, and think responsively.