It's been a while and we need to do better! So here's a quick post about building and showing useful 404 error messages for your users when things go wrong... It's aimed at informing you as a client in what to ask your web design company to do...

What is a 404 page?

There are alot of boring status codes attached to web pages when things go wrong (if you are that way inclined have a look at this list!.) The most common of these is the “404 error code” which simply put means a visit to a page or resource (i.e. an image) on your website which doesn’t exist.

Why would users see a 404 / page not found page?

There are 3 main reasons but probably plenty of others:

• A user goes directly to a page but mistypes the page address.
• You mistype a link on your website and then a user clicks it and finds themselves at a page which doesn’t exist. Alternatively someone else links to your site using the wrong page.
• You redesign your website and update the web pages that your website has. As part of this process you put up new pages and take down old ones or the new web company decides to change the page addresses to smarten them up. Maybe they change the about page from ‘http://yourwebsite.com/about.htm” to “http://yourwebsite.com/about-us/”. For a period the search engines will continue to hold your old pages in their index so people might search for you and be taken to a 404-error page. In this case also, where other sites have linked to you, those links might stop working too.

What not to do?

I thought this was worth writing a quick post about because just this week I’ve seen a couple of websites where the 404 page I’d term as a “total failure” 404. This is when the site displays an unhelpful 404 message that is just the server’s default page. Often times this can appear as just plain confusing to users. Here are two examples of what these might look like below:

As you can see – neither is particularly nice or helpful to the user and may just add to a little niggle of frustration (although the second is slightly better than the first – at least attempting to explain a little.) In some cases your user might just exit your site completely and go elsewhere, especially if they have found their way there using a search engine.

What to try and do:

The best way of approaching your 404 is to think about what you would like your users to see if this is what they saw on first visiting your site (for whatever reason). Some key principles:

1. If you can, keep the general site navigation and treat it like any other page.
2. Be helpful. Offer users a way out and a way to move forward. For example you could include a site map or if your site has a search function – display a search box on the error page.
3. Say sorry! and possibly with a hint of humour to lighten the mood. To try and keep your users onside – apologise but in a no-nonsense tone of voice. Allow them to get in touch with you and report the problem. Obviously this all depends on what overall tone of voice you are using on your site in general.

For coldpie we tried to roll all these things together into our 404-error page. Take a look!. It doesn’t need to be complex or time consuming and you only need to create one error page which will then stand you in good stead moving forward.

Further reading

A few web magazines have taken some time to write up in more detail some of the ideas surrounding constructing 404 error pages. Others have also focused on the “Art” of 404’s – where designers have gone out of their way to construct delightful and sometimes beautiful error pages. As a good starting point I would suggest taking a look at the posts on Smashing Magazine:

• Wanted: Your 404 error pages
• 404 error pages reloaded
• 404 error pages one more time

How to prevent things from happening in the first place

It’s probably worth noting that you should also try and prevent your users from seeing the 404’s where possible. There is no stopping them from mistyping a page name – however you should try to prevent broken links and try to ease the transition from an old site to new.

To check links try the w3’s page at http://validator.w3.org/checklink. Here you can check your whole site in one swoop.

Automatically forward on old pages to new ones. At coldpie we often will spend a few hours at the end of a build setting up a list of what old pages that will automatically forward to new ones. This will help Google and other search engines to update their index. Whilst you are there though make sure to use the correct headers when forwarding to the new page. Take a look here for more info. If you have any questions give me a shout in the comments.

As Geolocation technology grows in popularity, sophistication and its overall use, it's worth thinking about whether your website properly lets people know where you are based. If people search for your type of business, product or service in your area - does your website appear? Is your address featured prominently on your website? Is your site listed in Google Local? Read on for some thoughts and tips...

So what is the fuss with Geolocation?

Geolocation is the identification of the real-world geographic location of an Internet-connected computer, mobile device, website visitor or other. IP address geolocation data can include information such as country, region, city, postal/zip code, latitude, longitude and timezone. Geolocation may refer to the practice of assessing the location, or to the actual assessed location, or to locational data.

