Page differentiation

29 October 2004


A Blue Perspective: Page differentiation

Users prowl the Internet like lions on the savannah, hunting for information morsels, assessing prey for suitability before casting it aside. That's why we have navigation – it helps those predators navigate their terrain and find what they're looking for.

Of course, a site that has standardised navigation is a good thing. Once users hit a site, they want to be able to quickly learn to get around and only do it once, otherwise they're wasting their time. OK. Standardisation = good. But sometimes change is good too.

In this age of broadband, cached CSS files and lean code, web pages start to flash by as people devour them; their browsing instincts honed to a fine edge to seek out titles, anchors and keywords. Therefore, it's more important than ever that you let them know where they are, and that they're progressing in their journey. Obviously navigation, menu items and breadcrumb trails are all designed to do this logically and methodically, but we are essentially visual creatures, and there's much to be said for the "feel" that a page exudes via its generally perceived layout, imagery and colour.

It's all well and good to differentiate pages by saying that "You are in section 1" and "You are in section 2", but there's no immediate sense of movement between the two pages, no sense of progression. While it is a very minimal, some might say boring web site, Wasserwerke Zwickau does a superb job of presenting many pages of textual information. If it weren't for the range of header images used, you could feel that you were moving without travelling; that you hadn't switched pages at all.

On a smaller scale, Lousco Labradors also beneftis from page differentiation. Try switching from "Our Dogs" to "Puppies". The header does a wonderful job of conveying the change between the two sections (particularly given that they forgot to highlight the navigation choice). By contrast, on the same site the change between "Home", "About Us" and "Contact" makes you feel that something is missing.

