Do you manage your business across multiple web apps? Wish they could all talk together? Just as the Babel fish from 'Hitchhiker's Guide to the Galaxy' served as a universal language translator between alien races, OneSaas is an online service for transferring contacts and financial data between multiple web apps. That's right, by acting as a bridge between APIs, it can push new and existing contacts from say, Highrise and Google Contacts, to a Campaign Monitor subscriber list. And you don't even have to stick it in your ear to use it.

Which web apps can you sync with OneSaas?

It's not uncommon for folks to have customer details scattered across multiple web apps. For instance, you might have paying customers in Highrise that you want to invoice in Freshbooks. Additionally, you want to add these same customers to a Campaign Monitor subscriber list, so you can send them post-purchase email newsletters and updates. Exporting and re-importing new and existing contacts/subscribers across two or more services can be a real chore, so OneSaas has done the legwork for you.

With OneSaas, you can automatically push new and existing contacts from one or more of the following apps to a Campaign Monitor subscriber list:

• Basecamp
• Business Catalyst
• Freshbooks
• Google Contacts
• Highrise
• Saasu
• EventBrite (Coming soon!)
• SalesForce (Coming soon!)
• WordPress (Coming soon!)

In addition, OneSaas' Financial Management accounts can be used to migrate and synchronize orders and transactions between apps like Business Catalyst, FreshBooks, OneSaas, and Saasu. We'll focus simply on managing your contacts for now.

Getting started

Setting up OneSaas to push contacts from the web app of your choice to a Campaign Monitor subscriber list is fairly simple. And don't worry, it's all documented within OneSaas itself. In this example, we'll race through getting an existing 37signals' Highrise account to integrate with Campaign Monitor, so buckle up.

Say you have an existing Highrise account and list of contacts:

The first thing you'll need is your Highrise account's API token. Now, lets say you already have a OneSaas account. In the 'My Cloud' tab, create a 'new connection' by selecting 'Highrise HQ' and adding your API token and domain name when prompted:

So far, so good. Now, lets do the same for Campaign Monitor. There's no need to get your API key in advance - OneSaas displays your Campaign Monitor account page in the app, so you can get your key on the fly. You'll also be given the option to select which Campaign Monitor subscriber list you want to push new Highrise contacts to.

If everything has gone to plan, your 'My Cloud' tab in OneSaas should look like this:

All up, this process takes no more than 5-10 minutes and only needs to be done once.

Pushing contacts to a subscriber list

The neat thing about One Saas is that you can set-and-forget. Either you can wait for OneSaas to push new contacts to your Campaign Monitor subscriber list on an hourly/daily basis (depending on your plan), or you can click 'Synchronize' under 'Active connections' to manually push your Highrise contacts to Campaign Monitor. You probably want to do this on your first run.

And well, the bottom line is that it simply works. After clicking 'Synchronize', our Highrise contacts were automatically added to our Campaign Monitor subscriber list of choice:

Note that at this point, it's possible to transfer names and email addresses via OneSaas, but not custom fields. We'll put this one on our wish list to the developer.

Our verdict

The skinny is that OneSaas does as labelled on the tin. It's also fairly easy to setup, thanks to a fair amount of in-app documentation. Plus this setup process only needs to be performed once for as long as your account details remain the same, as OneSaas will push contacts indefinitely until told to do otherwise.

OneSaas has a range of simple pricing plans, based on the number of contacts you wish to synchronize, how often you want synchronization to happen and the number of applications you want to connect. There's even a free plan to help you kick the tyres at absolutely no cost. Included is in-app email support, as well as support channels via Skype and Twitter (@OneSaas).

Perhaps most endearingly, OneSaas are Australian-made. And as we know, all the best web apps find their roots in the surf and sun Down Under!

On the downside, it's only possible to synchronize your contacts with one Campaign Monitor subscriber list. Also, the transfer of custom fields is not yet supported, so you can't segment your single subscriber list by whatever contact details you have stored in Highrise, or elsewhere. OneSaas plan to support custom fields sometime in the future, but if multiple list or custom field support is something you're specifically after, please feel free to let us and the developers know in the comments.

We've been in touch with the friendly folks at OneSaas for a few months now, so its been great to watch this service move out of beta and onto the public stage. Now it's in the wild, it seems that they're not planning to rest on their laurels any time soon. Alongside further improvements to their service, integrations with WordPress, SalesForce and EventBrite also in the works.

So, if you're after an automated way to push your contacts from apps like Freshbooks and Highrise to a Campaign Monitor list, then give OneSaas a go. It's a simple, affordable solution to what has long been a tricky problem... And you don't have to like fish to use it.

We’re definitely “feeling the love” with this design from Studio Bomba for their stationary branch, Mitchell and Dent. Not only is the design nicely done, but one should really take a moment to experience the playful copy as well. Peppered with captivating images, the layout is both airy and light which provides ample spacing for the content as well as a convenient table of contents. A nice addition would be to bump up the font size a point or two and really show off the lyrical brilliance.

We also enjoyed the purposeful way Mitchell & Dent integrated the unsubscribe and forward pieces into the theme of the email. “Share the love and forward to a friend”. Being standard elements for an email, its easy to overlook the fact that these can be fun and engaging to the reader as well.  Overall, a fun and well thought out piece!

