Email Redesign Part 2: Designing for mobile, bulletproof buttons and more

The techniques that we've incorporated into our most recent newsletter - such as animated GIFs, web fonts and bulletproof buttons - have been all the rage in email campaigns. However, what's had many designers and marketers stumped is how to implement them.

Following from our earlier post on email workflow, we'll be demystifying these techniques in Part 2 of our Email Redesign series. Also covered are some of the design and code considerations that needed to be made, especially when sending to an audience that's increasingly reading their email on mobile devices.

To help us with our most pressing questions, we've got Tim, our email designer and Stig, our ever-resilient email coder, at the ready.

First up, what makes email design and code different?

Our redesigned November newsletterTim: One of the biggest challenges in designing an email are the technical restrictions. What you’re capable of doing in a browser is far more advanced than what you can pull off in an email client. Because of this, it’s easy to find yourself stuck in a glass case of boring, underwhelming design… And emotions.

I’m a big fan of designing for best case scenarios. Try not to think about what isn’t possible - for the start of the design, at least - and let the creative juices flow. Design with custom web fonts, rounded corners, shadows and gradients to really make the email sing! Once you’ve got an email that’s so visually stunning that it will knock the socks off someone looking at it in Apple Mail, you can go back to your design and plan for broken rendering environments and unique email client bugs.

Web fonts can have fallbacks, buttons with rounded corners can use CSS and VML - in the process, you’ll get a couple of finishing touches simply won’t display in certain clients.

Of course, it helps when you’ve got a couple of email gurus like Stig and Ros (shucks, Tim!), but there are some great resources out there to get you started and hold your hand along the way.

I’m a big fan of designing for best case scenarios.Stig: Some of the most commonly used email clients are still stuck in a state often compared to web browsers circa the late nineties. Aren’t you glad Internet Explorer 5 and Netscape 6 aren’t still making appearances in your website’s browser usage stats? Coding HTML emails means dumbing down your code to the lowest common denominator, while also trying to provide the best experience in modern email clients.

Progressive enhancement is a good way to approach both web and email design, but emails tend to end up with a much more eclectic blend of deprecated coding practices and experimental new techniques.

Using best practice for the web when coding will often provide consistent results across the few clients that have good rendering capabilities. But to get things to look right in Gmail and Outlook you may need different fixes for each of them. And for Yahoo! Mail. And don’t forget about images-off. Before you know it, you’re working with more back up plans than Antwan Patton.

How the hey did you pull off that smooth animated GIF?

Tim: Dynamic Content was the feature we wanted to highlight in this instance and it’s very nature is, well, dynamic. Moving. We didn’t want to have a static image illustrating this and thought it’d be cool to clearly show an example of what Dynamic Content is.

The illustration itself is really quite simple, and I attempted to animate this myself. Fades, slides, bounces. They weren’t really working for me. Luckily, our creative director Buzz was on-hand to provide some silky smooth transitions using minimal keyframes and some clever blur techniques.

Animated GIF in action

The real shame is that we couldn’t use the Retina version of the animated GIF due to its sheer size - over 500kb is just too big for an email image in our opinion.

So, what kind of layouts result a good responsive email experience?

Tim: These days, it’d be silly to design without mobile optimization in mind but we didn’t want that to completely dictate the design of the email. Our last newsletter was largely comprised of single column articles, making any sort of mobile optimization easy by reducing the column width and tweaking accordingly. However, single column can be quite limiting when it comes to designing a really beautiful layout for anything wider than a mobile device, so we opted for a single-column mobile approach, but that said, our desktop emails aren’t as limited - you'll find two column, three column, even six column layouts. With this newsletter, we had some freedom to explore a wider range of designs while still optimizing for the smaller screens.

I see bulletproof buttons! Are there any caveats to using them?

Stig: Bulletproof buttons suck, but they’re the best option we have in my somewhat-biased opinion. I say they suck because they add more complicated code to the email than should be necessary, and ESPs - including Campaign Monitor - can’t track the button clicks you get in Outlook 2007/2010/2013 at this stage.

A table in a link tag - not a great solutionBefore I came up with this technique, there just weren't any great options out there. For example, if you used image-only buttons, one of the key elements of your design would likely be blocked, never to be seen by half your recipients. Other issues that occur with alternate button techniques, especially those based on a link alone, include that links with only CSS padding deflate in Outlook. If you wrap a link around a table for spacing, Outlook won’t let you click though. Then, if you place the link inside a table instead, only the button label will be clickable and nothing happens if you click the rest of the button shape. The result is a distant cousin of those classic prank buttons which would move from under your cursor on mouseover.

You get the idea.

So, the motivation was to replace all of these flawed methods with a "super hack" that allowed you to code big clickable buttons with background images, rounded corners, and even shadows if you do some custom coding.

