Latest Google ‘Balls’ Logo – An Experiment in HTML5?

Many of you will have opened your Web browser this morning to find the Google logo made up of many tiny balls of colour bouncing into place above the search box. Move your mouse pointer through the balls of colour and they’ll jump away from it and then bounce back once the pointer has moved far enough away. In addition to moving your mouse through it, you can also shake your browser window to see a similar effect.

Usually, Google change their logo for special occasions and to mark past events (most recently the 25th Anniversary of Buckyball and Mary Shelley’s 213th Birthday).

Interestingly, it seems that today’s logo change is not linked to any such event – at least Google hasn’t linked the logo to a search for any related event as it usually does. It looks as though Google is either playing with HTML 5 (see below) just to show how well it works in their browser (Google Chrome), or it’s a late birthday celebration (Google was incorporated on 4th September). One theory from TechRadar commenter markroll60 suggests that the coloured dots are related to Philo Fansworth’s ‘image dissector‘ which transmitted its first image on 7th September 1927. Google is yet to confirm or deny this.

HTML5 – Impressive visuals without Flash

Google Balls Logo using HTML 5

If you’ve not seen or heard much about HTML5 you might want to checkout this great video by Google Software Engineer Brad Neuberg (small warning: it’s 40 minutes long!).

HTML5 is the next version of HTML code standards and will allow Web developers and designers to move away from using Flash on many occasions when animations, movement or interaction is required.

The W3C (World Wide Web Consortium) helps to define the standards for Web technologies such as HTML and CSS. They provide an online tool to check that the code you’ve created ‘validates’ to the standards defined.

If you run the current Google homepage through the tool it reports that there were ‘Errors found while checking this document as HTML5‘. The tool is set to automatically detect what version of HTML is being used, so whilst it looks like the Google homepage (and its balls logo) is using HTML5, it’s not quite valid HTML5 code (37 errors and 2 warnings were detected).

Performance in different Web browsers

Google Balls logo in Internet Explorer 8Whilst it seems that today’s Google logo works in most Web browsers we’ve tested, it does seem to work less well in some. For example, in Internet Explorer 8 the coloured balls don’t grow in size, they just move away from the mouse pointer (see screenshot on the right).

There are also reports of it not working on Linux and in Safari on Windows. From our office it appears to run smoothest on the latest version of Google Chrome 6. Is this the reason Google’s chosen to display this type of animation – to highlight the speed of Chrome against its competitors?

Anyway, it’s quite impressive if your machine and software are both up-to-date, but we’d like to hear from anyone who’s encountered problems with it or has a different opinion about its origin or purpose.

UPDATE: It seems that Google has confirmed (via Search Engine Roundtable) that the ‘balls logo’ isn’t related to a Google birthday (as reported by some outlets).

Instead, it seems to be linked to an event hosted by Google tomorrow at San Francisco’s Museum Of Modern Art. It’s expected that new features including AJAX powered results, 30 results per page and ‘results as you type’ will be announced. Search Engine Roundtable also note that the logo is HTML5 powered. More here.

    4 Responses to “Latest Google ‘Balls’ Logo – An Experiment in HTML5?”

    1. It’s not HTML5 just plain old javascript

    2. Will O'Hara says:

      Hi Thomas, thanks for your comment. Whilst I agree there’s Javascript used to get the effect, as far as I can tell the page is using HTML5 somewhere and the W3C tool seems to identify it as HTML5 (although it’s detecting errors). I’m not sure how the W3C tool could detect that unless there are HTML5 elements? Any ideas?

      TechRadar and Gizmodo seem to both suggest that it’s using HTML5 too…?

      http://www.techradar.com/news/internet/google-s-latest-doodle-is-a-balls-up-714868
      http://gizmodo.com/5631535/what-does-todays-google-logo-mean

      It’d be nice to see an official Google blog post later today to explain it fully :)

      UPDATE: The page is using the correct doctype for HTML5, < !doctype html>
      More here: http://dev.w3.org/html5/spec/syntax.html#the-doctype

    3. Pudny says:

      I agree with Will it does look to use some HTML5 and CSSJSVG 5.

      With this and the recent HTML5 collaboration with Arcade Fire’s it’s looking like a good indication that HTML5′s time is coming a lot sooner than most people expected (even giants like yell.com are sneaking it in)… fun times.

      The performance in different Web browsers is down to them not supporting the CSS3 border-radius property ect… mainly Internet Explorer, coz it’s pants :)