VisitScotland email newsletter sent from Rebecca at Visit Scotland

Each time I receive this email, I feel incredibly guilty that I haven’t been to Scotland for a while. I feel bad for Rebecca taking the time to send me these emails and me not taking the time to visit her country as frequently as I should.

In reality, there is probably no Rebecca, and even if there is such a person in the Visit Scotland offices she certainly isn’t crafting 1000s of HTML email newsletters one by one, sending them out then spending the next few weeks peaking out over Hadrian’s Wall to see if my car passes by into Scotland – so it’s strange that I feel so guilty.

So what’s the point?

I think my point is that taking the time to make your marketing feel a bit more like it came from a real person makes a hell of a difference.

p.s. I did visit Scotland last year, taking a trip on Loch Ness (and connected canals) in a rented boat with some friends; I can highly recommend it.

For the last few months I’ve been working on-site at a company called mediaburst redesigning one of their web apps and helping to redesign their website. The company has put a lot of thought into the design for these products/sites but the market they sit in, sending online SMS is a crowded arena so they need something that helps them to stand out from their rivals.

Step forward the achingly trendy teaser page…

At this moment in time, everyone (well, web designers anyway) seem to be fascinated by these coming soon pages, Smashing magazine have posted about how to design them and .NET magazine’s latest issue (December 2009) features a design-off between 3 top designers for coming soon pages.

Where it all started

Brighton web agency, Clearleft started it all with their supercool Silverback holding page; it looked great and it had that cool parallax effect. Those two ingredients were vital in building up a shedload of buzz for their (at the time) unlaunched product.

It is worth pointing out that the Silverback page did trade off the incredible reputation that Clearleft have cultivated over the years but I believe regardless of the Clearleft connection it would have succeeded.

Good design can make great bait

Last week there was quite a bit of buzz surrounding the newly designed teaser page for themoneypig.com when I saw it I thought – hang on a minute, we’ve got a great design and a quirky new branding concept – we could get in on this teaser page trend.

The new mediaburst website and branding has been designed by a combination of Stiff Rowlands (overall design/branding concept), Stanley Chow (illustrations) and myself . The new website and redesigned app won’t be ready for a short while yet so these coming soon pages will hopefully get people excited for the finished product.

Key features of a coming soon page

Without a doubt a teaser page has to feature the following:

• Great design – wow people with aesthetics
• Obvious call to action(s) – grab people’s email addresses
• Succinct copy – explain the product but don’t bore people
• Zeitgeisty feature -  be it a parallax effect, or a piece of CSS3 or some jquery magic

Key success criteria of a coming soon page

A holding page can be deemed to be successful if it gets:

• featured in design galleries
• talked about on twitter/facebook/etc
• linked/listed in any list post on popular magazine style blogs

If any of those come true then, it’ll hopefully lead to some good SEO results and, even better, a sizeable list of people who are interested in the product the day it goes live.

It’s not necessarily the be all and end all to grab people’s email addresses – obviously the end game is to get customers but it’s also vitally important to get backlinks and to generate interest and discussion around your product.

Your thoughts

What do you think? Are coming soon pages a great way to market a new app or are they a fad that will fade away in 2010?

Some background

Whilst working for JJB Sports Plc (2005-2006), I became increasingly aware of most web agencies’ inability to master search engine optimisation (SEO). In particular, JJB Sports’ main e-commerce site (which cost a lot of money) was woefully unoptimised.

JJB’s website started out with several obvious SEO errors.

1. All pages had the same page title which was JJB Store
2. Poor category naming with extensive usage of industry jargon
3. Dynamically generated URLs e.g. www.jjbsports.com/search.php?supercategory=FR&wcategory=FREP
4. The e-commerce site was launched at the domain www.jjbsports.com but all the PageRank was on www.jjb.co.uk which remained as an information site.
5. There was practically no text on the site besides product images and lacklustre product descriptions.
6. The description meta tag was missing

Problem 1: All pages had the same page title which was JJB Store

Two weeks after starting at JJB in my first web development job proper, I went to see a demo of the new ecommerce website. I was flabbergasted – it was awful. Then I learnt the price tag of the site (which I won’t reveal) and I nearly died!

One of the first things I noticed was that every single page had a title of JJB Store. Firstly, the brand name was JJB Sports or JJB so inventing a new persona was (in my opinion) a bad idea, the fact that it was the only title on every page set alarm bells ringing that the company who had designed the site was quite inexperienced.