From Wikipedia

The web has changed the way we buy things with the barriers removed on when, how and where we purchase. Now we are able to buy pretty much anything from pretty much anywhere and the only limitations are the cost of and the time taken to deliver. Whilst this change has been quick and revolutionary there is now a solid move to providing information based on where we currently are.

This has come about in large part due to the technological advances of smartphones such as the Blackberry, Google’s Android and the iPhone. People are now able to search instantly for specific restaurants, bars and shops from anywhere and in relation to where they are or where they’re going.

In technology and on the web decent geolocation is where it’s at. Companies are investing time and money to progress their geolocation features such as Google maps and features within the Firefox browser. Twitter is looking to make itself more “location-aware” and the recent proliferation of geolocation based twitter spin offs are proof of its popularity and importance. Also there are some funky augmented reality applications such as the one below which brings it all to life and into the proper “Hollywood Apps” territory.

What has this got to do with my website?

Whilst your website might not be as whiz-bang as an augmented reality application, to a user it can serve a similar purpose as they may be interested in your business due to where you are in relation to them.

Understanding that some searches come with a location-based context and altering parts of your site accordingly will help you attract those types of visitors.

This all forms a small but very significant part of what those in the search industry call understanding the “context” of a persons web search. Having said that, whilst this post is framed around attracting more visitors and the principles of web search what we are really talking about here is just good web practice (i.e. making sure visitors find relevant and useful information.)

Note that this post addresses the content of your website to convey your location as opposed to the physical location of the server or other deeply techy considerations. If you are interested in more technical discussions for dealing with geolocation and your website have a look at Rand Fishkin’s Friday Whiteboard about geolocation.

A vague area and/or your specific address?

Here are a couple of examples of different contexts for when location might be relevant for your users:

• A user searches google for “Your-product your-location” i.e. “Web designer London”
• A user is on your website and wants to find out a little bit more about where you are based i.e. What areas you operate in or ship to, where your office or shops are.

Let’s take the first point. A user is looking for companies like yours (or your products or services) in your town. In this scenario the user will in all likelihood be searching Google or Yahoo using general regional terms i.e. Manchester, Central London, North West England in combination with other keywords specific to your business. From this point of view your site should then feature “vague” regional search keywords.

The second point is connected to “user trust”. Having your company’s physical address on your site will not only be useful to a visitor it will also help increase their trust in your company or brand. Added to this, it’s been argued that Google will assign more trust to your website if you include a physical address and more trust can mean higher rankings in search results. Bear in mind though that this belief is based on a series of educated guesses and experimentation because search engine ranking systems are such a highly guarded secret . You can find some more info about that in Michael Gray’s article on Searchengineland.

So you should therefore try and include both vague and specific location details on your site.

So what should i do? (the useful stuff!)

Below are some specific things you should think about doing on your website. By no means exhaustive but hopefully useful.

Add your postal address to your website:
Because your postal address will include specific as well as vague location information (i.e. your town or county) its worth adding your postal address on as many pages as possible. I’d suggest you use the footer of your site for this so that it will therefore appear in search engine indexes but won’t get in the way of your average user. For an example take a look at Red, White or Pink. Also, if you have a physical shop it would be worth while adding some directions too. This will give added usefulness to your site users and also give you some more space for some more legitimate geographical keywords. Take a look at the Barnstaple shop page on Carol Anne Jewellery.

Add a google map to your site:
This will be useful for your site visitors and also increase their trust. It may also improve your trust rating with the search engines too (although see the caveat about that above). For an example take a look at our contact page or the Boutique locator page on Carol Anne. For help on setting up Google maps take a look at their API page.

Add yourself to Google Local:
Google Local is an often under utilised service and allows you to list your physical address and then displays those results within Google maps and also at the top of searches which appear to have a location based context. The service is free but you will need to verify your address by post. For example take a look at this search result for “website company Camden” which was recently spotted in the wild:

In addition Google Local lets you add additional information about your business, testimonials and images too – which all amount to another trusted avenue for users to find out more info about your company. For an example take a look at the Espresso Apartments listing on Google Local. This Google Business Centre tips page may be useful too. You might also want to take a look at Yahoo local.

Create a general statement about your company which includes the more vague location-based keywords in it and include it on your website:
It’s a good idea to include some general statements about your company on your website with information about what you do or sell. Again I like to use the footer to utilise this. By adding some of the vague regional information in here it can really help the search engines understand more about your company and therefore serve it up to people on their results pages. For examples take a look at the coldpie footer below or the Espresso apartments footer.

Add location context to the page titles on your website:
Add a couple of location keywords to some of your websites page titles including your homepage and contact page. For more information about what page titles are and why they are important take a look at another one of my long blog posts: Quick tips to improve your page titles.

And finally….Add some Microformat magic:
This one is a bit more techy and a subject perhaps deserving of a blog post all by itself. Adding Microformats to your site add another level of usefulness for some of your website users. For more information about Microformats have a read through some articles by the self-confessed Microformats nut Andy Clarke: here and here. Another article about SEO and Microformats is here. For those with the Operator Firefox extension you can see Microformats at work on this site and also on the Greenwich Community College website.

UPDATE: It’s worth having a look at Google’s “Rich snippets” which allow you to use Microformats to mark up additional search result information. More info on that In their introduction in May, their update in October and their testing tools on the Webmaster site

If you have any thoughts or additional suggestions I may have missed – then let me know in the comments. If you want to discuss it further then get in touch. Or tweet me your thoughts

Summer has been and gone and it's time for a quick update on what coldpie towers have been up to. We're now all well rested and looking forward to a busy couple of months of new website builds.

We recently launched a few websites and we thought we should tell the world. The first is for Phoenix Learning & Care. In their own words they are:

a well-established care organisation providing small, residential homes, registered schools and colleges for a wide variety of young people, 8 to 18+ years from centres across Devon

From Phoenix Learning & Care: About Us: History

The build included front-end design and CMS integration along with a document storage system and extranet sites for both parents and carers and also staff so admin users can display memos and policy documents for staff and also answer questions via the training forum.

The second launch is for Red White or Pink? which is a new online wine business run by Laura Lindsay. The site features CMS, ecommerce engine, wine search, discount codes and video and picture integration for each wine. The wonderful design was by Chris Pallaris and it compliments the brand and sets the tone perfectly for the site.

The third site is a redesign and relaunch of a jewellery retailers online site: Carol Anne Jewellery. Carol Anne own three stores in Devon but needed an upgrade to their website to reflect their new branding and also something which would allow them to easily update the online stock. It features CMS, ecommerce, Gift vouchers, discount codes, wishlists and more.

I'll get some more info up on the work pages about each of the builds in the coming months but we continue to beaver away and are now busy working away on an internal document storage system and another interesting online shop as well as a couple of Phase two and three changes for current clients.

We're "Pink for October"

As you may have noticed coldpie has gone a little pink in support of Breast Cancer awareness. You can read more about the campaign at Pink for October and better still why not donate some money to some of the great fantastic breast cancer charities such as Cancer Research UK. Alternatively you can join in by Wearing it pink on Friday the 30th of October.

We're hoping to have some more informative and opinionated blog posts in the coming weeks and months...

Valid sites are often confused with accessible sites. While a valid site may pass all the automated checks some may not be navigable by keyboard alone or may lose their navigation when a site’s images are disabled. Here at coldpie we understand the difference between valid and accessible, and work hard to ensure that the user is always put first when aiming to achieve both.

Spot the difference

Accessibility and validity are two distinct yet complimentary standards. Accessibility is aimed at end users ensuring that everybody can access the site’s content and functionality with clarity and ease. This should include those who have visual, hearing, cognitive or motor impairments.

Validity on the other hand is far more relevant to those who build websites helping to ensure any developer or development company can easily understand and work with the code. It also future proofs the site enabling it to continue to function through browser and software upgrades.

Why the confusion?

