Blog posts begin with a little preamble. This part sets the tone of the article, and helps the reader establish what they’re going to find out over the next 500 words, even though they’ll probably only just read the section headings. This part typically segues quite quickly to a controversial statement or question – designed to provoke the user into thinking they actually need to read another vapid post; in this case I’ll be asking:

With the establishing question out of the way, we’ve set ourselves up for criticism if we don’t deliver an answer. The best thing to do is to distract the user with a picture; either something to do with technology or sex works well here – a blend of the two works even better.

See – you’ve almost completely forgotten what we were talking about.

After your eyes have lingered for a while, you may eventually get back to the text. Since you’re almost certainly feeling a little down about how your life sucks compared to Little Miss Sexyblogger up there, the post will boost your ego by spatchcocking a variety of selcouth expressions into this farrago, to show that the writer trusts you to know their definitions. And then the galimatian text continues with:

Lies, Damn Lies and Statistics

After a clichéd title that’s clearly had little thought put into it, the post hits the readers with the statistics equivalent of a one-two combo: statistic, plus graphic.

We’d rather you didn’t look too closely at this chart – it’s just there to suggest we’ve done some substantive research.

If the statistics need some justification, this is probably a good time to do some name dropping to create a vague air of trust about you. This idea actually came to me on the afternoon with James Franco. (True story, I did. Calm down girls.)

Time for Controvesy

In this section, we mention that Michael Gray is a hack, Lisa Barone shouldn’t voice her opinions, DaveN’s never done a day’s work in his life, Rand is only well-known because of a legion of fanboys and  Jeremy is a sell-out.

This segment has two main aims: it first causes division amongst readers which encourages them to tweet about it saying how right the post is, or link to it saying how wrong it is. Secondly: by linking to some prominent bloggers, we hope they notice the link and come over to visit the site.

The intended outcome here is that by bringing more visitors and having controversial statements, the post will receive more comments . This is important, because as you may know: comments are the lifeblood of bloggers and without comments they will shrivel and die.

Comments are also useful as a substitute for real world relationships so, you know, they show that I am loved. All I ever wanted was someone to tell me they loved me.

The Seven Point List Bit

1. Some posts may consist solely of the seven point list bit; in other cases it might just be one of the sections
2. The seven point list bit may have any number of items, but magic numbers like three, seven or ten are most common
3. They can be used instead of having to write full sentences
4. A list of the top seven lists posts would be the most awesome post-modern blog post ever if the idea hadn’t been done to death already
5. Most lists are way longer than they ought to be; the writer is typically grasping at straws by now.
6. Did you know that rats can smell x-rays?
7. With great relief, the last point it reached and the author hurries on to……

Some other reading

Again, the writer makes a shout out to other blogs, in the hope that someone will read their post. These are typically posts that are much better written and much more useful than the one you are reading, or demonstrate quite clearly where the idea was ripped off from.

The Funny Bit

By now, the writer knows you’ve just scanned the post and not really read anything. They also know that the post massively lacked any humour, so it’s time to crowbar someone else’s comedy to liven up the post. A barely related cartoon works well: try something from XKCD or that one with the dogs from the New Yorker.

Your crazy pills are right there next to the bed; I suggest you take them.

The Call to Action

This is the end of the post, and hence it’s time to reiterate a call to feed the poor blogger with acknowledgement. Hence, the writer begs you to FOLLOW HIM ON TWITTER, asks what you thought of the post, and then offers the invite that’s as old as the web: “LEAVE A COMMENT, AND LET ME KNOW WHAT YOU THINK!“

Tweet This Post

The message in the length of a tweet: Distilled is opening an office in Seattle and taking over SEOmoz’s consulting business.

This might be the single biggest step we have ever taken. In some ways, it’s bigger than when Duncan and I first started the company. When we started, we had very little – no contacts, few assets, no clients and no employees. Personally, we were both unmarried and renting. Over the last (nearly) 5 years, we have grown a ~£1m business that employs 16 people, both got married, bought flats, sold flats and bought houses.

It turns out that this isn’t enough. We are still shooting for 2010 to be a bigger year personally and professionally. Not only are we both starting families in 2010, but we are also taking the Distilled family to the US of A.

As many of you will know, over the last couple of years, we have worked very closely with SEOmoz:

• in 2007, we started informally working together and receiving referrals from the recommended list (including some big name brands that we are still working with today)
• in mid-2008, we teamed up more formally as global associates to work together on consulting projects and contribute to Q&A and the main blog
• in October last year, we collaborated on the London PRO SEO training seminar that brought together a couple of hundred expert SEOs (and aspiring expert SEOs) for two days of fantastic learning and networking

The Global Associates deal has worked well for both sides. We have worked together for some great clients (including Microsoft, Real Networks’ Film.com, Scribd.com, etsy and others) and I think we’ve written some pretty cool stuff:

