I’ve been having a look at the current best practice for the design and coding standards of HTML email newsletters. I thought I’d turn my key findings into a brief check list to act as a prompt and link to some very useful resources.

The key thing to understand when designing email newsletters is that most email clients take a rather archaic approach to rendering modern web standards. This means that the best advice is to keep it simple and tend towards the lowest common denominator in coding standards.

Use tables for layout

Using DIV tags and CSS for layout in an email is unlikely to work consistently so the best approach is to “code like it’s 1999” and use tables for layout. So nest multiple tables inside each other and set padding and margins using empty table cells.

One tip is to set the width in each table cell and not to rely on setting the width in the table tag.

I like the suggestion of using one container table to set the width and background colour of the newsletter and then nesting within it separate tables for the header, body and footer.

Set a maximum width of 600px

Emails are usually shown in environments where the screen space is limited, often they are displayed in the preview pane of an email program, so the width of the newsletter should be limited. Most of the advice seems to be that 600px works best as a maximum size.

There is the issue of taking account the display in mobile being less than this, and the transfer of some responsive web design techniques into email newsletters to cope with this, but I reckon that if you keep the design simple mobile devices should cope reasonably well.

Even so a good tip is to ensure that your important content is placed on the left side of the email towards the top.

Use pixel units to define your sizes

Widths and font sizes should be defined in pixels. Support for percentages and other units is patchy.

Use inline CSS

Except for layout, as discussed above, do use CSS for styling but again it is best to aim for the lowest common denominator. It may be useful to check the support for the CSS properties your are using.

Always move your CSS inline. Once you’ve completed your design, you will need to go through and add inline styles to your elements – although some email services help you with this.

Also avoid using shorthand for fonts and hex notation. Hex colors such as #ccc should be written in full as #cccccc.

With paragraph alignment you should set the margin inline via CSS for every paragraph in your email. Do not use the float property in CSS instead use the align tag in the HTML.

Take care with the design of links

It seems that some email clients will overwrite your link colours with their defaults. To avoid this you should set a default colour for each link inline then also again set the colour using a redundant span tag inside the a tag.

Users will expect your links to open in a new tab or window so include the target="_blank" attribute in each link.

Be careful with images

Don’t assume that images will be viewed. In many of the major email clients, your images will not be shown by default.

So always include good alt text for every image. Specify height and width for images to ensure that the blank placeholders don’t throw your design off.

Also don’t rely on background images – use blocks of colour instead.

Finally, avoid using PNGs, they don’t get displayed in Lotus Notes, so stick to using use GIF and JPEG.


Include a plain text version of your email and/or a prominent text-based link to a Web version of your newsletter.

Use templates

I think my biggest conclusion from all this is to do yourself a favour and use a pre-existing template. If you are using a third party service to send your newsletters, such as MailChimp and the like, then they will have a range of existing templates for you to use and adapt.



This video is of an excellent presentation by Luke Wroblewski, author of ‘Mobile First’, from An Event Apart.

AEA Video: Luke Wroblewski (author, Mobile First) – Mobile To The Future

His key points are;

  • Mobile is the next form of mass media
  • We are currently in a process of transition from ‘the desktop web’ to ‘the mobile web’
  • So the process web designers and developers should engage in is;
    1. Taking what we know from the desktop web
    2. Adapting and optimising it for mobile
    3. Then finding new ways to do things that only mobile makes possible
  • He looks at how to do this through the examples of making a better login form and improving the online checkout process.
  • He concludes that the shift to mobile forces us to look again at what we are doing and find ways to do it better.

One of the trickiest things to deal with that I’ve been finding in committing to responsive web design is that it really challenges to think about your site navigation.

Generally speaking this is a good thing. Critical to the success of any website is clear and logical navigation — so anything that forces you to think more carefully about how your navigation works should be positive. Particularly if it leads to simplification.

So over the last few months I’ve been developing a little library of navigation patterns to use on the responsive WordPress themes that I develop. Essentially these patterns are about answering the question of what to do with your menu when the width of your screen shrinks down to the size used on mobile devices. Mostly these are using media queries with CSS, but some use a little bit of JavaScript.

In developing this library I’ve been relying pretty heavily on the ideas developed by Erick Arbe on his site ‘Adventures in Responsive Navigation’. This is a really useful resource. There are a lot of practical ideas here — but he also understands that RWD forces you to think about your navigation in different way. This WordPress.tv video also acts as a good introduction to these issues:


What I’ve not yet really tackled is what to do with the more complicated drop-down menus on responsive sites and the tricky issue of getting these to work with touch screen devices. Something that needs a more detailed post of its own.

