Althought is now easier to be more creative with emails than it was 5 years ago, email design remains hard. Mobile have been a game changer and email design should be mobile-focused (as this article is). Mobile user spend 42% of their time on email management. Email design is a delicate art : always keep in mind that you enter a user’s personal space. If you are too noisy, not relevant for the user’s current need, you will lose your privileged position. In this article we will review 5 rules that unsure email conversion.
1) Adapt to different types of email
There are two groups of emails : Marketing/Promotional and Transactional (welcome emails, order confirmations, password reset…) . Most of the design effort is invested in marketing emails but transactional emails are a great opportunity for conversion. You can use them to surprise and delight your user when they less expect it. When used well, they can bring 6 times more revenue than marketing emails.
When designing a marketing email, pay special attention to the following items :
- Subject Line (fewer than 50 characters),
- Pre-header text (important for mobile!),
- Email Layout Patterns (see next point),
- Visual hierarchy and white space
- Responsive/Mobile Optimization,
- CTA Design,
- Video or Animated GIFs,
- Content Personalization,
- Copy and Tone,
- Footer (use this opportunity to promote referral sharing),
- Support details
When designing a transactional email, pay special attention to the following items :
- Email Layout (see next point),
- Copy and Tone,
- Mobile Optimization
- Footer Finish including Legal and Support details.
- You can also keep space for cross-selling or related-products
2) Don’t send all-image emails
Some email clients don’t load image and require the user to allow image loading for your email to be displayed. It means that you are actually sending blank email. Consider performance as well. Your user are probably on the move with limited bandwidth and network connection, your email should be displayed immediately when accessing it. When using images in your design remind to compress them.
3) Choose a suitable responsive template
Email design coding is hard. You have to adapt and test your design for many different email clients and devices, write HTML using table markup and use well supported basic CSS (don’t forget to use px over ems )… You have two options here : keep it simple if you want your emails to be displayed in wide range of devices or focus mainly on your target audience (e.g. iOS users or wearable and watch users only, why not? 😉). Some useful stats : Gmail has 900m users (75% of which are on mobile), iPhone is 33% of email client market shares followed by iPad at 11% and Android at 10%.
Single column of media queries ?
You can use media queries or create an hybrid template by using a single column (max-width in px and width:100%) and media queries in order to override native characteristics (e.g links, dates and phone numbers as underlined blue text in iOS; Margin (with capital « M ») or clear image height and width for Outlook…) and provide another version for devices supporting mediaqueries. We recommend to use a single column with very limited breakpoints. Keep in mind that there is still a couple of mobile email clients that do not support media queries (iOS Gmail, iOS Inbox, iOS Yahoo, Android Gmail and Windows)
A couple of useful tools and templates have emerged in the past years
Be cautious with images
Think mobile first : when using images in your design remind to compress them. If designing for retina devices, use svg and prepare @2x images. Don’t forget to set the height and width of the image for Outlook clients.
4) It’s (again!) all about visual hierarchy
A great and simple visual hierarchy will help your email convert more. With regards to typography, make it large : we recommend to use 16px font size for text (20 for desktop) and 22 for headings. Try to keep enough white space to make the color of your Call To Action more vivid. CTA buttons should be 44px according to Apple but Google claims that 48px would be better. Play around with heading and text contrasts. Make sure your branding is consistent in your email. Oh and now that we are talking CTA, did you check if your landing page is responsive too ? Be cautious when using navbar. If you do so, make sure that it is a key element in your action hierarchy. If it dilutes the visual weight of your main Call To Action, remove the navbar. PS : make also sure your branding is consistent in your email.
5) What if despite all this pro tips your user decides to unsubscribe or cancel his account?
Do not forget that what we will remind from an experience is its emotional peak and the very end. An unsubscribed user is a user that already knows you and might come back in the future. Try to bring a bit of your brand personality when running the unsubscribe/account cancelation process, don't make it sad and dramatic! If you take this opportunity to make it fun and enjoyable, the user will be more willing to provide the feedback you should be asking on the cancelation page and predisposed to sign up again in the future.
convy is a Conversion Rate Optimization consulting company. We help your company optimize their digital revenue using proven marketing webdesign methodologies.Get started