Rearranging page code & advanced CSS techniques to improve SEO

September 8, 2008

I was conducting a review of some XHTML and CSS templates for a client recently when I came across an interesting SEO concept that I hadn’t heard of before. At first I was skeptical (and I still am a little), but upon closer inspection I started thinking that there could be something it it. Not only in terms of SEO, but accessibility too. The articles I found describing this technique date back to 2004-5 and the fact that I’ve not found anything more recent on the subject just further fuels my skepticism. Anyway - I thought I’d post my discovery here and see what the wider web design world had to comment…

So what is it? Well, the idea is this: Rather than structuring your HTML in the usual order of header/navigation, content and footer, you build the pages such that the main content appears first, with the navigation and footer underneath. Then, using CSS to style the page you pull the navigation/header back up to appear above the content when viewed in a browser.

The articles I found describing the technique promote the idea that doing this will raise the relevance of your page within search engine rankings since it’s believed that some spiders only read the first few characters, or give more weight to content appearing towards the top of a page. You can see the articles here:

Tech republic’s ‘Rearrange page code to raise text relevance’article. Brook group’s ‘Putting Content First: SEO and Advanced CSS’ article. It does seems to make sense, but does anyone know of any evidence to support this?

While this is all very interesting from a SEO point of view, what interested me more was the idea that this method of marking-up a page could actually aid usability and accessibility for those using assistive technologies like screen readers, or people with old mobiles or PDA’s that can’t handle CSS very well. Traditionally we responsible web designers have added things like ‘skip to content’ links within our HTML markup to help such users, but this negates that need since upon arriving at a page coded like this, the user is presented with the article title and the article immediately without the need to skip past the logo, navigation etc. The flip-side of course is that they would require a ‘skip to navigation’ should they want to navigate away from the page quickly.

There is another argument I can think of against this method and that’s down to good usability through consistency. By this I mean most, if not all pages are currently marked-up in the traditional way that I mentioned before: header/navigation at the top, then content and then the footer. As a result, most people visiting websites using assistive technologies will be familiar with the current structure, expecting to find the header information and main navigation at the top of the page and used to the idea that they need to skip past this to reach the content. As such, re-arranging the HTML as these articles suggest could actually do more harm than good as it’s an unconventional approach and inconsistent with most other sites.

Have any of you ever actually implemented this technique anywhere? Does it work? What are your thoughts?

Darebin libraries website

June 13, 2008

Having experienced many online offerings from local governments and local councils in the past, as well as having worked for a few, I had pretty much resigned myself to accepting that most are going to be rubbish in terms of antiquated code using tables for layout and inline styles, bad interface design, little or no regard for usability or accessibility and, more often than not containing outdated content.

Whatever the reasons for this, be it that the website is perhaps considered a low priority, that there’s no dedicated resource allocated to the website or that it’s simply too hard to get people to agree to a redesign, the sites’ users seem destined to lose-out.

This has always amazed and concerned me considering the broad, diverse user base that these organisations must have, and the importance of the content to a lot of people.

I was pleasantly surprised therefore, by the Darebin libraries website that I discovered this week. Not only is the site nicely designed with a simple, clean interface, but it’s nicely coded too, with semantic (x)HTML, clean CSS and carefully implemented javaScript that helps maintain good accessibility through the use of graceful degradation techniques, otherwise known as progressive enhancement.

Good work Darebin libraries.

I Vote For Art

May 20, 2008

I’m really pleased to announce the launch of my latest website - I vote for art. It’s a new online gallery, where you can buy and sell art, as well as vote for your favourites.

I Vote For Art homepage

Based in Melbourne, Australia the site showcases some fantastic contemporary work by local and international artists.

An example detail page

Thanks again to the wonderful Andrew Gunstone for assistance with the back-end programming and checkout functionality. Andrew, you’re a legend!

So get on over to I vote for art and get yourselves something cool to decorate those walls with!

Judging the International Web Awards

May 20, 2008

I’m delighted to announce that I have been asked to be one of the judges in this years’ International Web Marketing Association WebAwards web design competition.

Now in its 12th year, the WebAwards is the premier annual website award competition that names the best Web sites in 96 industries while setting the standard of excellence for all website development.

It’s an honor to have been called upon to contribute to the judging of the competition this year. Stay tuned for the results!

Oh, and entries are still open so why not submit a site or two?

Whereis products

May 15, 2008

I’m pleased to announce that the ‘mini’ site I built for Whereis has gone live. Whereis products explains some of the new features at the recently launched new whereis.com, as well as explaining how you can make use of whereis’ maps across a range of products including mobile and in-car GPS devices.

I built the site from scratch in (x)HTML and CSS to be as standards-compliant and accessible as the design would allow.

The help pages that I authored for Whereis are also now live over at the Whereis main site. You’ll need to click the ‘help’ button in the top right and then the ‘Help contents’ links to find it.

Stay tuned for details of the flash demo videos and associated player that I built for Whereis too. It’s not live just yet…

BTD quiz #2: Usability issues resulting from a staggered web application release

May 14, 2008

Here’s another little usability conundrum for all you user experience designers out there. This question was asked of me recently while designing an online transactional web application for a company here in Melbourne and I’d like to hear any suggestions you may have about how best to tackle this issue…

The client wanted to release their shiny new web app as soon as possible. The reasons for this from a business point of view were obvious, not least to get to market first ahead of the competition! In order to do this however, the plan meant releasing a basic version of the app with a limited feature-set first, with the intention of releasing updates over time, adding features within various sections of the application.

At the time of launch the full app architecture had been decided upon, with the final app to consist of a series of about 7 sections, each to contain a number of features. Some sections would contain all or some features available now, whereas others would not contain any until such time that they were developed and released later.

