Responsive Emails And
Written by Rob Lane.
Email is going through a renaissance of sorts. With mobile now a major consideration, less imagery, cleaner designs, and a tighter call to action are critical.
Of the five different techniques commonly used to create email, four are geared to deliver a better mobile experience. It’s amazing to watch the creative solutions being deployed by designers and marketers as they rush to leverage technologies that can target the rapidly growing “mobile shopper” segment. This rush is akin to the original rush to the Internet, where companies knew they had to get online or be left behind.
Let’s look at how each of the five email techniques cater to the mobile shopper—and which approaches can potentially impair the larger-layout desktop experience (roughly 50% of shoppers use a computer, laptop, or tablet which display email in a desktop layout).
2. Mobile-Friendly Email Design
This is probably where most email is at right now. Sometimes this is referred to as “scalable design” or “mobile-aware design”—but both names are misnomers as the design itself does not scale, nor is it aware of where it is being displayed.
This design technique uses bigger text both in images and in the message body. Mobile-friendly design is largely a compromise, where text often looks too large on desktop readers and too small on mobile ones—not to mention that it’s nearly impossible to find best-of-both-worlds sizing for features like menus, buttons, and social links
Apple, for example, suggests that a “touchable” item should be at least 44px high. In mobile apps the icons and buttons are chunky and that’s “normal,” but these design traits may not translate into a pleasing design when viewed in a desktop reader. (I swear everything on my MacBook got smaller with the OS X Yosemite, but many emails just get bigger.)
3. Mobile-First Email Design
This growing trend takes mobile-friendly design, skips right past the friendly phase and moves directly to exclusivity—all while still flirting with, but mostly ignoring, the desktop reader.
A phone is the design target here; the thinking is that mobile readers (roughly 50% for most ecommerce stores) will see this email perfectly, and desktop recipients (the other 50%) will still be able to read it even if it’s insanely large.
This approach can lead to some really long emails for desktop readers, especially if images are involved, and that translates to a lot of mouse or touchpad work for the reader. (Imagine the sigh of relief when they finally get down to the unsubscribe link and can make sure they never have to do that again.) If the scrolling weren’t bad enough, everything in mobile-first design is mondo sized, to the point that calls to action look obnoxious. So while this technique satisfies 50% of recipients, it creates an odd experience for the other 50%.
4. Fluid Email Design
Fluid design is pretty good; it’s somewhere between mobile friendly design and mobile first design but takes care not to fully ignore the desktop recipient (still roughly 50% of readers).
This technique requires that you use a mobile-friendly layout, but desktop-friendly sizes for fonts, margins, and buttons. Special CSS is added to make this type of email display nicely on Mobile. Desktop readers will ignore the CSS (for the most part), but mobile readers will generally respect this fancy CSS in media queries. These fancy media queries allow mobile readers to override sizes and spacing on font, margins, and buttons. This ability to “change” the appearance of the content makes email display more intelligently on a mobile device, while not looking abnormal on a desktop device.
Unfortunately designers must still take a mobile-first approach to imagery, especially imagery containing text, to ensure the text is a readable size on mobile screens. This of course means that image text may appear overly large on desktop readers.
5. Responsive Email Design
Responsive design is the Cadillac (or Rolls Royce, if that’s more your thing) of email design. With this design method, you can perform nifty tricks like converting multiple columns in a desktop design into a single-column layout on a mobile reader. The rubber ducks in the example below are reflowed from three columns into one when viewed on a mobile device. It’s the same email—it just displays differently depending on the device.
Fully responsive designs can reflow content blocks and resize things like images, margins, text, and buttons. Some implementations (like the Rare template designer) let you hide and show content by targeting mobile or desktop readers.
The ability to target content allows you to modify the message slightly depending on where it’s being read, for example you could promote your quick and easy mobile checkout process to encourage shoppers to buy in the moment, or, as in the example above add an additional button for the mobile view that breaks up the long list of rubber ducks.
If you’re an ecommerce merchant and don’t have automated email marketing campaigns setup for your store, you’re losing money. Right now.
Rare.io makes it easy to start using automated email campaigns for common challenges like: Welcome Series, Abandoned Carts, Order Follow-up emails and more! You can learn more about our powerful email marketing automation features here or go ahead and get started right away by using Rare.io for FREE.
And if you’re one of the thousands of merchants who are already using Rare’s Smart Email Marketing software and want to see how our Customer Success Team can work with your brand to grow your revenue – feel free to book a call at your convenience here.