• A linkbuilding method so effective I can’t believe it’s not blackhat (by Tom)
• The 3 cornerstones of SEO (one of my favourites of Duncan’s posts – maybe because he nicked the diagram from me)
• 7 ways to use the web developer toolbar for SEO (by Rob)
• How to find out what search engine users are really asking (by Rich)

I’m also told that the accent works well for Whiteboard Friday (I joined some early ones, ran some myself and am going to be appearing in a few over the next few weeks after Rand and I recorded five on my recent trip to Seattle (so far, Scott has published kill the head or chase the tail? and making clients happy).

For a variety of reasons (which I’ll let Rand elaborate on in his post on the subject – I’ll update this with a link when that’s live), SEOmoz has been moving further away from consulting over the time we have worked together (and this formed a large part of the evolving goal of the global associates relationship). In summary, though, they want to focus on growing their awesome products and community and consulting is both a distraction (especially a time-sink on Rand personally) and a potentially confusing message for agencies considering using Linkscape and paying for PRO membership. For some time, Rand, the rest of the SEOmoz management and their board have wanted to move away from this, and now the time has come to make that leap as their PRO community goes from strength to strength.

At the same time, it seems crazy to throw away such a powerful legacy of branding, success and relationships. We are focussing 100% on making our client services as good as they can possibly be and are excited about reaching ever more clients in more places.

For those skipping to the punchline, here’s the low-down:

• Distilled Limited now has a wholly-owned subsidiary, Distilled LLC registered in WA
• There isn’t much of a US web presence yet, but you can still check out distilledconsulting.com
• Rob Ousbey, one of the lead SEOs at Distilled here in London is heading West to brave the frontier and begin the process of establishing our US office
• We are opening up office in Seattle
• A relationship very similar to the ‘global associate’ deal outlined above will continue – with our staff writing for SEOmoz, answering Q&A and contributing to product decisions and testing (in exchange for which we will get loads of access to powerful tools, data and expertise)
• We will manage the SEO consulting page on the SEOmoz website and handle bespoke consulting needs for any of the SEOmoz community who would like to work with us. Rand, Scott, Gillian et al. will also continue to pass people who enquire directly to them on to us (for which we will be paying a small commission)
• We will all continue to refer to the recommended list where appropriate
• We are now hiring in the UK and the US: if you are a talented SEO or great marketing administrator, please check out our jobs pages
• Yes, we are also wondering if we did this just to make ourselves into a case study in international domain strategy.

We are already working with a number of US (and especially West-coast) companies and are hoping to announce new deals in the upcoming weeks. If you are based in the US and always really wanted to work with Distilled, but thought we only worked with UK companies, think again – now is a great time to get in touch.

Tweet This Post

To celebrate Burns Night, we ran a little competition on Twitter to give away a bottle of whisky (Ardbeg to be precise) along with a Distilled hoodie.

All people had to do in order to enter was follow @distilled or tweet the hashtag #distilledwhisky.

We had well over 100 entrants (including a few people trying to enter more than once – but more on that later).

Cooler than that, though, we had two companies contact us offering to chip in with additional prizes:

• Jura whisky offered a bottle of their whisky (and told us about their own competition on Facebook and their twitter account). They also told us about a charitable endeavour by Whyte & Mackay and Jura: auctions for Haiti
• Master of Malt chipped in a cask strength single cask 19 year old Tomatin . You can also follow them on Twitter (though I suggest buying some whisky from them would make them even happier)

To say thank you for this amazing generosity, we are sending each of them a copy of Seth Godin’s book Tribes. (Incidentally, why is his new book, Linchpin not available in the UK yet, nor on Kindle? – I’m surprised by Seth on that).

Since we ended up with such a range of prizes, we decided it would be silly to send all of it to one person, so in addition to the original prize (the Ardbeg and hoodie) which remains randomly chosen from all entrants, we have two additional winners:

• New entrants
• Special mention

But first, the main element of the competition:

The winner of the hoodie and Ardbeg

Randomly chosen from all entrants, Mat Clayton of MixCloud is the winner of the hoodie and Ardbeg. Congratulations, Mat. Please see the instructions at the bottom of the post to sort out claiming your prize.

New entrant

Since we didn’t only enter new followers into the main prize draw, there was every chance that the winner would be someone who hadn’t even heard about the competition. To balance this out a little bit (and to make sure that the awesome cask strength single cask 19 year old Tomatin went to someone who likes whisky!), we decided to do a second draw taken just from the people who specifically entered the competition.

The winner of this “surprise prize” is @jmorell. Congratulations – that is one superb whisky you’re getting there (and yes, we’ll throw in a hoodie as well as long as we still have one in your size). Please see the instructions at the bottom of the post to sort out claiming your prize.

Special mention

This chart tells a story – although we only allowed one entry per person in the random draw above, one entrant still went above and beyond and dwarfed the competition:

To re-iterate, we only counted one entry per person for the random draw. However, we have wept along with Stephen as he has failed to win macbooks on multiple occasions and we wanted him to be able to say he had finally won a Twitter competition (please Stephen, you can stop now!). So the bottle of Jura is going to Stephen. Well done

As above, we’ll also throw in a hoodie as well as long as we still have one in your size. Please see the instructions at the bottom of the post to sort out claiming your prize.

Best tweet

I also thought it worth throwing out some special mentions for innovative entries. Sorry there isn’t more whisky (or hoodies, in fact!) to go around guys, but thanks for keeping us amused – we’ll buy you a beer next time we see you at a meet-up:

• Jaamit
• Simon Barber
• Rhys Wynne

Collecting your prizes

Can you email lynsey.little@distilled.co.uk with your postal address and preferred hoodie size and we’ll get it all coordinated? We don’t have that many hoodies left so while Mat gets his choice of size from S to XL (as the winner of the original competition), the others will have to choose from our remaining stock of sizes. We’ll coordinate to sort everyone out as well as we can.

Oh, and some small print we forgot to mention in the original post – we’d love to see some pictures of you guys drinking your #distilledwhisky wearing your hoodies!

Tweet This Post

Update: This competition is now closed. Thanks to everyone who entered. You can read about the winners here

We try really hard (OK, not that hard) to hide our love of whisky and any possible influences it might have had in the naming of our company. But there is one night of the year when we don’t even pretend. January 25th is Burns Night (shouldn’t that be “Burn’s night”? Apparently not, according to the BBC). The supper to celebrate Robert Burns, eat haggis and drink whisky competes with the best national holidays around the world including Tomatina and the Superbowl (and since I’m now part-Scottish by marriage, I figure I can claim it as my own).

To celebrate Burns Night, not only will we be raising a glass, we will also be giving away a bottle of Ardbeg, one of the finest whiskies in the world (you can also follow them on Twitter).

Update: Jura have contributed a bottle of their whisky as well, so now there’s twice the reason to enter! Read more about Jura on their website, or say thank you by following the Jura Twitter account or entering their own Jura competition on Facebook.

Update 2: Well, this is super-cool, those nice folk at Master of Malt have also chipped in with a spectacular addition – a Single cask 19 year old Tomatin (cask strength). You can thank them by following them on Twitter or, you know, buying some whisky from them.

In order to tenuously link it to our company, we are also throwing in a Distilled hoodie. Limited edition (hardly anyone outside the company has one at the moment), they are super-cool, quality hoodies in dark grey with the Distilled logo and web address on them. Thank you to Lucy Watson from our web dev team for modelling the hoodie against our bright green wall.

All you have to do to enter is follow @distilled on Twitter or tweet @distilled with the hash-tag #distilledwhisky. We will be judging the winner randomly from the entrants early afternoon tomorrow GMT (26th January).

The small-print:

• We reserve the right to disqualify entrants for all kinds of manipulative or unfair behaviour (at our sole discretion). Yes, we know all your tricks. It’s for fun, people.
• We will send the prize to you wherever you are in the world, but it is your responsibility to ensure duty is paid if required (outside the UK) and that it is legal for us to send spirits to you!
• The spirit (!) of the competition is to have a bit of fun and give away some nice whisky. Please be nice and spread the word

Incidentally, if you are into whisky, I recommend checking out Connsr – the whisky social network. Here’s me on there: willcritchlow.

So, do you want to win a whisky? Just follow Distilled or tweet:

“Yes, I’d like to win a whisky from @distilled #distilledwhisky. Happy Burns Night.”

Ardbeg photo courtesy of keepwaddling1 on Flickr

Update: This competition is now closed. Thanks to everyone who entered. You can read about the winners here

Tweet This Post

Firebug is a Firefox plugin that lets you inspect the code on a webpage, giving you a quick way to check if best practice, SEO-friendly coding has been used. The ability to edit page code and content means you can create ‘before and after’ images of changes that you suggest to a site.

Something that I didn’t mention in the video, is how useful the app can be for helping people who’ve not spent a lot of time looking at HTML to understand the structure of pages and the purpose of different HTML tags and CSS code.

Other useful features include a tool to monitor all the http requests made by a page, which helps identify any linked images or external code files which are slowing down page load speed.

Firebug is one of the most important SEO plugins for Firefox. It’s an invaluable part of an search marketer’s toolkit, and I’d highly recommend having it close at hand.

• Download Firebug from Mozilla
• Find out more about Firebug

NB: this is the first video blog post I’ve done. Let me know if you have any thoughts about the format. I used the incredible usability testing tool Silverback App to create the video.

Tweet This Post

Sometime this year, the agreement between Microsoft and Yahoo will see Yahoo’s web-search replaced with results powered by Bing’s technology.

One of the greatest concerns from an SEO’s perspective, is that we will probably lose one of the more useful backlink analysis tools that exists, Y! Site Explorer. However, our friends at SEOmoz have today announced a potential replacement, powered by data from their tool Linkscape.

This new tool, OpenSiteExplorer, is free to use and you don’t have to register. It will knock your socks off with ease of use and filtering features, so let’s take a quick look around:

Front page of SEOmoz’s Open Site Explorer

Links results page

The basic view for a particular URL shows four headline figures: the Authority of the page and the domain, as well as the number of links and linking domains. Below this is a list of the links to the given URL, along with the anchor text used, and the page & domain authority for the link.

Unregistered members can see 200 links, with full details on the top five. Registered SEOmoz members (registration is free) gives access to 1,000 links and full metrics on the top twenty.

SEOmoz PRO members have access to 10,000 links, and can see the full metrics for them all.

The data from Open Site Explorer is made all the more useful by the powerful ‘filter’ options shown above the link list, which allows users to see only the followed links, the nofollowed links, pages which 301 to this URL, etc. There are also filters that will be familiar to Y!SE refugees, such as showing links from only this site, only external sites or both, and showing links to just this page or a full domain/subdomain.

Other tabs show aggregated data about the linking sites and anchor text, and the full list of page and domain level metrics (seen below) which includes raw link numbers, and calculated values such as mozRank, mozTrust and Authority.

Page and Domain metrics from Open Site Explorer

Comparing two websites using OSE

The comparison report, shown above, is a quick overview that lets you see the link data for two URLs side by side. Below these graphs is a list of the links to each page.

New Features Coming Soon

The links pages indicate that a CSV export of the data will be available in the future. The team have also published a ‘feedback’ link, to share your thoughts on the tool and offer your own suggestions.

Get Started

There have always been benefits to SEOmoz membership – both the free and the PRO options – but this new site has just added another tool to the toolbox of every SEO.

Furthermore it shares information that search engines have been reluctant to publish, and puts backlink analysis within the reach of webmasters who haven’t been able to access such data before.

You can use the tool straight away, or register for an account to access the additional data.

Tweet This Post

This week we are going to look at some of the key similarities between those that deny climate change and those that can’t stand SEO. I thought it would be really intelligent to irritate as many people as possible in my very first blog post.

Viewer discretion is advised.

1. Both are short-sighted

This is a fairly simple one. We will consider the costs of being wrong for Me (a climate change and SEO believer) and a hypothetical Challenger (a climate change denier and anti-SEO).

Example A.

I’m wrong on both counts. I have made the client’s website better tailored to their target audience and maybe a bit of taxpayer money has been wasted on upgrades to current industrial practices that are more environmentally friendly, but not entirely necessary to prevent the extinction of the human race.

Example B.

The challenger is wrong on both counts. My client (and everyone else’s for that matter) forced your page out of the rankings after your client got desperate and had to start buying links to try to compete. Rather than take the time required to gain traffic and relevant valuable links your client is forced to take anything he can get and downloads robots to create spammy links and pays off respected sites for a link. In the process your client wastes a fair bit of money, has his page banned by Google, all because at first he didn’t believe. And then once he did, he didn’t follow the rules or take the time to do things right.

Oh yeah… and we all die. Including the cute and cuddly little polar bears.

2. Both tend towards the dramatic

As evidenced in my last point, there is room for the dramatic at both extremes. I’m not saying we should all light a candle, sing sweet tunes with an acoustic guitar, and chain ourselves to trees. I’m also not going to say “we are smarter than nature and can beat everything it throws at us.” I won’t insist that all natural disasters that destroy lives and homes every year are caused by climate change, but I’m also not stupid enough to think that we can outsmart mother nature in light of recent catastrophes. Mama Great Outdoors can stop flexing her guns now, I get it.

Similarly, I would never suggest that SEO is always an honest business. There is some shady stuff that goes on from time to time. I wouldn’t defend all the tactics that SEOs use anymore than I would defend all of Greenpeace’s tactics. However, I also have seen the ways in which SEO can work to increase traffic and conversions and can tell you right now that there a number of helpful, intelligent, and honest SEOs out there.

Will SEO help a good or service that is overpriced for which there is little-to-no demand  become profitable? I have not seen it yet, but it seems unlikely (though I won’t say impossible).

3. Both are usually unclear of what it is they are “against”

Climate what?

One of my favourite conversations to have with a self-proclaimed “climate change denier” usually starts a little something like this.

Me: “Just so I’m clear, do you deny climate change’s existence altogether, or just that man is contributing to global warming”

Challenger: “Oh, no, I don’t know… I don’t believe it is happening at all. Did you notice how cold it was yesterday?”

Now, I’m not saying that scientific consensus constitutes fact. I won’t even go so far as to claim that scientists agree (i.e. there is a consensus) that climate change is caused by man. However, you show me a scientist who says: “the general trend/average temperature has decreased over the last century” and I will show you a liar.

There are (yes I’ll say it) compelling arguments that climate change is cyclical and thus not entirely caused by humans. There are less compelling arguments that suggest climate change is not impacted by human activity. But either way, I can live with these arguments (even if the cost of being wrong could be potentially much worse in the case of the denier).

What I can’t live with is people who do not educate themselves enough to make an opinion and quite frankly spread misinformation.

SEO is cheating!

As with climate change, I am sure most SEOs have had a conversation similar to the following:

Challenger: “SEO is simple. It is also cheating and counterproductive to the work that Google does.”

Me:  “And what is SEO in your educated opinion?”

Challenger: “I’m not really sure, I think it’s when people cram a bunch of unrelated words into blog posts, send me spam to their poker sites and play with meta tags to confuse Google.”

While I have heard of people who claim to do SEO recommend some of these tactics, this does not suggest that this is in the remit of what most SEOs do. Similarly, just because Sarah Palin thinks she can see Russia from her bedside window, it does not follow that all people in Alaska are stupid.

4. Both are missing out on a clear opportunity to increase competitiveness

While this is particularly relevant for the UK (where recent legislation means that all companies will be required to reduce their carbon output based on a benchmark/reporting year), those that ignore climate change (and waste time dragging their feet rather than jump on the bandwagon) are missing out on a serious opportunity to make money and will fall behind competitors in the long run.

In addition to the millions of pounds being offered as rewards for innovation, and the opportunities for tax breaks for earth friendly transport, everyone in the UK will be forced to comply with these regulations and there is (as always) a first mover advantage to those that innovate and establish themselves at the forefront.

Similarly, with SEO, there is nothing inherently wrong with optimisation of your website(s),  and there are a number of activities undertaken by all SEOs that quite simply make sense. For example, if your website sells kittens, it doesn’t make any sense for you to use meta tags on your website that say they are about “Paris Hilton’s Latest Wardrobe Malfunction.” It does, however, make sense to make sure that your website is targeting the most relevant terms that are appropriately competitive for your business and your website.

SEO is not about “tricking” people. At the end of the day I might get a little extra traffic to my website by paying for a link with the anchor text “Chocolate Rain Interview”, but this is unlikely to lead to any conversions or meaningful gains for my company or my clients.

In every profession there are “bad apples,” but who ever said all used car salesmen are slimy? (ok, bad example)

Most SEOs are not trying to pull the wool over on the general public, we are trying to make sure our clients get found by the right people. A better, more spiderable site, much like a more energy efficient (read: inexpensive) company offer clear opportunities to increase competitiveness.

5. Both need that which they detest (a bit like Harry Potter and Voldemort)

If you type in “SEO is” in Google the first few definitions it would like to give you are “bullsh…” and “dead” (despite the fact that there at least twice as many results for “worth it” or “easy”). I’m not the first to notice this and it’s not a big deal. However, without SEO there would be no reason to complain, and to be honest, the leading post (link very intentionally excluded) for the query: “SEO is bullsh…” would have no hope of taking the top spot and generating heavy traffic.

And what does Alexa have to say about this?

Hmmmm… so this website clearly does not receive any traffic by way of SEO? Oh, wait. Nevermind.

Also, there is clear evidence of the fact that this website (which offers little more than opinion and is not filled with good content – but rather namedrops it like it’s hot) offers no clear or useful definition of SEO (which one should expect Google to target as the “most relevant” result for “SEO is…”). The existence of this post and its prominence are proof of the existence of SEO, regardless of whether or not it represents the worst possible use of SEO.

If we take the same approach for “climate change” the top result is “…a myth.” First, let me be very clear that this search was run from the UK (one of the only countries with legally binding carbon reductions) and not the US (where more than half of people do not believe in climate change).

Again, this is not the query containing the most results and certainly does not provide any information that is particularly useful. Also, without climate change many of the sites that are returned as top hits would not have any hope of ranking, least of all for a keyphrase searched with any sort of frequency. Below you can see the Alexa info for one such website.

Now ignoring completely my personal opinions on whether or not this information is valid or relevant, there is no way to argue that such sites would gain any traffic at all were they not written about salient issues. Many people probably make their livelihoods off of these websites, and though they may well be dedicated to fighting the “injustice” that is climate change, they should probably bear in mind the age-old teaching: don’t bite the hand that feeds you. Without climate change and thus “the climate change conspiracy” there would be no grounds for such a website to be viewed and no reason for anyone to read what these individuals had to say.

This argument is admittedly a bit circular but it doesn’t change the fact that many deniers would be likely forced to argue about how Barack Obama is setting up death camps instead.

In closing, deny climate change and hate on SEO all you want. In the mean time I’m gonna be helping my clients beat their competitors and ride it (public transport of course) all the way to the bank!

Tweet This Post

Yesterday, Sam from SEOmoz posted 11 Conversion rate lessons they had learned in 2009 – along with some traffic stats for their blog.

The 10th lesson that Sam posted really struck a chord with me and I got thinking about how best to implement it. Sam suggests that you track how far people get through your forms by registering a virtual page view each time someone completes a form element.

Some background

One of the first things to do when looking at improving the conversion rate of a page is to work out a list of possible client objections. There could well be some incredibly obvious ones, for example a lot of online shops somewhat hide the postage costs and only display them once you have added a product to the cart. The best way to find this out is to get a representative sample of your users and talk to them. Conversion rate experts have a good post listing tools to reveal why people abandon your website

There are another set of conversion hurdles that are less obvious. For example it is often said that the longer a form is the fewer people will fill it in.

Tracking form completion

If, as Sam suggests you could track each time a field is completed in one of your forms, you should be able to spot if there are any questions that are causing your customers to run away screaming. My best guess is that you will also see a drop off of entries as people progress through the form, as people, for one reason or another decide not to continue.

With a few lines of javascript and a bit of Google Analytics magic you can easily track these events and over time make improvements to the form to increase the number of people who get all the way through.

Tracking custom events within Google Analytics

Google has a nifty function called _trackEvent which does pretty much what it says on the tin. The original SEOmoz post talks about virtual page views, but I believe using these events is a better because it doesn’t inflate your page view metrics.

_trackEvent(category, action, optional_label, optional_value)

The code

Because most of you will skip reading anything that looks like help I’ll link directly to the example so you can go an have a play.

In the example I’ve created a bog standard form, with 4 text elements and one drop down. There is nothing of interest or different to any other form you see around.

In order for the event tracking to work you need to be using the ga.js tracking code.

I’ve also used a jquery url parser, the installation of which was very simple.

1.  $(document).ready(function() { 
2.      var currentPage = jQuery.url.attr("path");
3.      $(':input').blur(function () {
4.          if($(this).val().length > 0){
5.              pageTracker._trackEvent("Form: " + currentPage, "input_exit", $(this).attr('name'));
6.          } 
7.      });
8.  });

The jquery code in question is fairly simple. The first line is standard jquery which just ensures that everything has loaded that is needed. Line 2 uses the url parser in order to work out what page we are currently on. In the example the path will be /files/ga_form_events/index.html.

Line 3 uses a jquery selector to select all input elements (input, textarea, select & buttons) which we bind a function to when the blur element is triggered. This function then checks that there has been something typed (or chosen) and if so it fires of the google analytics event tracking code. In the track event function call we dynamically select the name of the element.

The results

Assuming this is installed and working as expected, then you should start seeing events in your Google Analytics dashboard. To view these choose Event Tracking from the Content section of your reports.

Assuming you’ve installed everything correctly, then a few hours later, you should start seeing the events filtering through into your reports.

A caveat

The code is very much a proof of concept, and I wouldn’t recommend you install it on any live site, without proper testing. If people find it useful I might spend time learning how to package it up into a jquery plugin. I’m sure there will be issues and bugs, and no doubt internet explorer will do something funky, but as it’s a proof of concept, i’ll leave that as an exercise to yourselves. If anyone has any comments or ways it can be improved then let me know in the comments, and i’ll happily update the post.

Update: Ben Jesson from conversion rate experts points out that you can get the same sort of insights from ClickTale. This won’t add the data to Google analytics, and doesn’t involve messing around with Jquery, so isn’t as much fun!

Further work

We’ve just had a discussion in the office about ways you could improve the above. Once you have the framework there are a myriad of improvements, and depending on what you want to track you amend the code accordingly.

Tweet This Post

Happy New Year, and welcome back to the Distilled blog.

Over the holiday season, and with a bit of down-time, many people had the chance to pick up some new skills or look into something that they’ve never had time to before.

Tom arrived back in the new year having learned some basic CSS, and asked me to recommend a few CSS techniques that can be used to add visual interest to websites / blog posts, and that are particularly SEO friendly. (As such, the techniques suggested don’t help with layout, site theming, etc – but can be added to your site/blog’s styles to allow some interest to be added to pages relatively easily.)

All the techniques can be seen in action on the accompanying CSS Techniques Demo Page.

Why?

Didn’t you hear? The blog post is dead. In a world of boring blog posts, standardised Twitter layouts, and homogeneous microblog templates, you have a chance to stand out. You don’t have to go to the lengths of Gregory Wood or Jason Santa Maria and produce a new layout for each article (though, those are some hot sites), but some appropriate visual embellishments may help encourage people to read the whole article – and remember to revisit your site in the future.

CSS Resources

First, a couple of tutorials and references to help you get your head around CSS:

• CSS Basics and CSS Dog have beginners tutorials that list all the basics
• W3Schools and Sitepoint have CSS reference pages that may come in handy
• There are printable ‘cheat sheets’ supplied by LeslieFranke (html) and AddedBytes (png / pdf)
• For more advanced techniques or for inspiration, read through A List Apart’s CSS section

Also, I’d highly recommend the Firefox plugin Firebug, to help you step through any site’s HTML & CSS; looking at how certain designs or effects were created can greatly contribute to your understanding of the principles and techniques.

Techniques

I won’t go into too much detail about how these snippets work – they should be fairly self explanatory and working to understand them is a good exercise. Similarly, I’m not going to dwell on cross-browser fixes here, because I don’t want to start crying.

Don’t forget to open the CSS techniques demo page now, to see the techniques in action while you read the descriptions below.

Link icons

A nice easy one to start, that highlights links which pointed to external pages. It’s really as simple as this:

CSS:

a.offsite {
    padding-right: 12px;
    background: transparent url(offsite.png) no-repeat right center;
}

HTML:

<p>Please follow <a href="http://twitter.com/Distilled" class="offsite">Distilled</a> on Twitter.</p>

Putting Content in the Centre

HTML’s development has left a legacy of incorrect tags & properties that survive in the online conciousness – in particular those for horizontal / vertical alignment. I mention this quick technique because it’s correct, it’s useful, and I’ve applied it to some of the following examples, and wanted to ’show my working’ here.

CSS:

.centered{
    display: block;
    margin: auto;
}

HTML:

<img class="centered" src="kitten.jpg" />

Image Framing:

A subtle frame around images can improve the look of a post. Modify the colours and size of the padding to match the theme of your site.

CSS:

img.frame{
    background: #ddd;
    border: 1px solid #999;
    padding: 4px;
}

HTML:

<img class="frame centered" src="kitten.jpg" />

Image Captioning:

An extension of a simple frame is to also include an image caption in there. This code is about as simple as I could make it. The width of the ‘frame’ needs to be (at least) the size of the image, and could be set using inline CSS, or in the CSS file if every captioned image is likely to be a similar size.

CSS:

div.frame {
    background: #ddd;
    border: 1px solid #999;
    padding: 10px;
    text-align: center;
}

div.frame div{
    font-style: italic;
    font-size: 0.8em;
    margin-top: 10px;
}

HTML:

<div class="frame centered">
    <img src="kitten.jpg" />
    <div>Caption here</div>
</div>

Drop Shadow:

There are a variety of CSS techniques for highlighting content with a ‘drop shadow’. Perhaps the most polished is A List Apart’s Fuzzy Shadows. The code below delivers a sharp shadow on a floated item, that is particularly easy to implement.

CSS:

.img-shadow {
  float:left;
  background: #ddd;
  margin: 10px 0 0 10px
}

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #999;
  margin: -10px 10px 10px -10px;
  padding: 4px;
 } 