Often, the lack of differentiation is caused by budgetary constraints – when you don't have the time to sculpt points of difference, or the money to buy them (e.g. photography) – but CSS is the ideal platform for those small touches that can help create depth and movement within your web site, such as the shifting palette between sections on New Ezra's site. (Although it doesn't have to be that dramatic.)

As with all design, true quality can only be achieved by attention to detail. By taking the time to add those individualistic touches, your sites can end up more browsable and make your users' experiences more enjoyable.


, ,


  1. 1/12

    Rob Mientjes commented on 29 October 2004 @ 01:43

    Differentiation indeed is important. My site lacks it, but my navigation does have a nicely coloured flag indication where you are. It's in the subtleties :P

  2. 2/12

    Dan Bowling commented on 29 October 2004 @ 05:08

    I agree with you whole heartedly. I think it is important to stress, though, when this is relevant. Small sites do not need this nearly as much as larger ones, and the differentiation can be highly effective if it is even only the breadcrumbs or a change in the navigational appearance. Setting a site up on a budget (of money or time) can often lead to partial implementation of many good practices. Take my personal site as an example, during its development I considered having the header image linked to meta keywords dynamically derived from the post titles in wordpress or through my manual input on static pages. This proved to be too much work for me, and rather than partially implementing it, it failed to come to fruition-- which I think was a good choice.

    There is nothing worse than inconsistent consistencies. By that, I mean that if I had implemented this feature in the blog, but not in the contact pages or archives, for instance, my users would have grown accustomed to it, and missed it when it was not there-- something far worse than a lack of the implementation as a whole.

  3. 3/12

    Dan Bowling commented on 29 October 2004 @ 05:11

    Ok, now that I posted that, I remembered one more thing.

    You implemented a sort of differentiation for your posts by accompanying each with a unique graphic. Could you comment on how well that has served you and your audience?

  4. 4/12

    Zyb commented on 29 October 2004 @ 05:51

    Oh my God, how did you stumble over the Wasserwerke Zwickau page? *lol* Great for a German user to see someone from Australia looking at such a site and thinking "I'm gonna use that for an example"! ;)

    Anyway: I personally like color-coding and/or Icons for differentiation of subareas of large sites. On the other hand: as little as I like the huuuge header graphics which came to be in wide use this year*, even less I like the perpetual changing of them. On your example sites, the change doesn't even mean anything except change, it's just a collection of artsy graphics in no way related to the contents of the subsite.

    Especially on New Ezra's site, though, I find the change quite annoying, because going together with the change of color and order in the header graphic I also expect a change of the text which is written on it. But it's the same everywhere - which takes me about three clicks through the page to notice and be annoyed at because I just waisted a lot of subjective time to figure out, exactly which elements of the header do change and how and which don't. Information completely irrelevant to me and my expections of the presented contents - but sort of forced into my attention.

    This may sound a little drastic, but I'd like to stress (and I'm completely confident that you all agree on that ;)), that site differentiation has to have easy to grasp meaning and shouldn't be necessary to figure out in itself. (With the sole exception of this very site perhaps, where I take delight in trying to figure out what an article is about just by looking at the little Icon on top of it ... :)).

    Cheers, Zyb

    * The Zwickau- and labrador-pages reveal one of many problems of these headers, actually: they chew away necessary space. There's evidently not enough space for the menus, so they fold out above the graphics or even above crucial informational text and make it unreadable. Maybe that's a topic for another critical article ... ;)

  5. 5/12

    Brian Biddle commented on 29 October 2004 @ 06:05

    Ok, I have to admit I read the article and changed the Lousco navigation to highlight the page you are viewing. The first version of the site did do just that, but after some changes on the nav I forgot to re-apply the "pageon" class. Thanks for the tip.

    Regarding the pages where the header does not change (home, about, contact). This was due to lack of additional photos. Plus, the head shot was taken of the primary Labrador at Lousco and the owner wanted it featured multiple times.

    If time were not a factor, or the client was offering more money, I would like to go back and change those 3 pages to reflect different images, perhaps on the contact page I could have added a Labrador barking.

    Brian B.

  6. 6/12

    The Man in Blue commented on 29 October 2004 @ 10:56

    I expected as much Brian. That's why I mentioned budget as a constraint to making the perfect site.

    Quite often I've found myself lacking in materials for a commercial site, and are then faced with the prospect of hours of work designing graphical elements which, although adding to the site, aren't core requirements and probably won't get implemented on a budget.

    Zyb: although content is king, and these sorts of touches often considered extraneous, we all know that design isn't merely the textual presentation of information. The way it is conveyed can also affect a message.

    In Wasserwerke Zwickau's case, the imagery -- although probably stock -- helps to brand the site and the company, lending it a bright, clean atmosphere and acting as a counterpoint to the slabs of information.

    Dan: although I haven't had much feedback on the graphics I make up for each entry, I feel it's handy to differentiate each one so visitors know if something new's popped up, and also to break up the large swathes of text with a bit of visual interest. It also distracts from the shortcomings of my writing :o]

  7. 7/12

    Jason G commented on 30 October 2004 @ 04:19

    I think there needs to be at least some level of visual differentiation, even when designing on a budget. I consider myself a very educated web surfer, as I am sure most people visiting your site do.

    One thing I have had happen to me, happens when opening many links from the same site in multiple tabs in my browser. If the pages look too similar I sometimes have to scroll a bit down, or read, when switching through tabs to find out if I am on the page I want to be on. (Normally this is a minor hassle, brought on by my own need to ingest as much information as possble without missing links I might typically forget to go back for.)

    When there is visual differentiation between the pages, this process is much faster.

  8. 8/12

    Trovster commented on 31 October 2004 @ 00:33 does a great job of distinguishing different sections with subtle colour changes and a different header image. Definately feels you've moved somewhere new.

  9. 9/12

    David House commented on 2 November 2004 @ 05:31

    There's a danger in taknig this too far: page-to-page differentiation is great, let the user know where they are, site-to-site differentiation is also importan. In other words, your site must hang together.

  10. 10/12

    Dan Bowling commented on 3 November 2004 @ 04:10

    Taking this into the blog atmosphere specifically, what do you think there is enough value to merit the energy needed to do an icon for each post such as in this site? (I am not criticizing The Man In Blue at all, in fact, I believe it is the best route, but energy intensive). It seems that putting that much extra work into a blog defeats the major advantage of quick and easy publishing.

    Could the same end user effect be achieved by simply having a post category icon, similar (but better implemented) to slashdot? It seems that a category solution would ease implementation and speed up content posting; is this a more viable solution of the mainstream?

  11. 11/12

    The Man in Blue commented on 3 November 2004 @ 09:17

    It's probably not very efficient for me to do the icons for each of my posts. They do take a while (though not the crap ones), but can also be a good diversion from the writing process.
    Given that I don't post every day, it's not that great a problem.

    Definitely some sort of categorisation system would work, but then again, maybe weblogs don't require differentiation. It is useful as an exploration marker on infrequently visited sites, but weblogs are strange creatures of the Internet and don't necessarily play by the rules.

  12. 12/12

    luke dorny commented on 9 November 2004 @ 08:39

    One would hope that the actual visual structure of text changes on every page naturally, along with the different content (floated imgs and what-not) to reflect the change in location. In other words, on normal sites doesn't this occur naturally?

    Overall this topic is a pertinent issue on sites that don't have page specific imgs and other content (like a boring newpaper site without imgs at all, for example).

    Btw, Great site, Cameron. Innovative!

  13. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed