Electronic mail Design Fundamentals: Half 2


This is part two in a series on email design basics from our resident art director and design specialist Tylor Loposser.

In Part 1 of this series, we covered the importance of strict email design principles and some of the basics of running a well-designed campaign. Now we’re going to cover some situational best practices and tips to get the most benefit from your designs.

Improving deliverability

The most beautiful, well-designed email won’t get you far if it doesn’t even reach your inbox.

When we talk about email deliverability, we’re talking about where the campaign lands once it’s accepted by the inbox provider. 80% of deliverability is influenced by your reputation as the sender, and the other 20% is the content of your mailings.

To speak with the content of this statistic, you should keep in mind that most major email providers like Gmail use algorithms that identify emails made up of text or images. This can be a spam trigger.

I like to use the 60/40 rule to avoid this. That’s 60% images and 40% text. Applying this mix makes for a very engaging email and helps avoid these pitfalls.

If you’re coding your own campaigns, double-check your code!

Check for broken markup or open tags. Avoid redundancies. Concise code is “lighter” and has a better chance of landing in the inbox. Also, make sure you adhere to GDPR standards and CAN spam regulations.

The other part of this statistic is your reputation as the sender. This is mainly influenced by the behavior of your subscribers. So it’s important to keep them happy and engaged. Here are a few points to keep in mind:

  • Always create precise mailings with clear (and limited) calls to action. When the content is heavy, the analysis paralysis shows their ugly head and leads people not to make any decision at all.
  • Show respect and remember that you are a guest in your subscriber’s inbox. Be aware of their time and let them know that you are listening to them.
  • Personalization, but the type of personalized content that goes beyond tags. Write a copy that speaks directly to your subscribers. View dynamic content to incorporate your interests.
  • Look at the tone and use your brand’s personality to motivate your users. This can be a great way to remind your subscribers that there is a human on the other end of these campaigns.
  • Always have plans for surveys and tests. Reach out to your audience and make sure you meet their expectations. I would recommend quarterly reviews and make changes based on your results.
  • And finally: strong. Unforgettable. Branding. If people don’t remember you, they won’t open your emails anymore. This inaction causes some email clients to automatically move these mailings to the spam folder.

Top tips for accessible email design

This is a really fascinating subject, and it returns to what designers are really good at: creating things for other people. It is a process that begins with empathy and ends with making sure we are creating ways for everyone.

These tips are for designers, but keep in mind that these efforts require many different disciplines.

  • You should do alternative text already, but make sure it’s descriptive. People with visual impairments rely on this data.
  • Do you remember what we learned about hierarchy in Part 1? It also plays a role in accessibility. The definition you create helps with cognitive retention.
  • Be careful with your colors, especially when copying. This is about how two colors react when placed next to each other. There are tons of tools online that designers can use to create color combinations that improve readability. This should be taken into account for every copy in your mailing, including your CTA. Interesting Fact: Loss of the ability to see red and green is the most common type of color blindness
  • Protect your buttons. Don’t use images for CTAs. Use inline links or bulletproof buttons.
  • If you want to use inline links, give them two characteristics to indicate that they are interactive (e.g., bold + color, underline + bold). Don’t let color alone be an indicator that something is clickable.
  • When you want to work with buttons, the Campaign Monitor editor uses what are known as “bulletproof buttons”. They consist of HTML (color / shape / text); This ensures rendering in all cases.
  • Use as much live text as possible instead of using images as text / images with text overlaid. Live text can be recorded and read by screen readers.
  • Pay attention to your alignment: Any copy that is longer than three lines (this also applies if the mailing is on a mobile device) should always be left-justified.

Integrate video into email

There are currently only about five email clients that reliably support viewing videos within a campaign. However, if you’re interested, there are some great third-party services like Liveclicker that you can use to set up videos and embed that code in your template HTML.

This is usually only available to users using the Template Builder and to people who are email developers and get their hands dirty with some comfort in code. So there are some additional costs and skills required to achieve this.

On the other hand, we have 13 email clients that support animated GIFs. One option is to create an animated GIF with some frames from your video and place a play button over it. This creates motion and mimics a video. Then the image will be associated with the location where your video is hosted.

All kinds of animations have been shown to increase engagement and generate additional clicks. This option is much easier to achieve if you have limited resources (money, time, skills).

How to design for dark mode

More and more email clients are offering a dark mode option for their apps and web experiences. The best practices for dealing with dark mode in email are still under development, but I have a few tips:

  • You have two options for pictures. You can save JPegs with the background preserved so that you get a streaked effect throughout your campaign. Or you can save your images as PNGs to have a transparent background and make your images appear cut out over the background in dark mode. It’s a matter of preference; Once you’ve tested, see what works for you.
  • You can apply white outlines or an outer glow to all dark logos / symbols that are PNGs to prevent them from fading out in dark mode. The additions you have made are invisible on a white background.
  • Your CSS style attributes such as background, color, background color, background color or color are influenced by the email client when entering dark mode. The HTML copy is automatically converted to white text. There are image changes that can be performed by media queries for settings in dark mode. You can also apply underlining for dark mode to keep inline CTAs prominent. The entire control takes place in the CSS.
  • I would recommend making a test ring. As with all mailings, take time to test it out before sending it out in large quantities. Send tests to reps with different dark modes / email clients to get an idea of ​​how your mailings will look in many different scenarios.
  • You can also always try changing your background in the template to black for a quick look. In the Campaign Monitor Editor you will find the option for the background color once you have clicked on the gear icon in the upper left corner.

Wrap up

Design isn’t just about making emails pretty and wrapping them up nicely. It’s a fundamental part of marketing and your relationship with customers. It can inspire loyalty, evoke engagement, enforce action, and express emotions. It even affects whether you end up in the spam folder!

There is a lot to balance and consider. Do not forget; You can always refer to our pre-built email templates to get results so you can focus on the content, the message and the strategy. With our free image gallery, you can add stunning, high-quality images to your campaigns at no cost or effort.

Leave A Reply

Your email address will not be published.