HTML:

<div class="img-shadow">
    <img src="kitten.jpg" alt="test"/>
</div>

Revealed Content:

This is a simple way to hide content that is only revealed when the user hovers the mouse over the heading. Without using Javascript it’s impossible to create fancy slide/fade reveal techniques or display the content when the mouse moves away, but it’s still useful for not overwhelming a post with content.

CSS:

.revealer .content{
    display: none;
}
 
div.revealer:hover .content{
    display: block;
}

HTML:

<div class="revealer">
    <h2>Title</h2>
    <div class="content">
        Content
    </div>
</div>

Pull Quotes:

A particular quote from a post or article can be highlighted in a pull quote – just like in the magazines!

CSS:

.pullquote_r{
    border-left: 0.5em solid #999;
    float: right;
    font-family: serif;
    font-size: 2em;
    font-style: italic;
    margin: 0 0 0.5em 1em;
    padding-left: 0.5em;
    width: 9em;
}

HTML:

<p class="pullquote_r">Quoted text goes here</p>

Quote Boxes:

These boxes are a great way to present a particular idea such as a quote or testimonial, and don’t use images to display the large quote marks.

CSS:

.quotebox{
    border:4px solid #DDDDDD;
    margin: 20px auto;
    padding:10px;
    width:70%;
}
.quote {
    font-size:125%;
    line-height:140%;
}

