Email design evolution

If you ever questioned yourself why the heck these emails look like this in 21st century, like something you’ve seen a long time ago in your favorite Netscape browser or first Internet explor(d)er versions, there is actually a reason for that.

Web designers give their best to make unforgettable user experience(UX) for website end users, although developers can cope with those demands (although they need to be very imaginative sometimes) in most cases, primarily if end user uses modern browsers (Firefox, Chrome …), but when we go to email level, we need to lower standards. On that level, you can’t use video clips, animations, there are no different styles for elements once you place your pointer over it…

Word “impossible” can often be heard from the developers corner of the room, after designer create some innovative email design. Actually there are some rules that must be met if we want to get same look in all popular email clients, like Microsoft Outlook, Thunderbird, Yahoo or Gmail etc. You can find sometimes that the same website looks and behaves a bit different in different browsers, so email can behave the same(among email clients), but that isn’t something developers usually want or plan. That is caused by broken email structure, or thicker border throws something out of place, or border or link is in different color then desired one, or we’ll get a link somewhere where it’s not placed, and on other mail clients everything could look perfect.

So how can we create an email that will look identical everywhere? Answer is in simple and retro design and developer must know what is possible and what’s not. During design process, designer must think of excel spreadsheet, be guided by grid/table layout on one side, and on another developer must have some feel/know-how to develop a proper email. That experience comes with time, but we’ll write few guidelines – for designers and for developers.

Story begins

The rendering engine of Outlook, which historically leaned on Internet Explorer, had (and has) a limited understanding of the CSS world (CSS referring to cascading style sheets or the beauty makeup for the web). Coupled with the fact that a large percentage of people still use Outlook as their default email client, we arrive at the conclusion that HTML tables are a reliable element consistently displayed in every email client version. Thus, they form the foundation of the visual appearance for every modern email template.

So how can I make an email to look nice then?

Although problem is obvius and still present (yes, in 2021 as well), there is a list of rules that you can follow to make something what doesn’t look so bad, and without someone shouting “impossible”, and those rules are:

• Don’t complicate – simplicity is the key word here when we talk about email design. Designers need to find inspiration in tabular approach, where elements are positioned one bellow other, because developers will use the tables to make this design alive.
• Email width should be as narrow as  possible – let’s say from 650px up to 700px. Responsive layout, dependent on device screen size, is something that slowly gains support among email clients, but still we can’t rely on that, because significant percentage of email clients still doesn’t support media queries – which allows responsive layout. So that’s the reason you don’t want to have wide design (1200+ px wide ) because it would be hard to read on a mobile phone.
• Design should use only system font families like Arial, Tahoma, Verdana etc – although system font of one operating system doesn’t necessarily be a system font of another operating  system. It’s best to see this  list of supporting system font families, for example on this link. And if you decide to use some non-system font, on some elements, don’t complicate(first rule), you should place that element inside an image and in image alt attribute place that element copy, and style it like it is a word element. Reason behind this is that images aren’t loaded at first in emails by majority of email clients, unless you configure otherwise(rarely), so you would want recipient of your email to read that word(s), before images are downloaded, instead of blank space.
• Main email objective are not images, but copy, that text that someone sent you. So the objective is to have as few images as possible in your design. Because, like stated above, images aren’t visible initially. Images can be downloaded automatically if sender is in the recipient list(rarely that will happen with your newsletter), or if email client downloads images by default or is configured to do that by recepient(rarely). So in most cases – no image will be shown. So, using copy, you’ll need to encourage recipient to download them.
• Rounded corners, background images(image behind text), gradients – these favorite designer tweaks should be avoided by all costs – they will have to be resolved through an image of that section, if you want same look in every email client. Some email clients support rounded borders, others do not, some of them support  background images, others not etc.
• Don’t try using video / flash material. Some email clients struggle with animated gif images – only first frame is shown.
• Developers can’t implement independent scrollable elements inside newsletter – tables aren’t supporting this behaviour natively in some of its cells. CSS rules and HTML tags which potentially could handle this, aren’t supported by significant percentage of email clients.
• I know what you’ll say – who will track this? Heck, I’ll send an linked image instead. Bad idea – image won’t be visible, your recepient will get an empty email. For the same reason, you don’t want design with large image above copy – that image will push copy down with its height, so again recepient could get a feeling he got empty email – you can place up to 100px high image there.

Why should we use html tables for email templates

Simple reason – that is cross section of email client HTML tags support. They all support html tag.

Things get messier once we start to develop email template

Developers will go through time travel during email template development. They will use, cell attributes like rowspan, collspan for joining multiple cells horizontally or vertically, or cellspacing and cellpadding, or using font html tag. Possibly there will be also some inline CSS (css styles written inside style attribute like <td style=”color:red”>John</td>), duplicate styles, so all email clients show the same.

Maybe I’m a bit harsh towards Outlook or Microsoft, because event modern email clients have their problems. For example Gmail simply loves to detect and format parts of the copy, like if it detects phone number, it will place a link there, a link that wasn’t there before, a link that wasn’t styled as it should be. Yeah you would get a blue link there on phone number or email.

There is also something I’ve learned on the hard way, never use margins or paddings to insert a space between copy and newsletter outlines. Some email clients acknowledge margin, other padding, third ones both of them. Instead of those rules, use table cells as horizontal or vertical spacers – bummer.

Responsive layout, like I’ve already stated above, it’s still sci-fi for most of email clients, so don’t rely on media queries. I haven’t sad that you shouldn’t implement them and make life easier for those who use modern clients, just don’t rely on them.

For initial email testing, you could use some old Internet Explorer version, firefox and chrome, so you could test if everything looks ok there, for starters. If so, continue to test your newsletter in email clients (outlook 2003, outlook 2007, yahoo email, gmail ,hotmail). For this (testing email & email sending) you can use some free service, like mailchimp.

Good luck!