Would Google benefit from using web standards?

Google homepage has 5 KB in size and the search results page less than 20 KB. Both pages don’t use standards compliant coding that separates data from presentation. This is not a problem because Google looks the same in all browsers and loads pretty fast. But, what if we used standards compliant code? How should we benefit from that?

I realized if Google used web standards, than this would be a giant boost to the web standards community (which is, by the way, getting more important every day). What is the benefit to Google? What if I said to you that by using web standards Google could save up to 25% of the HTML file size?

Just a quick note

I wrote this article a few months ago, when I did a research on how would Google benefit from using web standards. I meant to show the final code and look of the page, but in the process I realized that I should read carefully the Google Brand permission of use. So, with this on, I couldn’t use the Google imagery as I wanted to show you how the “new” homepage would look like. Well, I used it for the research purposes when I recreated a homepage and result page, but not for public. What you can read in this article is what learned from implementing standards compliant homepage and result page to Google. Enjoy.

What are web standards?

You have most certainly read about web standards. By using the combination of XHTML and CSS we are separating content from presentation elements. So, how can we popularize XHTML and CSS and how will the people — both the readers and creators of web pages — benefit from implementing this into their webs?

The situation here is not so bright. There is a movement that is strongly for web standards and the other that is opposite. In my opinion, there is no alternative in creating a standards compliant page. By using it you are promoting accessibility (page is viewed on many Internet devices), usability (fonts are scalable, there are options for quickly changing the contrast and look and feel of the page), and helping yourself developing web sites more quickly and with reduced cost.

I decided to make a test wondering how Google would benefit from using web standards. I considered if I could make a homepage and search page that has less size (which means it consumes less bandwidth), that has cleaner code which could be changed easier with CSS, than this would obviously mean there is a prospect in it.

Old VS new

Google is mainly using tables for shaping the content of their pages. But today, we can use structural tags like divisions (DIV) for creating placeholders for content or spans (SPAN) for shaping the content furthermore. For displaying results we could use unordered or ordered lists and every result could become a list-item.

I used a modern web structure to re-create a Google homepage and search results page. I wanted to separate data from styling. My other task was to clean up the code and to use classes to re-use some elements in the page structure. This is best seen in displaying results. Google uses this structure:

Instead of this, I’m using this one:

• Title of the web page
  Description of the page …
  www.link-to-your-page.com/ – 42k – Cached – Similar pages

What has changed? First of all (it looks prettier :), I used unordered list to display results. In this case list is behaving like placeholder for the results (in our case list-items). Instead of Heading 2 for displaying the title of the web page in results, I used so I could style the title. I could also used Heading 2 or even Heading 3, but I used Heading 2 for displaying the name of the generated search (in our case we are just searching the web) which is displayed on a blue background on top of the results.

I decided that description won’t need its own SPAN so it is a part of the list-item itselft. For displaying the text that shows the link to the page you are trying to reach I used and this also reflects to the last two links — Cached and Similar pages.

With the CSS I styled the class="title" to show the larger font and class="link" to show different link color than the rest of the page.

The challenge behind the job

There were quite many challenges when redesigning any web page including Google. The first one was how to create a home page, and how to position the elements. Search field had to be centered, but the Advanced Search, Preferences and Language Tools link had to be on the right side of it. Now, they are using tables for that, but I wanted to position the links relatively to the form. This is OK, but when I tried to enlarge the fonts, the links were on top of the search field and search button. The max-width:351px solved that.

The second one was how to recreate the paging on the bottom of the results page. The idea behind the paging is that you can click both on the number and on the “O” letter in the Google logo. This looks great and I used unordered list for that. To each list item I gave the fixed width and a top padding that would shift the number on the bottom. With the background positioning I positioned the image depending on the class of the number (if a number is selected I moved the image so the red letter would show up) or the .start and .end classes for the first and last list-item.

Final challenge was how the page will look in different version of Internet browsers. I tested this one in Firefox and IE and I tried to enlarge the text up to 3 times. I had no problem with Internet explorer when enlarging text, but with Firefox I had a problem with the extra links on the right of the search area. I “fixed” this by using CSS-property max-width that will limit the search field to 351px. Second thing I noticed was the problem in IE that for some reason didn’t position the links where they should be. I used different value for IE with conditional comments.

Test results

As I finished the work on the homepage and result page, I took the time to calculate how much KB was saved in the process. In the case of the homepage, we’ve saved almost 1 KB (4,61 KB before, 3,73 KB after), while in the search result page we’ve saved 2 KB (18,2 KB before, 16,3 KB after). This doesn’t seem much, but you should now that I didn’t use any other saving method (like optimizing CSS or the HTML code). What I did is — I used a different syntax to achieve the same thing (i.e. Google used classes for links, and I removed that. I used instead these code to achieve the same thing #main a {...})

You can explore test files here (no images included at this point).
Homepage – Search result page

The conclusion

When talking about web standards, we are almost always taking as advantage that use of web standards produces cleaner and better code. Is there a better place to test the use of web standards than search engines? Should Google use web standards?

I think it should, and it will most certainly be a giant challenge for whoever will work on that. Not just because they can save at least 1 GB of bandwidth on 1 million homepage loads, but because it will be a giant wind in the back of web standards community and it would clearly state – Web standards SHOULD BE USED, BECAUSE THEY HELP TO CREATE A BETTER WEB!

Research parameters

In order to truly recreate the Google homepage and search result page, I used the same links (not the "#" sign) as in the original document. I also used the Google code whenever possible (if not for design purposes), to get the most precise result.

I would like to hear your thoughts on this topic :)