Beefree blog

How to create a responsive email infographic

Beefree team
Beefree team
Oct 24, 2015
How to create a responsive email infographic
How to create a responsive email infographic

In this week's Design Inspiration post, wetook a closer look at anemail from Aveda(below). Aveda made some smart choices inthishighly visual, on-brand message,incorporating modern design trends like infographics, natural textures, and a monochromatic color scheme. Butit 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.

avedaemail

A quick recap: Avoid designing image-only emails

Image-only emails areproblematic for a number of reasons: some peoplewon't be able to see an image-only email at all (because of their email client settings); image-only emailsend up in spam folders; they aren't mobile-optimized; and they often don't getfully 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 enablingimages in our inbox, one design tactic that we noticed and liked right away in the email is this infographicshowcasing their product:

Aveda shampure email infographic

It's prettyquick 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'llbreak 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 usetheBEE 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 emailwill 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 thatoptimize a viewing experience on different sized devices, particularly on small mobile screens. Responsive designworks by usingCSS 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 wedesign responsiveby applyingsmart CSS media queries, optimizing emails for mobile screens without needing tocode a single line.For ourinfographic to function in aresponsive way, we simplyneed to redesign it to consist offour sectionsarranged 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'sthink ofthe 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 draga 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 ouremail 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 canpopulate each quadrant with the appropriate content.

Screen Shot 2015-10-21 at 1.12.31 PM

The first quadrant needs text and abutton.

Screen Shot 2015-10-21 at 1.12.50 PM

The following three quadrants will all have the samelayout 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 aresome 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 thatthetwo-column grid structure we've chosen reformats intoa single-column layout the way we want it toformobile 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

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-responsiveemails 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!

Related posts

Why Pardot Users Choose Beefree for Better Email Design

Pardot’s email builder slowing you down? Learn why teams across industries turn to Beefree to create stunning, compliant emails—then export to Pardot with one click.
Beefree team
Apr 23, 2025

Send Error-Free Emails with Confidence Using Beefree

Learn about the Beefree features that can help you and your team catch mistakes, streamline collaboration, and send with confidence every time.
Beefree team
Apr 15, 2025

Using Beefree with Marketo Engage 101

Learn how integrating Beefree with Marketo Engage can help you build high-converting, on-brand email campaigns— faster.
Luca Penati
Apr 4, 2025

Stay informed on all email trends

From the latest creative design strategies that inspire your next campaign to industry best practices and tech advancements, our newsletter is the go-to for all things creation.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By clicking Subscribe you're agreeing with our Privacy Policy