So why is a site that is considered valid so often confused with being accessible? This is partly down to the two being grouped together under the Web Content Accessibility Guidelines or WCAG (you can read more about the WCAG here). But also, in no small part, because those who design and build websites have become too hung up on passing automated online checks rather than testing for real, live users.

When checking a site’s (X)HTML or CSS is valid most developers will use a tool like the W3C Mark-up Validation Service which provides a simple “yes, you’ve passed” or “no, you haven’t”, and a list of errors by line number. Great, developers can fix any bugs easily and can be rest assured that they have beautiful code.

However, checking a site’s accessibility is far more involved. Again there are the online tools; Total Validator and Cynthia Says are one stop shops for validity, accessibility, spelling errors and even browser screenshots. These are great as a starting point but there is only so much an automated tool can provide. For example, they can’t indicate whether a site is still usable when images or javascript are disabled, or if flash or java plugins are unavailable. Equally they can’t show how navigable a site is using just the keyboard or other assistive technologies. These are all required manual checks that often get skipped.

The real question to ask

Using automated tools is a great and easy way to spot problems with a site’s validity and accessibility but they shouldn’t be relied on as the be all and end all. Manual checks and real user testing are the only foolproof way to ensure a site is accessible to all.

It’s also important not to sweat the small stuff. A site can be fully accessible to all users, including those using assistive technologies, even if a few tags are capitalised or the odd ampersand isn’t encoded correctly.

As the client it’s important to ask your development team not “is my site valid?” but rather “can all my visitors use this site?”

Here at coldpie we’re often faced with some tricky design or architectural questions and I thought we’d share one of the recent ones we tackled when building the new Casting Collective website

A big part of the site revolves around the artiste search, which allows casting agents to browse and select artistes based on a number of criteria from basic vital statistics (such as age, height and shoe size) through to more specific skills (such as languages spoken or dancing experience). Agencies can also find artistes who have their own uniform (from police to nurse) or alternatively by artiste name.

What needed fixing

When we reviewed the old website we noted a couple of areas where it could be improved.

The first was that the search start page always showed the same 24 artistes and four in particular always in your eye line. For us this had to go because often those shown would bear no relevance to what agencies would require. Also because the 24 artistes were up front, agencies were likely to notice this small set of artistes first and the search criteria second. With the artistes removed from the start page we could free up some more space for the search form itself – allowing for a little more explanation of what the search was able to do.

The second issue with the old site was that the search functionality was split into 4 separate and distinct searches (with the vital stats form split again into simple and advanced options). This meant, for example, that agencies could only view artistes of a certain age OR those that were trained dancers OR those that could speak French. They couldn’t seek out French speaking trained dancers between 26-40 all in one go – which for a casting agency could be a real need.

Some more things to think about

Once we’d decided to bring the searches together and started on the data manipulation, another set of questions arose. The options available are vast and include:

• 15 vital statistics parameters (gender, age, height, inside-leg, shoe size etc.)
• Over 500 skills split across 8 categories, including 125 languages and 125 sports.

If we weren’t careful the form would be a nightmare to use and if laid out wrong it might stop some agencies in their tracks leading them to go elsewhere.

Conventional wisdom here would probably dictate creating a simple search (with just vital statistics and possibly a name search) with a link through to an advanced search allowing people to search for skills if they needed to. We decided against this though because we wanted to show agencies what they were able to do up-front and allow them to do it quickly and easily.

The first attempt

Our first attempt at a solution was O.K and functional but that was about it. You can see it here: Attempt number 1

We had everything on the page however it wasn’t really hitting all the right buttons in terms of being simple to use. We didn’t want it to look too complicated and unfortunately this just did. If you only wanted to search for men over 60 in this scenario you were also faced with various other options which weren’t relevant and got in your way.

Also we had a problem in that most people didn’t know how to use multiple select boxes and this wasn’t the time to start educating (you need to hold down the shift or the apple key and then select different options to get what you wanted.)

We put our thinking caps on again.

The end result

For those that like to skip to the end and read the last sentence first, here is what we finally ended up with: the end result.

