Building email newsletters is a bit of a black art. Modern browsers have come a long way since I first started building websites in the 90s. (Yes, it’s been since then!) Unfortunately, email clients are stuck in a strange time warp using older technology and standards. Some versions of Outlook still use the rendering engine from Word 2007! And in fact, some techniques I used in the 90s and 00s are still relevant today for building newsletters which feels kind of crazy, decades later.
I had a long call with a friend and former colleague, Patrick Belford, who builds and sends email newsletters for a variety of big clients. He was generous with his time and advice. His advice might be useful to you when designing your next email newsletter. (You are sending email newsletters, right?)
We reviewed a recent newsletter that Munter Westermann had built and discussed the technical issues that we had encountered. He had some advice that I want to pass on to you.
The biggest culprit (and to web developers, it’s no surprise) is Microsoft Outlook. There are many different versions of the software on different platforms and they have varying degrees of support for what has long been standard in your web browser. So this means that when I build an email newsletter, I have to take into account Outlook’s quirks and adjust for them.
Here are my four big takeaways from my conversation with Patrick:
1. How to Handle Text over Image Backgrounds
We ran into trouble putting the email recipient’s name over a background image. This had to be included as text (instead of as an image) since it was unique to each recipient. Displaying text over an image in email is problematic because of uneven email client support and again Outlook being the big culprit here. There are some hacks for achieving this but they don’t work in all email clients. Patrick’s recommendations:
- Embed text into images. But this doesn’t allow dynamic text (like the recipient’s name) over images
- If custom text is required, then consider if it’s acceptable to have the text over a solid colour for those email clients where the background image won’t display since we can reliably display text over a solid background.
- Try to split the image into sections so that any editable text sits on an area of solid colour. Then display the text only in that area of solid colour. This often involves modifying the image. Here’s an example of this technique. It looks like there’s one background image but in fact there’s an image at the bottom and matching solid colour at the top:
2. How to display your Chosen Fonts
Again, email clients will show fonts differently and some will not even display custom fonts. Patrick’s recommendation:
- Where using a specific font is essential, make text into images
- Set appropriate fallback fonts – e.g. if using a sans-serif font, specify fallbacks like the ubiquitous Arial and Helvetica
Bottom line: without using images, we can’t guarantee font display.
3. Use a single column layout
We’ve made it work to have multi-column layouts but these get tricky when doing a staggered 2 column layout like this:
The challenge is making sure this displays properly on mobile when everything has to be stacked in a single column. Workable but having multiple columns is a potential point of failure. Having everything in a single column automatically makes it work on desktop and mobile without fancy gymnastics.
4. Get to the content faster
Drop many header elements at the top of the newsletter to improve engagement. Get to the meat of the newsletter faster by removing logos, social media, and other similar elements at the top of the email. This is part of the reason for the success of newsletters that look like a simple email with no formatting at all.
When building email newsletters, I’m dealing with the concept of ‘graceful degradation’ : ” the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them.” Source: W3C
Email newsletters make that even more challenging than web pages because of the wide variety of email clients and the poor support for modern standards in many of them (I’m looking at you, Microsoft!).
Hoping this helps you when designing and building email newsletters. These are some of the things I’m thinking about when I build a newsletter, either from my design or from yours.