Let’s get creative with fonts, already!

The first obvious question is, ‘Can I use the regular mill of web fonts in HTML email?’. Thankfully the answer is a resounding ‘yes’, with the exception of those declared using @font-face. What’s better, if you check our our guide to CSS in email, you will also see that a lot of text-related CSS is also supported, including the all-important line-height, font-weight and more.

Another point is that declaring a good font-stack is just as important in email, as it is on the web. However, as much as font-family: Arial, Helvetica, sans-serif; is a safe choice (and a Dreamweaver default), the point of this post is to show you that there are a lot of other nice combinations that you can use, even at small font-sizes. Here are some stand-out examples:

Made for Mac: Lavagraphics

Headings & body copy: ‘Gill Sans’, Corbel, Tahoma, sans-serif

The use of Gill Sans for really small font-sizes may not be to everyone’s taste, but it sure makes an impression. Note that although Gill Sans is not commonly used in email, it is present on almost 92% of Mac machines and is largely present on PCs with Windows XP and later. Corbel is an unusual fallback, however Tahoma is solid, with Windows coverage of over 99%. Another fallback we could suggest adding for the Windows folk is ‘Gill Sans MT’, as it’s pretty much the same as Gill Sans, but more common on PCs.

Safety first: Charlie Pratt

Headings: Helvetica, ‘Helvetica Neue’, Arial
Body copy: Georgia, ‘Lucida Grande’, ‘Lucida Sans’

I’ve always been a huge fan of matching a serif font for paragraph copy, with a sans-serif heading or vice-versa. Serif fonts in particular just give email designs so much personality. The font stacks used here are very safe, with Georgia being present on 94/99% of Mac and Windows machines respectively. If Helvetica doesn’t work out for the headings, there’s always plain-jane Arial to back it up.

A classical look: Pulse8

Headings: Georgia, Times New Roman, Times, serif
Body copy: ‘Trebuchet MS’, Helvetica, sans-serif

Talking about personality, here’s another pairing of serif and sans-serif fonts that we can appreciate. Using Trebuchet MS and Helvetica for the body copy instead of Arial (see design) makes a considerable difference. For the benefit of Windows users, they could also consider a font like ‘Segoe UI’ (shipped with Office ‘07) for that ‘Humanist touch’, although at this small font size, it could be considered as splitting hairs…

A new look at old fonts: Cabedge

Really large text: Arial, Helvetica, sans-serif
‘Hit song’ headings: Georgia, ‘Times New Roman’, Times, serif

Finally, here’s two fonts you know and love: Arial and Georgia. I wanted to throw in this example as it shows you how two rather generic fonts can take on a different aspect when really big, or in all-caps. Notice how the differing font-weights are used for emphasis and interest, while line-height has been used for to ensure consistent leading/line spacing.

With multiple fallback fonts, can’t we try anything?

All these examples have featured fairly common fonts, but how about if you want to add the font of your dreams to the top of the stack? As we’re defining fallback options, it’s more than okay to give any font a shot, as long as you define a common font at the bottom of a stack (or at least a generic font family as last resort). For example, font-family: Futura, ‘Century Gothic’, AppleGothic, sans-serif; is most likely fine for most folks - whereas Futura may not be the most common font in the world, the Windows and Mac Gothic equivalents are a fairly solid fallback.

We also tested how long-winded a font-stack can be. Except in the case of Lotus Notes 6 & 7 which allow for a maximum of 5 fallback options, all the other major email clients allow you to add fonts to the stack to a seemingly indefinite length. We gave up trying to break our test campaign after adding up to 25 fallback fonts to the stack!

So, how about foreign language campaigns?

The good news is that most popular web fonts contain a lot of the characters required to send email newsletters that don’t use the Latin alphabet (we use UTF-8 encoding, by the way). However, thanks to our friends at Email Marketing Voodoo, we’ve been told that ‘Arial Unicode MS’ works best for Chinese campaigns… And most certainly, a lot of other languages, too. Of course, there are a lot of very exotic font-stacks for regional campaigns (like: font-family: “メイリオ”, “Meiryo”, “ＭＳ Ｐゴシック”, sans-serif;), but for the most part, folks will still use and read Verdana, Arial et al.

Well, hopefully I’ve inspired at least some of you to try the less-generic font-stack combinations out there. If you’re still curious, I recommend you check out this gorgeous roundup of popular fonts on Mac and Windows and this thoughtful post on creating better font-stacks. There’s also this sweet table of common Windows/Mac font equivalents for you to enjoy!

Using a less-than-regular set of fonts can not only make your email stand out from the rest, but potentially convey your message with greater expression. We’d love to know some of your combinations, so feel free to share some of your favorite font stacks below!

Using some design queues gleaned from our very own case studies, the creative tribe over at Carbon have come up with a very simple and effective email. First off, we really liked the fact they went for bold use of text instead of using images. The bright, purple title expresses the fact Carbon has a new look, simply put. Then, as a way to visually mimic the “de-emphasizing” of the text in question, the second part of the message is simply, light gray. A brilliant use of typography! Following, they give a short bit about their work including clear links and some vital contact information all the way to the footer. To sum it up in the words of the Carbon folks - “Bam!  There you go”!

