The New Wisdom

Newism welcomes Tony Arnold as our newest team member

Wayde Christie — 2009-10-06T08:28:09+10:00

We’ve been keeping this under our hats until we finished with the formalities, but it’s with great excitement that we can finally announce that -ex Newcastle Uni ‘Senior Analyst Programmer’, Tony Arnold, will be joining our crack team of elite nerds.

In his own words Tony is a “highly motivated developer, technologist and team leader who has a passion for software design and development”. In our words, Tony will be “all over your web projects like a powerful moss”.

Here’s a quick rundown of the fantastic skill-set he brings to the team:

Mac and iPhone application development (check out Tony’s HyperSpaces app)
Server administration
Web development
ExpressionEngine development
Documentation and reporting

We know - documentation. Swoon.

The elite nerd in question

His first official Newism business will be to attend Web Directions South with us this week. Beyond that he’ll be helping us with medium to large web projects, iPhone and Mac application development, and generally improving our systems and processes.

So from all of us at Newism - welcome Tony! We’re all super excited to have you onboard!

If you’d like to join us in making Tony feel welcome, leave a comment below. If you’re at Web Directions South this week and want to talk iPhone or Mac development, drop us a line or fire us a Tweet.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Michael Jordan’s greatest Gatorade moment? Vote with Wildfire on Facebook.

Anthony Short — 2009-08-05T22:42:54+10:00

It wasn't easy but the results speak for themselves (over 500 votes in the first couple of minutes). The promotion even includes a tasty embedded Flash video in the header, which we didn't think was even possible in a Wildfire app, but it gives a very, very cool effect — and I'm not even a fan of Flash.

Congratulations to the whole Wildfire team for pulling together and making this Facebook promotion another huge success.

What are you waiting for... go and vote for your favourite Michael Jordan moment.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Britney Spears Facebook Promotion

Anthony Short — 2009-08-03T04:22:02+10:00

We deployed the promotion across Facebook and other social networks with the amazing Wildfire app which, you guessed it, creates a wildfire-like spread of hype and interest across social media.

The promotion instantly showed up on the walls of Britney's fans (all 1.8 million of them) who needed to invite 2 friends to enter the sweepstakes; So you can imagine how quickly it can spread.

We're the Wildfire promotion experts, so if your product, company or event is worth promoting, give us a shout.

View Britney Spears Promotion on Facebook ›

Some tasty screenshots

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Fixoutlook.org - Using Twitter to petition Microsoft

Anthony Short — 2009-06-26T00:00:32+10:00

A little over a week ago our friends at Campaign Monitor asked us to help them use Twitter to send a message to Microsoft about their decision to use the Word rendering engine in Outlook 2010. The result was http://fixoutlook.org and an unprecedented 20,000 strong online movement that took everyone by surprise.

"In what may be one of the most successful Twitter campaigns in recent memory, more that 20,000 Twitter users have grouped together to “Twitter petition” Microsoft about their lack of web standards in Outlook 2010."

So why the fuss?

"Microsoft have confirmed they plan on using the Word rendering engine to display HTML emails in Outlook 2010. This means for the next 5 years your email designs will need tables for layout, have no support for CSS like float and position, no background images and lots more. Want proof? Here’s the same email in Outlook 2000 & 2010."

Microsoft wanted feedback on Outlook 2010, so the web design and development community gave it to them – in spades. At the time of writing, there are 22,415 tweets from a passionate audience voicing their concerns, and all in less than 48 hours.

If you've been in the web design industry for any amount of time, you'll most likely be aware of the trouble Microsoft has had with web standards in both email and on the web. The pain we may experience with IE6 is nothing compared to the nightmare that is email client software.

The Email Standards Project was founded to promote awareness of the lack of standards in email and to hopefully encourage the makers of the email clients to come to an agreement. The email standards environment has been steadily improving; that was of course, until Microsoft announced that that they will be using the Word rendering engine in Outlook 2010. A huge backward step.

So, with our help, Campaign Monitor skillfully crafted a rebuttal in the form of http://fixoutlook.org, which is essentially an effort to show Microsoft just how important standards are to the web.

Microsoft responds

Surprisingly, it didn't take long for Microsoft to post their response on the Outlook Team Blog.

"We’ve made the decision to continue to use Word for creating e-mail messages because we believe it’s the best e-mail authoring experience around... Our customers enjoy using a familiar and powerful tool for creating e-mail, just as they do for creating documents."

Now I'm not judging, but it's clear to me that they're missing the point. Fair enough, they're only concerned with their customers – they're a business. But at some point, we need to think of the non-corporate users and work to improve the internet for the benefit of everyone. That, and as email marketers we just want our jobs to be a little easier.

"It’s not good for users, not good for business, not good for designers. It’s not logical, not on-brand, and the opposite of a PR win." – Jeffrey Zeldman

The blogosphere chimes in

A mere two hours after the launch blogs started firing up about the issue, helping to spread the word. TechCrunch, Mashable, PCPro, SitePoint, CNet, and ZDNet to name a few.

Microsoft, Outlook Is Broken, Says 6,000 Tweets (And Growing). Fix It. - TechCrunch
Sour Outlook - Jeffery Zeldman
Microsoft Sees Your Tweets, But They’re Not Fixing Outlook - Mashable
@msofficeus: 16,000+ Twitter Users Want You to Fix Outlook 2010. Pls Listen. - Mashable
Designers criticise Outlook 2010 - PCPro
Outlook 2010 to Set New Standard in Irritation - Sitepoint
Users Pressure Microsoft to Fix Outlook - PCWorld
Microsoft defends Outlook HTML decision - CNet
Microsoft: Outlook's not broken and we aren't 'fixing' it - ZDNet

The result?

Seeing all those faces and conversations from around the world in near real-time was, and continues to be, awe-inspiring. It's truly amazing the power the internet has to mobilise like-minded people into action.

Of course we won't know whether the Fix Outlook campaign has worked until Outlook 2010 is released next year, but it's obvious that it has certainly ruffled Microsoft's feathers – hopefully to the point that they've taken notice and will reconsider their decision. Whether anything does come of Fix Outlook, it has definitely been the most exciting web project we've had the privilege of being involved in.

And for those of you interested in how the site was actually built, we'll be putting together a post soon about everything that's going on behind the scenes. There's some serious technology happening in there for a single page site, so we're sure you'll love it as much we enjoyed building it.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Building Campaign Monitor update and work in-progress

Wayde Christie — 2009-06-04T11:46:09+10:00

Getting the Building Campaign Monitor blog series out the door is a priority for us, but we've been rather busy of late. Here's how we've been spending our days (and nights):

We've built a few sites

By far the largest chunk of our time lately has been taken up working on several large sites. The first one is a complete redesign and Wordpress theme build for the Australian Apple blog MacTalk. One of their founders infamously obliterated their site recently, at which point they decided a refresh was overdue anyway. We managed to get some sweet parallax background action in there a-la Silverback (resize the window for the effect), and so far the feedback from the 20,000 strong community has been overwhelmingly positive. Next on the list - a MacTalk iPhone theme!

Now with more cyan

Another great Australian company we've started working with is people management software company Acelero. Their site is currently in progress and is due to launch in the next couple of weeks.

Last but not least, another Australian company TakeItOff.com.au has us working on an SMS coupon site for savvy shoppers. We took on the task of working with an SMS API and integrating it into an ExpressionEngine module, and so far it's been challenging but also great fun. We hope to be able to share what we've learned along the way when the site launches in the coming weeks. Did we mention this business was solely conceived and financed by a young Newcastle entrepreneur in his early twenties? Go Damo!

Yes, we got excited by the name also

We've mixed with some Silicon Valley start-ups

After spotting our interview on the Harvest blog, Alain Chuard from Wildfire Interactive contacted us about making a custom theme for his Wildfire application. We'd never heard of him or it, but after discovering his company had recently been a winner of the inaugural Facebook fbFund prize our ears pricked up!

Since working with Alain and his fantastic team over the last couple of months, we've really managed to get our heads around the whole Wildfire application, particularly the theming aspects of it. We won't go into any detail about how the system works right now as we plan to dedicate a full post to it in the near future, but for those of you who are interested in running promotions on Facebook you should definitely read up on it. We think it's a winner and we're really happy the team at Wildfire trusted us to help them with their application. Here's the latest Wildfire promotion we've designed and built for none other than P!NK! Facebook users can check out the live P!NK promo here.

We've done some advertising

After repeatedly bragging about our gobsmackingly awesome online advertising skills, Dave Greiner from Freshview finally caved and agreed to let us at his upcoming Campaign Monitor marketing campaign.

So after a solid ten minutes of brain-storming and the first official use of our chalk-board wall, we came up with three gobsmackingly awesome banner ideas. Dave's written up a brilliant article on the outcomes of the campaign, including loads of businessy insights that the web community is rarely privy to, so I highly recommend you check it out, particularly if online advertising interests you.

Gobs = smacked

Something else we've done recently is run the first advertising campaign of our own. Most of our readers will know that Leevi is one of the most prolific developers of ExpressionEngine extensions in the industry, having written, documented and released more than 20 add-ons in the past few years (most of them for free). Lately however, he's launched a number of commercial add-ons; most notably LG Better Meta, LG Polls, and NSM Publish Plus.

We thought it would be a good experiment to dip our toes in the water and advertise some of these extensions across a few key sites. So we came up with some concepts, built the ads, then plastered them all over EE-Insider and the newly launched Devot:EE. They're doing really well so far, and we're one step closer to buying ourselves mansions of solid gold.

