Blog Standard Stuff

My esteemed colleague Chris McEvoy apparently had ‘one of his moments’ (he has these, you know) last Sunday evening and decided he was fed up with having to search Google for some of Google’s more hidden features (oh the irony!), such as Answers, Suggest and so on. So he created Simply Google.

Is it simpler?

Mmm, debateable. The very thing that people say makes Google work is its simple interface. Wanna search? Here’s the search box, people! What Chris did was put all the various different Google search options on one page, making it far easier to learn what options are available, but it’s not for everybody. Whether you like it or not, you cannot deny that he’s ticked off that ‘findability’ box on the checklist.

The CSS makeover

Just as the Simply Google page was getting noticed by various people, Chris approached me to ask for some help in kicking it into standards mode (it was a table-based layout with non-breaking spaces and various examples of markup abuse to achieve presentational effects). Ironically, I had thought of doing just that and was going to approach him with the idea of creating a ‘Simpler Simply Google’! So, that’s what I did. There are a few points I just wanted to make about the CSS make-over:

• I didn’t redesign the look and feel in any way. I kept to the blueprint (with just one exception - changing the location/style of the footer text)
• My aim was to rebuild without tables and make it 100% valid XHTML, strict (achieved)
• The biggest issue I had was with the search forms not having label elements. In the original version, there was a direct link to the site that the search facility related to. I could have replaced the link with a label. Instead, I decided to use both. For screen reader users, the label element provides a little more contextual information than before, but for sighted users the link will take them to the web site. The problem would be for users who try to click on the label and expect it to give focus to the search input element. It does this, for a second, but then the link behaviour takes over and loads the page requested. My feeling is that if it looks like a link, people will only click on it to use it as a link. Is this wrong? As I said, I did this with the intention of keeping to the original design.
• The labels for the search are after the input. This is another thing that I would normally not do, hence I wanted to explain:
  • The intention was that when this page is viewed on a handheld device that does not apply the CSS (or any other browser that does not get CSS for whatever reason), the search boxes should line up nicely. If the label elements were in front of the input boxes, with no CSS they would create an unsightly ragged effect :
    
  • A downside of this is that the tab order is a bit strange on a fully CSS-capable browser (try it out for yourself). Should I have placed higher importance on the tab order or on the appearance of the page with no CSS?

So, that was my CSS make-over of Simply Google. I’m interested in your thoughts/feedback.

This entry was posted on Thursday, April 13th, 2006 at 1:59 am and is filed under Web Standards. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.