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
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
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?
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
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
helps maintain good accessibility through the use of graceful
degradation techniques, otherwise known as progressive enhancement.
I’m pleased to announce that the ‘mini’ site I built for Whereis has
gone live. Whereis
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…
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
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 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.
I just realised it’s been a really long time since I updated the
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
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
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
XHTML/CSS template builds for the Video Hits website
In the first few months of this year I was fortunate enough to work
developing the templates that make up the new Video Hits
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
VicRoads homepage refresh
Bullseye, and working alongside the talented mr Andrew
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
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
I’ve been loving Gordon Ramsay’s kitchen nightmares
(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
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
from the guys at 37 Signals.
So rather than me banging on about it I’d urge you to read those.