How to Optimize Email Templates for Mobile?
Every day our inboxes are filled with examples of email design innovations that increase engagement with emails and increase transactions. As everyone who works in digital marketing knows that email is far from dead; it is one of the leading drivers of online purchasing and website traffic. Whether you are an email marketer, a designer, or just someone trying to figure out how to use email to build your small business, you likely have tons of questions about the “rules” of email design. Finding the right answers to those questions requires research and experimentation, along with the right tools.
Email design has been evolving. Developing a successful email campaign today is very different from even just a few years ago. Today the email campaigns need to be optimized for mobile, data-driven, multichannel, and visually up-to-par with current design trends for email. We need to do all of this and more with our loyal subscribers moving from one new device to another. Despite these hurdles, email marketing continues to be one of the most effective marketing channels.
In a world where mobile opens rate now account for more than 70% of all the email opens, making sure your emails are appealing on a mobile device is an essential thing to make your email campaigns as efficient as possible. While responsive design has been around for a while—it was invented in 2010—we know the term has not always been used consistently, and it is not always easy to know how to execute a mobile optimized email best. Here’s what you need to know. Responsive email design is a set of design and coding techniques that are used to optimize viewing experience on different sized devices. In other words, a responsive email is one that totally adapts to the screen size of a tablet or smartphone—layout, images, font size, and padding can all change—so that the message is easy to read and looks great.
Here are 25 ways you can make a responsive email design:
1. Use a “mobile first” approach
Working up with mobile experience and working up to a desktop is much simpler than trying to retrofit desktop content. Well, that says there is no rule that your mobile and desktop creative have to contain the same email content flow or similar design, so don’t feel you must constrain your desktop design to what is included in your mobile version.
2. Be simple and short
Just think of your email as a teaser for users. Readers will have shorter attention spans than we usually thought and they are increasingly reading on their mobile devices. Your email should be a short and sweet preview of what’s to come when users tap on your CTA button and get to your website.
3. Don’t rely on images to be the only visually appealing part of your email
Images can increase your spam score and it might load slowly, or they may not even appear at all depending on a user’s email settings. Capitalize on plain design tactics and bold HTML background colors to create a dynamic, visually appealing email without depending on images.
4. Use a readable font
This does not mean that sans-serif is the only one to use. Use a minimum of 13 px (iPhone’s min font size), as smaller fonts get scaled up by few devices and can affect your layout. Watch out for bold, capitalized words. They are harder to read in smaller fonts on smaller screens, especially when they are white-on-black, as in Sephora’s calls-to-action above.
5. Create a content hierarchy
Create center and foundation in your email by building your story using the inverted pyramid model V, as recommended by Vero.
6. Try a full-width CTA button
This will make it immediately clear to subscribers where you want them to click, and it will be easier for mobile users to tap.
7. Don’t forget preheader text
An email’s preheader is a small amount of text that follows the subject line in the inbox. Subscribers use preheader text as a tool for screening, deciding whether or not an email is worth reading based on just a few words which they can see in the preheader, so use a compelling enough preheader text which can increase open rates. The first plain text that appears in your email will show up as preheader text.
8. Don’t just say “Click here” on your CTA button
Do not waste space by telling readers where to click, especially because on mobile devices; users are not clicking, they are tapping. Skip it and tell readers directly what they should do using an explicit, direct action verb if possible; try “Download my Ebook” or “Get your free ticket.”
9. Simplify your animated GIFs
GIFs can turn into large files by depending on the number of frames and their resolution. Oversized GIFs can be too slow to animate and eat all the data plans on user mobile. Decrease the size of your GIF by animating only what is required to be animated; as frames rotate, then few pixels change, the smaller your file size will be.
10. Remember ALT text
Get ready for your images not to load as few email clients do not automatically load images, and some subscribers do not enable auto-loading of images for security purposes. ALT text allows these readers to understand your message, even without pictures. When writing your ALT text for pictures, remember to keep the text short. If it breaks onto two lines or more, some email clients will not get the image displayed. If you can, simply style your ALT text by adding to the image (your image will not look any different, but when your ALT text appears, it will be the color, font, and size you specified).
11. Use a single-column layout
When compared to emails with multiple columns, single-column emails are much easier to read, are also better optimized for mobile viewing as well, and are more clearly focused on a CTA.
12. Never use a single large image
In other words, avoid the traps of the image-only email. Using just one large image in your email will raise your spam score too high, so the email may not make it to subscribers’ inboxes at all. It also means your email will not be fully responsive. Moreover, if your image does not load, users will only see ALT text. The solution? Always use a balance of text and images in your email.
13. Make your email a teaser
Everyone wants to communicate to his or her readers with much information about your newest product, upcoming event, biggest sale, or company announcement. However, your email is not the place to get into detail. Think of your email copy as a teaser for the main content of your message which can be found on the website you send them after they tap your call-to-action button.
14. 500 characters of text is a must
Email on Acid has diligently examined and concluded that in your email you need at least 500 characters of text to pass email spam filters. The 60/40 text to image ratio is a complete myth!
15. Modify images
You are not limited to scale down images. In fact, many images lose their context as they shrink or become tuned. Consider cropping down or swapping those pictures, or even removing them completely.
16. Hide unnecessary pre-header and footer content
Unless you are obligated for legal or branding reasons, consider nixing extra text that pushes down your most valuable content. Hint: kill the “mobile friendly version” link, you are responsive, baby!
17. Prevent Gmail from clipping your email
Gmail cuts HTML emails which are larger than 102 KB in size while the iOS App for Gmail clips emails that are larger than 20KB. It is better to optimize the HTML code and reduce the amount and size of content in your email mainly for gmail clients so that your email is shown entirely.
18. Email width must be between 500 and 600 pixels
This will ensure that your email will execute at a readable size on user devices of all widths such as on mobile, desktop, and tablets. On mobile devices, the width and text will perform as specified in your mobile-responsive code.
19. Line height and spacing improve readability
Set your line height to 1.3x that of the height of your letters. So if your body is 12pt, your line height must be 16. This maintains a sufficient distance between lines which also optimize readability. Email copy should never feel too tight or too loose.
20. Treat social media buttons as subsequent calls to action
Wherever you place them, social media buttons should not compete with your email content. It is better to go with a header or footer. If they need to be included within the body, along with the featured story, then try to choose only one or two sharing options (e.g., only Twitter and Facebook).
21. Use images with small file size
The minimum size of an image allows for faster load times on mobile devices as well on desktops. Use images which don’t exceed 1MB.
22. Create dividers for long emails
As certain email goes along with content, it is time to add a divider. Including dividers for long emails will make it readable.
23. Use short paragraphs and bullets points
Make your email text scannable by giving subscribers bite-sized nuggets of information. No long paragraphs!
24. Include buttons on-brands
Add colors, fonts and styles to accomplish a look that matches both your brand and your email’s content. It should attract attention but not stick out like a sore thumb. Well, last but not least
25. The subject line
35% of subscribers decide whether to open your email or not based on the subject line itself. Try to stand out by placing some thoughts into the subject line. Try getting readers’ attention about the email with a line that asks an interesting question, offers a coupon or deal, has a “how to do,” or includes a number. Make your email more responsive and achieve higher conversion. If you want to learn how to plan, develop and send your first ever email get in and get digital at Digital Ready.