Google’s Doodle and Why it Hertz my Brain!

How do we love Google Doodles? Let us count the ways.

They’re brilliant. In fact, I even enjoy getting up every day knowing that somewhere in Mountain View there are probably people shouting ‘Woohoo! It’s Robert Heinlein’s Dad’s birthday next week! I wanna make an animated rocket on Google today!

We all have our favorites. I loved the Pacman tribute.  The playable Les Paul guitar. The amazing deep-sea Jules Verne tribute. It’s true, the bar has been set very high.

Google's tribute to Heinrich Hertz - February 22nd 2012

But when Dan Laidler pointed out today’s celebration of the great German physicist Heinrich Hertz, we all did a little doubletake.

Hertz’s work was centered around waves — from light to radio — so Google paid tribute to his 155th birthday by evolving their famous logo into a gently moving wave that echos the Google letter shapes.

That was a nice enough idea, but it was how they made it wiggle that had us scratching our collective heads.

For here we had (arguably) the most technically-adept web company on the planet choosing to animate the wave as a big-ass animated GIF.

More precisely, a 197kb, 49 frame, kinda jerky animated GIF. Brows were furrowed.

The obvious question is “Why?” Sure, we all know support for animated GIFs is ubiquitous, and often the simple solution is the best solution. However, for a company that so vigorously champions the power of HTML5 in particular, and the web in general, it seems like a strange decision.

So rather than just bleat about it — though we enjoy that too — we had a quick play around with alternatives. Here are the results so far.

The CSS3 Only Method

Easily the quickest method to get something working is CSS3. We start out with the simplest imaginable HTML.

Note: For the sake of clarity, I’m only going to show the W3C standard below, but the example contains all the prefixed CSS required.

<div id="wavelength"></div>

The basic CSS setup isn’t much more complicated. We give the DIV width and height, and embed our wave graphic into the background.

#wavelength{
width:380px;
height:223px;
margin: 100px auto;
border:1px #ddd dashed;
background: url(http://sitepointstatic.com/examples/css3/animation/hertz.png);
position:relative;
}

The keyframe animation code simply slides the background image position from the default (0px 0px) to 380px to the left.

@keyframes hertz {
    0% {background-position:0px 0px;}
    100% {background-position:-380px 0px;}
}​

Then we just attach the animation to the #wavelength DIV.

animation: hertz 4s infinite linear; /* w3c standard */

As a final touch I’m using the :before and :after pseudo elements of the #wavelength DIV to provide the fluffy white edges that you see on the left and right sides of the original GIF.

Here are working demos on both Dabblet and JSFiddle.

Run side-by-side with the GIF, the CSS3 version is certainly much visually smoother and file sizes are slashed drastically. Our wave graphic is now under 3kb, meaning — and even accounting for multiple prefixes — we only need a little over 1400 characters of CSS. That’s a combined weight of just over 4kb or less than 3% of the original.

Of course, we can’t pretend that CSS3 doesn’t have its drawbacks.

Google’s audience is as broad as they come, so a method that doesn’t work on older Internet Explorers (pre IE10) probably isn’t an option. Nevertheless, if you ran the GIF as a fallback using something like Modernizr to taget older browsers, I think you’d have a very viable solution.

The JQuery Method

JQuery is the no-brainer way to target both old and new browsers with a single approach. There’s more than one way to do it, but here’s the simplest method we could think of (cheers Harley).

We’re starting with pretty much the same basic HTML and CSS as the previous example — minus the CSS animation code.

Next we create a simple function (waveloop();) that resets the our background X position to 0px.

function waveloop(){
 $('#wavelength').css({'background-position-x': 0});
    });
}

Then we need to animate the background position 380px to the left of screen (hence the minus) like this:

function waveloop(){
 $('#wavelength').css({'background-position': 5});
    $('#wavelength').animate({'background-position': '-380px'},3700,'linear'; 
    });
}

We found 3700 milliseconds is a fairly close match to the GIF timing, though it varies slightly from computer to computer.

At this point our wave animates nicely to the left, but stops after the first pass. We want it to loop without us having to retrigger it each time. The easiest method is to get the function to trigger itself again when it finishes. This is a callback and we can call like this:

function waveloop(){
 $('#wavelength').css({'background-position': 5});
    $('#wavelength').animate({'background-position': '-380px'},3700,'linear', function(){ waveloop();
    });
}

Finally we just need to call our function with jQuery’s document ready function.

$(document).ready(function() {
   waveloop();
});

And that’s it.

Here’s a working demo showing the Google GIF at the top as a comparison.

