CSS3 animation, SVG masks, web fonts and more in Panic’s newsletter

If you were fortunate enough to read Panic's latest email newsletter, a couple of unique effects may have caught your eye. Pretty colors aside, we'll show you how Panic used animation, a responsive layout and other attention-grabbing techniques to create yet another truly memorable email campaign.

But first, a little back-story - like a lot of folks in the web community, we've always enjoyed Panic's ability to truly push the envelope, not just with their Mac software, but with their email campaigns, too. From their genial product updates, to their re-engagement campaigns, each of their campaigns almost always provides a little instruction to email senders. Of course, it helps that the vast majority of their subscribers read their email in Apple's OSX and iOS Mail clients - which means a limited selection of devices to test across and thanks to WebKit, excellent CSS support. So more than most, Panic can experiment with -webkit prefixed properties and other CSS tricks, as long as they degrade gracefully elsewhere, of course.

Detail from Panic's latest newsletter

For the curious, Panic have created this email from a template, using our template language - and this campaign really goes to show how flexible templates can be. Anyway, without any further deliberation, here are some of the highlights from their latest mailer.

Using CSS3 animation to create a 'Ken Burns effect'

We've previously looked into using CSS3 animation in email and even went as far as creating a Christmas email template, featuring a sprinking of CSS snow. However, here Panic have done a great job at applying a tidy Ken Burns effect to their images, which will likely be replicated by many a sender - no thanks to us, of course. For the benefit of those who may have browsers that don't support @-webkit-keyframes, here's a short video showing the Ken Burns effect:

The HTML and CSS behind this on-load effect is straightforward - here's an abridged snippet:

CSS:

@-webkit-keyframes kennethburns {
   from { -webkit-transform: scale(1.5) }
   to { -webkit-transform: scale(1) }
}

div.screenshot img {
   -webkit-animation: kennethburns 5s ease-out;
}

HTML:

<div class="screenshot">
   <img src="status-board.jpg" width="355" alt="Status Board Looks Like This!" />
</div>

All that's being done here is that the image is being scaled down over a 5 second period. You may wonder why the images remain neatly cropped within the circle (instead of say, the circle also changing size) - we'll cover this in the next section.

Using SVG image masks

Perhaps more than the use of animation, seeing image masks in email got us, well, fairly excited. Personally, I'd never seen them used in email campaigns prior to this, so happy to give Panic first dibs on their use!

In essence, to allow the images to scale in that Ken Burns style, while retaining set dimensions in their newsletter, an SVG image mask has been applied using the -webkit-mask-image (again, adapted for brevity):

<div class="screenshot2" style="-webkit-mask-image:url(data:image/svg+xml;base64,PD94b…);">
         <img src="status-board.jpg" width="355" alt="Status Board Looks Like This!" />
</div>

As we don't currently support .svg images (sorry, our bad), base64 encoding has been used to provide the SVG image - well clever.

At this point, you may be wondering if they have a fallback for email clients that don't support these techniques - and yes, yes they do. Using both the border-radius and overflow CSS properties, the circular border and mask effect are sure to work in a few extra email clients, even when the animation doesn't... And when that fails, the original image should simply display, albeit unadorned. Here's an expanded code snippet, featuring the image mask, fallback CSS properties and border:

<div class="screenshot" style="border-color:#3b5875; width:355px; height:355px; border-style:solid; border-width:4px; border-radius:355px; overflow:hidden; display:block;">
   <div class="screenshot2" style="-webkit-mask-image:url(data:image/svg+xml;base64,PD94b…);">
         <img src="status-board.jpg" width="355" alt="Status Board Looks Like This!" />
   </div>
</div>

Not rough at all. We really hope to see these techniques used to add a little variety to email newsletters, instead of limiting ourselves to the usual rectangular images.

A fluid layout, Retina-optimized images and web fonts

On top of these techniques, Panic's newsletter has employed a lovely fluid layout, which stretches across the full width of the viewport. As they've used large font sizes, paragraphs of text remain readable, even when the email newsletter is viewed in the browser. We've detailed how they've done this in a post on one of their previous newsletters.

Another thing - Panic have used an ample smattering of Retina-optimized images throughout their design. Employing a media query targeting high-resolution displays specifically, they've used the background-image CSS property to swap out regular images for 2x sized ones. Here's a snippet of the code they've used to do this:

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   body { background-image: url("http://.../topbar-2x.png") !important; }
   table#topnav td#globe { background-image: url("http://.../globe-2x.png") !important; }
   table#topnav td#tweet { background-image: url("http://.../tweet-2x.png") !important; }
...	
}

While loading 2x images can add extra overheads, having detailed images (eg. icons), or product photos display super-sharp on Retina displays really does look excellent. For more on optimizing images for hi-res displays, take a look at the 'images' chapter of our guide to Responsive Email Design.

