Email Design (Doing it Right)
Email marketing has proven to be the most effective form of marketing for businesses. The average return on investment is $40 per $1 spent (!). Compare that to $17 per $1 for Keyword Ads or even $22 per $1 with SEO.
Emails can do amazing things. They can get you more sales, bring more people to your site, or keep in contact with your fans.
Many people ask, “How do I know what makes an email design good? Is there a formula I can use to get a great email every time?” Well, we’ve broken down exactly what it takes to design an email, the right way!
Before You Design
Subject Line
Your subject line needs to grab attention. It should tell readers exactly what they’ll find in your email. Keep it short, avoid spam or cliche terms, and be creative to stand out from the other emails in your reader’s inbox.
Pre-header Text
Pre-header text is a short summary that appears next to the subject line in many email clients. Use this to give more details of your offer. Remember, this is an advertisement for your brand! Keep it short and include a call to action for extra affect.
Personalization
Personalization is addressing something particular to your reader in your emails. You could use your customer’s first name in the subject line. Personalizing the subject line increases the chances that they will open your email. Inside the email, something you offer might be relevant to their interests. Offer readers something special for their birthday. Some other options include: transaction history, urgency or geographic location.
Dynamic Content
Use dynamic content to create more relevant emails for your customers. Use automated emails for abandoned checkouts. Suggest products based on past purchases. Send special emails for loyal customers. This is all part of a bigger customer experience that you’re creating for your customers. Limit your generic emails and your audience will thank you!
Plan Your Layout
Sketch Out Email Layout
Plan out the layout you want to use for the email. You can use an old fashioned pencil and paper. Or, use a prototyping tool. You should have the content you want to include ready, before this step, so you know what to make space for.
Plan Content / CTA Location
Take time to think about the content you’re sharing. Where does it makes sense to include call to actions? Are you sending a transactional email? Is it a weekly newsletter? Is it a holiday sale promotion? No matter what kind of email, you’ll need to organize the content in a way that makes sense.
Create Hierarchy
Hierarchy is important for any type of design. Hierarchy in design is how you show importance. You can use tools such as headlines, sub-headlines, body text or even color & whitespace. Keep in mind what the most important things you want readers to focus on and create a hierarchy based on that.
Keep Width at 600-640px
It’s best to design your email to look good at these sizes. This may seem like an arbitrary number, but many email clients limit the max width of emails. Some email clients allow more flexibility. But, since you won’t know what your readers are using, play it safe.
Consider User Experience
Imagine how your reader will experience your email. Will it be easy to read? Will they enjoy reading the email? Will the information be useful? Even better than imagining, try to get feedback on your layout before you move forward.
Design Your Graphics
Find Relevant Imagery
This is a no brainer, but the key to effective imagery is that it needs to be relevant! Illustrate the content you’re sharing. Use psychology to let readers relate to your photos. Let customers see the products that they bought. Images you use need to reflect, and enhance, the content of your email.
Balance Text with Imagery
Too many images will make your email slow to load, or even worse, unreadable if the user doesn’t allow images to load. Balance the amount of images you have with relevant text so it’s not too heavy.
Optimize Images for File Sizes
Whatever images you choose, make sure their file sizes are low. Tiny thumbnails shouldn’t be huge images scaled down. This is especially important for people reading your email on their phone.
Use the Right Image File Types
Choose the right file format for the image you’ve chosen. JPG images are great for photos or textured graphics. PNG files are useful for logos or text based graphics that need to be more crisp than a standard JPG. SVG images are useful for logos and icons, but have far less support in email clients.
Don’t Forget Alt Text
Not everyone will be able to see or will choose not to see your images. Always include an “alt” text attribute on images. The alt text should describe what is being illustrated by the image. Keep in mind, if someone is reading alt text, they aren’t seeing the image so it should make sense on it’s own.
Consider Retina Image Sizes
More and more devices are using high-density screens. These allow images to be much more crisp than standard screens. The tradeoff is your email images need to be higher resolution. This means larger file sizes, but also higher quality. Use this at your discretion! Ideal candidates for retina images are logos, icons & smaller images.
Movement Catches the Eye!
Include GIF Animations
GIFs have surged in popularity in recent years, and for good reason. They’re cultural, relevant, universally understood, shareable, responsive and easy to create. You could show how a product works or provide how-to videos. Animate that infographic, tell a story or lighten the mood with GIFs!
Create Static Thumbnails
When you share a video on your email, users will have to click a link that will take them to wherever the video is hosted. To make better use of this, make sure your thumbnails are engaging and they have a “play” button graphic on them. Readers will know that this means it’s a video without you having to tell them. This alone will create more engagement in your emails by increasing clicks.
Optimize For Low File Sizes
Like standard images, GIFs and Video Thumbnail sizes should be kept to a small file size. GIFs in particular can be quite heavy, so make sure you’re not going too crazy with tons of GIFs. One simple GIF is often more than enough to inject motion and interest into your email.
Designing Copywriting
Keep Brand Guidelines in Mind
Your brand has a certain look, feel and tone to it. Keep that in mind when designing (or writing) copy for your email. Use the appropriate fonts, colors, and wording in your email so it feels like an email from you and your brand.
Spell Check
It may go without saying, but I’m saying it anyway, spell check your work! Once that email goes out there’s no turning back. Double check that you haven’t misspelled anything before hitting “Send”.
Consider User Experience
Copywriting is another part of your reader’s experience with your brand. Keep that in mind as you design and write your email copy. It should make sense and be useful to your audience.
White Space
Keep Whitespace Consistent
Whitespace is a huge factor in design, it both de-clutters and informs readers. White space around something important draws the reader’s eye to it. It improves readability and gives a pleasant experience when used correctly and consistently.
Encourage Click Throughs
Put extra space around your important links that you want clicked. This actually shows your audience, “Hey, this thing is important, so I’ve given it it’s own space”. This leads to higher click through rates for emails.
Use the Right Fonts
Use Webfonts when Possible
Your font choice can greatly affect the look, feel, and readability of your email. Use the fonts from your company’s branding to tie your email experience into your brand. Remember, the font needs to be accessible online for this to work, hence the term “webfonts.”
Make Sure to use Fallback Fonts
Some email clients don’t allow the use of webfonts. Plan for this and introduce fallback fonts into your email. That way, when those people view your email, it will be readable (even if not 100% “branded”).
Optimize for Mobile
Use a Mobile Friendly Template
Email open rates on mobile grew to 68% in 2016 compared to 21% in 2012. (Link) This trend shows no signs of slowing down. Make sure your email layout is mobile friendly and looks good when opened on mobile devices.
Keep Call to Actions Clear & Easy
With smaller screen real estate, your buttons may need to be larger. Remember, mobile users will be tapping your buttons instead of clicking. Make it easy on them and use large, clearly defined call to actions.
Images Should be Crisp
When you get to smaller screens, sometimes images can get distorted or even look small or blurry. Make sure your images scale correctly and are legible on mobile devices.
Make Sure Text is Large Enough
Your text will need to be large enough to read on small screens. Usually this isn’t a problem, but try to keep your font sizes at least 16px, but larger is usually better.
Add Call to Actions
Be Specific
When asking your reader to take action, be very direct and specific with your description. Instead of a generic button that reads “Shop Now”, try the more specific “Browse Our Women’s Shoes”. Try to be creative with your call to action text, yet specific enough so they’ll know exactly where they will end up.
Use Large Buttons
Even on desktop designs, large buttons are more effective at getting clicks. Pair this with white space and you’ve got an irresistible button.
Contrasting Colors Work Best
Make sure the color of the button or link text contrasts with its surroundings. This will draw reader’s eyes to it and let them know, “this is clickable.”
CTA Placement is Important
Place your call to actions in a logical place. Usually near an accompanying headline or image works best. Consider placement in the layout as well. Placing CTAs higher up in the email (“above the fold”) increases their click rates.
Use Action Language
This only makes sense, right? You want them to take action so use action language in your text! “Learn More”, “Buy Now”, “Read Our List”, all those have actions associated with them. Try to stay away from “Click Here” type buttons though. Remember you want them to take action towards something not click a button for the sake of clicking it.
Check Your Links
Double Check Link URLs
Before your email gets sent to the masses, check to make sure your links go to the right places and there’s no typos. An easy way to test this is to view a sample of the email and click every link. Do they lead where you expect? Seems like common sense, but sometimes it’s easy to mess up a URL, so it’s best to double check.
Add Tracking Links
Speaking of URLs, sometimes you may want to track what subscribers are doing once they click a link. If you have analytics installed, it’s easy to create tracking links. Many email service providers also offer this service. It’s a good idea to add tracking to your email so you can dive in and see what results you’re getting.
Watch for Text Styling
Some email clients will turn certain sets of text and turn them into links automatically. Watch for: phone numbers, email addresses, website URLs, and street addresses. Make sure those types of text are formatted correctly.
Don’t Forget the Footer
Link to Social Media
Most businesses are using social media to communicate with customers. If you are doing the same, don’t forget to include links to your social media accounts. Usually these are small icons for Facebook, Twitter, etc.
Offer Support or Contact Information
Sometimes you may want your email subscribers to contact you via a reply. If you’d rather they call you, or go to a dedicated support webpage, include that information in the footer. People know they can look in the footer for information like this. It provides an easy way for them to get in touch with you.
Include Required Legal Verbiage
This is your basic legal disclaimer, this may be required for legal compliance. We’re talking about confidentiality, security, contractual or other disclaimers. Of course, check with your lawyers to see what you do or do not have to disclaim in your emails. The best place for this is in the footer section.
Unsubscribe Links are Required
You’re required to provide an easy way to unsubscribe from your list. Most email service providers provide this by default. Some even automatically generate it if you don’t include it in your design.
Lastly, Include a Reminder
Remind your subscribers how they ended up on your list, why it’s a good thing, and what they get out of it. This is a good way to show some personality, while also being practical. Some reader’s will forget or think they were added to your list by mistake. A reminder let’s them know why you’re emailing them.
