Standard email best practices were developed to optimize email for desktop users viewing through Web browsers or email clients. However, email is increasingly being read on mobile devices. According to Return Path, mobile email open rates increased 34 percent in the second half of 2011, while webmail and desktop opens declined. Which best practices still apply to designing email for a mobile world?
In fact, most email best-practice advice leads to designing emails that are scaled down and cleaner. Based on experience, a clean and simple design is one of the best solutions to overcoming spam filters for acquisition email marketing. The bonus is that it renders nicely on a mobile device too. Here are the 10 top email best practices when designing for mobile devices:
1. Aim for 450 too 500 pixel width if you want one template for both desktop and mobile users. Conventional emails are set to a fixed width between 550 and 600 pixels, which is ideal for average desktop computers. However, mobile screens are much smaller; the most common mobile email readers are in a range of 320 pixels.
iPhones allow for a 300-pixel width when held vertically and a 480-pixel width in landscape format. iPhones also resize emails to fit the screen, but many other smart phones don't, so it makes sense to design for the lowest common denominator. The benefit is not only that you ensure the recipient sees as much of your email as possible, but also that it limits the aggravation of scrolling side to side when viewing on a mobile device.
2. Using images and alt tags: Image to text ratio is another factor to contend with when dealing with spam filters, so a 60/40 text to image ratio should be maintained for best results. Image file sizes need to be considered because a mobile device will not load images as fast as a desktop or laptop. Not to mention, they eat up those valuable limited data plans. Try to keep the size of each image at 20k or less. The overall file size of the email should not exceed 50k to 70k. Do not use Flash or gif animations, they won't work and just add to the overall file size of the email.
Alt tags are snippets of text related to an individual image that are commonly used in email so that before an image loads, the user has an idea of what the image is, what the offer might be, or the overall theme of the email.
3. Keep offer text above the "fold" area (top 200 to 250 pixels). This area is prime real estate for the 3 to 5 seconds a prospect is focused on your email message, so it needs to have useful, readable text not embedded within an image that may or may not appear. Be mindful to incorporate branding and offer-driven text above the fold.
4. Use a clear call-to-action button and clickable url links above the fold. An actionable "Learn More" or "Buy Now" call-to-action graphic should be placed in a location high up in the email to entice your reader to advance to the next step in the selling process, but use it in conjunction with HTML text that will be visible when images are disabled. It should also appear as a text based link so it's easily clickable.
5. Use one-line pre-header text to outline the offer. Pre-headers are usually 1-2 lines of HTML text at the very top of the email. They are ideal for hand held devices to highlight an enticing offer, making it the first thing prospects read before they even consider downloading images. You can opt to include a mobile friendly url link to a hosted online text version of your email that is fully optimized for mobile users with limited text and images, but really the goal is to design something for everyone.
6. Avoid 'spam' trigger words that might trip filters. Spam filtering technology works to weed out unwanted and unsolicited email messages to help consumers maintain a better inbox experience. Every email passes a filter and the contents (words and phrases) are assessed to determine if the message is spam. Any and all words contained within the message and subject line are scored high or low. The higher the score, the higher the probability that the message is spam. A simple Google search can help you find listings of common spam words or characters (i.e. "Free," "risk-free," "guaranteed," "!!!").
7. Avoid dark backgrounds with white knockout text. The use of darker-colored background tables will be removed by many email readers, and white knock-out text will not be visible if the colored table is stripped.
8. Use email safe fonts, avoid large fonts and red font color. Stick with common fonts like A, Tahoma or Times New Roman. Use a minimum font size of 12 pt for body copy and keep headlines around 20 pt. Any larger, and the risk of landing in the junk folder increases since some filters flag larger fonts used in email as spam. Keep in mind that the larger font means you'll have to keep your content brief. You'll most likely be able to fit 10-12 lines of text on a screen. The color red is a spam trigger and should be avoided whenever possible.
9. Do not program using style sheets, java script or lengthy coding. Create the HTML using a text editor such as notepad and save the file as .html. This will require knowledge of html coding, but it allows you to create a clean and fully controlled creative. If you do not have the ability to do this and require the use of an html program (such as Dreamweaver) be sure that the settings of that program have been adjusted to only code using basic html with tables—no CSS. Do not use MS Word, layers, div tags or CSS. Avoid using paragraph tags as they are not recognized the same in all email readers, instead use line break tags (
) which render much like paragraph spacing. Using old-school, basic HTML coding and tables helps avoid spam filters and ensures the email renders correctly across multiple platforms.
10. Pay special attention to your subject line. It's actually heavily weighted in spam scoring and perhaps much more important than the actual creative design.
Every email communication should be designed with these tips in mind to help improve inbox delivery and overall campaign performance. It's important to note that the best practices of email design for prospecting and acquisition are much more stringent to accommodate for spam filter issues. CRM-based emails can be more flexible with their design and subject line selections. The ultimate goal is to cast the widest net possible for recipients to receive and read emails quickly and easily—no matter what device. Once delivered and read, advance the user through to an effective (and mobile-friendly) landing page that reinforces the offer and brand, and you are on a path to campaign success.
Christina Galbornetti is Director, Creative Services at New York-based database management and marketing services firm V12 Group. Reach her at firstname.lastname@example.org, and find more of her writing on best practices, design, HTML programming and emails for mobile devices in the V12 Group's Email Resource Center.
Related story: Blockchain Is Eating Commerce