How to build the perfect email: Code

How to build the perfect email: Code

Coding for email is still way behind the coding required for a web browser. Email readers are pretty basic when it comes to HTML so that requires coders to dust off their historic coding practices and go old school. Here are some hints to polish up your eDM code.

1) Back to basics

Ah! Remember the old days of HTML? None of these fancy CSS structures and divs; instead, it’s back to lovely old tables for content layout. Many email clients wouldn’t know a div if it bit them on the behind so best to avoid them altogether.

2) Size matters

Keep your file size low (another reason not to have stacks of images). Not only will larger file sizes slow down the process of downloading for the customer, but also, big emails could be flagged as spam.

3) No background images

If your designer has used a background image, smack his bottom and send him back to his Mac to start again. Many email readers (including biggies like Hotmail and AOL) don’t render background images correctly, so don’t create an email that relies on background images entirely. Background colours are fine, but again, it can be easy to go overboard.

4) Relative links? No, absolutely not!

This is an obvious one but still a very common mistake. Relative image links (e.g., /images/bottom.jpg) will break as the email client won’t know where to find the ‘image’ file. Your image paths should be absolute (e.g., http://www.katetoon.com/emails/images/piglet.jpg).

5) Use Alt tags on images

As many users won’t be seeing the images (especially if they’re a first time receiver who hasn’t added your address to their safe sender list), it’s important to include the images’ Alt tags (hopefully provided by your copywriter). I’m not sure if any one really reads these but they are useful in text only image clients where the image will be replaced entirely by the Alt attribute.

6) Use inline styles

Several email readers (including Hotmail, Gmail and Outlook) will ignore all content between the <head></head> tags including any style definitions you’ve set. This means you have to style your HTML using inline styles but, again, keep it basic as many common CSS properties will not render correctly.

7) Avoid animated gifs, forms and rich media

Don’t embed rich media files such as Flash, forms or animated gifs. They fatten up your file’s size and most often plain just don’t work. Email is not the place for interactivity: get your customers to your website and they can play with flashy things to their hearts’ content.

8 ) Define the height and width of all images

Ensure you define the height and width of all images. This means that, even if the images are ‘turned off’, the email will still hang together and keep its structure.

Want to have a chat?

If you need a Copywriter, SEO Consultant or Information Architect, then please contact me.

The Recipe for SEO Success
The Clever Copywriting School

  • Great list Kate!

    Just to add to what you’ve already said about alt tags – I like to add a title=”” tag as well just to have all bases covered with a wider range of email clients.

    I also try to go back to using tags as well rather than using inline css to style my text. The more basic the better I think.

    Also don’t forget a web version!

  • Justin

    Great list Kate.  It never ceases to amaze me how many companies avoid all these simple rules…

shares