CTA hero

C-T-yaaaaaaay!!

More times than not, an email’s success is measured by the number of clicks it receives. An important factor in getting that reaction is having an effective call to action. Get yours noticed with my tips below.

USE CONTRASTING COLOR
Make sure your call to action stands out by giving it high contrast. Whether it’s a link, a colored box or a graphic, do whatever you can to keep it from blending into the background.

From: Charming Charlie
Date: 11/08/15
Subject Line: It’s the last weekend of BOGO, sooo…
See the full email

Charming Charlie

Here’s an example where Charming Charlie used a dark plaid button to contrast the white background.

LOCATION, LOCATION, LOCATION
You should always aim to keep your call to action above the fold (aka where subscribers will see it without needing to scroll). Also, place it where the eye flows naturally.

From: maurices
Date: 11/14/15
Subject Line: Fa la la la fab!
See the full email

Maurices

Maurices does a good job getting their call to action above the fold in this example.

BE SPECIFIC
Subscribers should know where the link will take them without reading the email. For example, “Shop the Sale” would be a better approach than “Shop now.”

From: American Eagle Outfitters
Date: 11/14/15
Subject Line: Get your shirt together.
See the full email

American Outfitters

Although AEO’s call to actions are below the fold, they do a great job naming the buttons. Without reading anything else, I know exactly where the link “Shop Women’s Flannels” will take me.

KEEP IT SHORT
If your call to action is too wordy, it will become unscannable and could lose clicks. Making it too wide may also make it less apparent as a button.

From: Gap
Date: 11/13/15
Subject Line: a merry mystery awaits…
See the full email

Gap

Gap’s wording is borderline long in this example. It could be shortened to “Reveal Your Deal.” However, they do a good job calling attention to the call to action by giving it contrasting color, and by using the tree background which works as a giant arrow.

From: aerie
Date: 11/07/15
Subject Line: Welcome To Dreamland. FREE Boxer!
See the full email

aerie

Aerie kept their copy short, but they decided to go super wide. Because of this, it’s slightly less apparent as a button/link. If different wording was used, it could be mistaken for a headline.

USE INVENTIVE WORDING
Put your copywriter thinking cap on to make the link fun and unique. Take into consideration who your audience is, the theme of the email and the tone you’re trying to set.

From: Moosejaw.com
Date: 11/12/15
Subject Line: Hours Left to Get 30% Back
See the full email

Moosejaw

Moosejaw used some clever wording in this email. Their sub-message title says: “It’s getting Cold,” the call to action is “Bundle Up.”

CALL ATTENTION TO IT
Try animating your call to action, adding graphics to it, or making objects point to it. The sky is the limit.

From: aerie
Date: 10/14/15
Subject Line: Last Day For BOGO 50% Off Collection!
See the full email

aerie

Here’s an example from Aerie where a heart was included in the button. I ❤ this.

Read More

DOs and DON’Ts for Animated GIFs

Animated GIFs can be a great way to make your email stand out, but there are a few things to keep in mind when using them. Check out my DOs and DON’Ts for using animations in emails.

DO: EMPHASIZE YOUR CALL TO ACTION

From: Moosejaw.com
Date: 10/16/15
Subject Line: Win a Full Ski Outfit From Black Diamond
View the Animation

Moosejaw 1103_gif_mj_gif

I LOVED this animated hand from Moosejaw. It not only moved in an up and down motion (pointing at the call to action), but it also changed into a variety of funny hands. There’s no way anyone would miss the button in this email.

From: LOFT
Date: 10/24/15
Subject Line: Everything’s on sale (so don’t hold back)
View the Animation

LOFT 1103_gif_loft_gif

LOFT’s flashing call to action is also sure to grab your attention. I’m a little on the fence about this one though. Although it stands out, the flashing can get a tad annoying.

DO: USE GIFS TO DRAW EYES DOWN THE PAGE

From: aerie
Date: 10/30/15
Subject Line: 31% Off! All Treats For Our Girls. No Tricks!
View the Animation

Aerie 1103_gif_spider_gif

I really liked Aerie’s dropping spider animation. The spider itself looked nicer than your standard clip art and the drop shadow was a nice touch. By having the spider drop down the page, your eye is drawn down so you don’t miss anything in the email.

