Web Site Reviews: Gmail Home Page

December 27, 2006 on 2:16 pm | In CSS, SEO, Usability, Web Site Reviews |

Everybody knows and most of us love Gmail and are intimately familiar with its index page, shown at left.

Many of the web designers amongst us would also love to know what the HTML code under the page is like, so we have stripped it naked, looked at it and had some private thoughts about it… we share them with you below.

It is our hope that you will spend a moment or two to express any significant thoughts you have on the article with a comment. Where beneficial to visitors, we will respond to comments.

Before we get down and dirty, we must tell you that we have analyzed the Google Groups page earlier in our parent site, so we already have a fledgling idea about Google’s page code appearance. With that background, our tour of the source code of Gmail’s index page now begins.

We start off with the styles. In contrast to the Google Groups’ style sheet, the main Gmail style sheet is well organized with no clumsy patches of commented-out code. It is embedded instead of external, which is alright considering the fact that the rest of the web site is in JavaScript. It does not contain styles for any of the HTML tags, and lists only class styles with their properties.These styles do not appear to be in any particular order.

Comment: It would be preferable for the styles to be in order of appearance or alphabetical order.

The page uses a simple table-based design and the code is neatly formatted. At one point where a table is closed and another opened, it is pleasant to see a comment explaining why this was done (the reason pertained to a peculiarity of Internet Explorer).

But alas, there is a bit of clumsy CSS in the middle of the HTML code. We note with suspicion two style sheets placed in the section with nothing in between.

Comment: Placing a style sheet in the body section is not customary and perhaps even weird. That said, there is no reason to have the two contiguous style sheets. All this has the smell of patchwork repair.

We are surprised that Google, with its mountain of cash and army of programmers, has not taken the trouble to make its behind-the-scenes workings neat. This is not the case with other large Internet companies like Yahoo, whose code is better by a degree of magnitude. (Check back after a few days for our analysis of a certain Yahoo page.)

Surprise Bonus: An Analysis of the Displayed Page

The Layout:

The displayed page is very good from the usability angle.

It is not ‘busy’, meaning that there is no clutter and no multitude of links to confuse and consternate the visitor (for instance, there are only six links above the fold).

There is an invitation to try the Gmail mobile phone interface: it contains a list of benefits and a call to action, which is good, except that the order of these two features is flawed.

Comment: We think the benefits should have come before the call to action and not after!

The page has been optimized for 1024 pixels width, which conforms to the latest design recommendations.

The Page’s SEO:

The page has a humongous 26,500 backlinks (according to Yahoo Site Explorer), many from government sites like the New York Public Library and authority sites like Wikipedia.com.

There are links to a Privacy page and a ‘Terms of Use’ page.

The page contains many excellent secondary keywords such as ‘account’, ‘attachment’,’ pdf’, ‘photos’, ‘megabytes’ and ’storage’.

Comment: For the above reasons, the page is nicely SEOed.

This concludes our analysis of the www.gmail.com page. It is important that you you add your opinions on this analysis through our comment form; we look forward to receiving and responding to them.

---