Our ad, not an ad

We've volunteered some of our time

A couple of great opportunities to give back to the community have come our way recently. Firstly we've offered to design and build an email campaign as part of the fantastic 'Design Hope for Startups' initiative. Jonathan and Nate from FortySeven Media have rallied together some great sponsors to help a start-up business develop a web presence and market their product, and Newism is really excited to be involved. The first Design Hope recipient is Scott Schuster from Underdog Solutions, a new indie iPhone developer. Keep an eye out for Scott's new site and email marketing campaign soon.

Secondly, thanks to a tweet we overheard, we've been able to volunteer our services to the ANTaR (Australians for Native Title and Reconciliation) organisation. So over the next couple of months we'll be working with them to develop their new email marketing campaign also. It's great to be working with such an important organisation, particularly because they're from Oz. C'mon!

We've squashed some bugs

Leevi and Anthony have secretly been working on a bug-tracker module for ExpressionEngine over the last couple of months. It's looking great so far (and is actually completely ready for prime-time), but sadly like everything we've got on the go, more important (read: revenue generating) work keeps pushing in front. Leevi keeps telling me "as soon as we get x, y and z projects complete, it'll launch". Sigh. In the meantime check out the screenshot below, and visit Leevi's bug-tracker gallery for more sneak peeks.

Our staff numbers doubled, then halved

In May we finally got our hands on a full-time developer, Amos. Leevi was excited beyond belief, and even came up with a suitably geeky nick-name for him (in lieu of being able to remember his *actual* name). Amos left on the basis that Leevi should've been able to remember his name after 4 weeks. Fair enough. Know any good PHP developers in Newcastle? Let us know. Please.

A few people liked our site

Our humble little site did the rounds of a few design and CSS galleries last month, which came as quite a surprise. No really. Smashing Magazine and Six Revisions sent us loads of traffic after a couple of mentions, as did about half, a dozen, other, sites. This of course, has done bad things to our already over-inflated egos.

So yeah...

Bizzay! We've got even more work on top of all of this stuff, so we may never surface again, but in the unlikely situation that we do you can guarantee that the blog series will be our first priority. Huge thanks to everyone who has entered the competition and left a comment - your chance at the prizes is still well intact. We're super keen to get the next post in the series out the door, so please hang in there, it won't be much longer!

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Espresso - A sugar sweet web development experience

Anthony Short — 2009-03-30T00:07:53+10:00

Describing Espresso is rather easy. Imagine all of the good parts about Coda (the all-in-one solution and the nice interface), and all of the good parts about TextMate (awesome text editing capabilities, snippets, and most of all, expandability), and you've got Espresso.

I've been working with Espresso since the private beta, and it's come a long way. I won't do a complete feature breakdown or comparison here, I'd just like to go through some of my favourite features and explain why it's worth taking a look at.

As flexible as they come

One of my favourite features of Espresso is the window / tab management. You can have your project open and select which files to put into the 'Workspace' – an area that works like tabs, but doesn't sit where tabs normally sit. Instead it sits above your project listing. This makes more sense than the standard tab convention in my opinion. You can see in a glance which files are open, you can view files in your project without actually opening them for editing and cluttering your workspace (like tabs do), you can see which folder they belong to, if there are duplicate names, and you can grab, move and play with the tabs as you see fit.

Want to see that document next to that document? Just grab the tab and rip it from the sidebar. When you're done, just grab it and put it back it. You can grab a few files at a time, or just one. It really does work better than the one-window concept, as it gives you the flexibility to do whatever you want with your windows, and they never get lost.

Packed to the rafters

The built-in FTP client is pretty special. It doesn't work like Transmit or Coda where you just choose a folder and drop everything in there, it syncs with your current project, determining what's new, what's changed and what's been deleted. Transmit has similar functionality, but this is built directly into Espresso, right next to your project.

This encourages you to use a better workflow. Rather than creating your project, uploading it, occasionally editing a file directly on the server and then realising you've lost work, you keep your project files and the server in sync.

It even comes with Quick Publish, which will upload your file to the server whenever you save it. In case you really need to, remote file editing is in there too.

Sugars – the sweetest plugins ever

'Sugars' are a collection of files put together to form an Espresso plugin. They can do all sorts of wonderful things ranging from the simple - syntax highlighting and code completion - to super complex features such as the Cocoa API. The power given to developers is huge. Just about any feature that isn't present, you could probably create with a Sugar.

Extra sugars can be downloaded from the Coffee House, a 3rd-party site which aggregates sugars. Most sugar developers are using GitHub to host their code, so you might want to have a peek around there as well.

I'm planning on writing a post in a couple of weeks about making a simple sugar and explaining in detail how they work. Stay tuned!

Themes

The code theming in Espresso is pure gold. It's just CSS! You can style up a whole theme using CSS, including text, backgrounds, font weights, colours... you name it. It's also really easy. All you do is pin-point the part of the syntax you want to change like a normal CSS selector.

I'll put together a tutorial next week on making your own theme, so keep an eye out.

Super-duper sexy

The interface. The icons. The window. The fonts. They're all beautiful! MacRabbit has done an amazing job putting the interface together. They even created a custom monospace font, 'Espresso Mono'. These sort of features aren't vital to the functionality of the app, but the fantastic icons and UI really make it a pleasurable experience.

The downsides

When I got the email saying Espresso 1.0 was released, I thought I was caught in some wildly nerdy dream. That's not because I was excited, but because I didn't think it was 100% finished. But then again, no app is ever really finished is it?

I was hoping for some better snippet management, CSSEdit's x-ray capabilities and some integration with Git. But hey, no big deal, it will all come eventually.

Espresso's main drawback is at the same time its greatest strength. While sugars can provide almost limitless expandability, it will rely on sugar developers to make it truly great. That's why I went ahead and created the ExpressionEngine sugar. We already have sugars for most popular languages, and next will come frameworks like Rails and CodeIgniter. It's just a matter of time.

