A Designer's Complete Guide to Email

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.

Columns

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.