Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.
For marketers, effective email design is more than the fonts and images you choose. A good email template not only looks appealing, but also considers the special features and constraints of the email clients used to read the messages.
Email icon by Oliver Sin
Designing an effective email campaign means thinking like a marketer. Here’s what you need to know to make your templates great.
The Goal of an Email
Before you start designing, understand the email’s purpose - to get the reader to click through to a landing page or web site. The email is not the reader’s final experience with the brand or business, it’s just the first step.
Design your email templates to inspire action, whether it’s a share on social networks, forwarding to a friend or clicking to complete a purchase on a web site. The email is the gateway to the rest of the marketing experience.
When you start designing, you want to keep a few things in mind:
Your Template Shouldn’t be Wider Than 600px*
Most email clients can accommodate this width without requiring the reader to scroll sideways to see more.
*Unless you're confident enough to venture into the world of responsive web design.
Include a Preheader
The preheader is the few lines of small text above the main header image. Preheaders usually include whitelisting instructions, links to a mobile or web site version of the email, or a short summary of the message content. Place some dummy text here as a place holder for the preheader.
Include an Invisible Image at the Top
Gmail and Outlook display a preview of an email’s text beside the subject line. This text preview is called the snippet and is usually populated by either the preheader content or an alt tag description in the email’s first image.
The snippet can help marketers tease their message content and extend their subject lines. Including a small transparent image at the top of the template gives marketers the option of including the snippet in the alt tag of the image instead of devoting space in their preheader to snippet text.
Be Careful With Text on Your Buttons
If you’re designing buttons to call readers to action, be careful with the text you use. Phrases like “Buy now!” might feel natural, but can also scare off readers who aren’t ready to make a purchase yet.
Make the text less threatening but still direct - something like “Learn more” or “Find out how” can still inspire readers to click through without the bigger commitment of making a purchase.
Design for Preview Panes
When you’re designing an email template, you’re probably thinking about the big picture, how the message will look when it’s fully open in an email client or browser window.
But at least 64% of consumers don’t open their emails fully, instead reading them through their mail client’s preview pane.
Design with the preview pane in mind: place the company logo in the top left corner of the email and plan for important text information to display in the top left quarter, like Old Navy does above.
Use Alt Tags for Disabled Images
Many email clients block images by default as a safety measure. And only 33% of Internet users change this setting in their email account to allow images to display automatically.
Combat blocked images and make sure the marketer’s message can still get across by using alt tags to add descriptions of important visual elements - like logos, navigation buttons or coupons.
And don’t make your designs completely image-based. Include space for text in your template so the marketer won’t have to rely solely on images to get their readers’ attention.
At least 34% of consumers use their mobile device to check email. But not all emails translate well to mobile users.
Whether you're designing responsively, or to a smaller fixed width layout, remember to include the viewport meta tag in the head of your template. This will ensure that all devices interpret your layout dimensions as you intend.
Use a larger font size to ensure readability on mobile devices. Also, remember to leave plenty of white space around buttons and links so they’re easier to tap with a finger.
Good Design Means Good Response
A well-designed email strengthens a business’s brand. Mixing an appealing layout with easy navigation creates a positive experience for the customer which can lead to better response rates for the marketer.
When you design like a marketer, the marketers you design for will notice.