Note: When I say page title I’m referring to the window title that you see at the very top of your browser, which is stored in the <title></title> tag of the page source.

Solution: New titles

I changed the titles to better reflect the content of each page and also maintain the brand of JJB so the title of JJB Store on every page became:

Product – Product Category – JJB Sports

So for pages with nike trainers on them, the title became:

Men’s Nike Trainers – Nike Trainers – Nike – JJB Sports

Problem 2: Poor category naming

The category names on the website was also poorly thought-out. Too often, the categories were named after the internal business names so the football section was ‘Replica‘ and the trainers section was ‘Footwear‘.

This oversight was no doubt causing problems for SEO but also for the people using the site who had no idea that the football shirts which they wanted to buy were stored under a category called ‘Replica’.

Solution: New category names

Thankfully, a colleague was also on the ball here too, and over time everyone involved in editing the site improved category names as they created them. Top selling items were grouped into their own categories e.g. Replica became ‘Football Shirts‘ and ‘Football Accessories‘ as football shirts were the best selling items on the site it made perfect sense to optimise for them.

It’s important that products are categorised properly for the user and for the seller. Supermarkets like Asda spend a lot of time working out what to products go in which aisle at what height and next to other items so that they sell the most of their high profit items.

Problem 3: Dynamically generated URLs

URLs need to be readable by users and also by search engines. In Google, when you search for something e.g. ‘stuff‘ every instance of that keyword is bold within the search results. That means if your website’s page title mentions stuff, it’ll be highlighted, if your description mentions it, it will be bold and if your URL features it, it will be highlighted there too. Maybe users don’t notice this but, I’m convinced they do even if it’s subconsciously.

Solution: user friendly URLs with mod_rewrite

I set-up mod_rewrite rules for the site so the URLs properly reflected their content e.g. jjbsports.com/football/. I was still limited to that fact that the content management system only allowed 3-4 letter category IDs. I could have accounted for this with a huge mod_rewrite file but that would future proof the site.

Instead I renamed big categories as jjbsports.com/fitnessequipment and then stuck to removing the horrific query strings from the URLs on subpages so:

jjbsports.com/searchcategory.php?supercategory=FR&branch=FWF

became

jjbsports.com/fr/fwf/

still not too pretty but a little better.

Problem 4: Multiple domains, one goal

When JJB launched their new e-commerce site in August 2005, they launched it at www.jjbports.com which had previously been a domain alias for www.jjb.co.uk (an informational/data-capture site). JJB wanted to keep the www.jjb.co.uk site as data capture and a portal to other JJB websites but, it was damaging the PageRank of the new site.

The result was that www.jjb.co.uk came top of the search results for JJB related keywords with www.jjbsports.com at number 2. www.jjb.co.uk got masses of traffic that simply clicked on the first link they saw to the e-commerce store. This wasted customers time, confused them and didn’t help JJB much either.

Solution: one domain to rule them all

The solution was to set up a mod_rewrite directive to direct the actual www.jjb.co.uk homepage to www.jjbsports.com with a 301 redirect thus making the www.jjb.co.uk obsolete but, still allowing subsequent pages on that domain to remain in operation. Within days, the fortunes of www.jjbsports.com websites in Google’s SERPs improved dramatically.

Problems 5 & 6: Lack of text and meta tags

The site made no use of the meta description tag which is very powerful. Google often the meta description as a website’s description in their results.

Solutions: Improving the use of text/meta description

Therefore the solution was to firstly, improve the text of all the pages then put some of that new text into the description tag.

The website had practically no text on it, category pages had images as links to subcategories and subcategories had images as links to actual products. I changed that so every page had a mini-description e.g.

Nike trainers for all the family. We’ve got Nike Air Max, Nike Tennis Classic and many more of your favourite Nike trainers.

This bumped up the keyword count of all pages.

An extra solution: An opportunity to cross-promote

More text on the page meant more chance to add links and therefore cross-sell. All product descriptions were possible were given links at the end e.g. looking for nike trainers? This was done on virtually every page. I did this for cross selling as much as SEO. When a user landed on the men’s nike trainers section they were given the chance to quickly find women’s nike trainers section.

Summary

At every stage, the changes made to the site were measured with Google Analytics and they were consistently proved to be making more money as people found products more easily.

The mistakes JJB made on their website, are very common and are due to a lack of experience on the part of the website owner and certain web agencies. A website is a complex bit of kit and good search engine optimisation (SEO) should come as standard with any website.

