The Age website search field causes me to pause for a second every time I use it. It’s not a huge issue and the system works perfectly satisfactorily (the search results could do with some fine-tuning, but that’s another story) but for some reason the design of the search text-entry field defies convention and bears more of a resemblance to a ‘raised’ drop-down style form component than the usual ‘recessed’ text field. This, coupled with the fact that the button is joined to the text field, doesn’t look like any other buttons across the site and is all placed below the main navigation always seems to catch me out and make me have to think for a second before proceeding.

Instead, I’d suggest The Age redesign their search field to look ‘recessed’, in alignment with the current convention for text fields. Leaving the standard formatting would be preferred, but if they really had to override this with an image, at least make it look similar and not like form elements with different functionality. In addition I’d recommend they move the button a little further to the right so that it does not appear to be a single element.

Interestingly, this approach has been taken for the search results page, making it much more usable (I’d probably drop the ‘Search here…’ text though, as the label to the left makes it somewhat redundant):

Finally, I’d move the search field to the top-right of the page in a similar fashion to The Guardian site, again following common convention and making it much easier to find.

Andrew and I decided to join forces in order to offer a more complete end-to-end service to our clients, with me heading-up the strategy, IA, design and user-experience side and Andrew taking care of the back-end code and CMS development (but we both do a bit of everything in reality).

Check out the new Thirst Studios site and let me know what you think.

The site launched this week and has already had a phenomenal response, with a rush of dream job hopefuls causing the site to crash in just two days of it’s release.

Besides looking great with a nice design, great imagery and smooth flash work there’s a lot going on ‘under the hood’. This is easily the biggest site I have worked on in terms of ‘whistles and bells’. It makes use of over 30 scripts, libraries, frameworks, plugins and API’s, and just how the team enabled all of these to work in harmony across the site whilst still adhering to web standards is really quite an achievement!

Hats off to Matt, Horia, Glen, Anton and Mark. Great work, guys.

In their own words:

SpicyWebDesigners.com features some of the hottest web design talent around the world and strives to showcase them and inspire others with what is possible in the world of web design.

It’s really nice to have been considered worthy of a listing amongst other great designers such as Chris Dawson and Elliot Jay Stocks!

Here are my answers to Luc’s questions.

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?