The connector is available via a limited 30-day free trial, which you can use to kick the tyres on up to 5 Salesforce licenses. All you need is either a paid Salesforce Enterprise Edition or free Developer Edition account, plus your Campaign Monitor API key & API Client ID.

What can I expect from the trial version of the connector?

The trial edition of Salesforce Connector for Campaign Monitor does two things really well. First of all, it allows you to select contacts to add to one or more Campaign Monitor subscriber lists. And no, this doesn't mean that folks can mass-dump sales leads to an email list - you can only transfer contacts in batches of 10 at a time, plus the usual permission policies apply. Secondly, it allows you to manage your Campaign Monitor account from within a Salesforce tab, providing a unified, white-label email campaign workflow for you and your clients. The full, paid version of the connector extends this even further, which we'll discuss in a moment.

Note that due to limitations on the use of Salesforce's Apex Code, you cannot use this connector with 30-day trial accounts, or anything other than Enterprise and Developer Edition accounts. If you want to try Salesforce and this connector for free, sign up for a Developer Edition account.

Installing the connector

Unless you're the type of person that regularly solves Rubix cubes in 18 moves or less, you're going to find the installation and setup of a Salesforce connector to be relatively complicated, if not downright overwhelming. In anticipation of this, SNB Apps have provided an absolutely essential installation guide. The need for a guide (and at least 15 minutes of your time) isn't necessarily the fault of the developers - Salesforce really does try hard to do every task conceivable for salesfolk and marketers alike. And it results in setup screens like this:

Note that the setup options on display extend two across two page-heights and widths respectively. Don't know what you're looking for? As they say in developer-land, RTFM.

Adding contacts to Campaign Monitor

We fired up our Developer Edition of Salesforce to give the Salesforce connector for Campaign Monitor a go. Sure enough, after following the installation guide to the letter, we got it rolling. Our first taste of success was when we added a new Campaign Monitor tab to Salesforce:

You can name this Salesforce tab whatever you like, which is great news for resellers. Barely a few clicks later, we were also successfully adding contacts to our Campaign Monitor subscriber lists:

Just to double-check that the Salesforce Connector did as is marked on the tin, we took a look at our Campaign Monitor account. Lo and behold, the names and email addresses of our selected contacts had been added to a specified subscriber list:

One notable downside is that updates to subscriber details do not automatically sync between Salesforce and Campaign Monitor. If for instance, you change the email address of one of your Salesforce contacts, you have to add them again to your subscriber list and manually unsubscribe the original subscriber within Campaign Monitor. This is something that we've let the developers know about and hope to see improved in future releases.

The paid version of this connector includes unsubscribe management between Salesforce and Campaign Monitor (ie. 'unsubscribed' Salesforce contacts are marked as so), as well as the import of email campaign and subscriber activity reports into Salesforce. Although full-version pricing has yet to be announced, SNB Apps have noted that it will probably not cost more than $20 license/month. To try a full version of the connector, or to request further customizations, contact SNB Apps.

Given the considerable number of requests for Salesforce integration with us, we're expecting this will be well met by all manner of marketers. The ability to import and manage contacts and campaign results will hopefully improve the email campaign workflow by removing the steps between signup and sending email newsletters and updates to your active customers. At last, the power of Salesforce, combined with all the campaign creation, delivery and reporting goodness that you know Campaign Monitor for!

So if you've been hanging out for Salesforce - Campaign Monitor integration for a while now, we'd love to know how you go with the trial version of Salesforce Connector for Campaign Monitor. Please feel free to leave your comments and feedback below, or get in touch with the contact SNB Apps directly. And finally, happy customer relationship managing! At least, I think that's the term.

Feast your eyes on this stylish email by Wordplay Media. The layout is brilliant, with just enough photos to keep it interesting and color blocks to organize an otherwise, quite lengthy, email. Along with the large headers, the blocks of color create a richness that is not only functional, but easy on the eyes as well.

We especially liked the small touch with the 3D-like footer image at the end of each section. It brings a nice separation while giving a kick to the content block.  The only thing we would have changed here would be to have the headers in actual text and separate them from those images. When images are turned off, the headers go away.  Overall, the email degrades with excellent grace.

Moving down to the end, the footer is quite nice with the Forward and Unsubscribe information being very clear and sized well.  They even saved room for a permission reminder in that small box.  All in all, this email by Wordplay is well thought out packing tons of information and creativity into a great campaign.

Our space at the time was located right across from a park and near the beach. It's a great spot, so when we learned we could take over almost the entire floor instead of relocating elsewhere it was an easy choice. Construction started in November 2009 and we excitedly moved in last month. I wanted to walk you through the finished product in the hope that you might find something useful to take away and apply to your own workplace.

Here's a quick video tour of the end result to whet your appetite.

A video tour of the new office, shot and edited by Ben (you can also watch it on Vimeo)

Getting the balance right

In our experience, the ideal office environment is about finding the right balance between socializing and getting stuff done. Too much of one or the other has its downsides, but there are some fundamentals you can put in place to help get that balance right. It should be easy for everyone to remove any distractions, put their head down and get into the zone. Just as importantly, they should be able to take a break, hang out with other members of the team and generally switch off.

To make this happen, we teamed up with the same architects who designed our last office and gave them this simple brief:

