The Handbag has been raised!

How often have you read a snide, bumptious or haughty comment where you feel the only reaction could be a raised handbag, accompanied by the high-pitched mocking call of “oooOOOooooh!”?

If you’re not familiar with the work of Vic and Bob, the chances are that it’s never. Well, hopefully that will soon change, as Hicksdesign has launched a site to fulfill that need you never knew you had to “oooOOooooh!”:

Now whenever you see such a comment, you point them in the right direction. Obviously, feel free to use it on me if say some deserving! ;)

If you’re still confused, this video might help explain the origins of the raised handbag as a retort, (before going on to become a surreal contest):

Playing catch-up

This little side-project was the perfect opportunity to play with new CSS3 toys and HTML5 tags that I haven’t had time to experiment with yet:

CSS Animations: In any webkit browser (Safari, Omniweb, Chrome), the handbag will actually be raised, waved at you, and then lowered. There is a separate animation for the shadow underneath the bag. It’s a little clunky, but that suits the context.
CSS Media Queries: Just as this blog does, the layout changes when the viewport is reduced smaller than 700px. These style rules also govern layout on mobiles (only tested on iPhone so far though). Not currently supported in Camino or IE, but work in everything else.
HTML5 structural tags: Added footer, header and section, with simple javascript to allow their use in IE. Not forgetting to add display:block to each to compensate for lack of browser default styles.
HTML5 audio: In Opera 10.5 (Win), Chrome and Firefox, you should get the .ogg file, and in Safari, the mp3. It won’t be in time with the animation sadly, but I’m hoping that’s something that will be possible in the future. Thanks to the Webble Millers for providing their oooohs.
Web Fonts: Type goodness is supplied via Typekit, namely the gorgeous slab-serif Adelle. Currently a no-show in Opera, but hopefully once 10.5 final is out, Typekit will update their sniffing.

So depending on which browser you use, you’ll get a slightly different experience, but the same content.