About half a dozen lines of code to a smoother, cross-browser, lower-bandwidth result. Granted, we need to include the minified jQuery library in the download, but even throwing in that 30kb file doesn’t get us anywhere near 40k, or a fifth of the GIF file size.

And jQuery is really overkill here — I just had other work to finish.

So, what do you think?

  • Did Facebook poach the Google Doodlers?
  • Perhaps you’ve got an even better way to do it?
  • Am I under-estimating the power and beauty of the animated GIF?

Or am I just being a little tough on the poor guys?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://poetro.hu/ Peter Galiba

    I have issues with this code. It doesn’t add the CSS3 properties in an unprefixed way where it is applicable and also it doesn’t support Opera.

  • Breton Slivka

    I thought at first you were going to flinch about the logo being composed of circular arcs instead of sinusoids, and launch into a history lesson. Google has certainly done some clever html5 stuff. Using an animated gif isn’t so strange as embedding a youtube video, which is what they did for the Freddy Mercury doodle!

  • Chris Emerson

    The 2 demos don’t animate for me anyway (Latest FF)

  • Brad B

    The CSS3 animation is a bit jerky; there is a brief flash as the image position is reset and the animation begins again. The jQuery method is pretty flawless however.

  • http://alexmwalker.mp/ Alex Walker

    @Peter – fair call on adding the unprefixed code. On Opera support, are you talking about the CSS3? Was pretty sure @keyframes isn’t supported in Opera.

    Hmm.. Also noticing that Firefox doesn’t like ‘background-position-x’. Looking at that now.

  • Thomas Higginbotham

    Firefox and Opera don’t support background-position-x, so you’ll need to stick to just background-position instead. See http://snook.ca/archives/html_and_css/background-position-x-y

    • http://alexmwalker.mp/ Alex Walker

      Thanks, Thomas. Fixed now I think.

      http://jsfiddle.net/xplo69/ZjbUJ/113/

      Though it works, I have to admit I’m not 100% sure how:

      $(‘#wavelength’).css({‘backgroundPosition’: 5});

      Background-position should require 2 values to work, but that borks in FireFox. How it knows I want to animate the X and not the Y position is not clear.

      But hey, it works.

      • http://niteodesign.com Blake Petersen

        x first, then y. if only one variable, assumes x.

  • Matthew P.

    I think it’s good that Google doesn’t feel they are above using basic technologies on their pages, animated gifs are by far the most foolproof method to implement a simple animation.

    also the entire page is still under 400kb with the gif which is a very reasonable size, plus the page is perfectly usable while the image loads.

    • http://niteodesign.com Blake Petersen

      I beg to differ. I feel using a gif is a cop out when they very well could have used modern technologies and polyfill for the unsupported browsers. Google has a vested interest in the advancement of the web, they should be making use of the latest technologies as opposed to “falling back” on the older, less attractive, more bloated options. Show developers what the SHOULD be doing, not what’s easiest. This goes back to developer laziness. Why learn and use something new when animated gifs still work?

      And for a page with 1 image, a dynamic head nav and a search box, 400 kb is ginormous. Google is a huge proponent of the streamlined, light-weight web as they stand to gain the most from these modern practices actually being implemented, and…. yet… this happens. Pretty egregious when you consider their evangelism on the subject.

      • Nick Body

        I’ll take the developer who knows how to keep things simple when nothing complex is needed over the developer who insists on using use the latest and shiniest even if it is complete overkill for the situation.

        The “shiny version” requires complicated fallbacks if javascript is not supported or the required CSS-properties don’t work. The GIF… it just works in browsers all the way back to IE4 or less.

      • Jake

        Nick Body said: “it just works in browsers all the way back to IE4 or less.”

        Why, as professional developers, do we CARE about anything older than IE7? Even MS (finally!) killed IE6.

        I’m not a bright-shiny-object person, but let’s stop worrying about fewer than 3% of web wanderers. Last year, we tested our a$$es off and learned that people using OLD browsers don’t spend any money – not a single sale in 4 months – even when the site is presented just for them. (We turn $18MM annually on a $40 average transaction so there were a few transactions during this period.)

        So we no longer spend design/develop time on any browser older than IE7 or contributing less than 3% of network-wide traffic. Not one second on IE6 hacks, not one moment worrying about Opera. And we offer a nice plain graphic to non-java folks. Easy peasy.

      • Justin

        Haha, Jake, that is AWESOME! Such interesting information.

        Nick, seriously? IE4!? Should we also accept input to forms on our websites by allowing people to fill fields on typewriters and physically mail them to us?

  • Aaron Kahn

    The jQuery example doesn’t seem to want to animate in Firefox 10.0.2. I arrived here because I was really irritated by the half-ellipses instead of sinusoids.

    • http://alexmwalker.mp/ Alex Walker

      Should be good now, Aaron.

  • http://twitter.com/missambear Amber Gordon

    Awesome guide. Thanks! Happy birthday hertz!

  • scottdaris

    One nice thing about this crappily executed big gif with terrible semi-circles is that it kind of pulses and creates an afterimage shakiness. When the Googlers all stood around and commented before live launch, do you think they saw this and kept it intentionally as a props to old-world quirkiness with all of its craziness in early experimentation? I mean, come on, look at the thing – it shakes!

    • Raghav

      Exactly!
      +1

  • Nick Body

    I don’t really see the issue with the animated GIF. It is supported in even the most antiquated browsers. It runs just fine without javascript. It’s cheap and easy to make and requires virtually no testing in the plethora of browsers we have nowadays. The number of comments here stating that it doesn’t work properly in this-or-that browser attests to that.

    • Chad Garrett

      From my computer, Chrome on Windows, the GIF weighs in at a higher download size AND animates jerky. The javascript version is butter smooth and comes in at less than half the size.

    • http://alexmwalker.mp/ Alex Walker

      @Nick >> “The number of comments here stating that it doesn’t work properly in this-or-that browser attests to that.”

      To be honest, that’s more to do with me writing a 1000 words, coding two working examples — inside the 24hr period the doodle was live — AND doing my day-to-day work.

      Give me a dev team, a week’s notice and task me with coming up with one good solution and I’m pretty confident I’ve got it covered. ;)

  • dustin

    I’m trying to think why any of this matters…
    It was up for one day, and they probably didn’t have much time to execute it. Who cares? Hertz wouldn’t.

  • http://www.deline.com Jim DeLine

    This doodle is simply a series of circular arcs of various sizes, stuck on vertical stalks. Use this doodle for Euler’s birthday, not Hertz’s. Euler discovered the circle; Hertz discovered the sine wave. BTW, it wasn’t until the 1960′s that the 20 meter band was known as 14 Megahertz, not 14 Megahertz.

  • http://www.sprabs.com sprabs

    It would have been cooler had it randomly drawn arcs of varying colours and lengths so that users would have spent minutes trying to watch it till the end only to realise there is none.

    • Alex

      Absolutely! I’m surprised that wasn’t their starting point.

  • http://handshake.co.za/ Grant

    I’m more concerned with the fact that they are not waves of any kind that I’ve ever seen. I might be wrong but aren’t waves usually sinusoidal?!

  • Laura

    They used a gif because it WORKS! There are many reason why people use older browsers and nothing is more frustrating than wanting to view a website that won’t load properly because the “experts” don’t care about people who use older browsers.

    @Jake: Maybe they didn’t purchase during a test period because the websites were built with the latest technology that their older browsers couldn’t render!

    I build sites using what works on the most browsers, not the latest and greatest (and usually more complicated).

    • Justin

      “They used a gif because it WORKS!”

      Yeah, so do other solutions. Except better. Come on, now, Laura…catch up.

  • Bertolato Veronon

    Great stuff Alex. I am a little perplexed by the replies though, quite a few seem seriously anti-the-whole-exercise. From my perspective I feel your doodle is streets ahead of the big G’s. It also serves to show how far we’ve come with browser capabilities. Most should agree that one common trait with all previous doodles was the WOW-factor, technology notwithstanding. Here I have to agree, it looks a little sub par. I also noted much dissent that almost seemed fanboyish in nature (read a few Apple blogs and got a feel for that kind of quasi-religious fervor). As regards choosing most appropriate technology, living in 3rd word countries that extra bandwidth for the GIF would have made a difference. Generally 3rd world countries charge a enourmous premium for data (go anywhere in Africa and you’ll experience 1st hand)… then there is the speed issue. The Google search page has always been my benchmark, even at the slowest speeds, to see quickly if my internet connection was not problematic(think GPRS & EDGE speeds… not 3G and higher). This is a great test because there is not much to pull down… that doodle, was totally against the Google – plain page ethos. Don’t get me wrong, I have great respect for the big G and think there doodles are just brilliantly innovative… but, in this case Alex’s is much better.

  • http://jackthedog.us/ Victor Brodt w JacktheDog

    As often the case with Google, simple just isn’t simple.

  • http://crowdogs.com Peter Schreiner

    You obviously have a lot of time on your hands.

  • http://crowdogs.com Peter Schreiner

    Alex, I apologize for my first sarcastic comment.

    This really is quite clever. And a witty title to go with it.

    Thank you,

    Peter Schreiner