Browse by...
Home Resources Blog

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.


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


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>

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


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:


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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free