Campaign Monitor Shows Off Some New Tricks

[ 0 By

It’s no secret that the Litmus team loves Campaign Monitor. From the company’s excellent email platform to their comprehensive guides on a variety of email-related topics, Campaign Monitor builds some amazing products. It’s not surprising to see these same qualities in their redesigned email newsletter.

Campaign Monitor’s emails have always been well-designed and packed with solid content. The redesigned version is no exception—it’s a beautiful refinement of an already great design that uses some interesting techniques to optimize the email for an increasingly mobile audience.

An Evolution of Design

The Campaign Monitor newsletter has undergone a few revisions over the years. The previous template made liberal use of media queries and common CSS tricks like disabling Apple’s automatic text resizing or hiding content on mobile to keep emails clean and readable across devices.

campaignmonitorold

The latest newsletter not only evolves the previous design into something that feels cleaner and more modern, but also uses some new CSS tricks to optimize the design for clients with good CSS support.

campaignmonitornew

Campaign Monitor Designer Tim Swan provides some insight into the thinking behind the redesign:

We want to take more of a bespoke approach to our newsletter, so our new design affords us more flexibility. The design is dictated around the content and not limited by a fixed layout.

What we are highlighting in each newsletter is the result of careful thought and hard work from the team.

Keeping Things Responsive

We are strong advocates for responsive email design. Campaign Monitor’s latest email is a masterclass in responsive design – using both fluid tables and fluid images combined with media queries to adapt the layout of the email to devices both large and small.

While the single-column lead and “tools and tips” sections easily adapt to smaller screens, CSS rules inside a media query help to stack the multi-column sections of the email, making things easy to read on small devices.

An interesting technique is the use of background images for both the footer background and the icons in the sharing buttons. Campaign Monitor uses images saved out at 2 times the intended display size to keep images crisp on retina screens. But instead of only using the 2x images for the icons, it calls those images just for high-DPI displays via the following media query:

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { ... CSS Rules ... }

The same technique of using 2x images is used for the three round illustrations. This time, they are resized using HTML attributes.

Evolving Bulletproof Buttons

Campaign Monitor’s Stig Morten Myre is well-known for popularizing bulletproof buttons – a technique which uses Microsoft Word’s VML language and progressive enhancement to render great looking buttons via code.

Naturally, the Campaign Monitor email puts Stig’s efforts to use with some wonderful bulletproof buttons.

campaignmonitorbuttons

These aren’t your grandmother’s bulletproof buttons, though. As Stig himself explains:

The sharing buttons in the footer may be the most advanced bulletproof buttons I’ve ever made and a lot of thought went into how to implement those.

Stig sticks to the battle-tested formula of a styled link with a clickable, similarly styled VML shape for his buttons. The VML code – which is specific to the Word rendering engine found in Outlook 2007+ – is wrapped in conditional comments so that only Outlook will render it.

But Stig advances that formula when implementing the icons used in the buttons.

When I started work on the social sharing buttons, I quickly determined that using inline images for the icons wasn’t feasible since different email clients handle image alignment so inconsistently. The solution was to use background images that consist of the icons and a subtle gradient. Each button also has a matching fallback color, which will shine through if the email client blocks the campaign images.

Taking bulletproof buttons to the next level is just one trick up Campaign Monitor’s sleeve. Let’s take a look at a few more.

Some Uncommon Techniques

The new Campaign Monitor template makes use of three techniques that are uncommon in email design: web fonts, text-shadows, and hover states.

Some companies have been experimenting with using web fonts in email – most notably Mac software company Panic. Campaign Monitor continues the trend by using the Montserrat font served via Google’s Fonts service. In the absence of web font support, Campaign Monitor takes care to provide solid fallback fonts.

font-family: Montserrat, Avenir, sans-serif;

Figuring out a reliable font stack wasn’t without its problems, though. Stig explains further:

About half the opens we see for our newsletter are in email clients where web fonts work. For OS X and iOS users on clients without support, I chose Avenir as a fallback. At the end of the font stack is the generic sans-serif family, which generally defaults to Arial on PCs and Helvetica on Macs.

The desktop versions of Outlook didn’t particularly like this font stack and replaced it with Times New Roman like it often does. I used a conditional comment to override the headings with font-family: sans-serif !important; to fix this.

A slight popping effect is added to the already beautiful type with CSS3 text shadows. While subtle, it’s a wonderful way to add polish to the email.

Finally, Campaign Monitor adds a hover state to buttons and links. Hover states are a commonly used affordance in web design, but the lack of universal support among email clients makes it rare in email campaigns. When used well, hovers can take a design from good to great.

campaignmonitorhover

Great Content Never Hurts

Design isn’t just about how an email looks. Content is the most important part of any well-designed campaign. Again, Campaign Monitor shows us how to craft great content by keeping copy short and easy to digest. Excellent visuals go a long way to enhance their message, especially the use of an animated GIF to announce a new feature. The GIF not only conveys essential information, but it also creates a sense of motion and speed rarely seen in email design.

campaignmonitaranimation

If the past is any indication, Campaign Monitor is just getting started with their new emails. We look forward to seeing what they come up with for future newsletters. If you’re looking to apply some of these techniques in your own emails, we encourage you to do so. Don’t let lack of support stop you from pushing the envelope – Campaign Monitor didn’t. In their own words:

Our thinking is that there’s no real downside to adding those little embellishments despite knowing they won’t be seen by all recipients.

Want to see the full Campaign Monitor email? Check it out.

Have you produced or received an email that you think is inspiration-worthy? Send it to us at inspiration@litmus.com – we’d love to take a look!