1. Closed offices for everyone.
2. Large dining area where we can all eat lunch together.
3. Enough space to cater for our ping pong obsession.

After a few iterations the new design really took shape. The architect came up with the idea of having a huge open area right down the middle of the space containing the kitchen, dining, library, gaming area and lounges. Flowing either side of this open space would be two corridors of offices. They managed to fit 40 private offices into the new design, more than enough for the 20 staff in our Sydney office with plenty of room to grow.

40 private offices and loads of open space - See the full plan (PDF)

Why private offices beat open plan

For us, private offices were non-negotiable. Over the years we've had fully open plan, only offices and a combination of both. In my experience, closable offices for each team member are by far the best configuration for a software company. I think Paul Graham said it best:

"After software, the most important tool to a hacker is probably his office. Big companies think the function of office space is to express rank. But hackers use their offices for more than that: they use their office as a place to think in. And if you're a technology company, their thoughts are your product. So making hackers work in a noisy, distracting environment is like having a paint factory where the air is full of soot."

Paul Graham, Great Hackers

Of course, I can understand why open plan is popular. It works for small teams. It's flexible, cost effective and gives the illusion of great communication. But the moment a team grows bigger than a few people, cracks start to appear.

Getting into the zone

When you're designing, building and supporting software, you need to juggle lots of complex ideas in your head at once. This can take anywhere from a few minutes to half an hour of thinking about a problem, and that's when the juicy stuff starts flowing. You get in the zone and solutions start presenting themselves.

The last thing you want is to bother that person with a stupid question, force them to overhear your phone conversation or any other kind of distraction that isn't related to what they're working on. I don't care how disciplined your team is or how good your noise cancelling headphones are, this kind of interruption is unavoidable in an open plan office.

Jesse working interruption-free on the Campaign Monitor UI

The research is in

This isn't just anecdotal either. There's been plenty of interesting research into open plan vs closed offices too. A study by Microsoft showed just how destructive interruptions can be to productivity. Here's some commentary by Bill D’Alessandro on the findings:

"The researchers taped 29 hours of people working in a typical office, and found that they were interrupted on average four times each hour. Here’s the kicker – 40% of the time, the person did not resume the task they were working on before the interruption. The more complex the task, the less likely the person was to resume working on it after an interruption."

Microsoft Research, A Diary Study of Task Switching and Interruptions (PDF)

Last year a team of Australian scientists came to a similar conclusion. They found that working in an open plan office leads to lower productivity and higher staff stress.

"The evidence we found was absolutely shocking. In 90 per cent of research, the outcome of working in an open-plan office was seen as negative. It has been found that the high level of noise causes employees to lose concentration, leading to low productivity. The research found that the traditional design was better - small, private closed offices."

Dr Vinesh Oommen, Asia Pacific Journal of Health Management

There's no doubt that open plan is more flexible and cheaper than putting in private offices. But is 20-30% extra in your fit out costs enough to justify all the extra interruptions? It's not just about productivity either. Solving challenging problems and getting things done is a much more rewarding experience on a personal level too.

Big, well lit offices with closable doors

The closed door policy

It's only slightly harder to walk in someones office to ask a question than to yell across an open plan office. Having private offices is one thing, but you need to have a system of mutual respect in place for them to work. At Campaign Monitor we have a simple rule: If my door is shut, don't interrupt me.

It's common sense anyway, but making this clear to everyone has made a big difference. If you want to get stuff done, shut the door and you won't be bothered. If anyone needs to talk to you, they can come back later, send you an email or leave a message in Campfire that you can reply to when it suits.

Don't forget the social side

Like I mentioned earlier, you need to find the right balance between removing interruptions and spending time with the rest of the team. While we all get out of the office for some crazy activities every few weeks, we also made sure the new space included plenty of room to hang out together.

Eating a meal together every day

At SXSW earlier this year I was lucky enough to have dinner with the founders from great companies I respect like 37signals, Wufoo, Dropbox and Freshbooks. The dinner was organised by the always awesome Dharmesh Shah, the man behind HubSpot and On Startups. At the dinner, Dharmesh shared a little secret of his that I hope he doesn't mind me passing on here.

He explained that the best conversations almost always happen over a meal. Because of this, he organises many of his meetings to take place over lunch or dinner. He even goes as far as to research the best location in a restaurant (quiet area, round table) beforehand.

Dharmesh's experience reinforced my belief in the value of the entire Campaign Monitor team eating together each day. We provide free breakfast and catered lunches which brings everyone out of their offices and together for a meal. The conversations aren't necessarily work related, but are always entertaining and a great way for us to get to know each other, especially those we don't work with often. It's my favourite part of the day.

The team sharing lunch together in our new dining area

A new kitchen and coffee machine

In the same vein, we also installed a massive new kitchen that's fast becoming a popular congregation spot. To keep up with the serious coffee demands of some team members, we also installed an integrated and programmable coffee machine so staff can set up their own coffee profiles for the perfect cup.

The new kitchen

Library and games

The architect also came up with some beautiful joinery that runs the length of the new dining area to house our growing book collection. To satisfy our ping pong obsession he managed to fit in two new championship tables, some custom joinery for bat/ball storage and a touch screen scoring system.

The new ping pong arena

For those wanting to recover from a hard game of ping pong, we also added a new lounge and gaming area with a few consoles and an increasingly popular Guitar Hero setup.