What did these changes gain us?

Simplicity. Agencies are now able to see all of the different search types at a glance and can safely ignore things that aren’t relevant. They can also see that they can mix and match different search options together.

Options are hidden until you need them. So agencies can see all the options and easily switch between different skills in one or two clicks.

Skills grouped more sensibly. Agencies can see more clearly the different ways that skills are grouped and also the internal groupings within those. If you need to see everyone who has a little bit of skill on the old ivories then no problem just do a “select all” in musical instruments under the piano and organ section. Users can now more easily see that they can select multiple skills at once.

Generally a more pleasant experience. Well we think so and The Casting Collective agrees.

And finally…

The next step was to start tracking what people are searching and record that in the back office. In the next few months The Casting Collective should know which things are really important in terms of the online search rather than just guessing based on what they know about their offline business. We’ll decide whether the search needs further tweaking then.

These are the sorts of problems that occupy our minds on a daily basis here at coldpie. The result hopefully is that through our little extra effort, users won’t need to think about how the form works at all.

You can read more about the site build itself here.

In an effort to spread the knowledge - I'm going to write some brief posts about how you can improve your website, mainly by optimising it for search engines and search result pages. The hope is that they will be informative, sometimes interesting and arm you with a checklist to go away and make changes yourself. The first set of crib notes relate solely to Page titles.

What are Page titles?

Each of your website pages has its own distinct page title. They appear in between the html tags <title>This is my page title</title> within the code itself. If you do a right-click on a web page and select "view page source" (in firefox) you will be able to see the page title within the code - it will be near the top. Go on give it a go - don't be scared. If you do a view source on this page, for example, you will see the title of this page is "SEO tips: Improve your page titles for better rankings | coldpie's blog: web ramblings and thoughts."

But where do they appear on the page themselves?

Page titles don't show on the web page real estate but instead appear in the top bar of the browser frame - just above where you type what web address you want to view.

So again for this page you will see the page titles here:

Why do page titles matter?

Page titles matter for two main reasons. The first is that search engines treat the words that make up your page titles as one of the most important factors when ranking a website or web page.

When Google (or MSN or Yahoo) ranks your page it does so using a complex set of algorithms taking into account many tens/hundreds/thousands of factors. It's a complicated and billion dollar business and too complex for this post (read http://en.wikipedia.org/wiki/PageRank for more), however, what's important is that words which appear on your webpage all contribute to how well your page ranks for a particular search phrase. And within that the words which appear within your page title have higher priority than other content on your webpage.

This title tag has consistently been the most important on-page SEO factor for the past few years.Andy Hagans in http://www.seomoz.org/article/search-ranking-factors

The second main reason that page titles are important is because they are the thing people will see on the search engine results page itself. Take a look at the following search result on Google:

The top link is for this blog post and it's the page title which is used as the link text. All search engines use the page title of the webpage as the link text within the search result page in this way. Because it is this text that most people will read first when scanning a search result page it needs to make sense and appeal so the user will go ahead and click through to your site.

It's for these reasons that having a well written page title with a peppering of related keywords to the page itself is important. Keeping a user on your webpage or site after they've clicked through is for another time - but of equal importance.

Some simple rules

So now you know what page titles are, why they are important and where they are used - how should you write your page titles?. Below are some simple rules which should guide you:

• Make sure page titles are different for each page
• Make sure page titles make sense to a human and directly reflect what is on the page itself
• Limit the length to between 60 - 70 characters as anything longer won't be shown on the search results page (see SEO Moz's cheat sheet for more)
• Put the most important keywords first if possible. On GCC's website for example we made sure that the course title was first and upfront on their course listing pages
• Put your brand name at the end of your page title (sometimes its best first but generally focus attention on the elements which differentiate your pages)
• Try to avoid vague and general terms (such as "free", "cheap", "best") and use specific locations if relevant (for example "Damp proofing specialists in Surrey")

There are other things to consider too - including a decent amount of keyword research - this is something we'll take a look at a later date.

How should I go about improving my page titles?

