A Designer's Complete Guide to Email
In addition to guest posting on the UpCity blog, Sensible Marketer is featured as one of the Top Digital Marketing Agencies in Canada. Check out their profile!
You’ve received the brief and have been tasked with designing an email. But where do you start? The process can be daunting, with all the details and limitations of email. Unlike websites or print, you don’t have the flexibility in emails. Emails have to start based on a grid system, and you have to think like you’re designing for systems in the 90s.
But don’t worry–we’re here to share our tips and tricks as we create, send and measure millions of emails a year for our clients. Here’s our guide on how to get emails that look good, without all the headaches (or at least less).
What visuals and assets represent the Key Message?
Whether it’s in your brief or you need to ask the person, make sure the one key message is clear. Once it’s set, choose the imagery you will need from the assets you have, or identify what you need to source. In emails, you can use:
- Animated gifs
- Images and illustrations
- Video: it is possible to embed videos with HTML5, BUT, many email clients still don’t play videos in the email. Your best bet here is to create a short gif of the video, or even include an animated play button, with a link to your video. For some ideas, check out Campaign Monitor’s information on embedding videos.
Ensure you have a logo ready for the email, and an idea of how you are going to treat buttons or links (we call these the Call to Actions or CTAs for short).
Are you building the email in a content editor or with custom HTML?
All emails are coded in HTML, but now there are tools that will let you drag and drop images, text, and buttons to create an email–this is called a Content Editor. The other option to creating an email is by having a developer code the email in HTML, from scratch.
There are a few requirements and limitations to consider when deciding on a method to choose. Here how to decide which way you’re going:
Start designing on a Grid
Your first thought may be to design the email as an entire image or using a lot of images. PLEASE DON’T! There are a lot of issues with Image-Only emails or image-heavy emails. Here’s what they are.
Email clients like Gmail, Outlook, and others have default settings that block images from being loaded automatically, or people turn them off to conserve data or space. If this happens to your email, the person will see nothing. After all that work, it will result in nothing coming through. There are also other issues, such as hitting spam folders, promotions, or other areas other than the inbox, as ISPs think you’re sending spam. There are also groups of people who use a screen reader to consume digital content, so you can miss out on those individuals. But don’t worry–we will have options for you later on for the final files.
We know email design isn’t always exciting nor award-winning, but it gets really good results. When designing an email, you need to base it off on “the lowest common denominator.” This is because there are a lot of email clients out there, like Gmail and Outlook, who will choose to display your email differently. Emails need to be designed so they can look the best on multiple clients, as well as a mobile, tablet, and desktop view.
This is where the grid comes in. Think of your email in horizontal sections, where you can place say a whole image, an image with text beside it and a button, or two images side by side. From there, you can layer in more sections below. By placing your design in a grid or table format, there’s a better chance that the email will hold up, regardless of what device or email client your end-user has. This is better than doing say one large image with everything you want in it, as it will not show up how you envision. It will be too small on mobile, users won’t know what to do with it, and the image may be blocked entirely. By working with a grid system, it is easier for your email to stack for mobile and tablets, without losing the overall design of the email.
Let’s move on to layout.
Laying out your message
The layout of your email should show the viewer what is important and where to go next. Remember, people read from the top down, so keep your most important information at the top. Also, remember to leave white space and tactically place your visual and written components.
The Top Bar or Pre Header
At the very top of an email, many designers will create a ‘top bar’ or ‘pre header’–this may be the area that houses language toggles, ‘view in browser’ links, or other static items that you need in your email. Your Logo may reside in this area, or below as part of the header.
This is where designers may want to place larger, more beautifully designed links or areas that are carried through multiple emails. Think of things like signing into an account, perhaps a resource page, maybe even a shop now button. These are items that would be carried through across all emails and should remain consistent.
The Header (like a Hero Banner or Header Image)
Following the top bar, the prime real estate in your email is your header. Headers can be full-width images, a logo within your image, video or gif, or even simple text – large or regular sized. Be sure your header message is tied into the Key Message.
Tips for your Header section
- Make images 600-640 pixels wide, and ensure good resolution for those retina devices
- Make sure they link somewhere. Logos should always link to the homepage, and the header image, as well as all buttons, should drive the client to the place that makes the most sense. At the very least, ensure the header image connects back to the website
- Ensure that a CTA is visible, or a very short scroll after to drive the user to take action
The Ankle and Footer
Don’t forget about these two areas, as they are often left out but can impact the overall look and feel of your emails. The Ankle can be a place to put your logo, as well as your social media icons so they don’t clutter your email. You can also include support links here, hours of operation, and other information that is helpful to your target audience. Marketers may also need legal to be housed here, so don’t forget to allow for space for that. And most importantly, remember to include the unsubscribe or preferences link.
The footer needs to house and Canadian Anti Spam or Anti-Spam requirements, and can also be formatted. This is where you include information about why this person is receiving the email, your address information, and even additional companies you’re affiliated with. Sometimes this area just needs a background color and some nice formatting.
Now let’s look into the overall format of the email.
When you’re on a desktop, you may see those emails where there’s an image on the left-hand side, with text beside it. This is what we would call two columns. Then there’s some with an image, with text below, button, and then an image, text, button, and so on. These are single-column emails. One-column emails are arguably the easiest for readers to navigate and are great if the majority of your audience uses mobile because everything stacks nicely. This design layout shows the audience very clearly what is important and where to continue in the email. The one-column design also allows for images to scale without difficulty.
The world is moving towards the single column, as we are seeing more users reading their emails on a mobile device. If you choose to design in two columns so you can break up the email sections, ensure you build a mobile version mockup, so any developers know where you expect things to stack. In any content editor, you may see that the image is stacked at the top first, so factor that into your design.
Designing your Call-To-Action buttons
Your email is looking for an action from the user receiving it, so we need to make sure it’s clear. When it comes to designing the CTA, the visual components must compel the user to complete the action. Your email should have one primary CTA and can have secondary CTAs.
Once you’ve determined your primary CTA, it typically needs to be placed in the top half of the email. This is because we don’t want it to be missed – remember, people, don’t have a long attention span! It’s also common practice to repeat the CTA button in a section above the footer or in the footer of the emails with few content sections.
Now the fun part–color and sizing.
- The primary CTA button should be a bold contrasting color compared to the rest of the email. By doing this you draw the user’s eye directly to the action. Use stark contrast when necessary.
- The sweet spot for CTA button sizing is between 47–50 pixels tall. Make sure it is readable.
- You also want to include ample empty space around the CTA. Make sure it is clickable on mobile.
- CTAs can be styled as buttons, or even as text links. Be sure to include underlines, bolding and clear call to actions that let the user know it’s a link – Buy Now, Learn More, Email Us, etc.
- Often, a carrot can help with people clicking through. This may be an arrow or bracket ( >) to help show the user will go somewhere.
- Don’t forget to ensure that you or your developer knows that the links should open new tabs, so the user stays on your email.
Pro tip: no matter what you do, some email clients can alter how your CTA button appears. For instance, Outlook does not support rounded buttons so be prepared for alterations based on the email client. So be mindful of that.
Consideration for building your final files.
You’ve spent a lot of time choosing the right imagery, so let’s make sure it shows up well. Remember to keep any full-width images to 600-640 pixels wide. Note that once you have correct size images, you want to ensure that you export your assets at 2X for retina display. This will ensure that the image displays nicely on various-sized screens.
Now that you have your optimized images and are ready to go, the next step is to complete the Alt text for the image. Alt-text is the alternative text displayed with an image. It is a statement that provides the context of what the image is for those email clients that have images blocked, turn off by default, or have dark mode activated. Now let’s break up the different imagery options and their corresponding considerations.
If you want to use a background image, the majority of email clients do support that capability. It’s possible for HTML text to be written over top of a background, however, testing and tweaking the email will be essential. If your email recipient has dark-mode activated, the color of the HTML text will invert which is an important aspect to consider. Make sure you specifically test how the email is viewed through different email clients.
Text Overlay on Images
Text overlay on images can be a great use of your header space. This allows the text to still show, even if the recipient has to download the image. It allows you to also include branded elements in your email and have some creative freedom. It is important that the copy be hard-coded into the email and bold enough to be easily read, or you may run into challenges. The hardest challenge is dark mode, which alters the color scheme so light colors become dark and vice versa.
Where images are concerned, you want to remember that we are building the email in a grid. Although overlapping images can look great on a website or in printed material, trying to use overlapped images within your email can cause more problems than not. Image overlapping is not for the faint of heart if your developer is building the design from scratch. Creating a successful overlap image from HTML involves saving the individual element as .pngs with transparent backgrounds. Be sure to test how these images appear when they are flipped into dark mode.
Balance and Placement
But don’t get us wrong- we love images as they can draw in visual interest The rule of thumb is to use a 50/50 balance of images to copy, as more images can trigger spam filters. Having a header image is common and to be expected from your audience, but if the image is left at 100% it will slow load time. Once you have the image, pull back on the quality until you find a balance between load time and image integrity. You might need to play around with this to find the right mix, we usually aim for 85% quality.
At the end of the day, when it comes to images, you want them to enhance your email and not deter people from it. We at Sensible Marketer like to take the “loads fast, looks good” approach with images. Larger images, pretty as it may be, will take longer to load and chances are the reader will lose interest after two to three seconds.
Hear From Industry Experts
Read the latest tips, research, best practices, and insights from our community of expert B2B service providers.
Be sure to test, test, and test again
Once all that work is done and your email is ready for testing, make sure to have it sent to a couple of email accounts and then check it on outlook, Gmail, for both desktop and mobile at the very least. Click on all your links (except maybe the unsubscribe!) and make sure everything looks spot on. Because who knows–maybe you will win an award for this one!
Whether you are creating an email from scratch or using a content editor, you want that email in the inbox and to drive action. With this guide, we hope we have gotten you halfway there.
About the author
Caroline helps Sensible Marketer's clients turn complex web projects into well-thought-out interface designs. As our senior developer and introverted nerd, the years of experience she brings in UX design, web development, and email marketing makes her our expert on everything technical.
She loves to bike, bake and create automated processes. With the rapid pace of the digital world, focusing on aimless tasks leaves businesses stuck. Instead, she feels we should prioritize self-sufficient processes that are easy for all.
Prior to joining our team she worked at SAIT for 4 years and did a lot of work using Salesforce for email automation.