Product Tip: Making Emails Suck Less
Creating responsive HTML emails that work in any email client — With Foundation for Emails
According to the article below by campaign monitor, email marketing is the king of the marketing kingdom with a 4400% ROI and $44 for every $1 spent, with most emails being opened in phones. With the introduction of more smartphones and more email clients, we have even more considerations to deal with when building HTML emails.
At a time where there is an explosion on devices, we need to keep up with designs for different screen sizes, responsiveness, general email interaction and user experience. Email is a great marketing medium for products and thus can not be ignored. It is one of the ways to refer and convert more customers to use existing products and thus need a great first time impression.
In designing these emails, we are faced with a huge task of considering how these emails will appear when sent. We have to think about:
- Email clients
- Email service providers
- Different engines to render the emails
Coding for the web has seen increased attention in responsiveness, accessibility and standardization for rendering HTML and CSS in all the major browsers.This has unfortunately not been the same rate when it comes to email clients and therefore creating HTML emails that will be used in varying email clients has not been fully standardized. There is a huge number of old and new clients that range from:
- Desktop apps (Outlook, Thunderbird Mail)
- Mobile Clients — Different screen sizes and OS
- Web Clients — Different browsers(Yahoo, Gmail)
Coding HTML emails is different than coding for the web, as it uses table based layouts ( more like an old school method), inline styles and has to accommodate all the above clients. How then can we achieve this with ease?
The likes of Google have recently been making strides in email responsiveness
When you send emails, your recipients might read them on a computer, tablet, or phone — or more likely, all three. However your message might look different on all these devices. Later this month, you’ll be able to use CSS media queries with Gmail and Inbox by Gmail to ensure that your message is formatted the way you intended, whether it’s viewed on a computer, a phone in portrait mode, or a tablet in landscape mode.
There is two main ways for email development and design:
- Use nested tables — Generally this is all about nesting tables. Using the modern CSS styling may not be supported in most cases. It basically a demanding task of using a huge chunk of nested tables.
- Use a HTML email framework — As with most other frameworks, a lot of heavy lifting has already been done. Creating responsive emails using this approach is more safe (better UX) and saves time. To quickly create responsive HTML emails that work on any device and client, the likes of Foundation for Emails comes to the rescue.
Foundation for Emails (previously known as Ink) is a framework for creating responsive HTML emails that work in any email client — even Outlook.
The HTML/CSS components have been tested across every major email client to ensure consistency. And with the Inky templating language, writing HTML emails is now even easier.
The next step after design and development of these emails, we have to test before sending them.
There exist several tools for email testing:
Thus beyond an email being a spam, sending emails and tracking them, there is need for a product team to think about the responsiveness and UX for these emails.
Below is a more detailed resource on HTML email development
