.jpg)
We get it. Emails are tricky. They are the smaller brother of websites when it comes to design, but that doesn’t make it easier to design them - far from it. They are more restrictive in terms of flexibility, have less real estate to work with in comparison to a landing page, and you must be constantly creating new material to stay fresh. Therefore, venturing out and taking on email design for your company is no small feat. Thankfully, we’ve created a few emails ourselves and have come up with a great list of best practices for you to follow the next time you’re thinking about whipping up a tasty email campaign.
%20(1).png)
Unfortunately, with email design. you don’t have much real estate to work with, and even less when you know the average attention span of your audience (only about 8 seconds). This is why using quality images that convey your message while also displaying your brand (or brand image) is so important when designing an email.
According to MDG Advertising, 67% of consumers say that the quality of a product image is “very important” in selecting and purchasing the product
If you can get a professional photographer, videographer, or someone who is REALLY good with a camera phone, taking pictures of your products and people using your products is the number one way to relay your brand message. Another option is to use an open license picture that represents the general feeling or message you are trying to portray in your email (we like to use unsplash.com or pexels.com).
No matter which option you chose for content creation for your email design, the key is to have consistent quality assets. Inconsistency in the images you chose to represent your brand can look disorganized and even give your users a feeling of untrustworthiness. However, proudly exhibiting quality images that proudly show off your brand will feel premium to your users and keep them engaged throughout your marketing material.
%20(1).png)
Nobody likes receiving an email that looks like it was built with Lego blocks; when the build of the email is painfully apparent to the user, you’ve missed the mark in terms of design. Email design, like all digital design, should flow effortlessly and seamlessly (unless you make the seams extremely apparent and part of your brand’s design language).
This is why integrating elements into the images you chose to represent your brands is a very common best practice in email design. This includes things like; layering text and image elements, decreasing text material opacity to let the background show through, and introducing shading and light sources to text components. The additional effort to blend the more informative details of the email with the appeasing image elements will help the email flow and drive customers to keep scrolling. This integration can also be done with plain shapes and drawings, as well as CTA buttons (although these are much harder to integrate with images).
%20(1).png)
To reach all users within your target market, you have to understand how your outliers operate. In this case, we have to think of an outlier as being someone who is engaged with your company and your email, but if their attention is pulled away at any point, you may lose them entirely. We will call this the “Distracted Outlier” and, with modern technology shortening everyone’s attention span, your customers can easily fall into this category.
The way to help the Distracted Outlier get the value they need is by prompting them to take action on the information that is presented to them immediately. This means adding CTA buttons or links wherever naturally possible to ensure that users instantly have somewhere to go if they like what they see. Without the CTA button, the Distracted Outlier will return to their inbox or click on a new notification, thus hurting your click-through rates.
Remember that you are outlining a new opportunity in your email to provide value for your customers. Therefore be careful to not seem “pushy” with your CTAs to the point that your customers think you’re only in their inbox to sell. Our general guideline is to include one in every section of your email.
If you are going to be adding multiple CTA buttons throughout your email, it is important that the buttons don’t look like they’ve been copied and pasted throughout your content. Because you are not providing them with any additional value by simply saying “SHOP NOW” or “CLICK HERE”, you can lead your customers to think you are just there to sell them a product.
To add CTA volume to your email without being “pushy”, consider changing up the text contained within the CTA. Try to sum up the information provided in the section in 3 or 4 words, starting with a user action. You can even use humor in your CTAs to give your customers a little laugh, thus putting them in a good mood before taking action.
Here are some generic (but not boring) CTAs for your next campaigns:
There are so many email template builders online these days that it’s sometimes hard to keep track. One hang-up that we have found with almost all of these template builders is that it’s not always easy to incorporate custom fonts in your design. Either the process is difficult to follow or you have to incorporate it directly into the HMTL code; neither of which is ideal.
However, we have found that it is always worth the extra effort to push through and use the brand’s chosen fonts to create and design your emails. Not only does it get you more familiar with the tools that the email builder has to offer, but remaining on brand is of paramount importance while creating marketing material.
We at CAL use Klaviyo for our email marketing management. Here is a guide to help you add custom fonts to your emails using the Klaviyo interface!
Remember that the goal of your email marketing is to have your customers so enthralled by your offer that they want to discover more about the product and even be driven to purchase. Any incongruencies within that purchasing path can confuse and even spark mistrust in your audience. Therefore, having your font match between your emails and your websites is crucial for converting people who are interested in your product to paying customers.
Much like integrating company fonts to remain on-brand for company marketing content, it is equally important to do the same for company colors. However, while it is important to stay within branding limits, this is your time to experiment and have fun with your palette. The colors must remain complimentary to your brand colors to ensure that they don’t clash with your email design, but they do not need to be your exact branding colors. Only using your branding colors for material like email marketing could lead to boring design, thus leading your customers to feel less excited about your relationship.
Makes sure to use a color wheel and keep color theory in mind while venturing away from company brand colors. The right combination could mean better engagement, but the wrong combination could ruin the look and flow of your email. Be careful about contrast when designing as well; you don’t want readers to not be able to discern text from the background.
You will design many emails through campaigns (which disappear anyways) and automation, so now is your chance to experiment and test out some variations. Just remember to keep track of what does well and what doesn’t to ensure that mistakes aren’t repeated and good design is reproduced!
Here is an easy rule to remember when designing the footer of your email: do not use the original social media logo colors. No seriously, don’t. Using these icons confuses your brand colors and will introduce confusion for your users (as well as pull attention away from your beautifully designed email).
Instead, opt for a shade of color that your company already uses or any variation of a color used in your email design (just make sure that there is enough contrast between the icon and the background). This will help the flow of your email and make the social icons seem like an afterthought (think “oh btw…” instead of “HEY LOOK HERE”).
Your email users already know to look at the footer to find your social media links if they need them. Be sure to make them accessible and easily clickable, but they don’t need to be in your customer’s face.
.png)
Your above-the-fold section (ATF) is arguably the only important part of your email design:
Above the Fold is the portion of an email or web page that is visible without scrolling. This portion will differ across different screen sizes of course but consequently, email designers and developers give a lot of thought into what goes above the fold.
With an amazing ATF section, users should already know if they want to engage with your brand or not. Therefore, if you can summarize all of the information that your email contains within one section, you are maximizing your click-through potential. Ideally, customers will only scroll below the ATF section for additional details if needed, as only about 43% will continue scrolling. Your ATF section should also contain your best image asset (or the one that communicates the message of the email the best).
If you aren’t able to pack in all of the information of your email into one ATF section, you can entice your users to scroll with a CTA (e.g. “SCROLL FOR MORE”). Use caution with this strategy: you are using up a very crucial CTA that won’t lead directly to your store and might lose some users who want to see the product right away. We suggest using this strategy for newsletters only, as it is impossible to have all of the important information in one section. Also, getting customers to buy a product isn’t the goal of the newsletter, so losing users who don’t want to read more isn’t as crucial.
We get it. It would just be so easy if we could design our emails in our favorite editing software, export them as pngs, upload it to our email builder and send out our emails as one big clickable image. Some big companies still do it (looking at you Hudson’s Bay). However, this is not a good email design practice for a few reasons:
As of today, email design is restricted to the table layout. Unfortunately, more developed CSS properties like grid and flex are displayed differently depending on which email provider your customer is using (Outlook is lagging). This means that, while these properties are available to those who custom code their emails, it still doesn’t guarantee that their designs will look the same on all screens (and is therefore risky from a design perspective).
Exploring the table layout and how you can use it to create unique and interesting designs is a challenging best practice, but one that will make your emails stand out. When you get crafty with these limitations, you can create things that haven’t been seen before by your customers and will spark additional interest.
Our tip is to remain fresh, flowy, and fun but always test for responsiveness on different mobile and monitor devices. This can be done using different combinations of overlaying text, shapes, and images to be original and creative. But remember: while a unique layout will draw in more users, one that breaks down on different devices is sure to drive users away and hurt your brand image.
We love designing emails and want to see the quality of emails everywhere elevate as customers use them to communicate more and more. This is why we compiled this list; if we can help the email design community grow, we get to see better email design (and hopefully better email design technology to help)! Enjoy and reference this best practices list when you feel stuck in an email rut and let us know if you found this article helpful!
.png){kind=small}