Improving the world's most visited webpage

Monday Dec 10 2007

This post is about the world's most popular homepage. It's a really simple page but it's done remarkably poorly in terms of frontend web development. It's pretty much beyond me how a multi billion corporation manages to make such a poor effort when it comes to the most visited webpage on the planet. I'm of course talking about Google. I suppose it's safe to mention their name. Just about anything else seems to be off limits when it comes to the branding of which is why I decided to work my way around the guidelines for this post in order to prevent a very unwelcome C&D.

i-marco search

The world's most visited webpage is a very simple page. There's not all that much on it. A menu bar, a form with one textfield, two buttons (one for the normal people and one for the lucky few) and a handful of links. Not a huge challenge you would think. Apparently it is. In this article I'll go through the sourcecode of the page, highlight the most remarkable atrocities to the noble art of web development I found in it, discuss some possible reasons for some of the approaches followed and finally present my own attempt at improving the page.

Dark Matter Pro: a premium photoblog template.

Affiliate program available

Highlighted flaws on the search homepage

No doctype
No doctype has been defined in the page. Even if it was intentional to force the browser into quirks mode there's still not really a valid excuse not to have one. There's other ways to force a browser into quirks mode though it's beyond me why you'd want to.
No language has been defined in the HEAD section
Too much hassle, I guess.
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 onload="sf();if(document.images){new Image().src='/images/nav_logo3.png'}" topmargin=3 marginheight=3>
Right.... CSS has been around for a while but ancient attributes are used. And without single or double quotes enclosing them. onload? meh. Just like with the quirksmode issue there may be a deliberate reason for this. Still I think this should be handled differently. More about that later.
span span span eggs and span span span bacon and span with some span
Long series of links have been marked up with <span> tags enclosing them. I think unordered lists would have been somewhat nicer?
Tons of links of secondary importance at the beginning of the page without a way to skip to the important part: the search form.
Very nice for the disabled indeed!
Other aspects of accessibility
Epic FAIL. Try it yourself
All attributes are without quotes enclosing them
Only numeric values can go without quotes but even for those I'd recommend using them. Nasty!
<center>
Valid in HTML 4.01 but ... seriously...
A table to markup the search form
No tabular data to be seen on this page guys!
<br><br>
Should only come alone. And only in poetry too.
<font> tags
And only used to set sizes too.
Sloppy code and lots of dumb validation errors
Have a look. Being 100% anal about validation may or may not be to your taste but using non-existent attributes, a runaway </a> tag, no quotes anywhere and unbelievably dumb stuff such as <div align=right id=guser style="font-size:84%;padding:0 0 4px" width=100%> ? Looks like a disgrace to me. We're talking about the most visited webpage on the planet here!

I have no words for how incredibly poor this simple page has been coded up. Some of these things may have a somewhat plausible explanation but even with that in mind I'm pretty sure you'll all agree it's... well... a piece of trash that's not worthy of the status it currently has on the internet.

A possible explanation for some of this mess

Even though this page isn't quite a schoolbook example of how to properly markup a webpage there may be an explanation for parts of this mess. If you view the page with all CSS disabled, something interesting surfaces: The page looks almost the same!

Besides the ugly browser default font and a small flaw in the menu bar, the completely unstyled page looks remarkably close to the styled version. This is where a reason for the crappy approach may lie. Maybe the creators wanted the page to look as close as possible to the intended design in every browser on the planet, including ancient ones such as Netscape 2.0?

Even though hardly anyone uses these browsers, a missed visitor means missed business. Of course this explanation still doesn't justify half of the flaws found on the page but it definitely is an interesting observation.

Trying to support all browsers on the planet is an admirable thing but there is a better way of doing this: Serving a different (simplified) version of the page to ancient (non-css) browsers. Even if that's too much of a hassle, a single CSS based page can be made to be perfectly usable in these browsers. It's one of the things I tried to accomplish in my own take at the most popular page on Earth.

The remarkable resemblance to the styled page when looking at the unstyled one does NOT address the flaws in accessibility and the horribly sloppy coding style. At least it doesn't in my book!

The i-marco search page

