A Comparison of Mobile Design Approaches

For marketers dealing with the challenge of multiple screens and varying viewports, it’s important to understand the differences between various design approaches. Let’s look at the differences between a desktop version, responsive design version and predictive design approach – all of the same campaign.

On the desktop version (left), you can see how the main image falls away to the right of the viewport. The user would have to swipe the screen to see what’s hiding over there. While it’s good that the text is placed to the left, it still leaves much to be desired as a mobile experience. Best practices include minimizing the friction within your design, which means not making the viewer work, scroll or swipe to get the information they need.

The responsive design version (middle) is better. The logo is larger, and the image scales to fit the screensize. While there is no visible call to action and almost too much copy for mobile, the content is legible. It looks good.

When you know the device affinity of those in your audience, you can send them the specific version that will look and function best based on the device they most likely will use to open. This is called predictive design. The predictive version (right) is clean and clear. Even with embedded images turned off, you still get an attractive, legible email — plus a call to action that sits above the fold so they don’t have to scroll in order to engage/convert.

examples

Which is better for you, responsive or predictive design? Test it and see. Use your data to understand your audience. If you’re not sure of the device type being used, responsive design could be the way to go. If, however, your data tells you the recipient’s device of choice for viewing email, predictive design offers the potential for a unique, robust experience. Start with your data.

Want more information on responsive email design? Grab a free copy of our Good to Know Guide to Responsive Email Design. It’s full of side-by-side examples like the one above, plus tips, best practices, and more.

%d bloggers like this: