As I detail in my next post, I offer clients an e-newsletter template design and send-out management service, and have been for a number of years.
In this post I'm going to get under the bonnet and outline my methods and some coding snippets of how best to do this, from what I have learnt.
Tables are dead. Long live the table!
As you'll possibly already know, tables for layout are still very much the done thing when it comes to email newsletter coding. Also included are some other rather old-school coding methods, which I'll list later. It is 2013 isn't it?! You wouldn't think so!
The reason for having to code things this way mainly comes down to the Microsoft Outlook email software, which uses the Word engine for displaying HTML in a number of its versions. And if you've ever tried to get standards HTML and CSS working in Word, you'll understand the issues at hand.
The outlook looks grim
The Outlook programs are still widely used, and it seems users are reluctant to upgrade or try anything new. You can almost sympathise, as email software is a different kettle of fish to web browsers - where uses can simply upgrade, or change browser, import their settings and bookmarks, and away they go. There is more to sort out when changing your email client.
Gee! What's wrong with the mail?!
Surprisingly Gmail is also rather laggy in support - but as it is web-based, I do hold hope of improvements coming sooner rather than later. The rest of web and desktop based email software are also not without their individual quirks.
Is there nothing that can be done?!
The "Email Standards Project" has been around for a number of years, pushing for improvements whilst also providing updates and useful advice. To quote from their current home page:
"The Email Standards Project works with email client developers and the design community to improve web standards support and accessibility in email.
Our goal is to help designers understand why web standards are so important for email, while working with email client developers to ensure that emails render consistently. This is a community effort to improve the email experience for both designers and readers alike."
You'll note a lot of "green" from successful acid tests. Great. But the unfortunate issue is that the software with a poor performance does account for an estimated 20-30% of the market share as it stands.
Although a plus side of the mobile explosion ...
... is that the number above is on the decrease with more and more people accessing their email on smart phones. Of course, mobile email does throw a whole new set of challenges into the ring, but at least they are challenges where we can use better HTML and CSS to solve them. Rather than old, inflexible, and often unpredictable methods to create designs with.
And so, some tips for the here and now
The points below will help minimise the amount of hair you remove from your head in frustration when trying to get designs to display with consistency:
tabletags for layout
- Nest tables where you have "layouts within layouts", so to speak
widthvalues on both
tdelements, where appropriate
alignmethods for aligning elements - not floats or CSS
- Keep your mark-up clean, and avoid unnecessary white-space
- If you want a
bodybackground colour, also create a 100% wide container
tablewith the background colour repeated on that and the corresponding
- Avoid background images if text is unreadable when the background isn't displayed
- Use background colours as fallback for background images where possible
- Write CSS inline, and also use sparely - if you can achieve a look using older methods, it's probably better to do so
- Avoid shorthand in your CSS
display:blockto all images - to squish a known Hotmail "extra space" bug
And for moving forward
Designing and coding email newsletter templates for mobile and more advanced software is all about progressive enhancement. If you can add extra effects using CSS then do so, but ensure that you aren't "breaking" anything on fallback - especially in terms of layout. Apply your enhancements as if they are merely "the cherry on top".
If you have mobile in mind, it may also be useful to design and code your template using % values. When using table tags you can be "liquid" with your layout, which is one of the main attributes of a responsive design. If this isn't appropriate for whatever reason, I find keeping the design to 600px is a good comprimise - it will look good on standard desktop viewing panes, and generally be scalable and readable on modern smart phones.
I hope all this helps. G'luck :)