I don’t know if anyone else noticed, or indeed when it actually happened, but I know that a couple months ago, you couldn’t successfully resize the Google results pages using the ‘Text Size’ option in Internet Explorer.

Purely by accident, I opened a Google page with my text size set to ‘largest’ and lo and behold, they have modified their HTML to allow for resizing of fonts. Even their AdWords ads resize according to the browser preference.

Looking at the source, it looks like they are slowly moving towards a CSS-based layout/design, although they still have a ways to go. Incidentally, I did a copy of their layout with CSS for an internal search engine that I built and it wasn’t that hard at all, their design even lends itself to being done with DIVs, UL/LIs and A tags, styled up with CSS.

So here’s their style definition on a results page now-days;

body,td,div,.p,a{font-family:arial,sans-serif } 
div,td{color:#000} 
.f,.fl:link{color:#6f6f6f} 
a:link,.w,a.w:link,.w a:link{color:#00c} 
a:visited,.fl:visited{color:#551a8b} 
a:active,.fl:active{color:#f00} 
.t a:link,.t a:active,.t a:visited,.t{color:#ffffff} 
.t{background-color:#3366cc} 
.h{color:#3366cc} 
.i,.i:link{color:#a90a08} 
.a,.a:link{color:#008000} 
.z{display:none} 
div.n {margin-top: 1ex} 
.n a{font-size:10pt; color:#000} 
.n .i{font-size:10pt; font-weight:bold} 
.q a:visited,.q a:link,.q a:active,.q {color: #00c; text-decoration: none;} 
.b{font-size: 12pt; color:#00c; font-weight:bold} 
.ch{cursor:pointer;cursor:hand} 
.e{margin-top: .75em; margin-bottom: .75em} 
.g{margin-top: 1em; margin-bottom: 1em}

As you can see, they are not defining a font size for a lot of their elements, which is a good move, as it will inherit the browser settings automatically. One thing that I did notice is that the fixed-size fonts they are using (“.n a” and “.n .i”) are only applied to the numbers used for the links to different pages of results. I am assuming that they have done this because otherwise there’s the potential that thei cool little string of ‘o’s will be messed up from font sizing 🙂

Good Work Google! Good to see more of the big-boys embracing CSS design, I just hope that they continue down this path and have a completely CSS-driven design in the near future, browsers are almost up to speed so that it’s a valid move for them I think.