What you can learn from Panic’s approach to email marketing

If you’re a Mac user, you’ve more than likely heard of Portland based Panic before. And if you’ve heard of Panic, you’re probably also aware that yesterday they released an update to Transmit, their popular file transfer software. While they do a lot of things (well, pretty much everything) right, I was particularly impressed by the email side of their latest release.

If you caught last week’s update to our CSS in email guide that highlighted CSS3 support, you’ll recall that Apple’s email clients provided very good support across the board. Given Panic’s Mac only customer base and the data provided by our email client reports, they’ve managed to push the boundaries of what’s possible with HTML email.

Here are a few of things that stood out for me.

Building their email audience

Panic have done a great job building a subscribe form into the first run experience of all their software. Here’s the screen you see when loading Transmit 4 for the first time. They’ve even gone to the trouble of pre-populating the email field for you (not shown in the screenshot), removing as much friction as possible from the process. My only suggestion here would be to leave the subscribe field unchecked to guarantee every customer gives explicit permission and doesn’t just jump to the “Let’s Go!” button.

{title}

If you’re looking at adding a subscribe form like this into your own Cocoa application, check out this sample code from Tony Arnold that hooks directly into your Campaign Monitor account via our API.

Using CSS3 that degrades gracefully

Because the Panic team know that almost their entire audience will be opening their email using Apple Mail, the iPhone or an iPad, they’ve taken the opportunity to experiment with a few advanced CSS techniques. Firstly, here’s the email (click for the HTML version).

{title}

If you have the time, it’s worth digging around the HTML source for the campaign. Here are some of the tricks that stood out to me:

To work around image blocking, the airmail line at the top of the email is actually just plain old “/” characters in 260px Helvetica. Using CSS (namely a fixed height and negative letter spacing) they’ve managed to style the text to give the perfect airmail appearance, all without a single image. Here’s a clipped version of the code:

<div id="airmail-line" style="overflow: hidden; margin: 0 -40px; text-indent: -20px; white-space: nowrap; min-height: 15px; padding: 0; font: italic bold 260px/15px Helvetica, sans-serif; height: 15px; max-height: 15px; -webkit-border-top-right-radius: 10px; -moz-border-radius: 10px; -webkit-border-top-left-radius: 10px; letter-spacing: -44px;">
     <b style="color: #f5290a;">/</b>
     <i style="color: #006699;">/</i>
     <b style="color: #f5290a;">/</b>
     <i style="color: #006699;">/</i>
     <b style="color: #f5290a;">/</b>
     <i style="color: #006699;">/</i>
     <b style="color: #f5290a;">/</b>
     <i style="color: #006699;">/</i>
</div>

And here’s what it looks like in the email, even with images disabled.

{title}

Mobile optimization

Panic added some clever CSS to their announcement email that would provide their subscribers using an iPhone with an optimized reading experience. While the iPhone generally does a good job of rendering HTML emails, often automated tweaks to text scaling can break parts of your design. Wider emails also require some zooming and panning to navigate.

By using the @media query available in CSS3 to target small screens, Panic ensured their email looked great on any other small screen device with good CSS3 support (including iPhone, Android and Palm). Here’s a comparison of how their email looks with and without the @media query:

{title}

It’s easy to see how much more readable this optimized version is on a small screen. Here’s the code they wrote to achieve it:

@media only screen and (max-device-width: 480px) {
     .page {
          padding: 0px 10px 5px 10px !important;
     }
     body {
          padding: 10px !important;
     }
     #airmail-line {
          margin: 0 -10px !important;      
     }
     .header {
          font-size: 16px !important;
     }
     .headline {
          font-size: 20px !important;
     }
     #screenshot {
          width: 275px;
          height: 190px;
     }
}

By overriding the default CSS for the email aimed at larger desktop email clients with padding, margins and font-sizes optimized for a small screen, the email looks great and is instantly readable. The large screenshot in the desktop version is resized via CSS from 550 pixels to 275 pixels so it doesn’t stretch the rest of the design and make the text unreadable.

This sort of device targeting is a brilliant way to enhance the reading experience for your mobile subscribers. Most importantly, it degrades gracefully across older email clients. Either the client doesn’t support it and ignores it altogether, or it respects the screen size rule and only renders it on small screens. I think this technique is something we’ll be seeing more and more of as mobile email continues to explode.

CSS3 Animation

For many companies, a receipt email is an afterthought. Panic turned that idea on its head with Transmit 4 and sent one of the best looking email designs I’ve seen to date. While the email used a number of other CSS3 techniques such as -webkit-gradient, nth-child and -webkit-transform: rotate, the bit that really got my attention was the pulsating glow around their main call to action button which registered the software.