How they implemented web fonts in email is worth mentioning. Instead of using Google Web Fonts and the @import rule to serve up their type (like we've previously suggested), they've used the @font-face rule instead and served up the fonts on their site:

@font-face
   {
      font-family: 'Chrono Regular';
      font-style: normal;
      font-weight: 400;
      src: local('Chrono Regular'),
         url("http://panic.com/.../ChronoWebMedium.eot") 
         format('embedded-opentype'), 
         url("http://panic.com/.../ChronoWebRegular.woff") 
         format("woff");
}

This is fine in Apple's email clients, but may not be as well-supported elsewhere. Thankfully, they provide a sturdy fallback - sans-serif.

As a final note, Panic send very infrequently, so seeing one of their newsletters in your inbox almost feels like an event in itself. Telling folks to not send on a regular basis sounds rather counter-intuitive, but if your newsletters have a rap for valuable, interesting content and you subscribe to the idea of scarcity breeding demand, then you can potentially work this idea to your advantage.

Huge thanks to Cabel and the team at Panic for allowing us to tear the magic out of their email newsletters once more. If you have any questions about the techniques used, or simply want to raise a virtual glass to these fine folks, pop us a line in the comments below.

Posted by Ros Hodgekiss

15 Comments

  • John
    23rd July

    Excellent article.

    Thanks for the info, was a good read :)

  • Cabel Sasser
    23rd July

    Thank you for this write-up!

    One piece of trivia: using border-radius on its own actually worked great for masking out the images! No SVG mask is necessary… UNTIL you apply animation. A bug in WebKit (all platforms) causes the animating element to pop ABOVE the border and lose its mask, until the animation is complete, at which point the animated element snaps in and becomes properly masked. It looks not great. In order to workaround this bug, we came up with the SVG madness.

    We hope this will prove helpful to someone! :)

  • Deb
    23rd July

    So you just disregard your subscribers who use email clients that don’t support these styles?

  • Mathew Patterson
    23rd July

    @Deb

    You don’t need to disregard them at all, as long as the email degrades gracefully if the styles don’t render in full.

    Panic also are likely to have an extremely Apple-heavy audience and so can push further than other companies might want to with their wider audiences.

    It’s great to see email newsletters being extended in this way, with such careful design work!

  • Andy Smith
    9th August

    Just a quick one, am I right in thinking that CSS in emails would only work in web based email platforms, like gmail, Yahoo!, hotmail etc. However they wouldn’t work in platforms like Outlook and Apple Mail?

  • Ros Hodgekiss
    9th August

    Hi Andy, most modern email clients support CSS - either in the <head>, or as is recommended, when moved inline prior to send. For the latest results, take a look at our Guide to CSS Support in Email.

  • James
    9th August

    Hmmm I’m Mac based and yet don’t see the animation or the fancy font (I do get the image masks and the responsiveness though). I wonder why that is? I also don’t see them when viewing the email in browser which I thought would be guaranteed to work :-/

  • Simon
    9th August

    Just so you know - you have a broken link in the “Using SVG Image masks” section: ...ask effect are sure to work in a few extra email clients, even…

    Well I say broken but perhaps I want to make £000,000’sss

  • byaparentdesign
    10th August

    Really cool! As someone who is constricted to a more Outlook-heavy audience, it is nice to see some folks push the boundaries and work around that.

    Also, there is a typo in this link: “circular border and mask effect are sure to work in a few extra email clients”

  • Ros Hodgekiss
    10th August

    Hi James, very unusual! I’m seeing the animation in the latest Chrome & Safari - which browser are you using?

    Simon - Sorry about that typo, all fixed! Thank you so much for pointing that one out, I owe you £000’s :D

    byaparentdesign - Fixed, as above. Glad you’ve got my back!

  • Nathaniel Flick
    11th August

    Hi Ros, try it in Outlook and I can almost guarantee you it will not work there. Outlook uses an extremely outdated MS Word rendering engine for html, and as for CSS most email clients like Outlook and even Outlook.com and Yahoo.com render CSS very poorly, not to mention a pretty good lack of CSS3 support.

    Unless something’s completely changed in the last 3 months since I last sent an EDM?

  • Ros Hodgekiss
    13th August

    Hi Nathaniel, absolutely - these CSS 3 effects won’t work in Outlook and a range of other email clients. I’d even dare say the majority of them. However, the Panic team have provided suitable fallbacks, so those who miss out on the animation etc likely won’t realize they’re missing out on anything at all.

    On a related note, we have an update of our Guide to CSS Support in Email coming up, which will contain even more extensive results on what techniques work in a variety of email clients. Stay tuned - we’ll be announcing it on this blog :)

  • Fernando Rendina
    17th September

    Hi Ros, I always enjoy your articles and love the Panic examples you dissect. I always learn something from them. As a result of these articles, I have asked them to subscribe me to their newsletters to see them first hand. I struggle with trying to tend to as many platforms as possible and at least degrade gracefully for the “troublesome” ones mainly Outlook on PC. I love how they push the envelope and, although I know they have a mostly Mac base, I was surprised at the fact the most recent campaign did not display images (even still) on Outlook 2011 on the Mac. Works beautifully as intended on Mail (Ken burns effect and all) and iOS 7.
    Mind you, I do not mean this as a criticism, but mainly as a learning opportunity. What could be the issue here?

    http://pixelcodex.com/HTML_examples/Panic-Outlook-2011-Mac.jpg

    http://pixelcodex.com/HTML_examples/Panic-Mail-6.6-Mac.jpg

     

  • Ros Hodgekiss
    17th September

    Hi Fernando, no trouble at all here. Sadly, I don’t have a copy of Outlook 2011 handy, but could this possibly be a case of images being blocked by default in Outlook 2011?

    You may want to post additional details on our forums - our community may have more insight into what’s happening here :)

  • Fernando G Rendina
    17th September

    Hi Ros, I have it set to auto download images. Toggled it on and off. Still, nothing. Thanks as always and I will post it on the forums.

Got something to add?

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

Create an account