Xbox 360, Wii and Guitar Hero ready for after work sessions

The new space has been quite the journey. The planning started around a year ago and construction went from the end of last year to just last month. It was a long process, but has been totally worth it. If you want to see more pics, we've thrown together a photo gallery on Flickr.

Looking to fill one more office

If you like what you see and you're a talented UI designer, we've just opened up a brand new position on the team. Check out the details to see if you fit the bill.

This very sleek and stylish email campaign from Australian design studio Buro North is the absolute epitome of cool in my opinion; from the dark, alluring background coupled by its ‘white noise’ surround and sexy blue highlights, I feel like I’m walking into an elite underground club filled with supermodels and celebrities every time I open up my email client. It’s that seductive.

The background image is complimentary yet untroubling; the text is fashionably small yet legible; the design contains a good amount of whitespace yet is not wasteful, and images are employed sparsely but to great effect.

I see a lot of campaigns employing a simple, minimalistic style, and I happen to like this approach a lot, however many start to look the same after a while, however Buro North have really nailed this email design ‘genre’ here, creating a dramatic, calming and creative campaign which speaks volumes about them as a design studio, even before you read the first word of their content.

If you've looked into form management plugins for Wordpress, you've probably come across Contact Form 7. Not only does it provide a flexible, customizable way to add multiple forms to a WordPress site, but it also supports a host of features including AJAX submitting, CAPTCHA, Akismet spam filtering, file uploading, extensive language support and more. It's also free to download and use!

The Campaign Monitor Addon extends Contact Form 7 by providing synchronization between your forms and a Campaign Monitor subscriber list. Once you've added and setup the Contact Form 7 plugin in your WordPress install, you only need to download and add the Campaign Monitor Addon, then with your Campaign Monitor API key handy, complete a few simple steps to get it up and running.

Detailed installation instructions and a user manual are available on Joshua Bettigole's Campaign Monitor Addon page.

The Campaign Monitor Addon bridges the gap between one of WordPress' most popular form managers and Campaign Monitor. Instead of periodically exporting form entries, then uploading them to Campaign Monitor, Contact Form 7 ensures that your subscriber lists are kept automatically up to date. You can then send newsletters and updates to your signups, using the limitless power* of Campaign Monitor's email campaign delivery and reporting tools.

Many thanks to Joshua Bettigole for this addon, plus detailed documentation. To find out more and download, kindly visit the Campaign Monitor Addon for Contact Form 7 page.

* Actually, like test-driving a car on empty, there are practical limits to the awesomeness you can achieve. But those limits will still impress friends and conquer worlds.

While sifting through campaigns the other day, the interesting color scheme of this email newsletter from Savvy.je caught my eye. The combination of teal and maroon is not something you see everyday and really makes this email stand out from the rest.

The application of these colors is not used sparingly, but that really works well for the design. The news items are boxed out by solid columns of alternating colors, making each news snippet clear and easy to read. Additionally, the columns come close to covering the entire height of the campaign itself, which gives the campaign a very solid, rigid look.

Each year, thousands of diverse ideas get submitted to the SXSW team. After the votes roll in, this selection of panels and presentations gets whittled down to a considerably smaller, sharper unit. While the panel team have the majority say over who sinks and who swims, your vote will keep us afloat!

If you're planning to go to SXSW Interactive next year and would like to see the following topics covered, please take the time to vote them in. You should also vote if you think Mat is an intensely handsome and articulate fellow, because it would be a vote for the truth.

Get in quick! Voting is open now, until 11:59 CDT on Friday, August 27.

Why do spammers send those emails with random passages of text? How does spam actually work? What is spam, and what isn't? In this panel, Mathew Patterson, the author of "Create Stunning HTML Email That Just Works!" and head of customer support will dig below the surface and explore some of the research that is being done into what spam actually is, why people spam, and what happens next.

Vote for this panel if you want to know:

1. What counts as spam? Am I a spammer?
2. Does spam actually work (financially or otherwise)
3. What's the most effective defense against spam

Great design and development is not enough to create a great customer experience. In this panel featuring Mat Patterson and Sarah Hatter from 37signals, find out how small support teams can make a huge impact on thousands of customers through simple tools and techniques and learn from people who've done it personally.

Vote for this panel if you want to know:

1. How to create a customer support experience that promotes your web app, instead of sinking it.
2. Why setting expectations makes customers happy
3. How to apologize when your company f*cks up

Every designer reckons they know how to create and send an HTML email newsletter. It's just like coding for the Web, right? In this panel featuring Ros Hodgekiss, our community manager, alongside a seasoned crew of email designers and marketers, we'll outline the tools, skills and strategies that go into a successful email campaign.

Vote for this panel if you want to know:

1. How to make my design look great across most email clients
2. How I can optimize my campaign results
3. What the future holds for email design

Thank you folks, we really appreciate your votes in the name of good taste and email. It would be a pleasure to meet more of you in Austin next year, so keep your fingers crossed and stay tuned for more SXSW 2011 announcements on this blog.

Often, we pay so much attention to the visual and technical beauty of email newsletters, that we overlook the subscribers part altogether. However, as anyone with a soft spot for stats knows, designing an email newsletter subscribe form to attract a maximum number of signups is just as involved as any campaign A/B test... If not more so. After all, with no subscribers, you have no campaigns.