This article first appeared in February 2007.

Last week, on the JJB website I decided to make some small changes and of course every change was monitored by Google Analytics.

The Changes

Cross Linking

Firstly, I added some cross links to product categories for SEO purposes and also for usability. The idea being, that the site would have better links sitewide to terms like football boots and nike trainers but also that if a female customer found themselves on the men’s trainers page via SERP they could easily get to the women’s trainers section.

Therefore this, change has more than one benefit… hopefully: SEO & Usability.

Hero Items

The hero items are our supposedly best selling items. On our site it can be difficult to promote individual items in sub-category listings so our top instore selling items can get lost on page 5 of products listings and therefore never get seen nor bought. As most people don’t scroll we’ve found that putting the top sellers at the top of the page after just one customer click gets great conversion.

Obviously, we can’t prove that customers wouldn’t have found the product anyway but, we can see that nearly 20% of people who click on the football shirts main category clicked on one of our hero items (which is more than clicked on any subcategory) and a lot of purchases were made.

We hope this technique makes browsing and buying from the site much easier which, in turn should lead to repeat purchases and happier customers.

Improved Search

The search improvement can be seen in the example (to your right) which shows a site search for school brings back the most popular school shoes we have for sale. Not shown in the picture we also promote the best selling backpacks and school coats below the shoes.

The diagram above clearly shows, that although the actual number of searches decreased (mainly due to it being a Bank Holiday weekend in England and consequently all round less traffic) that the value of those searches went up by nearly 20% which is astounding. This is great for the business because it helps customers choose easier.

Also, we’re aware that our search engine is quite poor but the solutions to fix it completely are quite expensive and beyond my capabilities. So this fix costs nothing except the time to write the code (1 day) and the time for somebody every week to make sure the recommended products are in stock and correctly priced (2 hours a week).

There are 2 ways you can do this:

1. Create a good website full of good content/products at good prices
2. Construct your website in such a way that works well for search engines

How to create a good website

This is the hard part, if you’re completely starting afresh, because no-one else will link to you at first. By default, a popular business in the outside world e.g. British Airways will always have people searching Google for information about it and having people online talking about their services whether that be the BBC website or John’s airplane blog. So when British Airways launch a website it won’t be long before it turns up for searches on the term ‘British Airways’. But why?

Most probably the URL of the website would be www.britishairways.com which is easy to guess for people looking for the BA website. That in turn will lead to webmasters finding the British Airways website and linking to it when they mention BA on their website and those websites will most probably link to the BA website using the text British Airways or BA.

At the stage when you have a good domain name, a good offline reputation and people linking to you with your company name you will more than likely come at the top of the search rankings for the search term ‘your company name‘.

The more websites that link to you, the higher your PageRank which means the higher up you’ll appear for other terms in the search engines. This is not an overnight process – it takes months and sometimes years for vast amounts of people to add links from their website to yours – but this process is much quicker if you have a huge offline reputation because your brand is always in people’s subconscious. The quality of the sites linking to you is also important. If a high traffic website links to you that will bump up your PageRank more than if a few really small sites link to you.

If you’re not a well-known offline brand your website will have to have great content and spread by word of mouth or advertising. People won’t link to you if they don’t know you exist or don’t have great content but if you create a good website and a few people go on it eventually people will learn that it’s good via word-of-mouth, or links in emails to and from friends, websites will link to it and your traffic will increase – it’s not rocket science but it is labourious and it takes a long time.

How to construct a website for search engine consumption

This is the easy part (or at least it should be). If you read up on HTML a little and construct your website with a correct approach then you’ll go far and if you hit the nail on the head with producing a good quality website then not only will you appear highly for searches on your brand but also for searches related to items you sell or topics you talk about on your site.

the title tag

HTML has a <title> tag which as you can imagine is for the title of each webpage. Don’t make the mistake of giving all your webpages the same title. They don’t all have the same content so if they all have a title of My Company Name then it will look silly and not help you out much. But if the title correctly mentions your brand and the topic of each webpage you’re onto a winner. A homepage title should resemble something like this:

My Company Name – What we do
e.g.
British Airways – Full Service Global Airline

and subsequent pages could look like this:

This Page topic – My Company Name
or
My Company Name – This Page Topic.

The word order isn’t massively relevant and can be experimented with to find the best solution for your website.

This will not only help you to appear in google for the searches ‘this page topic‘ but also will increase the likelihood that people will click on your link because they’ll quickly see that your website is related to what they were searching for.

