Tim Hatch

Mozilla Firefox Start Page 11 Nov, 2004

I should preface this with the disclaimer, I don't hate Google. I love their search engine. I’m not picking them because they’re a BigCo (although I think they are) or because it's “easy” like bashing Microsoft's web design principles (excusable because they have a big site, unlike this single page). I noticed something that doesn’t jive and I'm simply documenting the problem and offering a fix, so I feel it’s being constructive.

I installed Firefox 1.0 at the office, and saw a checkbox at the end of the installation called “Use Firefox Start as my Homepage.” Sure, I thought, why not? Well, it turns out that it’s not Firefox Start, it’s Firefox Start at Google.

While I don’t see the connection directly, I did see that the page looked kind of trendy, and I was sure it used CSS. Then I disabled stylesheets and everything fell apart. It felt like a table. A table with lots of presentational images.

Any assumption of a css-based design was firmly disspelled as I started manually prettyprinting the html code. I don’t have the dissected code with me at the moment, so I just ran it through HTML Tidy to make it somewhat presentable. This is part of the result:

This is just a small part of the page. There are 11 tables total, nested as far as three levels deep at one point. Am I the only one that finds it ironic that the browser with the best standards support is reduced to rendering table soup? (In Quirks mode, no less!)

So I set out to rectify the situation. Here’s what I came up with:

Of course, the “Images Disabled” one is subjective, so I’ll let you see for yourself in a second. To prove the figures I used, check my version and Google’s Version (edited to point to relative paths to images...filesize remained constant). Here are screencaps of them in case you don’t care about the code itself. I won’t claim that the pages are identical, nor pixel-perfect — take it as a proof-of-concept of how things could be done, given the original source files. (Would you believe I can’t find an alpha-transparent version of the new firefox logo?)

All of these images (except light.gif [ripped from the original] and firefox3b.png [tweaked from an existing logo]) were created from scratch in Photoshop, using the real version as a template for dimensions and colors. They were then exported as PNGs, and run through pngcrush and pngquant to reduce the filesize to something more manageable.

But what if the user has images disabled? Does it flow the same, and does it make sense? I’ll let you judge for yourself (be sure to enlarge the images)

Mine only has one image, which has a null alt tag (it’s the Firefox logo in the upper right, I figured once I made the heading “real,” that I certainly didn’t need it reading "Firefox Start Page/Firefox Logo/Firefox Logo" (unlike the original), and gave it no alt text. I don’t know what’s up with the doubled "Firefox Logo" text — unless I’m mistaken, that’s kind of a no-no.¹

While I am impressed with the smooth gradient on the text “Firefox Start” in Google’s version, I think it’s largely unnecessary. The page can be a lot smaller without it, and at least this way it matches the user’s antialiasing settings.

Conclusion

A number of odd design decisions were made on Google’s part in the creation of this page. I’d just be happy if it didn’t have images-of-text, personally.

Conspiracy theories abound about how Google is possibly going to cobrand some part of Mozilla and make GBrowser...but hopefully the homepage of that browser will take advantage of standards as much as the Mozilla homepage does.

If anyone from Google wants to open a dialogue about why this page was designed the way it is, I’m definitely open to it. The markup in my example is released to the publid domain with no warranty.

Footnotes

1. What To Avoid ... Using the same “alt” text for an image when it appears several times on a page. If it is repeated, consider using a null value on all but the first instance of it. For example, alt="". This way a screen reader will ignor the repeated image making the page less cluttered for the screen reader user to listen to.

   http://www.rnib.org/xpedio/groups/public/documents/publicwebsite/public_alttext.hcsp