As you can figure out from the title, I’m not “naturally competent” to determine what’s a great color design, but still…
…I’ve been educating myself on this topic for a while.
At the Klaviyo: BOS conference, I learned a lot about email design, and I also contacted a company that focused purely on email design (https://chamaileon.io/).
Most email marketers and pro copywriters say copy is the alpha and omega of email conversion.
True.
Partly.
You can get pretty far (even up to $1M per month) by using only short, convincing, punchy plain text copy.
However…
In my opinion, you can’t ignore email design when creating kickass emails.
It’s part of the experience.
(At the end of the day, test test test test test test what works for you ;) )
So, here are my tips if you want to design conversion-oriented emails.
EMAIL LAYOUT TIPS
1.
Create the content idea first, then the copy, and the a suitable design.
Plan for mobile first; most people check their emails on mobile. Smartphone usage has increased 4x in the last 4 years.
2.
Test if you need a navigation bar in your email. Brands like to use this, but it usually doesn’t generate more sales or higher click through.
Another option is to put it into your footer.
3.
Use emails with a width of 600px. This is the safest choice to make your emails visible on every email platform.
Forcing your subscribers to scroll from side-to-side is the kiss of death for an email’s response rate.
Most readers are in scanner mode when they check their emails, so you want your copy as easily digestible as possible.
5.
Lead the >>>> eye of your subscribers.
You can be creative by using arrows or other fancy stuff. Include it in your images or simply use the character in the copy as I did above.
6.
Use 1 or a max of 2 columns in the email. Email is not a huge broadsheet.
7.
Don’t stuff your content together. Keep healthy white space between your sentences.
Try to start each sentence on a new line with a space between them.
It’s gonna give super readability to your text.
8.
Reduce the cognitive load. That means keep it SIMPLE!
Have only one goal for each email and email design.
Use as few elements as you can, and a max of 2 different fonts.
Make it readable and scannable.
Don’t forget: people usually spend less than 5 seconds with an email. Ask yourself: can this email design achieve my purpose in 5 seconds?
Same with your CTAs. Make, large CTAs with great contrast.
These are critical to elicit action on the part of the user.
Shut your eyes.
Imagine a CTA which is crazily clickable.
YOU WANT TO CLICK IT!
There’s no other option.
What does it look like?
What color, size, and contrast does it have?
You want that button in your email.
9.
Use the infamous inverted pyramid and zig-zag patterns (see them in the images below).
The pyramid leads your eyes to the call-to-action button; the zig-zag makes your eyes work while you’re going down to the button.
Put the first call-to-action above the fold.
People will quickly judge whether your email is worth reacting to or not.
They don’t want to scroll through the whole universe to find your CTA.
11.
Use your logo. Don’t freak people out by not letting them know who sent the email to them.
It may seems obvious but many brands miss out on it. Use your logo on the top of the email, so they’ll immediately recognize you.
12.
Use the F pattern.
Jakob Nielsen, the web usability expert, pointed out that most people don’t read web content. Instead, they just scan it from the left side to the right (except if you use Arabic haha).
He tracked more than 1.5 million eye movements of 300 net users and concluded that things on the left side get more attention then on the right side.
Use this principle to improve your conversion rates.
13.
Take care of the big picture. The design of your email should fit with your website.
Fonts, colors, structure, type of images, type of CTA buttons.
If they see a gorgeous email with beautiful photography and they arrive to an ugly website without images… Ughh! They’ll feel bad.
14.
Use borders! Web designers love sidebars, modules, and callout sections because they help emphasize their main points.
One great example is when you want your discount codes to stand out from the whole email.
However, don’t forget another rule here: keep it simple and scannable, you don’t want to overcomplicate a short email.
15.
Have consistent branding assets.
Create an email template that you’ll use again and again in the future.
People will get used to your header and footer style and instantly recognize you.
They’ll look forward to receiving your next email if you provide great content.
FONTS
16.
Use a maximum of two fonts in the email. Simplicity is key.
You don’t want your email to become overly complicated and hard to digest.
The best fonts in emails, which are supported by almost all email platforms, are:
Arial
Courier
Georgia
Lucida Sans
Lucida Console
Tahoma
Times New Roman
Trebuchet
Verdana
Tip: don’t use Google fonts; they are not supported by Gmail. ;) Yes, read it again.
17.
Avoid long copy.
I remember those days when I wrote never-ending B2B emails to my clients as a copywriter. B2C email marketing couldn’t be more different!
I recommend you use a maximum of 100-150 words in 3 paragraphs.
Keep it short, be punchy and persuasive, and it’ll convert because people will get your message in seconds.
18.
Use big fonts. You don’t want people to start zooming your emails because they won’t.
Since 68% of email opens are on mobile according to Campaign Monitor, people are more sensitive to tiny letters than they used to be.
The ideal body copy is between 14 and 16 point.
Header font size should be around 22-28 px.
Line height should be around 1.4-1.5 times more than the font size for best readability.
IMAGE DESIGN TIPS
19.
Try to avoid putting important elements (CTA button, headline) on big images, because if the email platform doesn’t support images, people won’t see these.
It’s a common mistake to put everything on a big, nice image (the whole email is an image) and send it out.
Always ask yourself: will people buy if they can’t see the image?
20.
Keep the image/text ratio somewhere between 20/80 and 40/60.
Too many images activate the spam filter (just check your emails in your spam folder).
Have a copy of at least 500 characters because some platforms likeOutlook hate short emails.
21.
Doooooon’t use low-quality images!! Check out websites like shutterstocks.com for free high-quality images.
However, avoid using images with huge file sizes. It takes ages to load, which you don’t want to happen.
22.
How ridiculous is it when your readers open your email and are forced to wait for the images to download? (99% won’t do that anyway).
Nowadays, it’s less of a problem than a few years ago since broadband penetration has grown around the world, but it’s still a good idea to play it safe.
Get rid of high resolution photos…
23.
…but use quality photos.
Lower resolution doesn’t mean shitty pictures.
In the retail world, good design makes your brand come across as more trustworthy and high-quality to your customers.
In reality, the main USP of many retail brands is actually their beautiful design.
So, if you own a high-end fashion store, how would your emails fit with your message if they had ugly images?
Find top-notch photography on these websites:
GIFS AND VIDEOS
24.
Embedded video is not supported in email, so let’s use GIFs.
Once again: USE GIFS!!!!
I can’t emphasize enough how awesome they are! In most cases, they increase the conversion by 20%!!
Their motion breaks the boring pattern of emails most people get. Make sure your GIF is under 1 MB and easy to digest. Big GIFs are not supported by email platforms.
25.
Do you want your images/GIFs personalized with the name or any other data of the recipient?
Use tools like niftyimages.com.
You will need some coding skills though (see the Stephanie image below).
26.
If you embed videos, use a static image from the video and add a play button.
People like clicking these, and when they click, direct them to your website or wherever you want them to watch your video.
LINKS AND CTA BUTTON DESIGN TIPS IN EMAILS
27.
Rule of thumb: use as few call-to-action buttons and links as you can. The more you have, the lower your conversion will be in general.
28.
The CTA button color should ideally match the brand color and have a contrast to its background.
29.
Put your CTA above the fold. When people open your email, they should see one CTA immediately.
People usually spend less than 5 seconds with an email when they open it.
30.
Use first-person (Start my free trial vs Start your free trial) = Clicks increased by 91% during a test of Klaviyo.
31.
You always want to include your social media icons.
Some folks simply hate emails and will unsubscribe.
But you’re smart and want these guys to keep in touch through different channels such as Facebook, Instagram, or Pinterest.
32.
Use 3 different call-to-action links.
People are different in many ways, and this is true when it comes to the type of links they prefer (as strange as it sounds).
Some people are visual while others prefer text or buttons.
So, my advice is to use one link in all three different formats.
Add a link to an image if they click that, add one to a CTA button, and add a link to a part of the copy too. It’ll increase your click-through rates.
33 and more:
Use SVG for logos and icons if possible
Use alt text for images and GIFs (see the example of Uniqlo below, the message of the email remains readable and understandable even without images)
Use HTML5 to embed a video
Use white space to emphasize the most important part of your emails such as CTAs
Give CTA text padding: the standard is 20px
Make CTAs easily tappable: at least 44px
Provide tappable cell phone numbers and support email address so people can easily contact you
So, these are the best practices in email design.
But never forget to always make conversion your focus.
Every element and the whole visual look of your email should help you get a higher conversion.
You don’t need the fancy stuff…