It’s not a pretty sight. As an email marketer and designer, it might even make you wince a little bit when your email campaign shows “Images are not displayed”:
But that “Images are not displayed” message is what greets many readers whenever an image-only email is received. Due to an email client’s default settings or because of personal preference, images get blocked, stripping down from what might have been a beautiful and well-designed message to empty white space. Research has shown that up to 43% of Gmail users read emails this way, without turning images on. Ouch.
In today’s Design Inspiration post, we’re taking a look at the following email from Aveda, an Estée Lauder company known for making cosmetic products with plant-derived ingredients. The reason why we chose the email from Aveda (below) is because it has a highly visual, on-brand message and tells a compelling story about their product. They incorporate modern design trends like infographics, natural textures, and a monochromatic color scheme.
But the email has a fatal flaw: it’s made up entirely of images.
Why image-only emails don’t work
It’s tempting to build your email as one big image or as a series of images, …but this is not an email design best practice, and you’ll likely encounter a number of inbox and mobile rendering issues. Starting with:
#1 Your subscribers won’t see your email
Many of your subscribers won’t see your email, and many won’t take the time to download images to see your email. This is because most email clients, such as Gmail, allow users to set the image settings:
If subscribers have the “Ask before displaying external images” setting turned on, your image-only email looks like this: one empty, blank email:
#2 Your email could be marked as spam
Image-only emails often get flagged as spam because spammers are known to use images to hide email text. Fill your email from top to bottom with images, and chances are, spam filters will snag it before your readers ever get a chance to see your message.
Tip: The 60/40 text-to-image ratio is a myth! Research from Email On Acid shows that your email should have at least 500 characters of text to pass spam filters.
Notice that the Aveda email reaches the 500 character mark, mostly from the small print in the footer (below). This email might pass the spam filter test, but it’s worth mentioning that it’s not quality text that describes the content of your email message.
#3 Your email won’t be optimized for mobile
Notice that the top section of the Aveda email is one big image:
The issue with using an image as a whole section is that the image has a defined width of 640px and when it’s viewed in smaller screens, we’re relying on the mobile client to resize/fit the image accordingly. Luckily, images are resized on iPhone automatically and the Aveda email looks OK (as we see below), although some scale and resolution has been lost. However, on other mobile devices such as on Android, images are not automatically resized and your email wont be able as readable.
#4 Your email wont be fully downloaded
Especially on Apple devices (iPhone/iPad), it sometimes happens that your email is only shown partially, with a message at the bottom which reads “Download remaining XX bytes.” This typically happens when your email client has reached a maximum email message download size limit. There’s definitely more testing to be done.
At the same time, depending our your connection speed and data plan, it’s not wise to download images that are too big and not optimized for mobile. In most cases your subscribers will likely stop downloading images and delete your email in seconds.
Avoid the pitfalls!
Now that we’ve seen the issues with image-only emails let’s look at a few email design best practices:
- Have at least 500 characters of text. Email on Acid has diligently researched and concluded that you need at least 500 characters of text in your email to pass spam filters. The 60/40 text to image ratio is a myth!
- Know your audience. If you have a large mobile audience, take control over how your email appears on smaller devices and make it fully mobile responsive. With mobile email now accounting for up to 70% of opens, marketers can no longer gamble with design that isn’t optimized for mobile devices.
- Bulletproof your buttons. Using HTML instead of an image ensures your call-to-action buttons look great on all devices and always render. Check out our workshop for a step-by-step on exactly how to do this.
- Use ALT text. For any images you include, make sure you’ve added a clear description in the ALT text.
- Don’t rely on images to be the only visually interesting part of your email. Simple design is in. Capitalize on that by using flat design tactics and bold colors to get the attention of your readers and to create an elegant, interesting email. Experiment! A lot is possible in the world of today’s email design.
Stay tuned for this week's workshop, where we'll show you how we recommend recreating the infographic in Aveda's email so that it's fully responsive and mobile-friendly!
Taking a look at what’s working with Aveda’s design tactics
While we won’t ever recommend taking an image-only approach to email design, there are a few design elements of Aveda’s message we like and can learn from.
One thing we really like about Aveda’s email is that if you look at it from far away—even if you’re unable to read any of the content—you’ll probably know it’s an Aveda email anyway. That’s because they stick to a monochromatic color scheme that is within their brand standards. The earth tones and natural textures bring together a cohesive visual identity that matches what the product and brand represent (natural, earthy, organic). Knowing and sticking to their brand reinforces credibility and recognition among Aveda’s customers. It’s a smart move.
The textured backgrounds within the images are much different from the flat design focus of last week’s Litmus post. The look works for Aveda, not only because the wood and cloth textures are in line with Aveda’s brand aesthetic, but they’re also on-trend with the popular craftsman-like design movement that relies on “elements that are hand-rendered, raw, sketchy, and include natural color palettes,” including “raw woods, unaltered metals, and natural inspiration.” Aveda could have moved key parts of their message outside the image, as plain text, but kept layered images to maintain this look, like this:
Perhaps the most visually interesting component of Aveda’s email—and what made it stand out to us initially—is the infographic which simply and visually demonstrates how to use the product. Using an infographic like this in a product launch email is smart because it’s the quickest way for readers to process what the product is. That’s because our brains take only 1/4 of a second to process visual cues. Using vector illustrations with a hand-drawn look means the illustrations are simple and clear (1 color, no shading). Coupled with short, easy-to-read descriptions and the reader knows exactly what the product is and what they’re getting with just a quick scan.
However, a single-image infographic is, again, not ideal. It should be written in HTML, guaranteeing the message will always render.
In our next workshop, we’ll show you how we’d improve Aveda’s infographic so that it’s responsive and always looks great.
So, what do you think? What best practices do you use for including images in email design? Let us know in the comments!