Despite what Kermit will tell you, it is easy being green, at least if you view your emails in Windows Live / Hotmail. We've had a few people tell us that a recent update to the webmail client's stylesheet is forcing all <Hx> heading elements to be this shade of green.

Here's an example of headings that look a bit more sickly than intended:

Thanks to James Walters for doing the digging and finding the culprit in within the "thenewcss" stylesheet.

h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#006E12 !important}

Whether that is deliberate or accidental is hard to know, but it has been there for a few weeks now, so it doesn't look like going away quickly. Fortunately, it is easy enough to work around by adding your own inline !important declaration for your heading elements. Since your CSS will be inline, it takes precedence over the Hotmail stylesheet.

For example:

<h2 style="color:#000 !important;">Your correctly colored heading</h2>

Another email client rendering quirk defeated, at least for now!

Today’s entry from Openluchttheater is a colorful and eye catching promotional newsletter. Rather than take up a lot of the limited vertical space, the designer has run the branding in a strip down the left hand side. That means the content appears right up the top, even in the smallest preview pane.

Even with the images not downloaded, it is easily read and maintains a scannable structure. Finally, each section ends with a very clear ‘TICKETS’ link, making the next step obvious. 

Regardless of how strong your love of trees or dislike of printers is, every now and then there's a worthy reason for either for you or your subscribers to print an email. Sadly though, simply hitting 'print' in your email client of choice doesn't usually bring the best results. If your email contains large images, it can also cost you in toner and paper, as well.

So, you're probably thinking, 'Well, this is obvious. I use print stylesheets on the web, so why not for email?'. Not so fast, buster. As we go through some of the options available when it comes to building printer-friendly email, you'll come to realize that printing from your inbox can certainly be a fickle beast.

Why shouldn't I use print stylesheets?

Print stylesheets and email are simply not great friends. Or at best, they're the kind of friends who routinely show each other up on dates and never shout a round of drinks.

A few years ago, we did an experiment on whether or not @media screen { ... } works in HTML email. Consequently, we tested <style type="text/css" media="print"> and found that although stylesheet acceptance may differ between email clients, both methods share a similar story. After a series of tests with a print-optimized email design, here's a sample of our results:

Email support for print stylesheets
Email client	@media print { ... }	media="print"
Apple Mail 4
Outlook Express/2003
Outlook 2007/2010
Thunderbird
Yahoo! Mail
Gmail
Windows Live Hotmail

In addition, linking to an external print stylesheet poses its own set of issues. As some email clients tend to strip out <link> tags, Campaign Monitor imports any external stylesheets into the HTML code. This is sound logic, however it often results in styles for the screen being overridden.

So as you can see, things aren't looking too good for the print stylesheet. What's worse, in our tests with web email clients in particular, we had our email designs either degrade in the inbox (Yahoo!), or display our print styles instead (I'm looking at you, Hotmail).

The bottom line: Use print stylesheets with extreme caution. And only if you know exactly which email clients your recipients are using.

How about my web version?

A better option is to link to the web version of your email and prompt your subscribers to print from their web browser instead. This ensures greater consistency with your email design, however doesn't solve the problem of unnecessarily printing large images and running up a toner bill. On the upside, it simply works.

Another option is to link to a PDF version of your email. This also means that you can make design tweaks such as scaling/removing large images and provide a more print-friendly look overall. On the downside, this requires a little more overhead on top of designing your email newsletter and can result in fairly large PDF file sizes (which not everyone may appreciate downloading).

So, what's an email to do?

As you can see, there's no silver bullet when it comes to making your email printer-friendly. However, if you or your client is determined to make your email look great in both the inbox and from the printer, here are some pointers to consider:

• Cut down on the huge images. They can chew up a lot of paper, ink and printing time (as well as making your email slow to load).
• Anything that's text, display as text. Images used for headings, quotes etc can look pretty natty once printed.
• Anticipate a degree of layout-breakage. Keep your layout simple and avoid loads of floated divs, elements that are likely to wrap beneath each other (and look bad in the process) and non-static positioning (eg. position: absolute;). Also think about how your navigation will look - if you have a table of contents, how will this display on paper?
• Keep your email width at 600px or less. Otherwise there's a good chance that it will chew through extra pages when printing anything that exceeds the margins of a printed page.
• Test, test, test. Have a look at the print previews at least across a number of email clients. But you knew that :)

If there's a moral to this story, it's not a unique one - HTML simply wasn't designed to translate beautifully from the screen to print. I highly recommend that you read this excellent resource on print stylesheets, as it not only details the challenges faced by folks designing for the web and the printer, but gives you a feel for how this issue compounds when paired with the well-quirky world of email design.

Finally, it's over to you. What are your tips for creating printer-friendly campaigns? Let us know in the comments below.

My first impression of this email was just how pretty this email for Kathryn Grill Graphic Design is. Then, I was struck by how it manages to be simultaneously beautiful and remarkably professional; professional without being even a little bit boring.

The warm, subtle colors of the email are inviting and the design of the content draws you in leads you through each piece. I love the varying treatments to the different sections of the email; they are easily discernible yet work harmoniously. The typography is flawless and the imagery is compelling. You know how they say that good design instills a sense of trust in the company? This is what they are talking about; I don’t think anyone could argue that this design firm is anything but competent and would be nothing but professional to work with.

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!

As much as we all have a discerning eye for typography on the web, the truth is that a lot of folks are very conservative about its application when it comes to designing for email. Hey, I’m included in this category - even after years in the trade, a sprinkle of the Georgia font seemed quite the luxury. So in this post, we’ll look at some interesting font-stacks and examples, then touch on font use in foreign-language campaigns.

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”!

Like a blanket for taking convenient naps, there are some innovations that we get very excited about. This includes the Salesforce Connector for Campaign Monitor by SNB Apps, an integration which allows you to export your Salesforce contacts to one or more Campaign Monitor subscriber lists in only a few clicks.

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.

Towards the end of 2009 we really started pushing the limits of our current space. All our closed offices were taken and we were squeezing more and more team members into crowded workstations. Eventually it looked like we'd need to get rid of the precious ping pong table to free up space. To avoid a staff revolt, we started the search for a new office.

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're a keen WordPress user and have the Contact Form 7 plugin installed, then the Campaign Monitor Addon by Joshua Bettigole will be music to your ears... Or subscriber list. In a few steps, you can get your forms within your WordPress site to automatically synchronize with a Campaign Monitor subscriber list, with no coding required. The addon is available for free via WordPress' Plugin Directory.

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.

With SXSW 2010 still fresh in our memory, you wouldn't believe that it's time to vote for panels at what should be a bigger and brighter SXSW Interactive 2011. Our team have been given the official nod on three very exciting proposals, so now we need your support.

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.

You have a gorgeous email design that looks great across most of the major clients. You've got the perfect subject line, a thoughtful A/B test in the works, but... No subscribers.

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.

Questions regarding the use of iframes in email crop up from time to time. Whether it be to do with adding content from a site, or a 'Like' Facebook box, we figured that we'd finally do some thorough tests of our own and put the matter to rest.

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.

Thanks to our friends at Emailcenter, we were recently alerted of an email alignment and background color rendering glitch in the new Windows Live Hotmail. Thanks to this issue, we're seeing email designs being narrowed down to the width of an enclosed table, which is duly making email newsletters look 'left-aligned'. Lets go into a bit of detail and show how you can prevent this from happening in your campaigns.

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.