Google Doodle: Bouncy Balls Aren’t HTML5
When Google changes its logo in honor of a holiday, someone’s birthday, or just for the heck of it, it sometimes gets some chatter. When Google created the Pac-Man logo, articles appeared of people trying to figure out how it worked, or commenting on tech support calls within organizations from users who blamed their own IT team, or even notes about lost productivity.
Today’s Google Doodle has gotten a lot of traction in the web standards community and even sites that sometimes talk about web standards, like Mashable (Google Logo Turns into Animated Particles) and New Scientist (What’s Google’s mysterious doodle?). Those aren’t the interesting bits of coverage, however.
Not HTML5?
Christian Heilmann took the time to reverse engineer the code and discovered that the balls were nothing more than divs with a border radius using script to move around the page (Google goes bubbly – interactive logo today on the UK homepage (plus source)). As he notes, the effect isn’t exactly HTML5. The script moves and resizes the divs, but that isn’t unique to HTML5 and could be done in HTML4 and support IE6. While CSS3 is used to create the balls, that could have been done with other techniques, and CSS3 is still not HTML5. Interestingly, Google blocked Opera in its browser sniffer, which Bruce Lawson explained could be bypassed by telling Opera to report itself as Firefox.
HTML5 canvas
Rob Hawkes wasn’t impressed, primarly because Google did not use HTML5. He set about rebuilding the Google Doodle in the HTML5 canvas element, and did so in just a couple hours (Recreating Google’s bouncing balls logo in HTML5 canvas). If you have a canvas-capable browser, check Rob Hawkes’ version.
SVG
Robin Berjon borrowed (stole?) Rob Hawkes’ code to use a base for re-creating the effect using SVG (Google’s Bouncy Balls, in SVG). See the SVG version in all its (somewhat chunky) glory.
Who Called it HTML5?
When New Scientist tweeted its article about the Google Doodle, the tweet read: “Could the Google doodle herald HTML5?” They could be forgiven simply for not being a web-focused magazine. Pocket-lint reported it was written in HTML5, but they are also not dedicated to web development. It seems the rumor started in multiple places via multiple tweets via multiple users, and probably owing to the HTML5 doctype on the page, which implies HTML5 but doesn’t actually make it HTML5.
If you didn’t get to see today’s Google Doodle, or you prefer to surf in Netscape Navigator 3.04, then check out this screencast lovingly stolen from Christian Heilmann:
If you haven’t tried it yet, try moving the browser window around and watching the balls react.
Update (Sept 9): AreGooglesBouncingBallsHTML5.com — Need I say more?
4 Comments
Reply why would Google implement this in HTML 5? It's not supported in most browsers that people currently use, and apparently it wasn't necessary
Reply I think that's exactly why they didn't implement it in HTML5. Google's approach works on a broad range of browsers. But somewhere someone decided it was HTML5 and then a couple people opted to try to recreate it as HTML5, which is neat, but not production-ready.
I guess I wasn't clear in my post that my issue isn't with how Google implemented it, but instead how people interpreted it.
Reply Thanks for highlighting my HTML5 canvas version of the bouncy balls logo. Just a FYI: My code is open-source on Github so Robin Berjon didn't steal it. :)
Reply So what you're saying, Rob, is that I can't incite a fight between the two of you? Crap. I was counting on swooping in and stealing both your stuff after you took each other out.
Aw well. Great example, though. Thanks for creating it. It helped give me a topic to write about today.
Leave a Comment or Response