From: Charming Charlie
Date: 10/27/15
Subject Line: Five new faves! Starting at $19.
View the Animation

Charming Charlie 1103_gif_acorn_gif

Charming Charlie used a clever method to draw your eye downward. They used an acorn that rolled along the diagonal lines down the page, passing the products along the way.

DO: USE FLUID MOTION WHEN POSSIBLE

From: Aéropostale
Date: 10/12/15
Subject Line: ENDS TODAY! Extra 30% off during our bdayyy
View the Animation

Aero 1103_gif_aero_gif

Taking the time to add the extra frames can really make a difference. I like how smooth the GIF is of the candle blowing out — almost like a video.

DO: USE THEM TO ADD A LITTLE INTEREST

From: MoYou-London
Date: 11/04/15
Subject Line: ❅ New Festive Plates! ❅ This Friday!

MoYou MoYou

Like in this example from MoYou London. The subtle snow falling and blowing hat adds value without being too flashy.

From: Moosejaw.com
Date: 11/04/15
Subject Line: Get 30% Back on Almost Everything
View the Animation

Moosejaw Moosejaw

Or in this email from MooseJaw. Check out the banner near the bottom. A window washing dinosaur? Why not! It doesn’t take much to go from meh to magnificent.

DON’T: CUT A SINGLE GIF INTO TWO PIECES

From: Gap
Date: 10/30/15
Subject Line: news you’ll love: gap factory is now online
View the Animation

Gap Gap

Here’s an oopsie from Gap. The animated GIF was cut into two pieces, resulting in out of sync images. In this situation, it was the top of the peoples’ heads that were cut separately so it resulted in humorous hairstyles atop the wrong heads.

DON’T: GET SLOPPY WITH YOUR ANIMATION

From: Charming Charlie
Date: 10/18/15
Subject Line: How you love to shop–by color!
View the Animation

Charming Charlie

This email from Charming Charlie animates between color swatches and products. Instead of using one large GIF, each color is cut and animated separately. This results in an unpredictable and somewhat chaotic flashing of images. Sometimes multiple products will show up at once and other times there will be seconds with no animation. When creating an animation, be very purposeful about where and when you want someone to look at something – draw their eye around the page and keep them engaged.

DON’T: ANIMATE TEXT TOO QUICKLY

From: Moosejaw.com
Date: 10/02/15
Subject Line: This. Is. BIG. 20% off Full-price and Sale Stuff.
View the Animation

Moosejaw 1103_gif_moose2_gif

I really liked the idea behind this email. The concept is clever and the animation is cute. However, the animation moves a little too fast to read. They do finish the animation with the text showing for a handful of seconds so they redeem themselves in the end. This is a good example for being aware of the speed of your animation, particularly when text is involved.

DON’T: MAKE YOUR FILE SIZE TOO LARGE

From: American Eagle Outfitters
Date: 10/14/15
Subject Line: Last day for up to $50 off your purchase!
View the Animation

American Eagle

American Eagle backed their headline with a time lapse sunset. Great in concept, but HUGE in file size. Due to the size of the hero and length of the animation, this image is a whopping 14 megabytes! This will dramatically slow loading times, particularly for those viewing on mobile devises.

DON’T: ANIMATE MORE THAN YOU NEED TO

From: Charming Charlie
Date: 10/14/15
Subject Line: Ends tonight! Last chance BOGO jewelry.

Charming Charlie Charming Charlie

This example from Charming Charlie is a good reminder to cut your GIFs in the most efficient way possible. Only the call to action blinks in this email, but the entire email was cut as a GIF. This resulted in a very low quality, grainy image. Keep in mind that GIFs don’t have the same color range as JPGs. Think ahead and cut your design appropriately. (NOTE: The web version of the GIF was actually higher quality than the one in the email. To see how it looked in the email, see the larger image above or click here.)

Lastly…
DON’T: FORGET OUTLOOK!

Remember to include all of your pertinent information (or the best looking portion of your animation) in the first frame. Why? Because Outlook doesn’t support animated gifs — they will only show the first frame.

Read More