Often, emails are designed like posters. People think that if they’re designed that way then they’ll be attractive and eye-catching when they pop into the reader’s inbox. The reality is it’ll actually sometimes appear completely blank as images are often blocked by default. Emails that are heavily image focused don’t work as well as emails that feature a lot of text.
Unfortunately there haven’t been many updates to the world of email compared to websites, so email design is still stuck in the past. But no worries! Emails can still look great even if they’re predominantly text based. I’ll show you how to create a great email in this post.
First things first, create an email that is 600 pixels wide
Whatever program you’re using to create your email designs, open a document that is 600 pixels wide, around 900 pixels long and has a resolution of 72 dpi.
The length can vary but the width should stay at a standard 600px wide to fit within most email clients’ preview areas without the reader having to scroll left and right to see it – that’s just annoying.
Keep it boxy
When designing your email, keep in mind that when it’s coded, tables will be used. Try to structure everything so that they don’t overlap and can fit into their own box when it comes to code the email.
Background images, text following a peculiar path and text that doesn’t fit into a clear box should be avoided as it’ll just give you (or your developer) a headache to code later on.
Keep images to a minimum
Image based emails are a no-no. Even if the email’s purpose is to show off new products for your retail business, at least begin with a headline and some sort of text.
Images are often blocked by default in some email providers and the recipient has to manually unblock them. Unfortunately, sometimes they don’t bother and just delete the email instead.
If there’s some sort of text to introduce the email, the reader can make a decision about whether it’s worth unblocking the images in that email.
Images can also appear blocked or completely blank at first when there’s a slow internet connection, whereas the text would still appear immediately. Don’t make your recipients wait to know what your email is about!
Emails actually work best when the information and the purpose of the email can be seen with the images blocked.
This leads nicely on to ALT text…
ALT text, otherwise know as alternative text, is used to describe an image when the image can’t be seen. If an image is blocked, the ALT text shows up to give brief information on what the image actually shows without the image having to be unblocked.
If images won’t load for any reason, whether the internet connection is rubbish or there’s a problem with your image links, the ALT text should be able to explain the images.
Follow an ‘F’ format
People’s inboxes are just full of emails nowadays. There are newsletters everywhere with free downloads and incentives. Chances are your recipients’ inboxes are full of emails and when they do open them, they often just scan unless something really catches their attention. This is why emails need to be laid out so they’re easily ‘scannable’.
Typically the eyes follow a sort of ‘F’ pattern when scanning emails. They read along the top and down the left hand side, with an occasional scan again horizontally halfway down.
The most important information must therefore be in these places. Make sure there’s a headline or important information right at the top as well as a call to action, then ensure there’s more important information down the left hand side with any images mainly on the right.
As well as eye patterns, email inboxes often only show a preview section of the email so you want to make sure the information thats going to make them open the rest of the email is right at the top.
Call them to action!
I mentioned Calls to Action (CTA) above, but what exactly are they? Just like what the name implies, they are used to encourage someone to do a particular action. You probably see them everywhere on websites and emails – “buy now” or “click here”.
They’re usually in the form of a button but they don’t have to be. They just have to be clear. You don’t want them to blend in to the text and get missed when someone is scanning an email. By having them in a button format, it implies that they are clickable and that they promote a specific action.
That bright orange button right there, you want to click it don’t you?
Don’t just use a CTA once, but also don’t overwhelm them. A good amount is 3 times. Once at the top, once after some more information and once at the bottom.
It’s usually best if you stick to one, maybe two, different links. It’s much easier for you and your readers if an email has one focus.
Make sure your landing page is consistent with your email
The web page that your email links through to must definitely be relevant to your email. If it’s not then people will jump straight back off of it and that’ll effect your bounce rate for your website and your conversions from your email.
The offer, product, service, whatever your email is promoting, must be the same on your website as it is on your email. Think of the landing page as an extension of your email.
The text content and branding should be consistent between the two, so that you can build trust for your brand. For example, if you’ve used a certain colour scheme or theme for your email that’s completely different to your website, people might wonder whether they’ve actually gone to the correct place or they might not trust the email / website.
Structure your text content in small easy chunks
Emails shouldn’t be too long. I usually stick to around 900 pixels in length when I’m designing them.
The idea is that they should be brief and tell all the most important and relevant information and then encourage readers to click through to a web page to see more information if it interests them.
People should be able to read just the first couple of sentences of an email and know whether it’s worth clicking through to find out more.
Avoid long paragraphs and stick to small chunks of text because that’s easier to scan and it’s easier to read on a computer or digital device. Bullet points are great to use too!
All of your text needs to be web safe
The text that you use in your emails needs to be web safe so that it displays correctly in each email client and browser. Most fonts, even ones you can use on websites, aren’t suitable for emails because they aren’t supported by all email clients, therefore won’t display correctly all the time and can break your emails. It’s usually best to stick to completely web safe universal fonts such as Arial or Georgia.
If a specific font has to be used and it’s not web safe, for example your company slogan, then this will have to be an image.
Now for the technical stuff…coding
If you don’t have any coding experience at all, emails are a good place to learn the basics, however it’s probably too much to explain in this blog post. If you’d like advice or you’d like to design your own email but have someone else code it, please get in touch as I’d love to help!
If you do have coding experience, remember that emails are very different to websites.
- Tables need to be used to format emails correctly. This can be done in Photoshop using the slice tool and then saving the slices for web. If you select format “HTML and images”, you’ll have the basics of your HTML set out for you. The slices are all saved as images even if they’re intended to be text so you’ll have to go through and convert those images to text.
- Rather than CSS stylesheets, like on websites, emails need inline CSS to display correctly in most email clients. Inline CSS labels each and every cell with the style information.
- Style images with “display:block; border-style:none; margin:0px;” to ensure the image cells display exactly as intended.
- Test in all browsers and all email clients. Just because it looks good in Gmail, doesn’t mean it looks good in Outlook. Pesky Outlook!
Catching their attention with the subject line
There’s no use creating amazing email designs if no one is going to open them. The subject line will be the very first thing they see and it will help them to make a decision whether it’s worth their time to even open the email.
The subject line must be relevant to the content and it must be short and catchy. Honestly, the subject line is one of the hardest parts of making a great email!
By keeping the length of the subject line to around 50 characters, it’ll fit within the subject line box in most inboxes. If you can manage 30 characters, then it’ll fit within mobile inboxes.
Include important information, deadlines and any exciting brand names in the subject line to try to entice recipients to open the email to find out more. But remember to keep it relevant to what’s actually inside the email or else you’ll just disappoint your readers and reduce trust.
Here are some examples of great subject lines that I’ve recently seen in my inbox that have made me want to open the email:
“Making your blog beautiful is easy” from Dana Fox
“SEO tactics that will no longer work. Period” from HubSpot
“Holiday Boot Camp: Ace customer service” from Etsy
“2 for 1 exercise class pass!” from 1Life
“Try our new courses for free!” from Shaw Academy
A good website to help you evaluate subject line ideas is: subjectline.com.
And remember, you can always split test the subject lines if you want to assess what works best with your audience (basically send the same email to different people with different subject lines and assess performance!).