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 sprinkling 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.

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


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

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


<div class="screenshot">
   <img src="https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/status-board.jpg" width="355" alt="Status Board Looks Like This!" />


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="https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/status-board.jpg" width="355" alt="Status Board Looks Like This!" />

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="https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/status-board.jpg" width="355" alt="Status Board Looks Like This!" />

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-family: 'Chrono Regular';
      font-style: normal;
      font-weight: 400;
      src: local('Chrono Regular'),

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.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free