Increase relevancy by thinking responsively

Share this article:
Sean Shoffstall, Ozone
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.

Share this article:
close

Next Article in Email Marketing

Sign up to our newsletters

Follow us on Twitter @dmnews

Latest Jobs:

More in Email Marketing

To Send or Not to Send More Email: That Is the Question

To Send or Not to Send More Email: ...

"It's not a matter of 'one email a day is fine, but two emails a day is too much.'"

Forrester: Keep Your Eye on the Email

Forrester: Keep Your Eye on the Email

Merging email with other channels is all well and good, but a Forrester Wave analysis holds that the email channel itself could stand improvement.

Email Opens Have Increased While Clicks Remain Static

Email Opens Have Increased While Clicks Remain Static

Open rates rose to 32.9% in Q1 2014, but clicks haven't changed for the past couple of years, a study says. But why?