In this round-up, we'll look at 8 standout-yet-simple email subscribe forms that have been crafted largely by our customers and discuss how each goes about making a great first-impression on potential subscribers. Hopefully you will find them as inspiring as we did!

Less is more #1: Super Funky Monkey

First of all, lets start with Super Funky Monkey - an upcoming site for finding desktop wallpapers. What we find so gorgeous about this form is its absolute simplicity - the whole page is dedicated to finding out about their launch, a little about the site and that's it. There's no clutter, no scary product descriptions and the signup form itself is impossible to miss.

Less is more #2: TapPlace

Same goes for TapPlace - an iPhone app which has been released since this screenshot was taken. The lack of detail here is almost a selling point - the less they tell, the more you want to know. According to a Smashing Magazine survey, 61% of designers use this minimized approach to sign-up form design - the central idea being that anything that doesn't help the user to complete the form, shouldn't be there at all.

Less is more #3: Luxylight

Finally in this category, we have Luxylight, an iPhone app that's currently under development. We love the use of glowing buttons, great use of type and modern, textured look to create an enticing signup form for a rather mysterious product...!

The downside of this zen minimalist approach is that it doesn't really let the subscriber know what they're in for. It's worth considering how to strike a balance between aesthetics and context (ie. that you're going to respect their privacy, how frequently you're going to email, what kind of stuff you're going to email), if only to steer clear of potential permission issues.

VaultPress: Who doesn't love mad-libs?

Who can't feel a soft-spot for this playful signup form? Talking about striking a balance between aesthetics and context, this VaultPress piece gives you all the information you need as a potential subscriber, without being dry about it. Before you dismiss this approach as novelty, mad-libs forms have been shown to increase conversion by 25-40% - plus they can be a lot of fun to fill in!

Think you've seen this approach before? Huffduffer had a great shot at it, too.

The Incident: Adding video to increase signups

Although the subscribe form may not be the star-attraction of this page, the video is certainly full of compelling reasons why you should sign up for The Incident's newsletter. In fact, one comparison by ABtests.com found that featuring a video could increase conversion by 81% - so next time you're in a design jam, perhaps you should change your focus from the form itself, to what's near it.

Flight of the Conchords: The most beautiful form in the room

Love them or hate them, lightbox-style forms like this one from Flight of the Conchords simply command attention, while not forcing users to navigate away from where the action is. We love the large, bold type, plus the complete lack of distractions. And Jemaine. Sigh.

Pixel Creation: Skip to the good stuff

What's unique about Pixel Creation's site is the floating 'subscribe' tab on every page. Clicking on this tab scrolls the browser window smoothly to the footer of the site, where the signup form is located. It's a subtle visual cue on a site that doesn't assume that everyone will scroll to the bottom of each page. Yes yes, I know, we're guilty of this!

4 Pines Beer Club: Raising the glass to custom fields

Finally, if you've seen our date-based custom fields, you may have already started thinking of some neat ways to use the 20 fields available to you. 4 Pines has made the most of at least 3 of them, by tastefully collecting date of birth, mobile and postcode/zip code details from their subscribers. Not only does this prevent 4 Pines from marketing alcohol to minors, but it also allows them to gather demographic information and run targeted campaigns based on age and location.

We hope that this round-up has provided some food for thought and a little inspiration when you're next designing a subscribe form. Attracting subscribers to your email newsletter is a central part of the game, after all! If you've got a favorite form or approach to collecting signups, please share it with us in the comments below.

Roar! This campaign from The Lethals will wake you up. It’s loud, it’s proud and it gets in your face—in a good way, of course.

The campaign was designed by fellow table tennis enthusiasts INKLAB for their client, a mean funk band from Canberra, Australia.

The first thing you notice is the roaring lion in that awesome illustration. It opens up the campaign with a bang, screaming "Read me!". If your email client doesn’t support background images, you may not get to see the lions, but you won’t miss any of the news the band has for you. The main message is all HTML text.

The limited color scheme reinforces the band’s illustrative theme, as seen through their online presences, and the simple layout makes it quick and easy to devour. Even with foreground images suppressed, the campaign still hold ups nicely.

So, what was the verdict? After testing an email with iframes across 24 major web, desktop and mobile clients, we found that the results weren't particularly promising. As iframes can potentially link to shady or plain malicious content (like scripts), a lot of email clients just disable them.

Here's a breakdown of which email clients display iframes, and which ones do away with them altogether:

How iframes Perform in HTML Emails
Client	Is Displayed?
AOL Webmail
Gmail
Windows Live Hotmail
MobileMe
Yahoo! Mail
AOL 9
Apple Mail 3 / 4
Entourage 2008
Lotus Notes 6 / 7
Lotus Notes 8
Outlook 2000
Outlook Express 6
Outlook XP / 2003 / 2007 / 2010
Thunderbird
Windows Mail
Blackberry
iPhone / iPad
Symbian S60
Windows Mobile 5
Windows Mobile 6
Android (default client)
Android (Gmail client)

Our advice: given the notably poor adoption of iframes, we seriously discourage you from using them. Even though this means that you can't add a 'Like' box to your email, there are alternate ways to share your campaign on Facebook that you can consider.