Over 32% of tracked clicks on this newsletter were on the bulletproof button.

Despite what I said earlier about them sucking, bulletproof buttons really are great because, even without us counting button clicks from Outlook, the big green button got over 32% of all tracked clicks in this newsletter. Plus, with tools like buttons.cm, they're not difficult to generate, either.

I see you used web fonts... And media query expressions that aren't of the regular max-width: 480px type. Why?

Stig: Around half the opens in our email client usage report are from clients that support web fonts, so we’re pretty comfortable adding that extra bit of flair in the inboxes that can handle it.

We also made sure to back up the web font Montserrat with a stack of appropriate fallbacks. People reading the email on Macs or iOS devices, but without webfonts, will see Avenir in Montserrat’s place. And for everyone else, we went with the generic sans-serif font, which defaults to Arial or Helvetica on most computers.

When implementing the responsiveness, I didn’t set out to target any particular mobile, pad, tablet or phablet. Instead, I set the breakpoint just outside of where horizontal scrolling would have started in say, a desktop client's preview pane, so that the mobile version would appear in any narrower email client viewport where media queries are supported.

A media query was also used to replace the background images of the bulletproof sharing buttons in the footer with 2× versions on hi-resolution displays.


3 things we learned...

  1. Aim high when using CSS and web fonts in your campaigns, but make sure they degrade gracefully in email clients that don't support these techniques.
  2. Use bulletproof buttons in your designs, but understand the caveats first.
  3. With web fonts, know your fallbacks. You don't have to stick to Verdana, Arial et al, so shop around - Avenir may work for you, too!

Many thanks to Tim and Stig for discussing the design and code considerations that came with our email newsletter redesign. If you haven't already, check out Part 1 of our Email Redesign series to find out more about how these two coordinated on our November newsletter - and of course, stay tuned for Part 3 when we'll spill the beans on our results.

Posted by Ros Hodgekiss

12 Comments

  • Klaye Morrison
    11th December

    Great article. The link to buttons.cm is incorrect though, it goes to buttons.com

  • Ros Hodgekiss
    11th December

    Hi there Klaye, thanks for pointing that out! I just fixed that link, thanks again :)

  • Casper
    11th December

    Regarding bulletproof buttons:
    First of all great advice, thanks. I’ve used bulletproof buttons for a campaign. They worked well in most clients (different renderings, of course, but all in all ok) but Outlook 2007, 2010 and 2013 cut out about half of each button resulting in “Read” instead of “Read more”. Any advice on how to deal with annoying Outlook?

  • Stig Morten Myre
    11th December

    Hey Casper, I’m sorry to hear you’re having trouble getting the buttons to work in Outlook 2007/2010/2013!

    If you can post your full email code in our forums, or send the files to our support team, we’ll be glad to have a closer look.

  • Benedict Forrest
    12th December

    Love love love the new design! You guys rock and you just make me so happy everytime you put another foot forward in making email marketing not bring me to tears.

    I see you have moved the share buttons to the footer, I would love to know if that has had a negative or positive affect on the amount of shares you have? Or do I need to wait for Part 3 for that answer?

  • Ros Hodgekiss
    12th December

    You’ll find out in Part 3, Benedict - we have some pretty good results to share with you then :D

  • Brendan
    13th December

    The only other problem with the bulletproof buttons is they can’t be editable in the WYSIWYG editor either as the string for outlook is in the conditional MSO tags :(

  • Carissa Phillips
    13th December

    Hey Brendan - not yet, but it’s something we are thinking about. ‘Til then, it might be best to copy/paste the code into the ‘Source <>’ button in the editor rather than within the template, so that it’s somewhat editable.

  • Greg
    13th January

    Stig - Have you been successful in creating multi-column templates for gmail on android? I’ve seen a couple using html “align” with percentage columns which float on top of one another, however because it doesn’t support media queries you either have to accept it will align to left/right or center everything in the main template. The template above does the former and doesn’t look perfect in gmail for android.

  • Stig Morten Myre
    13th January

    Hey Greg! Yeah, unfortunately that’s something we haven’t nailed yet; Gmail’s Android app aligns the three columns in this newsletter to the left, leaving too much spacing on the right of them.

    We’ll try to tackle this issue properly in the future though, and will share any findings here on the blog.

  • Lindsey McFadden
    1st March

    How come your bulletproof buttons aren’t trackable in Outlook?

  • Ros Hodgekiss
    1st March

    Hi Lindsay, at present, Campaign Monitor does not convert the URL within the VML code into a tracking link. We’ve added your vote internally for treating clicks on the HTML button and the VML button as one and the same and will let you know if this is something we update in the future. Sorry about that!

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account