Here is a little note about dashes and hyphens and how WordPress handles them.

WordPress can do some clever things with typography — and some of these it does as standard. Look, it’s just done one of them in the previous sentence.  I typed two hyphens (or minus signs) into the editor and WordPress has automatically converted that into an em-dash. WordPress will also change a hyphen into en-dash when used in the correct place.

Not only does this make the text read better, and satisfy the small but passionate group of people who really care about these things, it is also really useful when writing posts in plain text or markdown. So here is a little reference of what to type to get different dashes:



= one–two

one - two

= one – two



= one-two


one -- two

= one — two

More about this can be found in this post by Mark Jaquith from June 2012.

I was looking the other day for an icon to indicate a drop down navigation menu in a mobile layout. I wanted something that would be easy to implement, flexible, and relatively lightweight. I decided that I would do it using an icon font, but that meant finding a font to use.

I chose Genericons – and was so impressed with it that I decided to permanently integrate it into ‘Oystershell’ my WordPress starter theme so that it will be easily available for use in future projects.

Some example icons from the font.

It has been released by Automattic so it has a number of features that are really handy for WordPress users. This includes these icons designed to indicate each of the native WordPress post formats.

On 8 May 2013 the Government announced its legislative programme for the year in the Queen’s Speech.

In it I spotted three major aspects of relevance to the digital world and one smaller one.

Intellectual Property Bill

The first of these is proposed legislation to “make it easier for businesses to protect their intellectual property.” This bill is the Government’s response to the recommendations of the Hargreaves review that was published in 2011.

The bill contains a number of, mostly technical, measures that aim to simplify the law around intellectual property rights. The idea is to make the law easier to use and enforce, and so make it more accessible for British businesses – particularly SMEs – to use. Underlying this seems to be an understanding of the need for IP law to adapt to changes in technology and meet the challenges around digital copying. So hopefully these changes should be of help to digital designers in protecting their work.

The bill also contains measures to bring UK patent law into line with Europe and to enable the creation of the Unified Patent Court, part of which is to be based in London. This introduces a single patent system for most EU countries and would mean that it would be possible for British businesses to protect their inventions across all these countries with a single application.

Draft Consumer Rights Bill

The Government announced the publication of a Draft Consumer Rights Bill “establishing a simple set of consumer rights to promote competitive markets and growth”. In this bill they are aiming at consolidation bringing together eight different pieces of legislation on consumer rights (including digital content) and updating the law to;

“Provide clarity in areas where the law has not kept up with technological advances. For example, setting out clearer consumer rights for the quality of digital content like e-books and software.”

This draft bill was published on the 12 June 2013 and “Chapter 3” of the draft does deal with consumer rights over digital content. Its intention is to ensure that digital content would have to be of satisfactory quality, fit for purpose, and be as described.

Proposals on the investigation of crime in cyberspace

In the Queen’s Speech Her Majesty announced;

“In relation to the problem of matching internet protocol addresses, my Government will bring forward proposals to enable the protection of the public and the investigation of crime in cyberspace.”

How familiar Her Majesty is with internet protocol addresses I am unsure but the Home Office certainly is. Deputy Prime Minister Nick Clegg had vetoed the inclusion in the Speech of Home Secretary Theresa May’s Communications Data Bill, known to many as the “snoopers’ charter”, after concerns over privacy and civil liberties. However, as he did so Clegg did concede that the issue of matching IP addresses needed to be addressed. So it seems that the Home Office ensured that this aspect was in the speech.

This is quoted from the Government’s guidance notes:

“As the way in which we communicate changes, the data needed by the police is no longer always available. While they can, where necessary and proportionate to do so as part of a specific criminal investigation, identify who has made a telephone call (or sent an SMS text message), and when and where, they cannot always do the same for communications sent over the internet, such as email, internet telephony or instant messaging. This is because communications service providers do not retain all the relevant data.

When communicating over the Internet, people are allocated an Internet Protocol (IP) address. However, these addresses are generally shared between a number of people. In order to know who has actually sent an email or made a Skype call, the police need to know who used a certain IP address at a given point in time. Without this, if a suspect used the internet to ommunicate instead of making a phone call, it may not be possible for the police to identify them.

The Government is looking at ways of addressing this issue with CSPs. It may involve legislation.”

*BBC News: “‘Fresh proposals’ planned over cyber-monitoring

National Curriculum

The final, smaller, aspect that I noticed was that as a part of the plans for a new National Curriculum confirmed in the Speech the Government will be;

“Replacing the discredited ICT curriculum with a new, ambitious computing curriculum.”

A consultation on doing this closed at the beginning of June.

Availability as of 29 March 2013

Currently available for projects large and small.