With a cursory glance, you might think that not much has changed. Probably the first thing to catch your eye would be the two new  “buttons” on the home page:

Gender Buttons

These buttons can be used to drill down to a gender specific landing page. This was the primary use case I wanted to handle: help the customer discover interesting content on the website. In many cases the customer may be thinking something along the lines of “I need to find new trainers for little Johnny”. These buttons sit in a part of the screen that draws attention to them. I’m not completely happy with what is there now: they appear a bit sterile, and don’t quite render properly on IE right now. Ideally, I would like to find some subtle image of a boy and a girl I could work into the button background.

Clicking on either the boys or the girls will navigate to the category selection page:

Clicking through on any of those buttons will navigate to a top level category page. These same category pages can also be accessed via the expanded product navigation menu to the left:

The category landing pages are very similar to before, execept the layout has been compressed. Clicking on any individual show picture or title will open up a style-specific page, with a large picture.

The above describes the main changes. Overall, adding in the gender categories added another 20 pages, but adding the individual shoe pages added a significant number of new pages – there are now over 500 pages on the entire site.

It’s been very interesting work for me. I’ve been getting my hands dirty with a lot of Ruby scripting and web design work, which is a diverting change from my day job (Java, Ant and CruiseControl at the moment). For me one of the most fascinating aspects of this change was how it would affect the web statistics.

Before I put this change live, I would have predicted that the bandwidth usage would have rocketed: there was a huge number of new pages, the all the new larger image sizes were now available. Strangely enough, this didn’t seem to change at all. There was a slight increase in the pages per visit, and most encouraging was the drop in the bounce rate from about 45% to 30% (that is, two thirds of visitors browse to more than one page). I’ll discuss some of the more interesting web statistics later.

All in all, I was pretty happy with the changes made, with the proviso that there is still a lot more tweaking to do, usability and otherwise.

That just changed: I had a look at the Chromium developer tools today, and I can say that I’m really impressed. By accessing the menu -> Developer Tools -> JavaScript console, you get a window that has pretty much all the functionality of the DOM Inspector, but it appears much more usable. The highlighting is much more robust, and the css styles are shown in a more readable format.

My only problem is that my main home workstation is Linux, and Chromium on Linux is definitely not quite there yet (it causes my CPU to hit 100% when I try and use it). It’s something I’ll definitely keep and eye on, and I shall certainly keep a copy around on any Windows computers I work with.

Here’s a screenshot of the JavaScript console on Linux:

The windows version is much more polished, and you can see that they’re paying attention to this area of the new browser. I’m not dropping Firefox anytime soon. There are still too many other plugins I rely on, but it’s nice to have choice.

One thing which I had forgotten was Nifty Corners (a tool using CSS and Javascript to get rounded corners without images). It can make a fairly nice difference.

However, there are problems:

• There’s no way to browse for a specific style, category or size. Customers who search for a specific brand are pretty much OK, but people searching for other types (such as trainers, boots or sandals) are out of luck.
• The shoe pictures are too small. Although you don’t see it, there are actually two sizes of shoe photos: 275×206px (which is currently shown) and 640×480px (which are currently not displayed anywhere yet). I would like to support pages for individual stock records, showing the larger pictures and possibly more information
• There is only one payment method: Google Checkout. Customer feedback has shown that a proportion of customers will baulk at entering their credit card details into Google. I would like to be able to added support for Paypal and another payment type. The issue here is that I took a short cut with the basket: I’m currently using the Google Checkout Shopping Cart, as it was trivial to set up a shopping cart without setting up server side infrastructure on my own server. This means that to support an alternative payment method, I will have to integrate another third party shopping cart, or implement it myself.
• It can be confusing for people to decide what size shoes they need, especially with the different between UK, European and US sizes. I need to make this clearer, and provide extra charts and information to help customers decide on the size they need, and possibly provide some downloadable tools to help them with measurement.
• I’d like to refresh the look and feel of the site. There is generally a very positive response to the website in terms of usability and appearance, and so I don’t want to make radical changes to the site. However, there are many tweaks that can be done to improve the usability.

There’s a lot to cover there, and I won’t get all this done overnight. It is interesting (for me at least) to get a clearer picture of the changes needed. I will probably be making updates over the next two or so months on this subject, in between updates to the Ant Script Library and other things that catch my eye.

This main point I’ll mention today is the website. It’s taken me quite a few evenings, but I’ve finally got a design that I’m fairly happy with – though a professional graphic designer might have a different opinion (hi Sol! Any comments?).

As is usual with me, the site is fully standards based, using semantic markup with cascading stylesheets. Clicking on “view source” shows a very sparse html markup, which enormously simplies the maintenance of the site. Even with that, I think that there is a certain attractive look to the site (though I might change my mind about the hot pink in a month or two!). Stylesheets give you the freedom to change you mind without too much work, though.

Still to do on the site: install Wordpress or Joomla! to enable people other than me to update the site (and the news); get more pictures in the brand pages, and get a webstore up and running. Plenty to do!

Geoff was interested to hear my views. He explained that their website is effectively an on-line brochure. He and his colleagues will hand out business cards with the website address printed on it, and clients can discover information about their business from the website at their leisure. The chance of people finding the website by other means was not an consideration.

I briefly described an alternative viewpoint, and told Geoff that I’d put together a few points as to why he should consider upgrading his website to semantic markup the next time he revamps his website. With the help of the usual suspects, I put together the following the following points on the business case for semantic markup:

Improved Accessibility Makes Money

Semantic markup is naturally accessible, meaning that it does not make assumptions about who is reading a page. This has the following implications:

• More people will be able to access your website (think of blind people, people with poor eyesight, people with colour blindness, and so on)
• More flavours of browsers, computers and other devices will be able to access your website (think of Macs, Linux, PDAs, phones, older browsers, future browsers, and so on)
• You can protect yourself from complaints regarding the Disability Discrimination Act.

Increasing the number of people able to view your website must will necessarily have a positive effect on sales leads, hence an accessible website should be a hard requirement for any business website.

Semantic Markup Costs Less

A standards based site is cheaper to develop and maintain for a number of reasons:

• A standards based site is cheaper to develop and maintain, due to simpler markup that can be easily understood by the webmaster. Complex combinations of framesets and nested tables are generally not used
• Centralised styles mean that site-wide changes can be applied trivially in the style sheets. This is another cost saver for maintenance.

Semantic Markup is Smaller and Faster

• A website authored using standards based semantic markup can be anywhere from 40% to 60% smaller than a look-alike site using obsolete layout techniques.
• Smaller files means faster load times, quicker browser response and a better user experience, which can be a easy way to give a positive response.
• For a high usage site, the smaller size translates directly into cheaper bandwidth costs.

Semantic Markup Improves Findability

People can’t do business with you if they can’t find you. Word of mouth and advertising campaigns can have a certain level of success, but search engines bring a new dimension of visitors to a website.

• Search engines are by far the dominant way that interested clients can find your website.
• Accessibility in a website is closely related to findability. This is a well know white hat search engine optimisation (SEO) technique. An accessible website with semantic markup and relevant content will be rated very highly be search engines. This can have a direct effect on sales leads.

Semantic Markup is Future Proof

By basing a website on public web standards, future access to content can be guaranteed. Unlike markup targeting a particular version of a specific browser (which can become obsolete the next time the browser is upgraded), a website with standards based and semantic markup will always be readable in any browser.

Conclusion

Accessible, cheaper, smaller, faster, findable and future proof. What’s not to love?