Google Blogoscoped

Forum

One Google Redesign Experiment dies ... (+CSS quirk)

Milly [PersonRank 10]

Monday, October 9, 2006
12 years ago2,999 views

It looks to me that the first of the 'vertical column' design experiments, as described here: blogoscoped.com/archive/2006-0 ... , has been killed (at least with that cookie). Unless it's just me?

This one: blogoscoped.com/archive/2006-0 ... still works though, and I've switched my bookmarklet: imilly.com/google-cookie.htm#g ... to that design, for now.

Apart from the daft long-word-truncation issue: blogoscoped.com/forum/68759.ht ... , 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 ;).

Philipp Lenssen [PersonRank 10]

12 years ago #

> 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.

Tony Ruscoe [PersonRank 10]

12 years ago #

Have you actually looked at the logo?


google.com/images/nav_logo.png



Looks like they might be going for a "CSS sprites" approach on one of the design experiements...

Milly [PersonRank 10]

12 years ago #

>>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:


google.com/intl/en/images/logo ...



But maybe the old one was briefly CSS-only? I dunno ;)

dpneal [PersonRank 10]

12 years ago #

Tony, where is that image you found used? and what is a "CSS sprites" approach?

Tony Ruscoe [PersonRank 10]

12 years ago #

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:

yuiblog.com/blog/2006/05/15/pe ...

And here's an article on A List Apart:

alistapart.com/articles/sprite ...

Tony Ruscoe [PersonRank 10]

12 years ago #

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. >>

Philipp Lenssen [PersonRank 10]

12 years ago #

Interesting technique...

Philipp Lenssen [PersonRank 10]

12 years ago #

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...

Tony Ruscoe [PersonRank 10]

12 years ago #

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=" 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...)

This thread is locked as it's old... but you can create a new thread in the forum. 

Forum home

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!