First of all you will probably want to check to see what your website's page titles currently are. Google handily gives you a quick and easy way to do that - just type in "site:www.yourwebsite.com" into the search box. So to see coldpie's page title's you'd type "site:www.coldpie.co.uk". The results page will list all of the pages that Google knows about for your website and each of the links will be the page titles you currently have. Have a look through the results and see if the titles fairly reflect each of the pages on your website.

If when you run this test and all your web pages have exactly the same title for each page such as the example below then it's definitely time to make a change!

If you don't think your page titles are descriptive enough - then change them. Concentrate on each page individually and come up with a couple of keywords which you think people will use to find your page and are used on the page itself. Ignore the design for now and concentrate solely on the words. Perhaps take a look at the Readability Bookmarklet (and here) which allows you to view your webpage as text only and therefore to some extent how search engines see your pages.

What if I can't change the page titles myself

If you are unable to get down and dirty with the code itself then we'd suggest creating a document (whether in Word, Excel or something similar) and list out all your webpage URLS, the current page title and then create a new page title if needed. When you've finished send that document through to your developer or development team. It should be no issue for them to replace them for you.

Some further reading

Hopefully this post has been useful - although feel free to let us know anything you think we've got wrong. Knowledge is power so take a look at the following links for more detailed info on page titles:

• SEO Book's article & video on page titles
• What the experts say about the importance of page titles
• Another blog post about page titles at SEO Moz

Coldpie have designed and built the new website for The Casting Collective – The UK’s leading casting agency for supporting artistes (extra’s to you and I). The site includes a full online search of the companies artistes, a forum and more. Along with the new design and tweaking the site architecture, the build also included moving the site over to coldpie’s content management system. In addition reporting of the artiste search usage has been added so that the company are able to monitor how people are using the site and their needs better.

You can view the site here: castingcollective.co.uk or read more about the web build here
Related blog post: Design decisions: Making a complicated search form simple to use

coldpie has just helped to launch the new Hauser & Wirth website. Hauser & Wirth are one of the world’s leading contemporary art galleries representing various well known and well regarded artists including Louise Bourgeois, Martin Creed, Paul McCarthy and Pipilotti Rist amongst many others. They have spaces in Zurich and London.

The site was designed and crafted by Catherine Lutman and the front-end HTML was expertly coded by Jean-Michel Dentand. Coldpie provided the bespoke back office software which allows Hauser and Wirth to upload, assign, re-order & display around 4000 images of artworks, installation views and video clips.

In addition Staff are able to publish details of past, current and forthcoming exhibitions as well as calendar entries, information about art fairs and current and future publications and editions. You can read more about the Hauser & Wirth web build here

coldpie wishes everyone a festive couple of weeks!

You can read more about it over on the GCC website or at the FE First awards site. You can read more about the GCC design & build here

In recent months there have been high-profile ‘retirements’ from and new additions into the world of blogging. While serial entrepreneur Jason Calaconis unsubscribed, Sergey Brin, founder of Google, published his very first blog post.

To be fair, I hadn’t really heard of Mr Calacanis until he stopped blogging and that fact was widely reported. Also part of me thought “Really?! – The founders of Google don’t already have a blog?”

It was with these thoughts in my mind that I thought it was time for coldpie to stop being so publicly coy and start publishing our thoughts. And to blow our own trumpet a bit more too.

Not, so you fully understand, because I place coldpie between two massively successful millionaires – although if the idea filters through then great – but because…well why not.

What I mean to say is each to his own. coldpie’s way has always been to speak our mind on projects and to tell clients when we believe what they are doing is right, slightly off, not worth it or one the best things we’ve ever heard of. coldpie has always produced opinionated software and websites and so we thought that we should start doing something similar with the outside world. So i’ll make a start and say

“hello”

Please forgive us while we’re still unwrapping everything and placing it in its proper place. There’s no RSS feed for the blog just yet and some of the shiny pretty portfolio pictures need completing, but this is our new home and we hope you like it. Pop back at any time for tea / coffee or pie.