Email marketing: Why design for all devices (especially mobile)

Posted By: Dave Kopf
Post Date: 02/14/2017

WHEN IT COMES TO EMAIL MARKETING, you have to be all things to all clients. You customers are likely looking at your marketing emails through desktop computers, laptops, smartphones, tablets and webmail services (in computer parlance, these are called “clients”) so are you formatting your emails so that they read well on those clients?

You should be. According to the “U.S. Consumer Device Preference Report” from MovableInk, 49.5 percent of emails are opened on a smart phone and 16.8 percent are opened on tablets. And it may be more for you (see “Dealer Q&A” below). So that email you designed might look good on Outlook, but does it look good on an iPad? How about if someone is reading that iPad turned on its side?

Ensuring your emails look good on a variety of devices is a key email marketing challenge for powersports retailers and service providers. You can work overtime to create a great email marketing piece, and follow it up with painstaking efforts to come up with a subject line or pre-header that will get them to click, but if the email is tough to read because its design isn’t well-suited to the recipient’s client device, then they’re going to delete it – without a second thought.

So with all the different types and versions of email client software, the various webmail tools, and the multiplicity of smartphones and tablets being used to read your email marketing campaigns, how do you ensure your messages are attractive, engaging and, above all, readable?

The key to success lies in responsive HTML design. Responsive design is a web design approach that dynamically adapts the layout of an HTML document, whether an HTML web page or an HTML email, to fit the size of the screen. The design elements are sized based on percentages of space that they take up on a flexible grid, rather than fixed pixels. It doesn’t matter which type of device accesses the document; the design of that document will adapt to the screen, thanks to the grid and percentages approach. See it for yourself: Read a responsive page on your phone, and it will look much like you’d see on your tablet or desktop. Turn your phone sideways, and the responsive design will stretch and re-proportion itself to fit that new horizontal configuration.

The key element to understand with RESPONSIVE design is that only ONE design is created and used.

The key element to understand with responsive design is that only one design is created and used. This differs from “adaptive” web design, in which different web designs are created and then served up, depending on which client is trying to access the page. (For instance, the server sees that a smartphone is trying to access the page, and so it sends the design that was created for smartphone screens.)

While the adaptive approach might be a little easier to initially create than the responsive HTML, it is not “all things to all browsers” in the way responsive design is, and is not nearly as fast. Moreover, responsive design displays the same page content no matter the client, which negates any concerns regarding consistency or missed revisions.

Creating your own, custom responsive designs is not a daunting task. You need basic familiarity with coding –  HTML5 and CSS – to get started. However, if your HTML skills are limited, that should not hold you back. You might hire a consultant to create some templates for you that you could fill in with your content using an easy WYSIWYG (what you see is what you get) formatting tool, or you can simply perform a web search for “free responsive email templates.” You’ll be surprised at the number and variation of responsive email templates that are available. Anyone with a basic familiarity of web design and HTML can then take any of those templates and easily start tweaking them for your purposes.

But here’s the rub: Android. While Android’s standard email app handles responsive design, its Gmail app, which has a decent percentage of users, has inconsistent CSS support that can make it handle multi-column responsive design in finicky fashion. Bearing that in mind, it’s best to approach your responsive e-mail design in single-column format until that technical limitation changes.

It’s probably best to stick to single-column design, anyway, because it looks good. Single-column designs viewed in email are clean, attractive and look engaging given the right graphic treatment. Moreover, they fit the medium of email, which is, by its nature, a scrolling string of text. Pair your single-column design with larger, clearer text (13 or 14 point font sizes), and the email should display well across multiple clients clearly.

Once you’ve developed your design and you think you have everything looking pretty good, test it out. Every member of the your team with a different client device should receive a test message to see how the message looks on it, and they should be ready to speak up if there is a problem with the way the email looks. This includes desktops and webmail clients. If you use a bulk email campaign service that offers virtual email client testing tools that let you see how your messages look across an even broader array of clients, applications and versions, use them.


“Through email marketing we’re seeing 66 percent mobile opens and 33 percent desktop, and in paid social media ads we’re seeing a 97 percent mobile, 3 percent desktop split in our engagements.” – C.J. Copley, marketing director, Killeen Power Sports, Killeen, TX

“We estimate that it’s now north of 50 percent.” – Bob Kee, co-owner and co-founder, Destination Cycle, Kerrville, TX

“I would expect 90 percent of people are receiving both mobile and PC, and the remaining 10 percent only PC.” – Sean Wilkinson, sales and marketing manager, Trev Deeley Motorcycles, Vancouver, BC

“About half.” – Andrea Tarnick, advertising manager, Star City Motor Sports, Lincoln, NE


« Return To The List