The snippet functionality is also a bit lacking. It's better than Coda but not quite as good as Textmate. It does however, use the same snippet syntax as Textmate, so you should have no trouble converting your old snippets over to Espresso. Hopefully they update the snippets in the next release - it's one of the most important features needed at this point (along with CSSEdit's X-ray, which would blow the competition out of the water).

ExpressionEngine supported

The reason I wanted to get on-board with Espresso so early was that I wanted to create a plugin for ExpressionEngine. ExpressionEngine support in other apps is sadly lacking. Sure, we have a lot of nice snippets for Textmate, but I wanted more than that. I wanted an app that knew the ExpressionEngine template syntax, knew all of the attributes and tags and had snippets. On top of that we can start to look at extending it further - we have access to Cocoa and can hook into other functionality of the app. I'll leave this to your imagination for now, but I'd love to hear some of your ideas.

You can get a copy of the ExpressionEngine sugar from GitHub. I'm updating it fairly frequently, so expect it to improve pretty quickly. I'm open to any suggestions or criticisms you may have, but keep in mind I'm still working on the snippets. Here's what you can grab right now:

Auto-complete for variables, tags and attributes
All of the Textmate snippets you know and love
Templates for common EE tasks
Detailed syntax highlighting
Code folding (based on the syntax, it's real code folding)

I'd recommend you check out my theme too - Quiet Night – as it has some colouring specifically for ExpressionEngine. One major development I'm working on (which I did have working at one point) is context-sensitive auto-complete. Inside a weblog:entries tag you'll have access to all the variables contained therein. Inside a categories tag? You'll have to auto-complete functionality. For now, you have access to all variables, at all times.

You can download the ExpressionEngine sugar from GitHub.

Highly recommended

While I find Espresso to be amazing, of course not everyone will. If you're one of these people, I strongly encourage you to take the time to play around with it for a few days. Create your own theme for it, one which suits you best. A lot of people are set in their ways, and won't leave TextMate and a lot of people won't separate from their love affair with Coda, but I highly recommend you at least give Espresso a try.

You can buy Espresso now from MacRabbit for €59.95, or in the latest MacHeist bundle which is going for US$39 for 12 apps. If you're still not sure, you can try it out for 15 days for free via the MacRabbit site.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Introducing Publish Plus - Collaborative workflow for ExpressionEngine

Leevi Graham — 2009-03-24T12:58:46+10:00

For the last 6 months we've been developing a new ExpressionEngine extension called Publish Plus which greatly improves ExpressionEngine's standard publishing workflow. For the record, the initial development of Publish Plus was funded by the good guys over at http://paramoreredd.com – a big thanks to Sean and the team.

The problem

There's no doubt that ExpressionEngine is an excellent publishing system, but it does lack workflow concepts such as drafts, live previews and fine grain member publishing permissions. These omissions make it difficult to implement a smooth collaborative publishing workflow.

The major issue most users have with the current ExpressionEngine workflow is that there is only a simple approval process for entries. The recommended approach requires the publisher to switch the status of an entry between open and pending while editing. This technique is fine for unpublished entries, but can break the site if a previously published entry is being edited. This happens because the entry is is not rendered in the default {weblog:entries} tag unless the status parameter is set accordingly.

What's needed is a way to have the most recent, open version of an entry visible on the site, but have the most updated version (draft) awaiting approval and hidden from general viewing until approved. The draft should also be available to preview in it's final template context. Publish Plus adds this functionality plus much more.

Common publishing scenarios Publish Plus solves

Time for a couple of common publishing scenarios which are not possible with a standard ExpressionEngine install. These are all possible with the latest version of Publish Plus:

Marketing (publishers) manages the content on the website. They want to allow someone from another department, say human resources (editors), to edit their own entries. Marketing wants to be able to approve human resources content changes before they show up on the site.
A website has many members who contribute articles (editors). The website owner (publisher) needs to preview and approve articles before they go live. If an article does not meet the website's submission requirements and is denied, the website owner needs to leave a note for the contributor and notify them via email regarding the entry's state.
A website has many members assigned to a different member groups. The website owner only wants a small number of those members to have publishing rights, regardless of their group permissions.
The 'publisher' needs to be notified when an 'editor' makes a change so they can decide wether to approve or deny the article.

Features

Publish Plus has many features to enhance ExpressionEngine's native workflow. They include:

Fine grained weblog assignment – Assign weblog posting privileges to members, not only member groups.
Publishing Roles – Assign roles (publisher, editor) to members further limiting a members weblog posting privileges.
Entry drafts – Create and edit drafts for published entries without updating the live site.
In-Template Previews – View standard previews, drafts and old revisions in template context (requires LG Live Look).
Entry specific notes – Easily communicate updates with other team members through entry specific notes.
Draft specific notes – Track individual draft edits with draft specific notes.
Workflow states – Assign states to entries to track their position in the workflow.
Filter entries by workflow state – Easily see which entries are approved, pending approval, denied.
Advanced notification system – Send email notifications when various actions are taken by members.

Publish Plus is also:

LG Live Look compatible – Preview entries, drafts and revisions from the Publish Form
Multi-Site Manager compatible – Independent extension settings for each site
LG Addon Updater compatible – Stay up-to-date with the latest versions of Publish Plus

Demo Screencast

So now you know the problem and the solution. I could continue to sell the benefits of Publish Plus with long winded paragraphs of content, but I think this thrilling video covers it ;)

HD Fullscreen version hosted on Vimeo.

Download

Read more and download Publish Plus over at leevigraham.com.

Keeping up-to-date with Newism development

Twitter users can follow newism (general Newism news), newismdev (Git commits and other dev related information) or leevigraham (general tweeting about EE and sneek peeks of new ExpressionEngine addons).

Github users can follow our Newism account or my personal Leevi Graham account.

If RSS is your thing, subscribe to our feed and our blog posts will be delivered straight to your reader.

For super secret sneak peeks and updates you can also subscribe to our newsletter in the footer of this page.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Building Campaign Monitor Part 3 - Design Process

Jesse Bennett-Chamberlain — 2009-03-06T04:22:51+10:00

Since the last two posts in the 'Building Campaign Monitor' series were so ~~incredibly dull~~ technical, we thought we'd lighten things up a bit and go for some pretty pictures instead :)

The gorgeous design for the Campaign Monitor site was expertly handled by Jesse Bennett-Chamberlain from 31three - someone who needs no introduction in web design circles. Jesse has been responsible for some incredible designs in his career (including the current ExpressionEngine site), and the Campaign Monitor site represents the current pinnacle of his achievements (in our opinion).

It's a great privilege to be able to share Jesse's fascinating insights into the Campaign Monitor design, and we hope you appreciate his first guest post as much as we do. Over to Jesse... —Wayde.

Nervous beginnings

It was around a year ago that I received an email from David Greiner at Freshview asking if I was available to design a new website for Campaign Monitor and MailBuild (now superceded). When I first read through the request, I felt quite nervous at the thought of redesigning a website that was already esteemed within the design community. Knowing that I was going to be designing for another talented designer didn't make things any easier either. I was nervous, but not nervous enough to pass up the opportunity.

First steps

A couple of months after our first discussions, Dave kicked off the project by sending over a thorough creative brief. In the first couple of pages, he outlined two main goals for the site summed up here:

"The aims of the new site are to maximize new customer conversion and encourage repeat business from existing customers through good articles, resources and a thriving customer community."

In order to work towards these goals, one of the features we originally tried to execute, was the ability to have two different home pages: one for new visitors and another for existing customers. The idea was that new visitors would see a page with compelling product information and a clear sign up method, and existing customers would see tips and tutorials on the product as well as business advice that would encourage them to use the product more.

For my first attempt at this, I broke the content area into two seperate sections titled "The Product" and "Getting Started". New and existing customers would have access to both areas, but a cookie would determine which one they defaulted to. The problem with this method became apparent while trying to decide what content would go in each tab. A lot of the items that would be featured on the "Getting Started" page were actually great selling features as well. Having the same content repeated in these two different tabs didn't seem like an ideal solution... so we eventually decided against it.

From there I took the basics of the first wireframe, removed the two side tabs, and changed it up a bit, arriving at this design comp. Dave originally wanted to go with a large main banner area that showcased some of the key features of Campaign Monitor in a multi-paned approach. The mockup below had enough room for the product descriptions in the banner, but because the additional panes were hidden, it also meant many of the compelling features were hidden. Not good.

In this comp, I removed the features from the main banner, and placed them down below. I also included some large links with descriptions so that the features wouldn't get lost behind a small indicator. This approach was better, but still had some weaknesses. The pricing would only show up on one pane, and wouldn't be visible all the time... something we felt was important.

I was flipping through iStockphoto looking for images and ideas when I saw the paper airplane image. I thought it might make a cool graphic for the site, so I followed my creative impulses and quickly mocked something up.

Sometimes these impulses work and sometimes they don't. This one didn't.

An end in sight

The next few revisions convey a fairly standard progression of slight tweaks and modifications. I won't outline each one, as the changes were too minor to justify commentary. The main thing we wrestled with was trying to find the balance between focus on new versus existing customers.

This next design comp was actually slated to be the home page to move forward with into implementation. It even went so far as to be entirely coded up by the team at Newism.

A couple of weeks before the site was due to go live however, Dave IM'd me and mentioned that he had some new ideas for the home page. He sent over a quick sketch of what he was thinking, and that sketch translated into this next and final version.

I think we both looked at the home page for so long, that it became difficult to see it objectively.

Designers: sometimes you need to take a bit of break and come back to things at a later time.

If you had access to my original files, you would notice that several pages on the live site look a bit different than the files I provided. You would also notice that any tweaks that were made improved the site quite a bit. It's a rare thing to see design work actually improve throughout the development phase, and I have to give Dave and the team at Newism a ton of credit. They did an amazing job at putting this project together.

The end result

A pretty design wasn't the goal of the site though; improved conversion rates and repeat business were. I asked Dave for some recent stats and this is what he emailed back...

"As far as site performance goes, our conversion rate more than doubled immediately after launching the new site, and has actually improved by more than 50% since then. The reason for this is because there were lots of people checking the new site design out after the first week that weren't necessarily interested in the product. Now that's died down to more targeted traffic and the conversion rate is even better. Very cool!"

Overall I'm extremely pleased with how this project turned out, and if you ever get the chance to work with David or the guys from Newism, do it. Wonderful, wonderful people.

Thanks to Jesse and a reminder about the competition

A great post we're sure you'll agree, and a nice relief from the highly technical stuff that's been written about in this series so far - *sheesh*. This post was a small diversion from the advised telecast, but as promised, the next post in the series will be all about ExpressionEngine templates. Brain explosion!

Many thanks to Jesse for his insightful contribution and our continued thanks to Freshview for allowing us to document the project. We hope everyone is enjoying the series as much as we are enjoying writing it.

Finally, we're running a competition in conjunction with these posts (more about that here). There is almost $3000 in fantastic ExpressionEngine licenses and modules, Campaign Monitor credits and learning materials up for grabs, so we encourage you to get involved. There are several ways you can enter, and you can enter multiple times:

Tweet about the series (click here or include the hash code #buildingcm in your tweet)
Digg any blog post in the series
Bookmark any blog post in the series on Del.icio.us
Leave a constructive comment on any post in the series
Subscribe to the RSS feed (click the secret link in any RSS article and leave a comment in our hidden blog post to register your entry)
Subscribe to the newsletter (sign-up form at the bottom of this site)
Forward the newsletter to a friend (you can do so after signing yourself up)
Write a blog post about the series and ping us

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Building Campaign Monitor Part 2 - ExpressionEngine Template Groups

Wayde Christie — 2009-02-18T07:45:26+10:00

Templates are the presentation layer for ExpressionEngine sites. All of the front-end code, including XHTML and ExpressionEngine tags go in a template, and all of those templates, go in a template group (which is a kind of virtual folder). Template groups are the focus of this post, and we'll cover individual templates in the next one (that's if I've not been executed for pun-crimes against humanity in the meantime).

A bit about URLs

Templates and template groups are integral to ExpressionEngine, because they determine how ExpressionEngine constructs its URLs and ultimately renders its pages.

In a default install, ExpressionEngine constructs its URLs like so:

http://www.yoursite.com/index.php/template-group/template-name/

Most of the URLs in the Campaign Monitor site work this way, but with a couple of minor differences.

Firstly, we remove the index.php bit with some Apache magic, skillfully performed by LG .htaccess Generator. There’s no requirement to do this however, and the only reason it’s done in most cases is to tidy up the URL.

Removing ‘index.php’ turns our URL into this:

http://www.yoursite.com/template-group/template-name/

Doing so for us is purely an aesthetic thing, but in Campaign Monitor’s case it was vital. The old Campaign Monitor site didn’t have index.php in any of it’s URLs, which meant we needed to match the URLs from the new site exactly so that search engines didn’t get confused and users didn’t end up with a bunch of broken bookmarks.

Secondly, not all of the URLs in the site conform to the /template_group/template_name/ structure due to the Pages Module. Occasionally Freshview (creators of Campaign Monitor) like to shorten their URLs so they’re a bit more user-friendly, and in these cases they use the Pages Module to define a custom Page URI. Custom URIs are exactly that, which means the /template_group/template_name/ structure is completely bypassed and obfuscated, as demonstrated here.

Template Groups

If you're following on from the previous post in this series, you'll probably notice that the list of template groups closely matches the list of weblogs. This is a fairly common occurrence, due mainly to the fact that discrete weblogs often require discrete templates.

It should be noted that every template group has an index template by default, but these templates are not used in all cases. When they are used, we'll provide a short overview of how we used them.

Big list of template groups

Global Groups

You'll notice that the first three groups in the list above all start with an underscore. We do this for two reasons: the list is alphabetical so groups with an underscore appear at the top of the list, and they also indicate our global groups. Essentially, if a template is used in many places in a site, it goes in one of these global groups. The site header and footer includes (which live in the _includes group) are good examples. This approach isn't a requirement, but it works well for us so we've stuck with it.

The majority of the templates in these global groups are named .template-name. The period at the beginning of the file name stops the template from being browsed directly, as it effectively makes the template invisible on the server (much like .htaccess files).

Template Group: _components

This group is for templates which may be used in several places throughout a site, but are not necessarily global. The main template that goes in there (and the only template in Campaign Monitor's case) is the ExpressionEngine comments loop.

_components

Templates

.comments – The comments loop can often be utilised in several different locations throughout a site, so we put it in an include, pass in a few parameters and place it where necessary (more on this in the next post).

Template Group: _includes

The _includes group contains global templates. Headers, footers, navigation etc.

_includes

Templates

.foot – The footer in the Campaign Monitor site changes quite a bit from section to section. There are unique footers for the home page, blog index, support pages and sales focused pages, and each of these footers are relatively feature rich. So each individual section footer is placed in an include, and embedded in the main .foot template, then a few conditionials determine what include is used and when.
.foot-blog – Pulls recent posts from the blog, and also lists blog and gallery categories.
.foot-home – Pulls recent content from the blog and the forum.
.foot-support – Displays related help content like so.
.foot-promos – Several sections in the site display a horizontal row of graphical promos in the footer. These promos are usually displayed randomly, but in some instances the order can be overridden.
.head – Contains the main navigation, as well as logic for the home page and masthead graphic titles.
.nav_01 – The lovely sub-menu in the left column.

Template Group: _forms

The majority of the forms in a site, particularly blog-centric ones, can often stand to be used in several locations. The Campaign monitor site has comment forms in both the blog and gallery sections, and also has several bespoke forms for the contact and sign-up pages. In general we seperate all of our forms out as includes, mainly because form related pages often have a decent amount of logic associated with them and tend to get quite lengthy code-wise. Best to break them up a bit we find.

_forms

Templates

.comment – Standard comment form used for the blog and gallery sections.

Template Group: feeds

The original Campaign Monitor site had several RSS feeds, and the new version is no different. The difference is, all three feeds are now handled by one template with a bit of logic. Much nicer.

feeds

Templates

index – The standard ExpressionEngine RSS template was used here, and content is output based on URL segment variables. Essentially we use the first segment of the feed URL as the weblog value for the RSS weblog loop. eg. http://www.campaignmonitor.com/blog/ outputs the blog feed, http://www.campaignmonitor.com/gallery/ outputs the gallery feed, and http://www.campaignmonitor.com/blog|gallery/ outputs both the blog and gallery feeds in one.

Template Group: api

The API section of the site has a sub-navigation column on the right of the page, and each page follows the standard ExpressionEngine /template_group/template_name/ structure.

api

Templates

.sidebar – A simple include with two weblog loops outputting the API Kits and Methods in the right column.
index – A basic page template which embeds the .sidebar include.
kits – Outputs the Kits index page, including a list of inline anchors to each kit. Originally each kit was to have its own page, but at launch it was decided to keep them all together.
method – Outputs API Methods.

Template Group: blog

The blog template group is fairly straight-forward and doesn't stray too far from a default ExpressionEngine installation. There's a bit of .htaccess redirection going on in the category pages, but nothing beyond that.

blog

Templates

.sidebar – The right column of the blog features a search form, blog and gallery categories, and a fancy Twitter widget.
category-archive – Although the blog categories don't adhere to the standard ExpressionEngine category URL structure, this template is still used to output category pages. Via the magic of .htaccess redirects, this template is called whenever a /blog/category-name/ URL is requested.
index – This template embeds the afforementioned sidebar, outputs 5 full blog posts ('cos Freshview likes it that way), and paginates everything.
post – The blog post template embeds the comments loop include (which also contains some pagination code), the comment form include and the sidebar include.

Template Group: casestudies

The casestudies group contains templates that take care of the Case Studies index page, as well as each individual case study.

casestudies

Templates

.sidebar – Outputs 5 other random case studies.
entry – Embeds the .sidebar include and displays an individual case study.
index – Displays a featured case study, and 5 random case studies. The featured case study has a custom entry status of 'Featured'.

Template Group: downloads

The Downloads section of the Campaign Monitor site lists third-party add-ons and extensions, as well as downloadable documents and software bundles.

downloads

Templates

details – Provides an overview of each download and links to the downloadable files.
index – Lists all of the available downloads via a simple weblog loop.

Template Group: features

A simple set of templates, with previous/next functionality.

features

Templates

feature – Each entry is a basic page with custom XHTML.
index – A simple weblog loop which outputs entry titles, icons and summaries.

Template Group: pages

The pages template group is used to house static templates with custom content. It also contains the site home page (denoted by the red asterisk).

pages

Templates

404 – When someone attempts to access an invalid URL, they are redirected to this template. This is configured via the ExpressionEngine Global Template Preferences. Freshview handle their 404 pages with typical style, by turning the page into an informative resource rather than a dead-end.
index – The site home page. Like all pages in the site, it embeds the .header and .footer includes, but beyond that it's a static page.
pricing – A simple static template, which displays a more sales-focused banner in the footer.
sitemap – Not a site-map by normal standards; rather an XML template for Google Sitemaps. There's a great tutorial on the ExpressionEngine Wiki which explains everything.

Template Group: resources

The Resources section of the site is one of the most content rich. It's chock-full of brilliant tutorials, faqs, free email templates—you name it! The templates in the group relies heavily on categories, purely because there is so much information to present.

resources

Templates

.related_content – Individual entries display a list of links to related content in the right column. The relationships are created with tags and the brilliant Tag Module from Solspace.
category-archive – A simple category archive template that displays category headings, images, and descriptions. You'll notice the /cat/ segment in this URL. This is the 'trigger' segment that tells ExpressionEngine which category to display. The category it uses is the segment that comes directly after the trigger.
entry – Basic content template which embeds the .related_content include. Entries have a simple bread-crumb menu at the top of each page, and the links in this menu are generated via the Primary Category extension.
index – Displays 5 most popular resource entries and a full category list. Popular entries are output via a simple weblog loop with the orderby value set to view_count_one. This tells ExpressionEngine to output entries with the most views.
templates – Outputs an unordered list of thumbnails. The fancy ShadowBox pop-ups will be covered in a later post.

Template Group: templates

Occasionally new pages are added to the site which aren't part of any particular section. These stand-alone templates are for Freshview to use in such cases.

templates

Templates

one-col – A single column template for pages like the Campaign Monitor Privacy Policy.
two-col-right – A two column template with a narrow column on the right. The Sign Up page is a good example.

Template Group: search

The standard search templates for an ExpressionEngine install.

search

Templates

index – In a default install, this page would show the Advanced Search functionality. Since the Campaign Monitor site only offers search for the blog, this template isn't necessary, and since index templates are mandatory, this page will return a 404 if browsed to directly.
no-results – Since the search function is only used in the blog, this template embeds the .sidebar include from the blog template group and notifies the user that their search has sadly come to naught.
results – This template is essentially the same as the blog index template, except it displays blog summaries rather than full posts.

Template Group: gallery

The Campaign monitor Gallery is basically a slightly tweaked copy of the blog. The templates are near identical, except that the output of the entries is a screenshot and description, rather than a blog post.

gallery

Templates

category-archive – A standard category archive template.
entry – Displays a screenshot and description, along with several other custom fields like author name and company.
index – Again, this is based on the blog index template.

Template Group: customers

The Customers section is a key marketing area for the site, so there's lots of bespoke layouts and a smattering of dynamic content.

customers

Templates

giving-back – Outputs a list of sponsorship recipients via a weblog loop, and contains a simple form which is handled by the FreeForm extension from Solspace.
index – Displays a featured case study for entries with a status of 'Featured', and also outputs 3 other random case study entries. Everything else in this template is hard coded.
testimonials – A simple weblog loop which outputs customer testimonials. Related case studies are displayed in the right column. These relationships are created using Brandon Kelly's 'Playa' extension.
using – A hard coded template that displays several unordered lists of Campaign Monitor client logos.

Template Group: support

There's lots of content in this section, but due to the fact that it needs to be accessible via the actual Campaign Monitor application, all of it it hosted on a sub-domain. For that reason there are only a small number of ExpressionEngine templates in the group.

support

Templates

contact – Basic contact form, again using the FreeForm extension.
index – A hard coded template with links to all of the Help & Faqs categories.

Phew!

That was quite a post, and if you've made it this far without your brain leaking out of your ears you seriously deserve a medal. The remaining posts in this series will hopefully be a little more succinct and infinitely more entertaining. The next post in fact, will be all about templates, during which we'll pick out some of the more interesting templates and dissect them for your reading pleasure. This should really solidify things for those of you reading along.

We hope you've enjoyed this extensive insight into the Campaign Monitor template groups, and should you have any questions, please feel free to post them in the comments below.

Don't forget the competition!

We're running a competition in conjunction with these posts (more about that here). There is almost $3000 in fantastic ExpressionEngine licenses and modules, Campaign Monitor credits and learning materials up for grabs, so we encourage you to get involved. There are several ways you can enter, and you can enter multiple times:

Tweet about the series (click here or include the hash code #buildingcm in your tweet)
Digg any blog post in the series
Bookmark any blog post in the series on Del.icio.us
Leave a constructive comment on any post in the series
Subscribe to the RSS feed (click the secret link in any RSS article and leave a comment in our hidden blog post to register your entry)
Subscribe to the newsletter (sign-up form at the bottom of this site)
Forward the newsletter to a friend (you can do so after signing yourself up)
Write a blog post about the series and ping us

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Building Campaign Monitor Part I - ExpressionEngine Weblogs

Wayde Christie — 2009-02-07T06:45:18+10:00

The easiest way to explain how we set up the weblogs for the Campaign Monitor site is to let everyone login to the back-end and have a look around - just promise not to delete anything. You can login with username: 'admin' and password: 'asif'. The second easiest way is to write a detailed, nine-thousand-word overview (see below).

What's in a weblog?

The data in ExpressionEngine sites is stored in containers called 'weblogs'. Got some data to store? It goes in a weblog. Pretty straight-forward stuff. One of the first steps in any EE project is to determine what data you need to store, and then what associated weblogs you need to create. The Campaign Monitor site, although quite large in scope, only required 12 weblogs to store all of its data types.

The next step we take after creating our weblogs is to create associated category and custom field groups. We usually create each weblog, then category and field groups with the same names as the weblog. You can choose to skip this step and add category and custom field groups as and when you need them, but in the majority of cases we find that every weblog we create will require categories and custom fields, so we like to get that all sorted from the outset. Helps to keep things consistent too we find.

A couple of things before we continue...

Firstly, file management for uploads, in the majority of cases, is handled by ExpressionEngine's default File Upload Manager. While we tend to use the TinyMCE File Manager for less savvy clients, the folks at Freshview (creators of Campaign Monitor) are all web developers, so we can provide some instructions and leave them to it. Any time we mention image upload custom fields, we're referring to the standard ExpressionEngine File Upload Manager.

ExpressionEngine File Upload Manager

Secondly, most of the weblogs have the ability to display related promos in the site footer. These related promos are managed by the awesome EE extension 'Playa' made by Brandon Kelly. Each weblog has a Playa custom field for choosing which promos to display, and a 'Show Promos' drop-down to turn them on or off.

Campaign Monitor Weblogs

Yup – a relatively modest number here, and nothing overly clever - just the way we like it.

Campaign Monitor's Weblogs

API

Campaign Monitor, like all good online apps, has an API. They support developers by way of providing API 'Kits' (pre-coded platform specific wrappers) and documentation for the API methods, of which there are currently around 20. As Campaign Monitor develops, further API functionality will likely be added, which means more kits and more documentation.

The API weblog is reasonably basic. Each kit has a custom icon, and the methods are placed into one of five categories.

Custom fields:

API Kit Icon (Text Input)

Articles & Tips

With the mine-field that is email design and development comes many, many questions. Thankfully, Campaign Monitor has the answers – all 12,137 of them.

Each article contains a summary and content, and can also display related case studies and downloads. In general the articles are assigned to a category (with an associated category image), but in some instances they are also assigned a custom URI via the Pages module. These URIs are created when a short and snappy URL is required, often for marketing purposes.

Pages Module

Custom fields:

Thumbnail URL (Text Input)
Page Layout (Drop-down List)
There are three layout templates for article pages: two column and three column templates, and a three column template which displays related downloads.
Related Case Studies (Playa)
Entries from the 'Customers' weblog are populated in this field, allowing related case studies to be displayed in the right column of any article.
Related Downloads (Playa)
Software available in the Downloads section can be associated and displayed with any article.

Related downloads using the 'Playa' Module

Blog

Not really much to see here. No custom fields; a handful of categories - that's it. In a future post we'll explain how we merged the old Campaign Monitor MovableType blog and Wordpress gallery into the thing of beauty you see today. Joy!

Customers

The Customers weblog is actually the largest and most complicated weblog in the site, as it performs several functions. Its main job is to handle customer case studies, although since they're related, testimonials are stored here also.

Content from the Customers weblog is spread across several pages: the Customers index, the Case Studies index, individual case studies, and Testimonials. Customers are featured on the section index page by setting a custom entry status of 'Featured'.

Custom Staus Group

Custom fields:

Contact Name (Text Input)
Position (Text Input)
Websites (LG Data Matrix)
LG Data Matrix is used to group the Website Title and URL.
Case Study Image URL (Text Input)
Case Study Tagline (Text Input)
Case Study Summary (Text Area)
Case Study (Text Area)
Testimonial Quote (Text Input)
Testimonial (Text Area)
Customer Logo URL (Text Input)
Customer Photo URL (Text Input)

Downloads

Campaign Monitor provide third-party plugins and modules for download, as well as hand-outs and documents. A decision was made early on in the site build, not to use ExpressionEngine's file upload functionality here for managing the uploads, but to use plain old FTP, purely for its ability to move stuff around on the server if necessary.

LG Data Matrix was used to group data related to the downloads, and download types are grouped by category.

LG Data Matrix

Custom fields:

Files (LG Data Matrix)
Thumbnail Large (Text Input)
Thumbnail Small (Text Input)
Download URL (Text Input)
Used if a download is hosted anywhere other than Campaign Monitor's servers.

Email Templates

Similar to the Downloads weblog, the Email Templates weblog is primarily focused on providing downloadable files. The files in question are approximately 30 HTML email templates which are available free to all of Campaign Monitor's customers. The files themselves are zip archives of XHTML and images, and again FTP is used for uploading the files to the server.

MD Dulee Noted

Custom fields:

Additional Instructions (MD Dulee Noted)
Occasionally, a bit more instruction is required for a particular feature. In these instances we use Ryan Masuga's MD Dulee Noted extension to add a sentence or two of information.
Download URL (Text Input)
Thumbnail URL (Text Input)

Features

The Features section of the site is the big sell. The content here needs to be succinct and presented in a way that makes it easy for potential Campaign Monitor customers to decide to sign up and get started. So the design needs to be bold, and not limited to a standard layout. This meant each of the pages in this section were very free-form; so bespoke XHTML in the content, and minimal custom fields.

Custom fields:

Page Title (Text Input)
This is displayed instead of the entry title. Allows for a more creative heading for the page.
Menu Icon URL (Text Input)
As more features are added, more pages will be needed, as will any associated menu icons.
Menu Title (Text Input)
Allows customisation of the link titles in the sub-navigation.

Gallery

Campaign Monitor has some great looking email designs delivered via their system, and highlighting the best ones shows other designers and developers what's possible, and gets people talking about particularly cool approaches and techniques.

The previous gallery was powered by a standalone Wordpress install, and in order to retain SEO ranking and keep old bookmarks intact, the new Gallery had to retain all of the old Wordpress entry IDs. We're going to cover this Wordpress / MovableType Voltron in a later post, but for the purposes of this one, all that was required to get the integration happening was a single custom field.

Custom fields:

Wordpress Entry ID (Text Input)
This field is used for the entries ID from the previous Campaign Monitor gallery. This ID is used in conjunction with Apache redirects to redirect to the correct entry if a user clicks an old link or bookmark.
Designer (LG Data Matrix)
Used to group the email designer's name and URL.
Thumbnail (Text Input)
Web Version URL (Text Input)
Each Campaign Monitor email campaign has an associated online version for users with ~~rubbish~~ stubborn email client software.

Promos

The lovely promo graphics in the footer of the site are managed with this weblog. Each entry has an associated image, text that the image replaces via CSS, and a URL to click-through to. Promos are displayed randomly in general, but can be overridden to display specific promos on a per-entry basis.

Custom fields:

Image URL (Text Input)
Target URL (Text Input)

Screencasts

Although not currently active on the site, there's a super-sweet Screencasts section coming soon! The screencasts themselves are hosted on Vimeo, and are presented in an Apple-esque style Shadowbox window. Shadowbox has built in support for Vimeo, so all that was needed to be done was to pass in the clip ID and a couple of other variables and we were good to go.

Custom fields:

Screencast ID (Text Input)
ID of the Vimeo screencast.
Screencast Thumb URL (Text Input)
Length (Text Input)
Duration of the screencast.

Sponsorships

Campaign Monitor generously sponsor web and design related meet-ups by providing beer, pizza and free Campaign Monitor credits. In fact, they sponsor our meet-up too, although we’ve never seen a single beer (we're expecting a pallet to arrive any day now).

This weblog is another simple one, and is used for easy addition of new sponsorships, including their logo and URL.

Custom fields:

Thumbnail URL (Text Input)
Sponsorship URL (Text Input)

What's next?

That about does it in terms of weblogs. There's nothing overly complicated here although the size and scope may have seemed a little daunting. But good planning definitely makes things easier, and hopefully you've learned enough about our approach to weblogs to get you on the right track.

The next action-packed post in this series focuses on templates and template groups. Templates are often closely related to weblogs, so if you've made it this far, the next post should flow quite nicely. There are some great tips and tricks coming which we're looking forward to writing about it, so stay tuned, and we'll do our best to fill your mind-tanks with as much ExpressionEngine juice as you can handle!

Don't forget the competition!

Tweet about the series (click here or include the hash code #buildingcm in your tweet)
Digg any blog post in the series
Bookmark any blog post in the series on Del.icio.us
Leave a constructive comment on any post in the series
Subscribe to the RSS feed (click the secret link in any RSS article and leave a comment in our hidden blog post to register your entry)
Subscribe to the newsletter (sign-up form at the bottom of this site)
Forward the newsletter to a friend (you can do so after signing yourself up)
Write a blog post about the series and ping us

7/2/09 10:49pm — I've just updated the post to point out that Campaign Monitor are using Ryan Masuga's MD Dulee Noted extension rather than LG Instruct.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Building Campaign Monitor

Wayde Christie — 2009-01-29T03:47:16+10:00

Newism recently launched the new Campaign Monitor website - which so far is our biggest and most advanced project to date. Along the way we learned some fantastic things about building and deploying a major site, and rather than keep all of this amazing new learning to ourselves we've decided to share it via a multi-part blog series. Huzzah!

Starting next week probably, we'll kick off with the first in the series of approximately seven posts, with the final post potentially landing in the next two weeks or so. If that sounds a little vague, it's because we'd be mental to commit to a deadline for getting these babies out the door. We have jobs, and some would say, lives.

So what we're aiming for is a bunch of posts that will cover all of the cool bits from the Campaign Monitor build, with an emphasis on the ExpressionEngine implementation and front-end XHTML / CSS tips. Some of the content will include:

Optimisation and caching
Fancy jQuery tricks
CSS wizardry
Combining MovableType and Wordpress into a single blog to rule them all
sIFR implementation
Graphic techniques from the trenches
Tasteful glamour shots of yours truly

There's some great stuff there, and once we finalise the list of articles we'll link them all up nice and neat. We plan to make all of this available as a tidy PDF or zip download once all is said and done, so keep an eye out. We're also hassling the designer of the site, Jesse Bennett-Chamberlain, to contribute a design related post, but he ~~clearly hates us~~ is on holidays.

A great excuse for a competition!

To celebrate the launch of the new Campaign Monitor site we're running a little competition. Actually, it's a big one. The guys from Freshview and EllisLab, as well as Ryan Irelan and Michael Boyink, have all generously offered a truckload of brilliant prizes including Campaign Monitor credits, t-shirts, ExpressionEngine software, screen-casts and books – plus Newism are throwing in some of our own prizes for good measure.

Once you've recovered from your brainal meltdown, here's what's up for grabs:

1st prize

EE Commercial License + Discussion Forum Module + MSM Module
EE Learning Toolbox (EE Screencasts + Train-ee materials)
25,000 Campaign Monitor credits + T-shirt
Complete set of all LG ExpressionEngine add-ons

Total value: $1200

2nd prize

EE Commercial License + Discussion Forum Module + MSM Module
15,000 Campaign Monitor credits + T-shirt
Complete set of all LG ExpressionEngine add-ons

Total value: $900

3rd prize

EE Commercial License
10,000 Campaign Monitor credits + T-shirt
Complete set of all LG ExpressionEngine add-ons

Total value: $600

All up we're talking almost $3000 in awesome prizes. If you've ever considered becoming a Campaign Monitor or ExpressionEngine user, this competition is for you. If you're entering to impress your secret crush with your mad geek cred, that will probably work also.

How to enter

There are several ways you can enter, and you can enter multiple times:

Tweet about the series (click here or include the hash code #buildingcm in your tweet)
Digg any blog post in the series
Bookmark any blog post in the series on Del.icio.us
Leave a constructive comment on any post in the series
Subscribe to the RSS feed (click the secret link in any RSS article and leave a comment in our hidden blog post to register your entry)
Subscribe to the newsletter (sign-up form at the bottom of this site)
Forward the newsletter to a friend (you can do so after signing yourself up)
Write a blog post about the series and ping us

Some rules

Now we don't want to get all authoritarian on y'all, but we will notice if anyone tries to rig entries or spam, so play nice. Violators will be ~~killed~~ disqualified.

We plan to draw the competition by collating all of the valid entries and randomly picking three winners, and this will happen a week after we post the final entry in the series.

The last word

Our main goal here is to document our experience building a major site, and in the process get some useful information out there. We really hope you enjoy reading each post and that you learn some things along the way; particularly about Campaign Monitor and ExpressionEngine (which we love and so should you).

We're also very keen on your feedback. If you think any of our approaches or techniques could be improved, we'd love to hear about it. We are sensitive though, so think happy thoughts.

Finally a *huge* thank-you to Freshview, EllisLab, Ryan Irelan and Michael Boyink for their much appreciated generosity. We encourage you to check out their sites, and if you know what's good for you, their services.

So get cracking on those competition entries, and good luck to everyone. Keep an eye out for the first post in the 'Building Campaign Monitor' series next week!

30/1/09 9:41am — A great suggestion from Steven Lewis made us think that we really should have asked for everyone's input in terms of what articles they'd like to see. Is there something about the Campaign Monitor site you just love? Something that would be really handy in your dev toolbox? Let us know - we may just consider, considering it :)

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

LG Live Look Updated

Leevi Graham — 2008-12-28T03:14:09+10:00

A sneak peek of version 1.0.2 of LG Live Look is now available from our repository on GitHub. ~~I'll update the official download and documentation very soon but in the mean time you can download the GitHub hosted zip version and take the extension for a spin!~~ The official download and documentation has now been updated!

Updating from version 1.0.0

The major difference between version 1.0.0 and version 1.0.2 is the new dependency on CP jQuery (bundled with EE 1.6.6+). This new dependency may cause some issues with older extensions that use their own jQuery implementations. If you have any issues post them in the ExpressionEngine forum and I'll do my best o help you resolve them.

Updating from version 1.0.0 should be relatively painless when you follow the steps below:

Always backup your database
Delete the old LG Live Look files
Copy the new to their respective folders in your ExpressionEngine installation
Check and update the extension settings

Note: lg_live_look.create-sym-links.command is a convenience command for creating symlinks when your extensions live outside your EE install. If you have no idea what I'm talking about don't worry just ignore the file :)

Change log

Version 1.0.2

Added Quicksave integration including support for new entries (bug)

Version 1.0.1

Added Pages Module integration - Entries will use their {page_url} (where applicable) rather than the generated URL based on the extension settings (fr)
Separated Javascript from extension file
Fixed LANG file (bug)

The future

Keeping up-to-date with Newism development

Their are many ways to keep up-to-date with all our Newism development projects, and there are a lot of projects!

Github users can follow our Newism account or my personal Leevi Graham account.

If RSS is your thing subscribe to our feed and our blog posts will be delivered straight to your reader.

For super secret sneak peeks and updates you can also subscribe to our newsletter in the footer of this page.

Comments, questions, feeback?

If you have any LG Live Look feedback leave it in the comments below. Having trouble using LG Live Look? Post your issue in the LG Live Look ExpressionEngine thread with your version of EE, PHP and operating system and I'll try and take a look.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

The New Campaign Monitor

Wayde Christie — 2008-11-20T22:42:11+10:00

Over the past three months, Newism have had the privilege of building not only the epic new Campaign Monitor website, but also a teaser site at http://www.thenewcampaignmonitor.com/.

Campaign Monitor (if you are one of the twelve people who haven't heard of it) is a world-class email marketing product from Australian company, Freshview. In their words:

Campaign Monitor is built for designers who can create great looking emails for themselves and their clients, but need software to send each campaign, track the results and manage their subscribers.

The New Campaign Monitor Teaser Site

Their two flagship products, Campaign Monitor and MailBuild, are now being rolled into one, and so far the decision to do so has been widely applauded. No longer will MailBuild have to live up to it's more attractive cousin, and no longer will their be any confusion as to which solution is best for you and your clients. This is particularly useful for email marketers who utilise MailBuild as a re-branded newsletter solution. Now all of the re-branding and MailBuild ease of use will be available in a single app.

A fresh view

The design for this teaser site was done by Jesse Bennet-Chamberlain at 31three. It's derivative of the new campaignmonitor.com design of course, but in terms of the new Campaign Monitor branding it doesn't give too much away. That just makes it all the more exciting to reveal the new site proper in just over a week! As is typical of Jesse, the design of both the teaser site and the new main site are exceptional. Working with Jesse and Dave Greiner from Freshview on both of these projects has been an absolute pleasure.

Behind the scenes

The site is running ExpressionEngine of course, and it contains our standard smattering of LG extensions. The only thing of note is that this teaser site and the new main site are all running on the same install and database, thanks to the ExpressionEngine Multiple Site Manager module.

Overall it's a pretty standard install so not a great deal to mention in terms of build, but sadly that wasn't the case for the original incarnation of the teaser site. Business and design decisions meant the late removal of a 'countdown' approach to presenting the content. Essentially, each new feature was going to be 'unlocked' and explained in detail in the ten days leading up to the launch. I really dig that kinda thing as it's always so engaging (and I'm a sucker for hype), so it was a bummer to have to remove it.

One more thing...

This great little teaser site, while reasonably ground-breaking in it's approach, will only have a brief shelf-life. Obviously once the new Campaign Monitor site launches it will be curtains for it. But that will mean of course that the uber-awesome main site will be live, and that's the thing we're really excited about.

So to drum up a little hype of our own, we thought we'd ask you, our loyal readers, to leave a comment for the chance to win some Campaign Monitor schwag! We've got three sweet Campaign Monitor t-shirts to give away, compliments of Freshview. To enter, visit The New Campaign Monitor, have a read about the great new features, then leave a comment explaining what feature you're most excited about and why. We'll pick the winners in a week or so, and will give bonus points for commenters who make us laugh.

You too can look as Fresh as this.

4/12/08 11:08pm — Thanks for entering folks, and for the great feedback. T-shirts going out to Brendan ‘Emo’ Falkowski (he’ll be getting the black tee of course), Christy Kilgore (because Dave from Campaign Monitor got all teary over her glowing praise), and Mat Packer (because he’s a local and appeals to my adoration of lolcats).

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Are Pinvoke Fugue icons the new FAMFAMFAM?

Leevi Graham — 2008-11-15T02:27:26+10:00

Version 1.0 of the Pinvoke Fugue icon set was released by Yusuke Kamiyamane on October 12, 2008 under a Creative Commons Attribution 3.0 Unported License.

This superbly hand-crafted crafted set contains 1000 24bit PNG 16x16 web icons, perfect for your next web app or site. One of the many features of this set is that it contains slight style and size variations of the same icon allowing you to mix and match. The cross, plus, and tick subsets are a couple of examples.

I've included a sample of the icons below. If you like what you see you can download the full set from Pinvoke.com. While you're there don't forget to checkout the Diagona icons as well.

A sample of the Fugue icon set. Click for full preview.

The icons can be used absolutely free for any personal or commercial projects. But to remove the attribution, you'll need to purchase a license.

Overall it's an impressive set and a great alternative to FAMFAMFAM, which unfortunately have become a little tired of late due to their popularity. If you're after something fresh, they may be just what you're looking for, and they're bound to satisfy any icon craving, no matter how large.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

‘Sixtyone’ - The Newcastle University Student Design Exhibition

Anthony Short — 2008-11-12T04:26:08+10:00

My cosy life as a university student ended this week, as it did for 60 of my peers - and we're holding a student design exhibition to celebrate 3 years of hard work. I've been elected the Art Director / Web Designer for the exhibition this year, so I've been hard at work. I've created the theme, graphics and the website for the exhibition.

My illustrious employer, Newism, was gracious enough to sponsor us by giving us hosting space for the site.

One of the posters for the exhibition.

The Details

The exhibition is open from 21st November - 5th December and is totally free. It's being held at the University of Newcastle in the Design Building. The opening night, Friday 21st November, will be a special event, and is open to the public as well.

About the Exhibition

We've dubbed it 'Sixtyone' in honour of the sixty-one students graduating this year. The theme is 'spread your creative wings', referring to our newly discovered abilities and our future careers. Corny? Yes. But it wouldn't be a student exhibition without the predictably cheesy references.

If anyone is interested in finding a young designer to recruit into their ranks, check out the site. I've included some easy ways to contact the students - either use the quick contact form on their profile page, or download their vCard (including embedded image) so you can contact them later.

Website Launch

As I mentioned, I created the website for the exhibition. This is essentially one big portfolio that houses the work of 60 designers. I would have liked to have spent more time on it and make it just that extra bit nice. I was given the opportunity to ditch support for IE6 (by myself), so achieving many of the effects was a much more pleasant experience.

One of the more interesting effects of the site is the live search drop down list which features the photo, name and title of the designers. To achieve this effect, I used the jQuery auto-complete plugin with some modifications, and some sleek ExpressionEngine queries. I'm considering writing up a little guide on how to do it.

Another poster for the exhibition.

All of us from the exhibition hope to see you there, but if you can't make it, check out the website. There are lots of very talented young designers.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Nominate http://leevigraham.com in the Mashable Open Web Awards “Blog Plugins” category

Leevi Graham — 2008-11-05T22:00:13+10:00

Over the last 12 months I have published over 20+ ExpressionEngine extensions, modules and plugins with the majority gifted back to the ExpressionEngine community under a Creative Commons license. As a result there has been some great feedback and support from everyone which I appreciate greatly.

I've never asked for anything in return (apart from the odd donation here and there) but that is all about to change! Don't panic, it won't cost you a cent and will take less time that it took to write this post (and a great deal less time that it took to write the ExpressionEngine add-ons).

Please nominate http://leevigraham.com in the Mashable Open Web Awards "Blog Plugins" category using the widget below!

If you're really thankful for the work I have donated and want to go that extra mile, feel free to add the widget to your own blog and promote the nomination, or link to this blog post via Twitter or your chosen social networks.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Newism accepted into the ExpressionEngine Pro Network

Wayde Christie — 2008-10-09T04:19:51+10:00

Leevi and I are very happy to announce that Newism has recently been accepted into the ExpressionEngine Pro Network. This means a great deal to us, as we have been advocates of EllisLab's brilliant publishing platform for a long time, and getting our site out the door meant we finally met the requirements for Pro Network entry.

The EllisLab crew are a fantastic bunch of people (something any community member will tell you), and we have sincerely appreciated all of their support. They have glady let Leevi spruik his many extensions in their user forums, and accepting us into their Pro Network is just another thing we have to thank them for. Cheers guys!

In your face "careers advisor"!

We are excited and enthusiastic about the opportunities that Pro Network membership will bring us, and we're also pretty chuffed to be listed alongside the likes of Happy Cog Studios, Airbag Industries, Mark Boulton, Erskine Design and Viget Labs – big names indeed.

Anyway, enough patting ourselves on the back – we've got work to do (and theme songs to sing).

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

ExpressionEngine weblog entry previews with LG Live Look

Leevi Graham — 2008-10-08T06:53:07+10:00

This tutorial will show you how to setup your ExpressionEngine templates to accommodate previewing of unpublished weblog entries inside the publish/edit form using LG Live Look.

LG Live Look is an ExpressionEngine extension that adds a new 'Live Look' tab to the publish/edit form in the control panel. The tab contains a preview of the last saved version of an entry, which can quickly be updated using the 'quick save' button.

LG Live Look also adds a link to the edit entries table for each entry row. The source of the tab content and the target of the link can be easily customised in the extension settings using a subset of standard {ee} template tag variables (a full list can be found in the documentation).

LG Live Look tab preview in action.

Getting started

The first thing you will need to do for this tutorial is download and install LG Live Look. We'll activate and configure it in a couple in a later step.

Creating a new weblog and status group

The next part of the setup involves creating a new weblog and status group. If you're comfortable with ExpressionEngine you should be able to utilise weblogs and status groups from your existing install.

Create a new weblog called 'Blog'.
Create a new status group called 'Blog Status Group'.
Create new status in the group called 'Pending'.
Assign the status group to the weblog.

Creating a new template group

Now there is a new weblog with a special 'Pending' status, it will need a new template to show the entry.

Create a new template group called 'blog'.
Create a new template in the template group called 'post'.
Inside the 'post' template add:

{exp:weblog:entries weblog="blog" limit="1" status="not closed"}
    {title}
{/exp:weblog:entries}

The code above is over simplified. It will display all entries that are not closed which includes 'Open' and 'Pending' entries.

It's worth mentioning that there is no entry security here, so someone could theoretically guess an entry's ID and see the in-progress content. If this is an issue for you, consider creating a copy of the primary entry template, using that as your 'Live Look' template, and securing the whole thing with Template Access Restriction. Your primary template (the one people see) will only show 'Open' entries (status="open") while the new secure 'Live Look' template will show 'Open' and 'Pending' entries (status="open|Pending").

You might also consider using LG Better Meta to tell search engine spiders to not index the page in their search engine results.

Configure the extension

Up until this point nothing ground breaking has occurred. You could just load up the single entry template in a browser tab and view the 'Pending' entry. No-one else should be able to find it unless you have a link to it elsewhere in your site.

The next step is to setup LG Live Look, which is a very simple process:

Open the Live Look extension settings.
Under weblog settings display the link and tab for the 'Blog' weblog.
Add /blog/post/{entry_id}/{url_title} to the Entry URL field. The two variables will be replaced with the entry specific values.
Save the extension settings.

LG Live Look now knows that the entry will be displayed using /blog/post/{entry_id}/{url_title} as the url. This path will be used as the link target and the iFrame src. There's a bunch more configuration options and information available in the documentation, so make sure you check that out.

Displaying a preview in the Live Look tab

Before an entry can be viewed in the Live Look tab it must be fully saved at least once. In future versions of the extension I'll try and find a way around this small workflow hurdle.

To create a new post and preview it inside the LG Live Look tab:

Create a new weblog post in the 'Blog' weblog.
Set the status to 'Pending'
Save the entry.

The entry now is ready to be previewed in the Live Look tab or using the Live Look link.

Edit the entry.
Click the Live Look Tab on the publish form.
Your entry should appear inside the tab content.
Make an alteration to the entry.
Click Quick Save.
Preview the updates in the Live Look tab.
Continue until you are happy and ready to publish.

The final steps

Now that your entry is ready to publish:

Edit the entry.
Change the status to 'Open'.
Save the entry.

Your article is now available to the public.

The future of LG Live Look

We know not everyone's workflow is the same as ours, so if you have any suggestions or feedback about LG Live Look, please add them to the comments below. If you enjoy this extension you might consider sharing it with friends on your preferred social network or even writing a short blog post about it.

9/10/08 1:51pm — I have created a support thread over on the ExpressionEngine forums for anyone who is having trouble using LG Live Look.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

Webqem and Red Square merge

Wayde Christie — 2008-09-30T07:58:28+10:00

Today, Webqem and Red Square officially announced they have merged.

Here's the press-release (PDF).

Personally, this is fantastic news for me, as Webqem was where I learned everything about the web, and Red Square was one of the main companies that supported me in my early days of freelancing.

A brief history

Some time in early 2000 I had the honour of becoming Webqem's first employee. I started working with them in their first Neutral Bay office, crammed in the same room alongside Steve Whistler, Andrew Crowe and Stewart Johnston (Larry Adler had the good fortune to be in his own office). After being wedged between the two passionate personalities of Steve and Andrew for a month, someone noticed the amount of company sponsored Red Bull I was drinking, and wisely moved me out of the firing line. It was smooth sailing from then on.

I came to the Webqem with next to no skill at all. In fact, I think I got the job based on the only website design I had done at that point. I can only assume it was my charm and good looks that got me in the door.

It wasn't long before I was churning out site designs, Flash banners and games, email designs, and even the odd bit of ColdFusion. I distinctly remember cramming a full weekend of intense HTML study in order to meet the minimum requirements for the Advanced ColdFusion course I'd been signed up for. Clearly Dreamweaver wasn't going to cut it anymore.

That didn't get in the way of my arrogance of course. When I think back, I must have been a nightmare from an employer's perspective. Constantly arguing, always knowing better. I would have fired me in a second. Still, I developed tremendous respect for my ever-tolerant employers, both as skilled practicioners and as people. I'm happy to call them my peers and my friends, and I really do miss spending time with them and their wonderful families.

Simon Dougall at my Webqem farewell.

Back to the future

A surprise arrival in the form of my first child forced me to re-evaluate a few things, and the second arrival made it clear two years later. I left Webqem after five fantastic years, and with their full support headed north to my home town of Newcastle. Steve Whistler in particular regularly encouraged me to start freelancing, but it took me 12 months to take the plunge. As usual, and to his immense satifaction no doubt, he was right, and it wasn't long before I was working 80 hours a week from my home office.

One of the first companies I approached when I started freelancing was Red Square. I'd heard quite a bit about them (probably from Steve), and their core business was very similar to that of Webqem so they seemed like a good match for my skillset. A meeting in Sydney later and I was on the team.

I have always been impressed with Red Square's level of professionalism and quality, and in particular the never waning enthusiasm that director Tony Redhead has about new technology. Red Square has a great team, and there's a real family vibe there. Like Webqem, they always made me feel welcome, and that I played an integral part; something I hope I can foster among Newism's current and future employees.

Web Square? Redqem?

There is no doubt that Newism would not be what it is today without the support of these two companies, and for that they have my sincere gratitude. I can't wait to see how they get on, and I'm looking forward to seeing them all again at WQ headquarters. Of course the merger will mean great things for all those concerned. Red Square will slot in quite nicely.

So thanks to Web Square; or is it Redqem? In particular, I'd like to personally thank Steve and Tony for being such wonderful mentors and friends.

On behalf of Leevi and I, we wish you all the best of luck, and look forward to working with you in future (albeit under the one roof).

Cheers.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***

BigTarget.js - Increase the size of click targets and get more call-to-action conversions

Leevi Graham — 2008-09-26T04:41:43+10:00

With all the positive focus on grid based web design these days, I started to identify a couple of standard design elements. The main pattern used in nearly every site (grid and non grid) was the "title, thumbnail, short summary, more link" pattern. This pattern is generally used for indexing blog post summaries in sidebars, listing services, or creating small calls-to-action.

The XHTML markup generally looks something like this:

<div>
  <h3><a href="http://leevigraham.com/">Title</a></h3>
  <a href="http://leevigraham.com/"><img src="thumbnail.png" alt="thumbnail" /></a>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    <a href="http://leevigraham.com/">Read More …</a>
  </p>
</div>

One thing that always bugged me when implementing the code above, wasn't necessarily the number of links inside a small block of content, it was the fact that only those small bits of sporadic content were clickable. Sure it's not that hard for the user to hover over one of the three links, but I thought the user experience could be improved.

My feeling was that a user should be able to click anywhere in the content and navigate through to the target page — basically making the whole content block one big link.

Improving usability and the user experience with jQuery

Wrapping a single anchor around the whole content (title, thumbnail, summary) is a bad idea as it's not standards compliant and renders the page invalid. So I turned to my good friend jQuery and threw together the following plugin using the 'Learning jQuery' plugin development pattern.

The concept is simple:

Attach the plugin to any link in the content block.
Pass through the click zone selector as a plugin option.
The plugin then attaches onclick and hover events to the click zone.
User clicks anywhere on the click zone.
The original link href is retrieved.
If the link has a rel attribute and it's set to 'external', open the link target in a new window; otherwise open the link in the current browser window.

A working example

A list of entries without bigTarget.js applied

Example Title 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …
Example Title 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …
Example Title 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

A list of articles with bigTarget.js applied

Example Title 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …
Example Title 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …
Example Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi tempor posuere libero. In fringilla magna ut urna elementum condimentum. Aliquam erat volutpat. Fusce odio. Read More …

bigTarget.js

Now you know what bigTarget.js does, you'll probably want to grab the code and start using it on your site.

Usage

Adding bigTarget.js functionality to your site is straight forward. First include the plugin code in the head of your document, and then when the page is ready, attach the bigTarget function to the target anchor — bigTarget.js will do the rest.

$(document).ready(function(){
  $("ol.bigTarget h4 a").bigTarget();
});

Customising the hoverClass and clickZone

There are two options to further customise how bigTarget.js works — clickZone and hoverClass. By default, bigTarget.js will turn the first parent <li> tag of the target anchor into the click zone using li:eq(0) as the parent selector. The plugin will also add the class 'hover' to the click zone element.

This is fine for cases when your content is a series of ordered or unordered list elements. However you may prefer to use a series of <div> tags as the click zone elements and apply the class 'over' when the user hovers over the element. To do this just pass the options to the function like so:

$(document).ready(function(){
  $("ol.bigTarget h4 a").bigTarget({
    hoverClass: 'over', // CSS class applied to the click zone onHover
    clickZone : 'div:eq(0)' // jQuery parent selector
  });
});

The code

The plugin code for bigTarget.js is short and sweet.

Paste the code below into a new file called jquery.bigtarget.1.0.1.js or download it from here, then add a <script src="jquery.bigTarget.js.1.0.0" type="text/javascript"></script> to the <head> of your document before calling the bigTarget() method on the selected elements.

// bigTarget.js - A jQuery Plugin
// Version 1.0.1
// Written by Leevi Graham - Technical Director - Newism Web Design & Development
// http://newism.com.au
// Notes: Tooltip code from fitted.js - http://www.trovster.com/lab/plugins/fitted/

// create closure
(function($) {
  // plugin definition
  $.fn.bigTarget = function(options) {
    debug(this);
    // build main options before element iteration
    var opts = $.extend({}, $.fn.bigTarget.defaults, options);
    // iterate and reformat each matched element
    return this.each(function() {
      // set the anchor attributes
      var $a = $(this);
      var href = $a.attr('href');
      var title = $a.attr('title');
      // build element specific options
      var o = $.meta ? $.extend({}, opts, $a.data()) : opts;
      // update element styles
      $a.parents(o.clickZone)
        .hover(function() {
          $h = $(this);
          $h.addClass(o.hoverClass);
          if(typeof o.title != 'undefined' && o.title === true && title != '') {
            $h.attr('title',title);
          }
        }, function() {
          
          $h.removeClass(o.hoverClass);
          if(typeof o.title != 'undefined' && o.title === true && title != '') {
            $h.removeAttr('title');
          }
        })
        // click
        .click(function() {
          if(getSelectedText() == "")
          {
            if($a.is('[rel*=external]')){
              window.open(href);
              return false;
            }
            else {
              //$a.click(); $a.trigger('click');
              window.location = href;
            }
          }
        });
    });
  };
  // private function for debugging
  function debug($obj) {
    if (window.console && window.console.log)
    window.console.log('bigTarget selection count: ' + $obj.size());
  };
  // get selected text
  function getSelectedText(){
    if(window.getSelection){
      return window.getSelection().toString();
    }
    else if(document.getSelection){
      return document.getSelection();
    }
    else if(document.selection){
      return document.selection.createRange().text;
    }
  };
  // plugin defaults
  $.fn.bigTarget.defaults = {
    hoverClass  : 'hover',
    clickZone : 'li:eq(0)',
    title   : true
  };
// end of closure
})(jQuery);

Go forth and embiggen

bigTarget.js is a simple to use jQuery plugin that will give your visitors a better online experience. If you have any questions or feedback about bigTarget.js leave them in the comments below. If you find it useful, spread the bigTarget.js love through your preferred social network below.

1/1/08 8:51am — I have updated some of the plugin code for legibility and added a tooltip based on the work of Trevor Morris.

1/1/08 8:51am — My good friend Trovster (Trevor Morris) has independently published fitted.js which achieves the same goals as bigTarget.js in a slightly different manner.

Continue reading | Comment | ***Secret 'Building Campaign Monitor' Link***