It looks to me that the first of the 'vertical column' design experiments, as described here: http://blogoscoped.com/archive/2006-03-26-n51.html , has been killed (at least with that cookie). Unless it's just me?
This one: http://blogoscoped.com/archive/2006-09-22-n72.html still works though, and I've switched my bookmarklet: http://www.imilly.com/google-cookie.htm#googleanon-se to that design, for now.
Apart from the daft long-word-truncation issue: http://blogoscoped.com/forum/68759.html#id68818 , I still prefer it to the main design.
And while we're on design trivia, I notice that Google are now (as of about a week ago, I think) feeding their logo graphic in with the CSS on the SERPS, instead of with the main page code, i.e.: "#navbar div,#logo span{background:url(/images/nav_logo.png) no-repeat;overflow:hidden;height:26px}". I wonder why?
(Not on the home page though, which also uses a .gif rather than a .png: go figure ;). |
> I notice that Google are now (as of about a week ago, I think)
> feeding their logo graphic in with the CSS on the SERPS
Hmmm. I can see the CSS definition, but the logo on the page is still a plain graphic. I get this:
<img src="/images/logo_sm.gif" width=150 height=55 alt="Go to Google Home" border=0 vspace=12>
(The attributes width, height, border and vspace are all deprecated – wow.)
Nor is it good style to replace the logo graphic with CSS – it should be an image because pages ought to deprecate nicely when it comes to content (and the word "Google" is important on that page, and there's alt-text for browsers with images disabled). A simple
<h 1><img src="/images/logo.png" alt="Google" title="Go to Google Home" /></h 1>
would do the job. |
Have you actually looked at the logo?
http://www.google.com/images/nav_logo.png
Looks like they might be going for a "CSS sprites" approach on one of the design experiements... |
>>Hmmm. I can see the CSS definition, but the logo on the page is still
>>a plain graphic. I get this: <img src="/images/logo_sm.gif"
Right now, so do I!. But I think they must be chopping and changing, because I first noticed it only because it 'defeated' my no-logo Proxomitron filter, which I had to re-write to attack the CSS line. I'm *almost* sure that wasn't in the source code then (about a week ago).
Hmm, maybe it was connected with the now-defunct 'green bar' experiment (which was my default). The new experiment uses a small non-CSS logo too: http://www.google.com/intl/en/images/logo_xs2.gif
But maybe the old one was briefly CSS-only? I dunno ;) |
Tony, where is that image you found used? and what is a "CSS sprites" approach? |
dpneal, it's referenced in the SERP CSS styles – as pointed out by Milly above.
A "CSS sprites" approach basically uses one image for a number of UI elements and then uses CSS to offset and clip the image so that only a portion of the image is seen by the user. Yahoo have been using this technique for a while. It's referenced here:
http://yuiblog.com/blog/2006/05/15/peeling-back-the-homepage-beta/
And here's an article on A List Apart:
http://www.alistapart.com/articles/sprites/ |
And here's a snippet from that Yahoo post which explains it nicely:
<< On the CSS side, notice the extensive use of CSS Sprites. Though not new, this technique is one of the best ways to optimize a site. By using sprites instead of individual images, 15 separate home page image calls are combined into a single HTTP request. Every HTTP request has a significant negative effect on performance — therefore reducing requests should always be a priority. >> |
Now that I think of it, I used that a long time ago to do hover maps. You'd load two large JPEGs containing all the hot spots, one version normal and one version highlighted (which you preload). Then you'd have an image map with JavaScript onhovers. And then you'd clip the hover image over the other image so that it would just display the hovered part. Works nice for any shape (back then even in Netscape 4, though you had to use different scripting and offsets for NS4 and IE4), rounded or not, though the shapes may not overlap... |
FYI – it looks like they've now rolled out this CSS sprites approach on the SERP. After performing a search today, I briefly saw the text "Go to Google Home" appear before the logo appeared.
Here's the HTML code they're using for the logo:
<a id=logo h ref="http://www.google.com/webhp?hl=en "><span></span>Go to Google Home</a>
And the relevant CSS for the sprites used in the logo and page links:
#navbar div,#logo span{background:url(/images/nav_logo.png) no-repeat;overflow:hidden;height:26px}
#navbar .nr{background-position:-60px 0;width:16px}
#navbar #np{width:44px}
#navbar #nf{background-position:-26px 0;width:18px}
#navbar #nc{background-position:-44px 0;width:16px}
#navbar #nn{background-position:-76px 0;width:66px;margin-right:34px}
#navbar #nl{background-position:-76px 0;width:46px}
#logo {display:block;width:150px;height:52px;position:relative; margin:15px 0 12px}
#logo span{background-position:0 -26px;position:absolute;top:0;left:0;width:100%;height:100%}
(Also, in IE 6.0 I'm not getting a hand/pointer cursor when hovering over the logo, which is pretty bad usability for a link...) |