.quote:before, .quote:after{
    color: #999;
    font-family: serif;
    font-size: 5em;
    font-weight: bold;
    line-height: 0px;
    vertical-align: bottom;
}

.quote:before {
    font-family: Times New Roman, Times, Georgia, serif;
    content: '\201C';
}

.quote:after {
    font-family: Times New Roman, Times, Georgia, serif;
    content: '\201D';
}

.quotebox .author{
    font-style:italic;
    margin-top: 2px;
    padding-right:1em;
    text-align:right;
}

HTML:

<div class="quotebox">
    <div class="quote">
        Distilled are experts in SEO who listen to your needs and make excellent, thought through recommendations. They have a great team and together they deliver fantastic, well rounded advice.
    </div>
    <div class="author">
        Stephen Tallamy, <a href="www.locatetv.com">Locate TV</a>
    </div>
    <div class="clearfix"></div>
</div>

Rounded Corners:

The most clear visual aspects of Web 2.0 were a scarcity of vowels and an abundance of rounded corners. The examples page that accompanies this post shows three different methods of creating the effect; the results in my browser (Firefox on XP) are indistinguishable from each other.

In the past, I’ve used tools that create the images and code required for rounded corners such as RoundedCornr and SpiffyBox. DevWebPro maintains a list of similar services.