We thought this campaign for Like.ie was pretty cool. The text is big and well spaced, making it easy to read and the colors are soft and are gentle on the eye. Although the campaign does pass when images are suppressed, we feel that having the call to action buttons as images can be a bit risky if they disappear completely when no alt text is assigned. That said, the phone numbers and the subscribe and visit our website links at the bottom are still visible if a subscriber wants to know more. Overall, a nice design.

Bye, bye background colors

A common technique used to add background colors or images to an email newsletter is to wrap a table with all your content, with another table applying a background color like so:

<table width="100%" bgcolor="#f0f0e8">
   ...
   <table width="600" align="center">Your content here</table>
   ...
</table>

Sadly, what the new Windows Live Hotmail is doing is setting the email width as the maximum fixed width defined in your HTML code. This means that it's collapsing/ignoring the outer table (width="100%") and only showing the inner table (width="600"):

The side-effect of this is that the campaign now also looks left-aligned, thanks to the copious amount of white-space to the right.

Ouch... What's the fix?

In so much as you could set the fixed width of your inner table to something wider (eg. width="800"), this makes the email increasingly difficult to read on devices with small resolutions, such as smartphones and older PCs. Thankfully, Emailcenter came up with an ingenious fix, that simply involves adding the following code to the <head> section of your HTML email code:

<style type="text/css">

   .ReadMsgBody { width: 100%;}

   .ExternalClass {width: 100%;}

</style>

Like magic, your email newsletter is restored to all its glory:

With Hotmail accounting for over 16% of email client market share worldwide, it's simply worth adding this fix to keep your email rendering as close to what's intended as possible. Reassuringly, this snippet doesn't have any impact on how your email displays in all the other major email clients.

Many thanks to the team at Emailcenter for sharing this valuable tip with us, and thank you to Oye Modern for allowing us to demonstrate with their lovely newsletter. If you're seeing any other quirks in the new Windows Live Hotmail, please share them in the comments below.

What really caught our eye with this campaign from Propel Youth Arts by Papercut Media was the navigation. The content split up into respective blocks that are linked from the menu to the left of the opening content. Easy to get back to the start too so you don't get lost. The bold blue colour helps the reader to distinguish the content areas. The iconography associated to each area is quite a nice touch too.

A couple of considerations for this template would be to look at using text for the navigation rather than images. As when images are disabled, it's not totally clear there is navigation available. Also, a permission reminder at the very top of the campaign wouldn't go amiss. Just to show who it's from and why, as the brands only noticeable if the images are enabled.

Overall though, a nice looking campaign that is easy to read and navigate.

The challenge with iOS icons, or for that matter, any icon that will be used at multiple sizes, is that you need to come up with an idea that is memorable and interesting, whilst keeping things clear and concise enough that it is still recognisable at smaller sizes.

The value of sketching

As an interface designer, I have found that in this digital day and age, we don’t rough out ideas with pen and paper nearly enough as we should. Sketching allows you easily develop and expand upon simple idea in a few strokes. I find sketching especially useful for roughing out ideas for icons and logos, as well as general layout throw-downs. Even if you think you haven’t got a knack for it, practice makes all the difference. Don’t be scared to try. Even as early as a few months ago, I shied away from sketching out ideas because, to me, they looked mediocre at best, but as I kept pushing myself to practice, designing becomes a much more organic experience.

Push yourself!

One of the easiest traps to fall into is to stop sketching after a few ideas; even if you’re excited about a particular iteration, push on and try and play with at least half a dozen ideas. Even if it doesn’t seem useful at the time, they act as food for thought when refining and polishing ideas.

Refined sketches of my two main ideas

The design process

My general approach to icon design, is to start at the larger sizes with all the detail, then scale down to the smaller sizes, remove any superfluous detail that would get lost in translation, then redraw or tweak all of the vector shapes so that they snap to a pixel grid. This ensures that the icon retains the sharpness and pixel-perfection it needs to really stand out.

One thing I pride myself in with my interface work is the super-crisp and pixel-perfect look and feel. I combat blurry edges by setting a grid in Photoshop’s preferences so that I have a grid line every 16 pixels with 16 subdivisions. That gives me a grid line every pixel, with a solid grid line every 16 pixels for reference. Make sure ‘Snap to grid’ is checked under View > Snap To > Grid, and you’re golden. This great article by Marc Edwards of Bjango, runs you through a few different methods for getting pixel-perfect results when using the rounded rectangle tool. (The same premise applies to the majority of the shape tools).

Close-up image of my pixel grid in use and the snapped anchor points of the pie graph

One of the more difficult parts of this project was the fact that the icon couldn’t be branded. Because Campaign Monitor was created for designers to rebrand for their own clients, the final icons couldn’t directly reference Campaign Monitor as a company. All in all, I’m happy that as a white-label icon, it still manages to convey it’s meaning and is still instantly recognisable as a part of Campaign Monitor.

The refined and polished end products

Implementing the icons

When it came to implementing the finished icons, I came across quite a conundrum — all devices running iOS 4 return the same user-agent, regardless of the actual device, this means, there’s no way do individually target a device, on the operating system. Sure, I could’ve just used the larger 114 pixel version for all devices and let the OS scale it down, but the obsessive compulsive designer in me wanted to display the individually tweaked icons for it’s intended device. After searching around for ways to individually target the individual devices, and coming up short, I thought back to an article I was reading on A List Apart which discussed the use of media queries to load different stylesheets for different devices with different resolutions.

