Designing for email


Published on

This is a quick reference guide to help you plan and design your next email campaign.

It covers getting your core message across, design tips, fonts to use and avoid, copy writing tips and it also helps you tick off the legal stuff.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Designing for email

  2. 2. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES Introduction This is a quick reference guide to help you plan and design your next email campaign. It covers getting your core message across, design tips, fonts to use and avoid, copy writing tips and it also helps you tick off the legal stuff. DESIGNING FOR EMAIL Responsive Design If there is only one point you take out of this guidelines document it is that responsive emails should now be the norm, not the exception. You’re probably aware that a high-proportion of your audience reads their emails on mobile devices. If your email doesn’t resize and respond for their phone, it’s most likely destined for the bin.
  3. 3. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES START WITH MOBILE LAYOUT Responsive Design Responsive design is not about creating two different designs (desktop and mobile) and then coding them separately. If you create a flat for a desktop email and then re-work that design into a single column, the results you see may be different to what you expected (or worse, had your client approve). If you can make an email design work as a single column layout, you can then more easily visualize how it would look as a responsive 2 column layout. Designing the mobile version first helps you avoid text that’s too tiny and buttons that are too small to click on a touch screen. Tips: Keep subject lines to 25 characters. Decrease number of navigation items to three. Continue to use HTML text. Most mobile email clients default to disabled images. Increase font size. Add contrast. Add padding between sections. A typical adult finger covers 45 pixels when pressed against a mobile screen. Use distinctive colours for links. Design whole sections to be clickable.
  4. 4. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES Mobile Look at your mobile design and you should now clearly be able to see how it will work as a two or three column layout. Desktop VISUALISE THE DESKTOP LAYOUT A B C D E F H A B C D E F G G
  5. 5. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES EXAMPLE Try to get the core message into the top 400 pixels without relying solely on images. PRO TIP Size An ideal size for your email design 660 pixels wide. Generally you only have the preview pane to grab and hold people’s attention, so try to get the core message into the top 400 pixels without taking up too much of that space with images. Images The images in your email may be blocked, so make sure the key message is clear, without having to rely on images. Text within images is only suitable for graphical elements that are not critical to the message. The same applies for links. If the whole goal of your email is to get people to click a link, don’t make that link an image because they might not see it. DON’T RELY ON IMAGES
  6. 6. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES CONTENT Content Have a clear and simple call to action. There’s no need to include all your products or offers in the email campaign. Think about including links to your website for greater detail, booking or to enter a competition. If you include no links at all, it’s difficult to track the success of the eDM much beyond open rates An enticing sale item or a quick overview of updates is enough to get a click through. You want to catch their attention before they can make it to the delete button. Stay focused on the goal. What is the one thing you want recipients to do? Make it easy for them to see what they need to do. Links Links should look like links, not images. We’re talking a simple text link – bold, underlined and (if your brand guidelines can stretch to it) blue. Including an image (e.g. ‘book now’ button or icon) within a line of text can cause problems. It’s best to keep links as just text. If you must use an icon for a link, its best to do this at the start of a paragraph.
  7. 7. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES FONTS Fonts Not all fonts will work for email. In order for copy to appear in a certain font, the reader must already have that font available on their device. Generally your recipients will not have the huge variety of fonts installed as your designer has, hence the need for a standard set of fonts for email. The next page gives you a list of fonts you can comfortably use. Unfortunately if your brand font is not one of them, it means you will need to deviate from your brand font when designing for email. Font Sizes The minimum recommended font size for body copy is 10 point – larger is better. Only secondary content such as terms and conditions can be smaller but try not to go below 9 point for these. Best Fonts To Use Verdana, Georgia, Arial and Times New Roman are four of the best choices for email fonts that you can find, and are distributed on both Windows and Mac OS platforms. Close runner up options are Tahoma, Lucida Sans Unicode, Myriad Pro and Calibri. Verdana Tahoma Georgia Lucida Sans Unicode Arial Myriad Pro Times New Roman Calibri This is 10point, the minimum size recommended for body copy. PRO TIP
  8. 8. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES Browser Safe Fonts FONTS Windows Fonts Mac Fonts Font Family Arial, Arial Bold Arial, Arial Bold, Helvetica, Helvetica sans-serif Arial Black Arial Black, Gadget, sans-serif Comic Sans MS, Comic Sans MS Bold Comic Sans MS, Comic Sans MS Bold cursive Courier New, Courier New Bold Courier New, Courier New Bold monospace Georgia, Georgia Bold Georgia, Georgia Bold serif Impact Impact, Charcoal CY sans-serif Lucida Console Monaco monospace Lucida Sans Unicode Lucina Grande, Lucina Grande Bold sans-serif Palatino Linotype, Palatino Linotype Bold, Book Antiqua3 Palatino, Palatino Bold serif Tahoma, Tahoma Bold Geneva, sans-serif Times New Roman, Times New Roman Bold Times New Roman, Times New Roman Bold, Times, Times, serif Trebuchet MS, Trebuchet MS Bold Trebuchet MS, Trebuchet MS Bold sans-serif Verdana, Verdana Bold Verdana, Verdana Bold sans-serif Symbol, (Symbol) Symbol, (Symbol) W e b d i n g s (Webdings) W e b d i n g s (Webdings) Wingdings (Wingdings) Zapf Dingbats (Zapf Dingbats) MS Refence Sans Serif Geneva sans-serif MS Reference Serif serif
  9. 9. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES COMPOSITION Layout Email needs to be coded as a grid/table, and as such the flat design needs to follow a table structure. The following image is used to illustrate the points discussed below: A design gets divided into sections vertically or horizontally. The most important thing to note about this diagram is that each part of the grid can contain either text or an image but no sections of the grid can overlap. Background Stick to block colours for image backgrounds and don’t place text on patterned or gradient backgrounds. With email, it’s not possible to float or have transparent backgrounds on images, which means text cannot cross over into a section that has an image. PRO TIP A design gets divided into a grid, sectioned vertically and horizontally
  10. 10. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES WORDING Copy Writing Tips Make the subject line attention grabbing without triggering SPAM filters. Give people a reason to read it – break through the clutter. Remind people why you’re emailing them – gain trust. PRO TIP Capture your audience within the first sentence EXAMPLE
  11. 11. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES Commerce General Finance Financial - general As seen on Free Accept credit cards $$$ Discount No fees Buy Guarantee Cards accepted Affordable Earn One hundred percent free Buy direct Now Check or money order Bargain Fast cash Only $ Clearance Win Credit card Beneficiary For just $xxx Price Order Winner Credit card offers Best price Hidden assets Profits Order status Winners Investment decision Big bucks Hidden charges Pure profit Orders shipped by No credit check Cash Income Quote Shopper No hidden costs Cash bonus Incredible deal Refinance No investment Cashcashcash Insurance Save $ Requires initial investment Cents on the dollar Investment Serious cash Sent in compliance Cheap Loans Subject to credit Stock alert Check Lowest price Unsecured credit Stock disclaimer statement Claims Million dollars Unsecured debt Stock pick Collect Money Why pay more? Compare rates Money back Cost Mortgage Credit Mortgage rates Credit bureaus No cost WORDING Words To Avoid In Subject Headings
  12. 12. DESIGNING FOR EMAIL – BEST PRACTICE GUIDELINES LASTLY The Legal Stuff Include your company name and address (or at least tell us, so we can include it). Make it easy to unsubscribe (we’ll look after this). Disclose how you got their email address (let us know and we’ll include this too). Make sure you have permission to email all of the recipients. Checklist To Supply Your design as .PSD and .JPEG Copy deck as .DOC or .TXT Your preferred subject heading (or headings if you are AB testing) URLs for all links ALT text for all images Physical address of your organisation Database of recipients as .XLS or .CSV along with confirmation that you have permission to send to this database. EXAMPLE PRO TIP Make it easy for the reader to find information by using a footer
  13. 13. Traverse Digital is a New Zealand based creative thinking agency for the digital age Talk to us about all things web, mobile and social WWW.TRAVERSEDIGITAL.CO.NZ