heading tags

A website should be constructed in such a way that the main heading on the page is a <h1> e.g.

<h1>My Company Name</h1>

There should only be one <h1>, per page. The secondary heading should be a <h2>, and should detail what the individual webpage is about. You can have multiple <h2>s as your page will may be about multiple things. A <h3> should only exist if it’s relevant to the heading above it e.g.

<h2>About Roger Rabbit</h2><br />
<p>Roger is a caring bunny and also a movie star<p> <br />
<h3>Where does Roger live?<h3> <br />
<p>in a house<p>

In the example above the <h3> is obviously related to the <h2> and it’s content above it. Otherwise you would use another <h2>. Headings should always follow a 1, 2 ,3 4, 5, 6 pattern. You shouldn’t have a <h3> without a <h2> and you shouldn’t have a <h6> without a <h5> because if you think about it that doesn’t make sense.

Many websites don’t use the headings tags HTML provides and instead simply change the font settings e.g.

<FONT size="4">Checkout my heading it's big and looks like a heading </FONT>

to make certain terms bold and look like headings – if you do this Google won’t know that it is a heading and won’t add any significance to the terms in your heading.

The whole jist of HTML is that it describes the content of your site. By following HTML guidelines and knowing how it works you’re far more likely to create websites that follow SEO best practice.

Keywords

So you’ve got your website that people are linking to and the page has a good heading structure. Now you need to make sure the keywords are right. The first rule of SEO is to write your web content as though you were searching for it through google. Therefore if you run an ecommerce website refer to your product as people will search for it.

If you’re selling a pair of X-ray specs – make sure the term X-ray specs‘ appears on the actual webpage where you can buy the product. Make sure that that term appears in a <h2> or <h3>, the page title and in the general sales copy. Preferrably make sure it appears in the URL e.g. www.mycompanyname.com/products/x-rayspecs would be perfect.

These techniques should simply be done as standard. Don’t flood your pages with keywords in headings and go over the top. Do it in a natural way and construct you page in a way that works.

Summary

One of the reasons why blogs do so well in search engines is because they are constructed in a good way by people who understand web design. A lot of Content Management Systems in enterprise are downright awful and have been built by people who haven’t thought past making the site functional.

It’s also worth noting that if you get your SEO right and you’re appearing in the top 5 for some search terms people will go to your site but if the site is unrelated to their search they’ll simply leave. So it’s imperative you only optimise for the content/products available on your site.

The challenges involved

It can be difficult to have a URL that represents the page title and fits in nicely without any <span>20 or random characters e.g. £</span>*&.

My favoured solution is to convert a page title into a URL friendly format and store it in its own field in the database. NB I don’t use it on this site but, WordPress (which runs this site) does use a similar thing: e.g.

People friendly URLs using PHP, MySQL and mod_rewrite

becomes

people_friendly_urls_using_php_mysql_and_mod_rewrite

Here’s How

When creating a new page, be it a blog article, or a piece of news or whatever, I’ll give it a title and then just before uploading it to the database I’ll run it through a function that removes any nasty characters, then when I upload it I use two separate fields title and title_html.

the PHP

The function looks like this:

function create_url($title){
// Step one replace foreign language characters
$url_searches = array('à', 'é'); // URL unfriendly characters
$url_replacements = array('a', 'e'); // URL friendly characters
$url = str_replace($url_searches, $url_replacements, $title);

// Strip everything but letters, numbers and spaces from the title
$url = preg_replace("/[^A-Za-z0-9 ]/", "", trim($url));
// Replace spaces and underscores with dashes
$url = str_replace(array(" ", "_"), '-', $url);
// Make lowercase
$url= strtolower($url);
return $url;
}

This code is far from perfect, as I am not a PHP expert. I invite people to improve this as it would be easy to do so.

Using it in the page

When the page is called a MySQL script grabs the webpage based upon that title as long as it unique e.g:

SELECT * FROM articles WHERE title_html = $_GET['title'];

It may be that you don’t even use the title to get the page, you may have an id or other variable in the URL that is used and the title is just for show. Either way, this is a technique that works and gets both people and search engines to use your URLs effectively.

Alternatives

The other option, as I see it, is to run the function everytime on the site whenever you link to the page within your site eg:

<a href="/folder/link<?php echo create_url($row['title']); ?>">link text</a>

This is not the method I’d recommend as it adds more things to think about and more code throughout your pages.