Graphic Designers Quick Guide to Creating Email Layouts

February 10, 2010 by Jeune Ortiz

Your client just asked you to design an email for them, what are you going to do? Don’t panic, this quick guide will show you everything you need to design a great email layout and earn the respect of your programmer at the same time.

The Basics:

• Size: 640 px x 480 px @72dpi is a good size to plan for. Most people keep their email windows fairly small compared to their browser window so you want your email to fit comfortably inside their already open reading pane.
• Fonts: You should know what fonts you can use and which ones you can’t. Here’s a great website resource. Don’t use any fonts that aren’t on this list! Doing so will wreak havoc on your layout once it is delivered. Your programmer may also tear their hair out in the process.
• Text Effects: Unlike pretty layouts for print, email has to be structured within a grid – meaning you can’t wrap text unless it is in a square shape. Also avoid putting words on top of images–some email clients don’t display background images or colors – more about that in the next bullet.

• Backgrounds: Backgrounds don’t display in later versions of Outlook – make sure that if you are using background colors that your text will still be readable if the background becomes white.

• These do not work: Flash, rollover effects, video, and music. Plan on a very still, very quiet design.

Stuff your programmer needs:

• There are more email clients than you can possibly test for. Your programmer will need to know what email client and operating system (mac/pc) your client is using.
• Let your programmer know how the client will be sending their email.
  • Mailing service like Constant Contact, Aweber, iContact etc., your programmer might need your client’s login information.
  • If your client is planning to send through Outlook or some other in-house email client there may be special instructions your programmer will need to give the client.
  • Is your client sending the email to a third party to send for them? If so, your programmer will need to know how to link the images, and how to deliver the files.
• Every single image you use needs to be hosted somewhere. Make sure you have access to a server that can act as an image host. Then let your programmer know how to access that server via FTP. This is information you’ll need to get from your client. If they have no idea, you may need to host the images on your server for them.
• Don’t forget to give your programmer the subject line, and any URLs needed for links within the email.

By following this simple guide, the rest of the layout can be left to your imagination! If you need a programmer to put emails together for you contact us. We work well with agencies and graphic designers. And we’ll make sure your artwork looks as fabulous as you intended.