However, these days I often prefer to avoid having lots of additional markup, even at the penalty that not every visitors gets the full ’rounded corner’ experience. As such, I’d suggest that you consider a couple of options.

The -moz-border-radius and -webkit-border-radius properties, based on CSS3, should appear correctly for most visitors – there’s some more details on css3.info. I’ve also been satisfied using a Javascript solution: the jquery.corner plugin is an exceptionally simple-to-use addition to jQuery, and particularly suitable if your site is one of the 36% that has already chosen to use the framework.

Tweet This Post

If you recall, I posted Fables for the Internet Generation. There I recanted some of the many fables my mentor, aSEOp, told me as he guided me through the often treacherous internet.

Today, children, I shall share some more.

The Ants and the Grasshopper

THE ANTS were spending a fine winter’s day bringing their code up to the HTML 4.01 standard, fixing bugs on the site and implementing SEO strategies based on the analytics data they collected in the summertime.  A Grasshopper, whose site was perishing with a lack of users, passed by and earnestly begged for a little cross-promotion to drive traffic to his site.  The Ants inquired of him, “Why did you not update during the summer?’  He replied, “I had not leisure enough.  I passed the days in singing.”  They then said in derision:  “If you were foolish enough to sing all the summer, you must dance user-less to bed in the winter.”

