← Customize 200+ templates for your next newsletter

Workshops

How to create a responsive email infographic

How to create a responsive email infographic

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.

avedaemail

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:

Aveda shampure email infographic

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:

ScreenShot1417

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:

Screen Shot 2015-10-21 at 10.44.04 AM

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…

Screen Shot 2015-10-21 at 11.14.33 AM

…so that our email design mimics the 4-quadrant infographic structure:

Screen Shot 2015-10-21 at 11.28.42 AM

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.

Screen Shot 2015-10-21 at 1.12.31 PM

The first quadrant needs text and a button.

Screen Shot 2015-10-21 at 1.12.50 PM

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.

Screen Shot 2015-10-21 at 1.14.49 PM

Now our structure is customized with all of the proper content blocks ready to go.

Screen Shot 2015-10-21 at 1.15.44 PM

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.

Screen Shot 2015-10-21 at 1.43.40 PM

Screen Shot 2015-10-21 at 1.41.33 PM

  • We left-aligned the “WATCH VIDEO” button and images to match Aveda’s layout—an easy adjustment in the Content Properties menu.

Screen Shot 2015-10-21 at 2.37.17 PM

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.

Screen Shot 2015-10-21 at 2.00.09 PM

Then, we select Mobile and scroll through our email. It looks great!

Screen Shot 2015-10-21 at 1.57.33 PM Screen Shot 2015-10-21 at 1.57.19 PM

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.

Screen Shot 2015-10-21 at 2.43.37 PM

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.

Screen Shot 2015-10-21 at 2.55.05 PM

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.

Screen Shot 2015-10-21 at 2.58.19 PM

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:

aveda email no images

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):

ScreenShot1433Source: Litmus: iPhone vs. Android: How to Get Your Email Looking Great on Both Platforms, April 2015

We’re finished!

Our final infographic looks awesome on our desktop…

Aveda email

…and on our phone:

image1 (1)

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:

Aveda’s infographic:

aveda original no images

Our infographic:

aveda email no images

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!

Our Reader Score:

Total: 0 - Average: 0

Kelly Shetron