My question is this - Should the app be released with:

The full architecture in place with all sections and labels visible to the user such that they can get a feel for what will be the full app, even though some sections will be empty at launch (These pages could be populated with content about the features that will redide here eventually). The full architecture in place with all sections and labels visible to the user, but ‘disabled’ or ‘greyed-out’ until such time that they become ‘active’ and contain content. Only sections with active feature content visible, with a view to ‘turning-on’ sections and their relevant labels/buttons as the content is added.

Helvetica

May 13, 2008

I watched Helvetica last night which is a fascinating documentary about typography, graphic design and global visual culture.

It looks at the proliferation of one typeface (which will celebrate its 50th birthday in 2007) as part of a larger conversation about the way type affects our lives. The film is an exploration of urban spaces in major cities and the type that inhabits them, and a fluid discussion with renowned designers about their work, the creative process, and the choices and aesthetics behind their use of type.

I know, I know… A film about typefaces and letters doesn’t sound all that engaging but I assure you this really is! I’d say it’s a must-see for anyone that works with type. It’s not only informative and inspirational, but features some good interviews with some of the most well-known and influential graphic designers in the world.

As someone that uses type as part of my work every day it really got me thinking about typography (and how little I currently know). It’s prompted me to learn more about type and take a lot more notice of how it works in the world around us.

Google local business listing problems

May 8, 2008

I recently set up a local business listing for myself in Google to both help my customers find me and improve the SEO of my site.

It works really well and if you do a search for “Web Designer Melbourne” up I pop.

Take a look yourself.

Did you see me? 5th from the top. Pretty good, eh? The only slight concern is that it links to someone else’s site! My listing in Google local business points to an IT solutions company in India!

Does anyone know how this is possible - and more importantly - how can I rectify this?

Work update

March 25, 2008

I just realised it’s been a really long time since I updated the portfolio section of this site. Not without good reason though, and it’s not because I’ve been slacking off and enjoying the Melbourne sunshine (the chance would be a fine thing). It’s because most of the projects I’ve worked on of late have either been internal web applications (so not available for public consumption) or have not gone live yet. As such I don’t want to publish anything visual just at the minute, partly because I’m not really allowed to in some cases but also because I don’t want to spoil the launches for my clients.

That said, I’m enormously proud of some of the things I’ve been working on of late so I wanted to share some of the more notable pieces to give some insight on what I’ve been up to:

Information architecture and usability consulting for Computershare

It’s been a while, but late last year I worked with Next Digital providing information architecture and web usability consulting services to help them develop a unique online application that Computershare could offer to their clients. Whilst I can’t divulge exactly what the app does, it contains features not too dissimilar to those on the recently released BBC website. The application provides a fully customisable, easy-to-use interface with many more features than those offered within their existing tool.

Needless to say I really enjoyed working on this one. Developing an online application has it’s challenges, especially concerning usability when ‘ajax’ functionality is involved. I’m really happy with the solution we delivered though, and so is the client. You can’t say fairer than that!

XHTML/CSS template builds for the Video Hits website

In the first few months of this year I was fortunate enough to work withBullseye developing the templates that make up the new Video Hits website forChannel Ten.

In addition to current web standards compliance and good accessibility, the code I produced had to conform to a unique series of templates developed by the guys at Bullseye which support the full suite of Channel Ten’s web properties. Whilst this posed it’s own small set of additional challenges, it will definitely prove worthwhile, making future modifications much easier.

As far as I understand, the design for the site was done in-house at Channel Ten.

VicRoads homepage refresh

Also for Bullseye, and working alongside the talented mr Andrew Gunstone, I developed a new home page design for VicRoads. The solution has yet to go live and is only intended as an interim solution, bridging the gap until a complete overhaul of the VicRoads site is conducted some time soon.

Poor performance in meeting the objectives of both site users and certain business objectives, coupled with a recent re-branding exercise prompted the redesign. The challenge was in generating substantial improvement without altering the information architecture and making only subtle changes to the content and layout.

The solution was a new page layout with content positioned according to priority, formulated through careful consideration of the user and business objectives, detailed research into site usage statistics and reviews of past usability studies.

I’m pretty happy with the new design and layout. I can’t wait to see how it performs compared with the existing page. I’ll keep you posted…

Various work for the new Whereis website

Since late last year I have been involved with Sensis, working on a series of projects to support the new Whereis which is due to launch within the next few months.

Providing mainly CSS/XHTML and flash development work I developed the pages that will go to make up the products (whereis.com/products/) and help (whereis.com/help/) sections of the site with, as always, particular consideration for web standards, accessibility and usability. The design of each of these sections was produced in-house.

Update - 03/04/2008 - The products section has now gone live in beta

Further to these complete sections I also produced a small number of flash elements to aid with usability across the site, including the new advertising panel to feature within their maps and a fully-functioning flash video player to deliver ‘new features’ screen casts, which I also produced.

…and a couple of wedding websites

Ours and Lisa and JP’s

Lessons learned from Gordon Ramsay

March 22, 2008

I’ve been loving Gordon Ramsay’s kitchen nightmares series’ (the British ones were much better than the American ones - much less ‘reality TV’ shenanigans).

Each week Ramsay helps a struggling restaurant to turn things around, always with the same basic method of combining determination, attitude and drive with keeping things simple, manageable and meaningful to the customers.

The show got me thinking about how these principles can be applied so similarly to the principles of good web design and running a small business. That’s when I noticed this post and this post from the guys at 37 Signals. So rather than me banging on about it I’d urge you to read those.