Prepare today for the wants of tomorrow.

The Milk Woman and Her Pail

A FARMER’S daughter was starting up a new e-commerce site, when she fell a-musing.  “The money  this site will generate, will buy at least three hundred ads.  The ads, allowing for all mishaps, will produce a two hundred and fifty percent rise in traffic.  The traffic will result in the highest amount of conversions, so that by the end of the year I shall have money enough from my share to buy a new gown.  In this dress I will go to the Christmas parties, where all the young fellows will propose to me, but I will toss my head and refuse them every one.”  At this moment she tossed her head in unison with her thoughts, and she dowloaded a virus which crashed her server, and all her imaginary schemes perished in a moment.

Don’t count your chickens before they hatch.

The North Wind and the Sun

THE NORTH WIND and the Sun disputed as to which had the most popular news site, and agreed that he should be declared the victor who could first get a wayfaring man to sign up to his site.  The North Wind first tried his power and locked away all his content until the man signed up, but the more he insisted on signing up for content, the more the Traveler simply looked at TMZ, until at last, resigning all hope of victory, the Wind called upon the Sun to see what he could do.  The Sun suddenly shone out with all his warmth.  The Traveler no sooner saw the fantastic content  than he read one article after another, and at last, wanting to comment on an item, signed up and posted simply, ‘lame sauce’.

