Great spam send up from The Onion.
HTML code for email newsletters is a deceptively complex art, and ensuring your beautiful concept looks as intended in the plethora of different email clients and platforms can cause real headaches. In this series we’ll take a look at some html email coding best practices, to find out what can really help to make your mailing render properly without it taking an age to code.
Get dirty in the code
You have to hand code emails – coding using WISYWIG will add a ton of erroneous code that’ll lead to frustration trying to get your build to render correctly. Dreamweaver can be a good tool but make sure you still code things yourself. Don’t ever use word. Ever.
Tonight we’re gonna code HTML like it’s 1999
In web coding there’s been a revolution in recent years – CSS and XHTML allows you to split content from layout and formatting, which makes coding a lot more versatile, lighter weight and easy to work with. Unfortunately, coding standards for email are still a long way behind this, for various reasons, and essentially the best way to ensure your design renders properly across most email clients is to code “old school” html, using tables to create the layout.
Look out for more HTML Email code best practice in forthcoming weeks!
There’s an interesting idea on Toddle’s blog about using Twitter to find out the best time to send your mailing based on what time and day there is the most chatter about your brand, product or market niche. It centers around grabbing the RSS feed of a Twitter search, and running it through Google Reader in order to get some tangible statistics around post frequency.
I know online experts will fret over the best time to send an email newsletter until the cows come home, and the reality is that even if there is a best time then it’s definately different for every list, client and even product range, but this is still an interesting bit of insight and it’s very simple to get hold of, good work!
This newsletter design from UK fashion retailer next is chock full of little bits of best practice for retail emails.
The one line summary and quick call to action right at the top function well as a Johnson Box, plus they have the added benefit of showing up as text in the outlook preview box and in web clients such as Gmail. Adding the date in the top corner helps make feel like part of a sequence, and something to look out for each week.
It’s interesting to note that the “contents” style links in the hero area don’t link to different parts of the email, but click through to the site. As the various pages on the next website function well as landing pages, and contain similar content to the bulk of the email, this isn’t a big deal. The vertical menu is less commonplace in email marketing but works well here, and the design of the hero area ensures important information such as the company logo, introduction and key navigation all fall within both the horizontal and vertical preview panes.
Under the introduction area we have various sections detailing ranges of products for men, women, children etc. It would be relatively simple to custom publish this content based on the sex of the recipient, for example, however as many would be gift buying perhaps it’s prudent to include “irrelevant” content in this case.
Despite being rather image heavy, the mailing is sprinkled with web text links to the next site, which still render even when images are turned off.
The Christmas background pattern is a nice touch, and would be easy to switch out for different seasons and events.
Hi there – welcome to the Email Design Review!
We’re aiming to showcase great examples of email design, identify and focus in on email design trends, and provide credible design insight to the wider email marketing community.
Please hold tight – we’re just setting up – we’re aiming to launch mid January, so please check back soon.
In the mean time why not follow our author, Elliot Ross on Twitter.