Campaign Monitor Guides

I recently had the great pleasure of working with the team at Campaign Monitor to launch a new WordPress powered minisite. It was a great project to work on – and an interesting use of WordPress – so I thought I would share a little more about it.

Campaign Monitor are a local Sydney company who are playing big on the world stage. They’re the experts in Email Marketing and as well as providing their product, they also write a lot of great content to help people send better emails.

The most recent guide was a primer on design for marketers. In the past the design team at Campaign Monitor (who are ridiculously talented btw) would hard code the entire design, in order to have complete control of the layout and styling.

But with more of these guides on the horizon – they decided they wanted to set up a better system for putting together these guides in a way where the content could be edited and entered by the marketing team. That’s when they came to me to ask about a WordPress based solution.

So what did we do? First go take a look at the guide – and when you’re done, you can read on to find out about the nuts and bolts.

Multisite

At the heart of the whole project was the desire to be able to roll out new Guides really easily in the future – without having to set up new WordPress instances each time. To do this, the guides are now running on a WordPress multisite installation.

This means that each time a new guide is being created – they can simply add a new site & start adding content. All sites share the same set of plugins, so the functionality will remain consistent each time.

And all the sites have access to the same base theme – so will start with the correct look right out of the box.
The design team will also be able to add a child theme for each guide in case they need to make style tweaks, while keeping the bulk of the structure the same.

Custom Fields a-go-go

There are lots of subtle things happening throughout pages in the guide which required the addition of some custom fields to the editor – allowing the marketing team to enter copy for particular locations on the page.

One example of this was the desire to have different excerpts (summaries) of each page depending on where the excerpt was to be used:

•  In the Table of Contents at the top of the page
• In the next/previous page navigation at the bottom of the page
• As a meta description for SEO

A separate field for each of these items allows them to tailor  those excerpts exactly as they need to.

Hierarchy based templates

The design team at Campaign Monitor did a fantastic job coming up with a great look for the site. Part of the design solution was a change of header size based on the depth of the page within the site. To allow the team to create these different pages we set them up with three basic templates for:

• Homepage
• Section Pages
• Chapter Pages under each section.

There were some minor differences in the styling and fields of these templates, but the major one was the difference in the site headers.

By running a conditional query on the template being used – we were able to output the different headed content for the appropriate pages.

Custom Type Styles

One of the major needs was to be able to have a wide range of styles for text in the pages, including:

• pull quotes
• ‘tweet this’ banners
• inline tweet links
• different paragraph options

WordPress’ editor doesn’t allow an easy way to do this out of the box – so we included an additional dropdown with the extra styles. Selecting one of these options wrapped the text in a class – which we could then target with the CSS to style properly.

Breaking the Grid

 

The design the team at Campaign Monitor contained a lot of options for breaking out of the thin single column – particularly for videos, images and full width panels.

The visual effect of this was great – but quite challenging to achieve while still keeping everything editable within WordPress.

With a bit of CSS trickery we were able to set all elements to run full width, and then set a max -width on the elements that needed to sit inside the small column. This gave us great flexibility in use of the grid – and also meant we could use the eye catching full width panels the team had designed.

Fixed Background Fun

One of the particularly eye catching parts of the design is the full-width panels which appear throughout the site (either for pull quotes, or ‘tweet this’ links).

Mike came up with a collection of great vibrant patterns to appear in the background of these panels – but it seemed a shame that in some instances you would see so little of the pattern itself. We got around this with a simple, but effective solution.

By setting the background to have a fixed position (rather than scrolling with the panel) the illusion is created that the panel is actually revealing the pattern showing behind – and layering the text over the top. It’s a great looking effect for such a simple chafe.

Subtle Delights

We used some basic javascript to add a few little visual niceties throughout the site. Things that didn’t stand out too greatly – but were just a nice little touch to show the care that was taken in putting the site together. Some of my favourites are:

• The way the social icons sit fixed below the header once they reach that point.
• The subtle parallax in the homage header
• displaying the newsletter signup at a certain scroll point
• Fixing the site header at a certain scroll point

Head over to the site and check them out

Pulling it all together

It was a blast to work with the talented design team at Campaign Monitor. They’re a grew bunch, and their office is amazing (and they’re hiring – check it out). I’m really happy with the end result of the site, and the way we were able to take a totally custom design, and set it up in WordPress with all of the flexibility they need to continue using it into the future.