Persuasion is better than force.

The Silkworm and the Spider

Having received an order for twenty websites from Princess Lioness, the Silkworm sat down at her computer and worked away with zeal. A Spider soon came around and asked to hire a room near by. The Silkworm acceded, and the Spider commenced her task and worked so rapidly that in a short time she created a hundred scraper websites. “Just look at them,” she said, “and see how grand and filled with links they are. You cannot but acknowledge that I’m a much better worker than you. See how quickly I perform my labors.” “Yes,” answered the Silkworm, “but hush up, for you bother me. Your labors are designed only as base traps, and are destroyed whenever they are noticed by Google, and brushed away as useless dirt; while mine are ranked highly and viewed daily, as they are the sites of Internet Superstars.”

True art is thoughtful, delights and endures.

The Lion, the Mouse and the Fox

A LION, fatigued by having shot a music video featuring choreographed treadmill dancing that quickly became a hit on YouTube, fell fast asleep in his den.  A Mouse ran over his mane and ears, ripped off his idea in a television commericial for fizzy vitamins and woke the lion from his slumbers.  He rose up and shook himself in great wrath, and searched every corner of his den to find the Mouse.  A Fox seeing him said:  “A fine Lion you are, to be frightened of a Mouse.” “‘Tis not the Mouse I fear,” said the Lion. “I resent his familiarity and ill-breeding.”

Taking little liberties causes great offence.

If you enjoyed this, check out my original Fables for the Internet Generation post!

Tweet This Post