By 2021, there will be 6.3 billion smartphones in the world. This is the data revealed by the latest Ericsson Mobility Report, which shows an unstoppable trend that email marketing must adapt to: it has to gear design and content to how things are read on mobile devices, which is increasingly fast and intermittent.
We often ask the fateful question, “How do I fit my template into the mobile display without losing the depth and accuracy of my message?”. In fact, creating emails for mobiles is simple as long as you revolutionize your point of view, putting the mobile at the start of the creative process and not at the end. This is the mobile first theory: it is easier and more efficient to design mobile templates that can then be enhanced with more features for desktop use than desktop templates that lose elements when viewed on a mobile.
To do this, you need technologies and good examples to gain inspiration. So here are 10 tips to create emails with effective and responsive designs, supported by the BEE editor‘s advanced features, with several successful campaigns of well-known international brands.
1. Make your responsive emailÂ a teaser
We know thereâ€™s a lot you want to communicate to readers on your mailing listÂ about your upcoming event, newest product, biggest sale, or company announcement. But your email is not the place to get into detail. Think of your email as a teaser for the main content of your messageâ€”which can be found on your website after readers tapÂ your call-to-action button. Hereâ€™s a great example from IFTT: theÂ message isÂ short, focused, and to-the-point, leading readers directly to the CTA.
2. Create a hierarchy within your responsive email
Create focus and organization in your email byÂ telling yourÂ story in a hierarchical fashion. Envision how your message could be structuredÂ using theÂ inverted pyramid model.
Here isÂ a great example of this method in action in an email from InVision:
Each section begins with a compelling visual element, followed by a short, bold headline with supportive text that leads directly to a call-to-action buttonÂ makingÂ it clear what to do next. Itâ€™s an excellent way to communicate quickly and get click-throughs from readers with short attention spans (i.e., all of your readers).
3. Your CTA should never say â€śClick hereâ€ť
Donâ€™t waste space by telling readers where to click, especially because on mobile devices, readers are tapping, not clicking. â€śClick hereâ€ť isnâ€™t really a call to action. Skip it and tell readers directly what they should do.Â Use a clear, direct action verbâ€”and be concise. Try using personal pronouns like â€śmyâ€ť and â€śyourâ€ť that make your message friendly and engaging. You could try: â€śReserve my spot nowâ€ť or â€śGet my free ticket.â€ť
In other words, avoid the pitfalls of the image-only email.Â Using just one large image in your email will increase your spam score, so the email may not make it into readersâ€™ inboxes at all. It also means your email wonâ€™t be fully responsive. And if your imageÂ doesnâ€™t load, readers will only see ALT text. The solution? Always use a balance of text and images in your email.
5. Design on a grid
Grid-based designs are easier to make responsive. Thatâ€™s because HTML emails are built with tables comprised of rows and columns.Â Email editors that capitalize onÂ modular template designâ€”like our BEE email editorâ€”automatically help you arrange content in a grid while providing plenty ofÂ flexibility in arranging content.Â We checked outÂ this infographic from an Aveda emailÂ andÂ drew up lines to show how the content fell into four quadrants:
The original contentÂ was all one image, but by breaking it up into 4 separate images on a grid, we made it mobile responsive.
6. RememberÂ ALT text
Be prepared for your images not to load. Some email clients donâ€™t automatically load images, and some subscribers donâ€™t enable auto-loading for security purposes. Hereâ€™s how that original Aveda email above looks with images disabled:
ALT text allows these readers to understand your message, even without images. When writing your ALT text, remember to keep the text short. If it breaks onto 2 lines, some email clients will not display it. If you can, style your ALT text by adding styling to the image (your image wonâ€™t look any different, but when your ALT text appears, it will be the font, color, and size you specified).
7. Your email is not a website
If you follow Tips #1 and #2, then youâ€™re probably in good shape. A focused, succinct email should be designed for clarity and shouldÂ communicate a single call to action. So thereâ€™s no need to crowd the email, or the header, for example, with extraneous links, menus, and messages, like in this example from Target:
Go with simplicity. And, remember to use the data you have to make customizations.Â When someone comes to your companyâ€™s website, you donâ€™t know much about that visitor. Your mailing list, on the other hand, is another story. You have data about your subscribers. Use it to tailorÂ versions of your campaign for segmented, targeted portions of your audience to improve conversion rates.
8. Be selective with custom fonts
Most email clientsÂ will not support your brandâ€™s custom font. Use them sparingly to make a statement, like in the main header of your email, then incorporate email-safe fonts for the body of your message. Hereâ€™s a great example from Mashable:Â the blue â€śMashable / Alertsâ€ť header is in their brand font (and is displayed as an image) but the sub-header is plain text with a great HTML background color (and the following header under the images is plain text, too).
Your selection of email-safe fonts is somewhat limited, but when in doubt, go with a serif. Many brands use Arial, Helvetica, and Verdana.
9. Donâ€™t forget preheader text
An emailâ€™s preheader is a small amount of text that follows the subjectÂ line in the inbox. Hereâ€™s how to customize the preheader textÂ withÂ MailUp.
Subscribers use preheader textÂ as a screening tool, deciding whether or not the email is worth reading based on just a few words, so using compellingÂ preheader text can increase open rates. The first plain text that appears in your email will show up as preheader text.
But it needs to be short: keep your preheader text to between 40-50 characters. Once the email is open, preheaders can be visible or hidden.
10. UseÂ animated GIFs wisely
Animated GIFs are powerful visualÂ storytelling tool that work seamlessly across most email clients. Outlook is the big exceptionâ€”Outlook 2007 and newer will only display the first frame of your GIF (it wonâ€™t animate), so plan for that when youâ€™re designing.Â Banana Republic uses a question mark as its first frame in the animated GIF below so that even without animation, the message makes sense:
And hereâ€™s the GIF in motion:
Depending on the number of frames and their resolution, GIFs can turn into large files. Oversized GIFs can be slow to animate and eat up data plans onÂ mobile. Minimize the size of your animated GIF by animating only what needs to be animated; as the frames rotate, the fewer pixels change, the smaller your file size will be.
From theory to practice
For your next campaign, try to put all 10 points into practice, perhaps taking inspiration from the latest email design trends: you’ll find these in our white paper The 2016 guide to email design. Then compare your results with previous campaigns and tell us how it went!