The code

After a little trial and error, I fell upon the idea of using the same premise of serving different stylesheets according to the pixel density of the device, and instead serving up individual icons instead. I put together three simple snippets of code which target each individual iOS device according to their pixel densities. 163dpi for the iPhone 3G/3GS and iPod Touch, 132dpi for the iPad and a whopping 326dpi for the iPhone4.

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/link/to/iOS-57px.png" />

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/link/to/iOS-72px.png" />

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />

If you notice in the above code I have used apple-touch-icon-precomposed. The addition of -precomposed stops iOS from automatically rendering gloss atop my icon and rounding it’s corners. If you do want iOS to auto-apply the gloss and rounded corners automatically (so you can supply a flat, square image), simply use rel=“apple-touch-icon”.

For more information on media queries, do check out the A List Apart article, and for an excellent example of media queries in use (for stylesheets), take a peek at Jon Hicks’ new journal for truly superb execution.

Uh oh! Why isn’t this working on the iPhone4?

iOS has an annoying bug for web app developers. If you use the apple-mobile-web-app-capable feature to indicate that your site should launch as it’s own app (ie. fullscreen, sans toolbars), rather than in MobileSafari, the OS creates a low-resolution version of your apple-touch-icon on the home screen:

Left: Icon as rendered on an iPhone4. Right: How it should render.

Easily creating your own iOS icons

If you’re looking to try your hand at creating an iOS icon, then you can’t go wrong with this excellent template by Sebastiaan de With which has base icons in all the relevant sizes for you to build upon. A quick little tip for those that want their site to render an icon on the homescreen when bookmarked, simply save out your icon as “apple-touch-icon.png” and dump it in the root directory of your domain.

I’m looking forward to sharing more tips and tutorials in the future, so keep your eyes peeled. For a sneak peak at some of my upcoming work, check out my Dribbble profile.

After reviewing a mass of campaigns recently, we thought this email from Sevell + Sevell Inc. was quite memorable. The first thing we noticed was the bold date and use of typography for the header. Yes, that date “IS” all text and looks just as good when the images are turned off. Kudos for not using a graphic here! Immediately, your eyes are then drawn to the bold sections of color that organize the content. Those clever, little titles and the brief bits of information to keep the email short, are spot on. However, we would have liked to see those titles as text to keep their punch when images are not supported.

Lastly, we turn our attention to their footer. To keep a personal connection to their recipients, Sevell go straight for a friendly laugh with their unsubscribe link. Brilliant! Not only is it memorable, but we all can relate to it! Great use of typography, color and a bit of shock value at the end, Sevell have created themselves an excellent campaign.

How is Yahoo! Mail changing my link colors?

As pointed out by email genius and cool customer, Brian Thies, Yahoo! Mail is now applying a class called .yshortcuts and surrounding links within HTML emails with <span> tags. The .yshortcuts class makes all impacted links a blue color (#366388, to be exact), which of course, is bad news for your design.

Thankfully, there are two solid solutions which you can use to override Yahoo! Mail's choice of link color. Here's the skinny on both.

Brian's solution: If you can't beat 'em, style 'em

Given that Yahoo! Mail is automatically adding a .yshortcuts class and <span> tags, Brian Thies' solution is to simply override Yahoo's ambitions with your own styles. In the <head> section of your code, add the following:

<style type="text/css">
   div { color: #CCCCCC }
   a { color: #00FF00 }
   .yshortcuts { color: #CCCCCC } /* Body text color */
   .yshortcuts a span { color: #00FF00 } /* Link text color */
</style>

Where the colors defined are appropriate to your design. In your body, wrap your body copy and links in a <div> tag or similar, with the class .yshortcuts like so:

<div class="yshortcuts">If you wish HTML wasn't so darn quirky, <a href="...">click here</a></div>

This will override any link color styles that Yahoo! Mail applies.

Smith Harmon's solution: Roll your own span tags

The second solution posed by Smith Harmon is to surround every link with a <span> tag with inline styles, like so:

<a href="..." style="color:#808080; text-decoration:none;"><span style="color:#808080;">Link</span></a>

This also does the trick just fine, however it does result in a bit of repetitive coding.

Why should I tweak my campaigns, anyway?

If you hike on over to your email client usage reports in your account, there's a good chance that you might find some good reasons to make your email campaigns display as desired in Yahoo! Mail. As of our most recent stats, Yahoo! Mail accounted for over 14% of email client market share, however this percentage may be more or less, depending on who is on your lists.

You might also want to consider running your newsletters through our design and spam tests to see how they display in Yahoo! Mail.

And what's with those blue, dotted links? Can I remove them?

Yahoo! Mail also has a knack for picking keywords in emails and linking them to advertising popups (look for the blue, dotted links). Unfortunately, there's no known way to disable this behavior, despite it being potentially distracting or confusing to your subscribers.

Many thanks to Brian for having all the correct answers, as always. Whether you've got 5 or 5,000 Yahoo! Mail subscribers on your list, this is ultimately yet another quirk to add to your HTML email testing checklist.