First things first: my take on the world's most visited webpage. I took the original dotcom page as my example. Individual country versions of the original may look different and have different code. For this exercise I did not take these into account.

Obviously I made the page validate. I choose HTML 4.01 Strict as my doctype as I saw no immediate benefits in using XHTML. Making the page validate wasn't a particularly tough challenge.

Secondly, I used strictly only for styling. As any modern web developer should. Since there's no tabular data to be found anywhere on this page there's absolutely no reason to party like it's 1996 on it.

Third, I took as much care as I could to make the page accessible. One of the first things you'll notice when looking at the sourcecode is the fact that I moved the menubar all the way to the bottom of the page. These links are of secondary importance. This page is all about the search form which is why this should come first. The page furthermore complies with all guidelines I deemed relevant. In case you feel I forgot something feel free to let me know about it in the comments. I love learning more about accessibility! The page passes all tests on cynthiasays.com, very much unlike the original it was based upon.

Fourth, I choose to not put CSS and in separate files. The reason for this is the fact that a page as popular as this particular search page needs to be tweaked for . CSS and Javascript in separate files would triple the amount of requests that will hit the servers that host it which is obviously a very undesirable thing. My sample page is uncompressed but in case mine were to get as many hits as the original I would have compressed it as well, just like the original. For this article I choose to keep the page readable.

The Javascript doesn't use the most modern way of attaching an event but I wanted to keep this part as compact as humanly possibly while keeping things completely unobtrusive. The code in this page is the most compact example I could come up with working in all major browsers I could get my hands on.

Even though the unstyled page doesn't look as close to the styled version like the original does, I still think it's very usable. In fact it's arguably MORE usable than the original despite the visual difference. In case this would be deemed absolutely unacceptable my stance on it is: serve legacy browsers a different page! The styled page may not be 100% pixel perfect to the original but I thought the minor differences it still has with the original and among different browsers would definitely not be showstoppers of any kind in case this page were to be deployed for real. I do realise some people may disagree with my practical attitude towards 'pixel perfectness'. To each their own!

Finally: the page has strictly separated style, markup and behaviour except for everything being in one document, which has a valid reason as I pointed out before. I have changed all link destinations and the company logo in order to not upset the creators of the original by violating their branding guidelines. Under the more menu you'll find some interesting destinations by some of my extremely talented co-workers. The search form can be used to search my blog.

Closing notes

By no means I'd dare claiming that my version of the page is the best humanly possible. I'm sure there's a lot of room for improvement and I'm welcoming any suggestion you may have to make the page better. I'm sure I can make it better myself if I keep tinkering with it for a lot longer but I thought it's definitely good enough to make this post and bring my points across. I had fun doing this little exercise and who knows it will make some managers wonder about whether it may be an idea to invest more in good frontend web developers.

Comments and suggestions for improvement are more than welcome! Web development is and will always remain a continuous learning experience.

Small update: In this post I didn't want to change any of the design on the original page because I wanted to focus solely on the web development side of things. Therefore I took the design 'as is'. Andy Rutledge did an excellent writeup on improving Google strictly from a design point of view. A highly recommended read!

Happy searching (and web developing)!

The i-marco search page

bookmarking

Commentary

Join the discussion! Leave a comment through the comment form below!

Got something to add to this?

Feel free to leave a comment on this site. You can use Textile and Emoticons. Your email address is only used to show a gravatar. Please stay on-topic and use common decency. Spammers will be shot in front of a live studio audience.

If you plan on posting code, use pastebin please and post a URL to the code. The comment processing doesn't deal very well with code. Sorry for the inconvenience.

Human comment spammers: don't bother posting your crap here. Comments are moderated and I won't let any of your shit through.

Remember personal info?
Yes
No

Trackbacks

If you have an interesting related post on your own site you can leave a trackback. As they say: 'a little AJAX a day keeps the spammers away' which is why you'll have to click below to generate a trackback key. The key will be valid for 15 minutes and can be used only once.

 

  • Featured Links
RockySomewhere near the Orion NebulaBookalicio.usGolden Gate BridgeThames River BankJackie and mePimpin' it