Panic have included a subtle CSS3 animation to focus the recipients attention where it matters most. Because it only works in Webkit browsers and email clients (like Apple Mail and the iPhone), here’s a quick demo of how it looks using Flash (and no, the irony of this isn’t lost on me).

Here’s the code they used to achieve this effect:

-webkit-animation-name: 'glow';
-webkit-animation-duration: .7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;

Don’t dismiss this approach

While Panic have the benefit of knowing the vast majority of their subscribers use email clients that support these techniques, that doesn’t mean some of the lessons here don’t apply to all of us.

Ensuring your email design looks great on mobile devices, clever design techniques that work around image blocking and doing our best to polish every little detail of the subscriber experience are things we should all aim for. I know it’s inspired me.

Posted by David Greiner

25 Comments

  • Anson
    28th April

    Great information - I love the airmail trick!

    This Transmit 4 launch is a case study in executing well.

  • Russell Greenwood
    29th April

    Consider my jaw on the floor.  Amazing.

  • Jon Livingston
    29th April

    Panic just took emails to a different level. Thanks for sharing.

  • G24
    29th April

    Super slick work from Panic and yet another stark reminder of how far Microsoft’s dismally poor software is keeping us pegged back…

  • indie_preneur
    29th April

    Amazing.

    Also, extremely jealous of the all-Mac recipient base, like this email shows it would help push email marketing away from old-school tableness to CSS-hotness.

  • Federico Holgado
    29th April

    The luxury of developing for Apple brings about many side effects, such as this one! The email is incredible. Holy cow.

  • Dan Palmer
    29th April

    This makes me so much more angry about there being no Apple Design Awards this year.

  • Angel Harrison
    29th April

    I love that they’re using advanced CSS3 techniques because too many companies get hung up on supporting the handful of people that are still stuck on IE6, my own included unfortunately. I wish I could innovate more and spend more time using border-radius and other time-saving measures.

  • Joseph Rosario
    29th April

    Panic does an amazing job with their design.
    Awesome attention to details.

  • MCO
    29th April

    These guys are great.  Emails, website, and software.  Complete elegance and attention to detail.

  • Benjamin Reid
    30th April

    The attention to detail and using the forward slahes instead of images is brilliant. I love the ‘throbbing’ animation as well. It would be nice to only have to code for Webkit, haha.

    Nice write up!

  • Ronald Poi
    30th April

    I didn’t get the last part of the receipt as featured in the video… And I use Apple Mail.app.

    Just below the “More Item Information”, everything goes weird and its just text without break lines and no padding. It looks real bad. If I haven’t see this blog I wouldn’t know about the glowing effect.

  • Jamie
    30th April

    I definitely am impressed by these guys. But it should be clearly noted that the emails in anything other than mail.app look like crap.

  • Neven Mrgan
    30th April

    Ronald: What version of OS X/Mail are you running?

    Jamie: The email looks great in Gecko-based viewers. Nothing ever looks good in Gmail, in my experience - it’s just too limited. Any other clients I should check?

  • Marius Oppedal
    30th April

    The email announcing the latest MacHeist was imho up there with Panic’s, both beautiful!

  • Andrew Cornett
    30th April

    Wow, amazing job by Panic!

  • Alex Penny
    30th April

    Glad to see they aren’t degrading there design for ie users

  • Jake Brumby
    30th April

    Best looking email I’ve ever seen.

    A lot of skills and effort would go into creating an email like that. You need to have a big subscriber list to make it worthwhile and a techie orientated one at that. My campaigns will still be primarily text only as they are faster, easier, safer.

  • Dan Moore
    30th April

    the release of Transmit 4 has been a great campaign in my opinion, right down to the nitty gritty such as the airmail trick used.

    I’m very impressed with the approach to release and attention to detail in the most minor of things. comes across as very apple-esque, which I believe is a compliment :)

    This email is now my new favourite.

  • maya
    30th April

    ...and where can I subscribe to Panic mails??? Didn’t find any subscribe form…

  • Phoenix H.
    30th April

    The Airmail Line is pretty interessting!
    Thanks!

  • Mathew Patterson
    1st May

    @maya You can sign up as part of the trial process for Panic’s applications

  • Carpool
    3rd May

    Good article. That was exactly what I needed!

  • Your Computer Genius
    3rd May

    Wow! Yes, I was amazed again by Panic. Way to go!!!

  • me
    8th May

    this is the best article I’ve read on the subject.
    thanks you for sharing.
    fan.

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

Create an account