In this week’s Design Inspiration post, we took a closer look at an email from Aveda (below). Aveda made some smart choices in this highly visual, on-brand message, incorporating modern design trends like infographics, natural textures, and a monochromatic color scheme. But it has a fatal email design flaw: the email is made up entirely of images (i.e., it’s an image-only email).
Here’s the Aveda email. You can also see the web version here.
A quick recap: Avoid designing image-only emails
Image-only emails are problematic for a number of reasons: some people won’t be able to see an image-only email at all (because of their email client settings); image-only emails end up in spam folders; they aren’t mobile-optimized; and they often don’t get fully downloaded. Check out our post to get the full scoop and ensure you aren’t making the same commonly-made mistakes in your email campaigns: read how to avoid the pitfalls of image only-email.
In today’s workshop
After enabling images in our inbox, one design tactic that we noticed and liked right away in the email is this infographic showcasing their product:
It’s pretty quick and easy to tell what the product is and how to use it, isn’t it? That’s because our brains take only 1/4 of a second to process visual cues. With just a quick scan—no need to read much or watch a video or keep scrolling—we understand just what the shampure™ product does. That’s what makes an infographic such an incredibly effective tool.
In today’s workshop, we’ll show you how to recreate this infographic, optimizing it for email. Notice the original Aveda’s infographic is a single image, meaning all the pitfalls of image-only emails we mentioned above apply here. If images are turned off, we just see empty space in our inbox:
We’ll break down how we’d recommend recreating Aveda’s infographic—into different content blocks—so that it’s mobile responsive, renders fully, and looks great across devices and email clients.
Getting started: Let’s open the BEE editor
First things first: for this workshop we are going to use the BEE email editor (it’s free, online, and requires no registration). Give it a try and follow along!
Step #1: Set up a 2-row, 2-column structure
Properly setting up the email’s structure is critical here because it will determine how the email will rearrange—or be “responsive”—on a smaller screen.
Let’s take a step back for a moment and think about what responsive design is and how it works. Broadly speaking, responsive email design is a collection of design and coding techniques that optimize a viewing experience on different sized devices, particularly on small mobile screens. Responsive design works by using CSS media queries (conditional statements) to detect the exact screen size of a device then adjust the email based on the statements in the code.
Lucky for us, the BEE editor automatically makes any email we design responsive by applying smart CSS media queries, optimizing emails for mobile screens without needing to code a single line.
For our infographic to function in a responsive way, we simply need to redesign it to consist of four sections arranged on a grid instead of as a single image block. By breaking up the infographic into sections, the BEE editor will be able to rearrange them into a single column for easier viewing on a mobile.
So, let’s think of the infographic in quadrants, like this:
To create this grid in the BEE editor, we’ll drag a couple of two-column rows from the Structure menu into the body of our email…
…so that our email design mimics the 4-quadrant infographic structure:
Step #2: Customize your 2-column structure
On the right side, switch menus from Structure to Content so we can populate each quadrant with the appropriate content.
The first quadrant needs text and a button.
The following three quadrants will all have the same layout of image and text, so we’ll drag those content elements in one at a time.
Now our structure is customized with all of the proper content blocks ready to go.
Step #3: Add the content
One by one, we’ll go through each quadrant adding Aveda’s content. Here are some design decisions we made:
- We’ve chosen Georgia as our font as it most closely resembles the Aveda typeface. Because we’re using a text block and not embedding an image, the text will always be shown.
- We formatted the “WATCH VIDEO” button to match the color and style of Aveda’s. Ours, however, is bulletproof (like all buttons created in BEE) so we don’t have to worry about visibility or functionality issues that image-only buttons face. (Here’s our how-to post on creating and formatting bulletproof buttons in BEE).
- We left-aligned the “WATCH VIDEO” button and images to match Aveda’s layout—an easy adjustment in the Content Properties menu.
Step #4: Preview the mobile version
Before we finish formatting and polishing our infographic, let’s double-check that the two-column grid structure we’ve chosen reformats into a single-column layout the way we want it to for mobile devices. In BEE, we can preview the desktop and mobile versions of our email at any point in the design process. Before we finish our infographic, let’s take a peek.
We simply navigate to the Actions dropdown in the top left and select Preview.
Then, we select Mobile and scroll through our email. It looks great!
Step #5: Add the finishing touches
Adding background color
In the Body menu, we can change the background color of the entire email all at once.
We chose to use a neutral HTML color (gray #d7d9d2), which matches the color of the background image, and we also made sure to update the font colors to mirror Aveda’s.
Adding a link to the call-to-action button
Don’t forget to make that “WATCH VIDEO” button functional! Select it, navigate to the menu on the right, and add Aveda’s video link to the URL field in the Action section.
Link the images and add ALT text
Let’s optimize our images. We’ll add links, making sure we’re providing readers with more opportunities to click for more info (i.e., to the video of how to apply the product).
We’ll also add ALT text so any subscribers who aren’t viewing images (per their email client settings) know what the images are and can tap to download.
A side note on ALT text
For today’s workshop, we did a few quick tests on how ALT text renders in our inbox, in particular in Gmail in our web browser and on our iPhone. We noticed that in Gmail, the ALT text was not showing at all:
At first we thought it was because the ALT text that we wrote was too lengthy. Then we thought it was because the image height dimension was not specified to empty (shown as height=””). But in our tests, we learned these weren’t the issues.
We’re currently doing some additional testing and researched ALT text support in email clients. We’ll keep you updated! A good resource and recent article that we found is from Litmus (April, 2015):
Our final infographic looks awesome on our desktop…
…and on our phone:
Our email design best practices
Aside from aesthetics, let’s review why our email-optimized design of the infographic follows email design best practices:
- Subscribers are guaranteed to see all—or at least most—of the email, regardless of their inbox image settings. That’s because most of our message is in content blocks outside of our images (in email-safe fonts). With our email preferences set to NOT show images, check out the difference:
Our infographic could have been even further optimized if the ALT text was shown. But even without the it, the infographic that we created is already such a big improvement from a blank, empty image! We’ll keep you updated on why the ALT text wasn’t showing here 🙂
- It’s responsive and mobile-optimized. A single column layout vastly improves viewing on a smaller screen; the images and text are larger and easier to view without sacrificing scale or resolution.
- Content (text) appears no matter what. Not only does this ensure our message actually reaches our readers, but the increase in quality text will keep our email out of spam folders (read why we recommend hitting a 500-word threshold).
- The entire email is likely to be fully downloaded. With smaller images, it’s unlikely an email client will reach a maximum email message download size limit and fail to show our pictures.
In the BEE editor, it’s super easy to create dynamic, fully-responsive emails that will reach and resonate with your audience. The possibilities for in-email infographic design are almost limitless. Let us know in the comments if you’ve given it a try and how it turned out!