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 you 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 look and behave a bit different in different browsers, so email can behave the same, 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 it’s not placed, and on other mail clients everything could look perfect.
So then how we could create an email that will look identical everywhere? Answer is in simple and retro design and developer must know what is possible and how. 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 how to develop a proper email. That experience comes with time, but we’ll write few guidelines – for designers and for developers.
Long time ago, most popular email client was Microsoft Outlook. Windows, as dominant operating system, pushed his own email client, and for those reasons we got some starting point, by which we need to adopt our expectations out of an email. Outlook rendering engine was backed by problematic Internet explorer, which, we can freely say, didn’t loved the web(nor the web loved him). It was sluggish, not wanting to embrace new trends and technicques, and that characteristic remained until its last version.
That characteristic, that outlook rendering engine leaned on Internet Explorer, and Internet Explorer has limited view on CSS world (CSS stands for cascading style sheet or beauty make up for web ), combined with the fact that even now large percentage of people uses Outlook as default email client, we are getting to the conclusion that HTML tables are something that is properly shown in every email client in every version, so that is a foundation of every modern email template look.
Outlook 2003 render capabilities are coming from well known notorious Internet Explorer 6, where a lot of stuff wasn’t working, for example images had to be in RGB and not in CMYK format, but at least we don’t need to write HTML using uppercase letter, although some email clients requiring that as well, but fortunatelly because of usage percentage of those email clients that can be overlooked.
Because all of this, designers need to think in direction of simple design, based on tabular/grid layout.
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 wordk 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.