Craftsy Inspires With S-Curve Design + Subtle Animated GIF

[ 0 By

When Ryan Brandle, Senior Interactive Designer at Craftsy, submitted this email to be featured in our inspiration series, I was really impressed with its infographic-like design & subtle animated GIF! It’s a visually appealing email and compliments the Craftsy brand. Let’s take a look:

OBJECTIVE: CREATIVE SEGMENTATION AND COMMUNICATION

Before we analyze the design aspects of the email, let’s take a look at the goals of the campaign. Craftsy is a crafting community that focuses on online education and are constantly challenged with presenting their large catalog of classes in new and exciting ways that encourage user interaction and ultimately drive class purchases.

This particular email targeted their cake decorating user base, one of many genres catered to on the site. Their goal was to present the newest classes for 2013 in a fresh, exciting and engaging way, along with offering a discount to encourage class sales. They campaign was sent on New Year’s Eve — they definitely tied the holiday into the email design and content!

SUBTLE ANIMATED GIF

Another one of my favorite aspects of this email is the subtle animated GIF of the “shining” New Year’s ball.

As Ryan explained, while “animated GIFs are a trending technique in the email world,” it can distract from your design if not used properly. They managed to integrate an animated GIF into the design in a non-spammy, non-distracting way that compliments the design as a whole.

The animated GIF adds an extra touch to the email and plays along nicely with the New Year’s theme of the email. It’s a definite win in my book!

INFOGRAPHIC-LIKE, S-CURVE DESIGN

Another aspect of the email that I really enjoy is the infographic-like setup. Paired with the “S-curve” design of the email (alternating text and image between the left and right sides of the email), the reader is encouraged to scroll down the entire email. The ball on the pole also acts as a visual queue, suggesting there is more to come as you scroll down the email, following the pole to its base. This design element encourages scrolling and guides viewers through the entire length of the email.

IMAGES-OFF OPTIMIZATION

How does the email look when images are disabled? Not too shabby!

Due to Craftsy’s use of background colors and live text throughout, the email maintains its hierarchy and message — since the objective was to communicate their new classes, the fact that the message still comes across is huge.

I also noticed that Craftsy includes styled ALT text in their email! However, in the email clients I tested with (Apple Mail, Gmail, Yahoo!), the ALT text wasn’t visible. Why not? Most of the images in the email don’t have their height or width specified in the HTML. ALT text is kind of picky — in order to display consistently, it must fit inside the container created by the missing image. If the container is too small (either because the font is too big, or height/width was not specified), the ALT text won’t display at all.

It’s too bad that Craftsy’s ALT text efforts aren’t as visible as they could be. The good news is that adding in those height and width attributes to their images should be an easy fix. Bold, orange ALT text looks so much more put together and thought-out than the usual blue ALT text! You can see here how the top of their email is transformed by adding height & width to their images and letting the ALT text come to life:

BLUE LINKS ON IOS DEVICES

As we’ve mentioned before, it’s not uncommon for iOS devices to detect and alter the style of phone numbers, addresses, and dates. Modified to turn blue and underlined, iOS links such text to app-specific activities, like making a call, launching a map, or creating a calendar event. Since Craftsy places their physical mailing address in the footer of the email (it’s required under the CAN-SPAM act), there are a few blue links in the email when viewed on an iOS device.

While it may be handy for subscribers to launch a map of Craftsy if they are planning on visiting the office, the blue links aren’t a great match with Craftsy’s branding and color scheme. Craftsy could restyle the blue links with a simple bit of embedded CSS in the <head> of their HTML.

TRY A PURPOSEFUL PREHEADER

In this email, Craftsy’s preheader is “Does this email look a little quirky? View Online.” While I love the language used on what is normally a boring “view this email online” call to action, Craftsy might consider using this prime space as an opportunity to further encourage their subscribers to open the email. Since some email clients (Gmail, Outlook, iPhone, Windows Mobile 7) will display a portion of your preheader text as “preview” or “snippet” text, it’s important to use these few lines of text to your advantage. It’s the perfect place to get your subscribers’ attention, sum up your email, and include a call to action.

WHAT DO YOU THINK?

What are your thoughts on this email? Are you impressed with its infographic-like design? Let me know in the comments section! According to Ryan, it was definitely a successful campaign with a 52% open rate and 17% CTR — very impressive!

WANT US TO FEATURE YOUR EMAIL?

If you have an email you’re especially proud of, email it to us at inspiration@litmus.com and we’d be happy to take a look!

ADDITIONAL RESOURCES