Everyone loves mobile. For years now, mobile has been the up-and-comer for on-the-go reading and searching. While all types of devices are used to access the web, 47 to 60 percent of email is read on a mobile device. It's more important than ever for brands to figure out how to make their emails as mobile-friendly as possible.
Correctly rendering email across a variety of devices and email clients—Gmail looks different than Outlook, different than Hotmail, etc.—can be a difficult process. Ninety seven percent of emails are only opened once, so that means one chance to impress. While creating mobile-friendly emails, it's important to remember that device does not equal email client. For example, on an iPhone 6, there are several different email client apps and browsers, which can be used to open email.
While industry trends are helpful, the best practice is for each brand to dive into their own analytics to glean what email clients and devices customers use to read email.
Unfortunately, not every email service provider or web analytics (if sending traffic back to a site) will provide accurate metrics about email clients and devices. As an alternative, a brand can take a look at customer demographics or personas. For example, a technology company with a tech savvy audience will want to focus on recent Android and iPhone devices. But a traditional B2B construction company may see its customers use the corporate favorite, Outlook. That may differ from a B2C fast fashion brand that targets customers with lower incomes who may use cheaper Android or even Windows phones. The construction company may even choose not to focus on making email mobile-friendly, while both the tech company and fast fashion brand can't afford to ignore mobile-friendly email.
A brand should focus on the top three to five email clients most popular with customers, especially if trying to prove mobile-friendly email marketing will help the company's revenue and goals.
First Step: Pick the Best Mobile Code Format
Coding can be scary. But it's very important to understand the three different types of email code design: mobile first, flexible layout, and responsive design. Email coding is particularly unique in that all code must be inline and can't call any external files, except images. Many coders compare it to the way websites were built in 1996: all inline and all tables.
Mobile first puts mobile friendliness above everything. From beginning to final send, this email is tailored for the mobile user. It's likely all links are driven to a mobile-friendly site. This is best used for those who see almost all their customers come in via mobile traffic. Mobile first sacrifices desktop design, and emails can look awkward on larger screens.
Flexible layouts are great when a brand is less sure of the degree that mobile may impact email marketing. They are also easier to code, which is helpful if internal resources are limited. Flexible layouts look great from the smallest phone to largest screen. The downside: Flexible layouts limit a brand's design opportunities and require simplicity, considering emails look the same across all email clients.
Responsive design is the most complex to pull off properly, but delivers the best design results. Through code, it tailors itself to a device and client. If a customer checks the responsive email on their phone, they may see a simple call to action (CTA), but if they open it on a desktop, there may be more images, longer text, and multiple CTAs. Responsive design uses inline media queries. Media queries can be intensive, but pay off in the end for a brand looking to ramp up its email marketing program. Responsive design's major downside is that it requires more coding knowledge, work, and ability to keep up with technology changes and trends.
Layout Hacks: Make an Appeal to All Email Clients
1. Set the width at 600 pixels.
For the best crossovers on email clients, email width should be set at a maximum of 600 to 650 pixels. While this won't cover the smallest of screens, this size will look nice on almost all devices. (Note: This is not a best practice if going truly responsive.) To take it one step further, add a minimum width of 300 pixels to accommodate narrow screen sizes.
2. Use a single column layout.
For ease of design, keep email layouts as simple as possible. A single column layout is most flexible across clients and devices. Two columns can be used if there's a good business case. Avoid complex magazine-style layouts with multiple columns since these rarely look appealing on anything but a desktop. And too many columns will distract customers or lead them to ignore important CTAs.
3. Ditch paragraph spacing for old-fashioned tables.
Both Outlook and Hotmail strip out paragraph and margin spacing from code. This means neatly-spaced text will bunch together. Instead, code emails in tables and use padding to add the extra space.
4. Add white space at 15 percent.
White space allows the eye to quickly scan and better digest information. Poorly rendered email on mobile can cause strain just to read the information, which translates to a negative emotion associated with the sending brand. By adding padding of 15 percent, the eye has room to move and relax around the text and images. This leaves more customer brain power to digest the email's message.
5. Push the font size bigger.
Similar to white space, increasing font size helps improve comprehension and makes reading easier. Many mobile devices, such as the iPhone, automatically resize tiny text. Others leave people pinching and expanding their screens to make fonts readable. A minimum font size of 14 pixels for body text and 22 pixels for headers is a good rule of thumb. (Traditional word processing set fonts as points, which should be avoided as it causes fuzziness when mobile users zoom in.)
To take it a step further, set the font using em or percent coding to be even more mobile-friendly. Setting fonts as either of these will help them scale to different screen sizes. Make sure to choose what will work best for customers, especially if emails are copy-heavy.
Image Hacks: Make Them Look Right and Load Correctly
1. Use the best type of image for email.
For crisp colors and small image sizes, JPGs are the best image file type. They'll make sure a brand's images look sharp and load quickly. If an email requires animation, GIFs are best. If it needs transparency, PNGs are the way to go.
2. Remove image "junk" and optimize for load times.
Emails are loaded on all types of devices and hooked into all types of networks. If visitors to a website expect it to load in two seconds and if 40 percent will abandon a site that doesn't load in three seconds, how long will those clicking on a brand's email wait?
While there are many complex ways to make an image file size smaller, there are a few easy hacks. Most graphic programs allow for file size adjusting. Make sure to ditch meta information about images such as color profiles and creator information. Photoshop has an easy save for web button. To make image size even smaller, they can be put through programs like ImageOptim, TinyPNG, or JPEGmini.
3. Let the code adjust images to screen size.
While adjusting images to appear clean and crisp at any size, it's important images scale with screen sizes. A simple code hack is to add style="width:100%;" to any img tag. Adjust the percent as needed for the space.
4. Keep images from popping out horizontally.
A brand also doesn't want images popping out beyond an email width. Using the above width code will cover most all email clients, but adding min-width: 100%; will stop any errant images.
5. Display alt text when an image doesn't load.
While always best practice for accessibility and website SEO, adding alt text to images is imperative for email marketing. Many clients load images automatically, but some don't. In those image placeholders, a brand wants text describing what the customer should see. This can also help if a customer's Internet bandwidth isn't strong enough to load images.
Feature Hacks: Make That Click Happen
1. Use preheaders to give the proper preview.
Most email clients give a preview of the email content, but how many marketing emails just show text along the lines of: "Email not displaying correctly? See it here." That's a terrible experience for customers and can negatively effect the brand's opening rates. Luckily, it's pretty easy to code these very important 75 characters.
2. Keep emails short and sweet.
Shorter, focused emails see much higher click rates. Ditching graphics, even a brand’s logo, puts the CTA in the forefront. While this is a radical focus on readability, brands have seen up to a 146% increase on conversion doing this.
In the age of skimming, it's vital to reduce the copy for better readability. Bullet points instead of a long paragraph of text can help solve this. Be direct. Emails with too many CTAs distract readers from a brand’s main message. The best emails only have one CTA and no more than three.
3. Optimize CTA buttons for tap-ability.
Let customers easily click on a brand's CTA by optimizing for tap-ability. There's nothing worse for a customer than not being able to click on a link or clicking on the wrong one. Make CTA buttons at least 44 x 44 pixels to optimize for sloppy swiping and tapping on a phone.
Accessibility Hacks: Make It Enjoyable for Everyone
1. Use highly contrasting colors for visual accessibility.
Every smartphone owner knows bright screens kill battery life. Many people dim screens to save power, but muddy colors can make emails completely unreadable. Not to mention, a brand wants to make sure everyone, including people with visual disabilities, can access their content. Use highly contrasting colors for maximum viewability. Test visual accessibility on emails and websites using free software, such as aDesigner. This software allows anyone to see what a page looks like under a variety of conditions and for those with specific visual impairments, such as low light, color blindness, blurred vision, and age-related macular degeneration.
2. Use media queries to change experience.
Customer experience is what mobile optimization is all about. For example, almost every marketing email's opening line reads something like “Having trouble viewing this e-mail? View it in your browser.” On a smartphone, this takes up precious real estate. Through media queries, a brand can specify that longer messages show on desktops and shorter ones, such as “View in browser” appear on smaller screens.
3. Use a flexbox solution since media queries don't always work.
Unfortunately, some major email clients like Gmail for iPhone and Android, Mailbox for iPhone, Windows Phone 7 and 8, and Yahoo! for iPhone and Android don't support media queries. With Gmail ranked as the second leading email client, it's even more important to realize media queries don't solve everything. Instead, a brand can use a flexbox approach that is a hybrid of responsive and flexible layouts.
4. Worried about coding? Get a template.
Luckily, there are email coders out there who are happy to share their resources to get one started: CodePen, BazaarVoice, and Litmus' favorite templates. Don't be afraid to experiment and test. New trends and designs in mobile happen every day.
5. Direct readers somewhere mobile friendly.
It's great to optimize emails, but customers are going to be sad if they end with a poor experience on a brand's website. Make sure all links point to places that are also easily accessible on a variety of devices.
Test, Test, Test, and Improve
It's important to test different variations on email to make sure it works for a brand's specific customers. Besides sending test emails before sending to the masses, don't forget there are tools to help. Email marketing software companies including Litmus, Email on Acid, and PutsMail allow a brand to view emails in just about every email client. These tools save time and energy to make mobile-friendly improvements. Not everyone has access to every device and email client, after all.
Creating more mobile-friendly email marketing is a solid business move. As a channel, email puts brands in touch with customers and community members directly. View email as the one-to-one message it was always intended to be. Make it accessible and see opens, click-through-rates, and conversions soar.
Share 18 Key Hacks to Make Your Email Mobile-Friendly Infographic On Your Site
About the Author
Erica McGillivray spends a ridiculous amount of time being geeky, both professionally and personally. At Moz, she's the senior community manager, wrangling 500,000+ people and co-running their annual conference MozCon. Erica also is a founder of GeekGirlCon, is a published author, and has a comic book collection that's an earthquake hazard. Follow her at @emcgillivray.
