Designing for email

23 February 2012
It is a fact of digital life that email has its own set of limitations. Email clients do not behave like websites, and a lot of the design possibilities that we see on websites are not available on email.

So this is the handy Code Café basic guide to designing for email:

Canvas size
This is the important starting point. Emails should not be much wider than 600 pixels. Create a canvas at this size at 72 dpi and then begin your artwork. Do not start with a canvas that is 3500 pixels wide and then try to scale it down when you are done, it will look terrible. Work in the size that the final product is going to be.

Portrait, please!

You should use websafe fonts, or at the very least highly common ones. The developer will have to put fancy fonts in as graphics. Remember that text will render slightly differently on different set ups and email clients, so consider that the text might wind up being slightly bigger than on your PSD file. Also bear in mind that if you’ve played with the kerning & leading in your artwork to make things fit this will not translate exactly as you have it in the email.

Unlike on web pages, in an emailer you have to have text over a solid plain colour. You cannot have text over gradients, patterns or images. If you insist on this, that section will have to be coded as a graphic.

Because there can be differences in how text renders on different set ups and email clients, allow padding around text areas. Do not have text right up against images, allow some breathing space that will allow for slightly larger fonts.

If the emailer is to be personally addressed, allow for a very long name in your design so that you can see where text will wrap or where you will run into issues with images. It’s best to use a bunch of W’s as they take up the most space.

Legal stuff
Remember to include an unsubscribe link in your design. And depending on your dispatching provider, it might just be a nice thing to do a nice unsubscribe page. Also include a link to view the email in a browser.

Keep it simple
Design for simplicity. You have only a few moments to capture the readers attention before they bin you, so make the message easy to see. Also, from a technical point of view the cleaner the design, the easier the code, the less likely there will be rendering errors between various email clients & browsers.

A lot of servers either strip images in emails, or don’t download them automatically, so never put your core message or calls to action in an image. Also avoid email designs that are very image heavy, they are more likely to be considered spam and blocked. Keep as much of your message as possible in text. And bear in mind that you want the final email to be as small a file size as possible. Apart from the fact that it’s just plain rude to send huge mails, there is also often a cost implication on sending larger file sizes.

And finally….
Do some research and get inspired! There are great resources online for digital design. And why not chat to the person who is going to code the emailer for you to avoid any issues upfront – BEFORE you show the design to the client. That way frustration & disappointment is avoided all round.

Add Your Comments

Email address
I want to say