Ben the Bodyguard: Gorgeous HTML5 Website
benthebodyguard.com
benthebodyguard.com
Ben is just an image positioned in the centre of the screen using a CSS property called "position: fixed", which means he doesn't move even when the content scrolls.
The walking animations are created using a technique called CSS sprites, where instead of having multiple images, you just create one and move it within the frame so that only one image is visible at a time - sort of like a film strip. The CSS property to do that is called "background-position" - and you can see an original image here: http://benthebodyguard.com/images/bensprite.png
The whole thing is driven by a function called "scrollEventHandler", which is registered with the javascript "onscroll" event, so it's triggered every time you scroll. It updates the animations for Ben, the thief, train, textboxes etc based on how far you've scrolled in the document. Source here: http://benthebodyguard.com/js/speechBubbles.js
The other animations (flickering lights and such) are all animated gifs, and the background is just a really long image: http://benthebodyguard.com/images/city-background.jpg
I think it's very elegantly done. Kudos.
Other than the DOCTYPE, there’s not much “HTML5” to it. It’s just good old HTML, JavaScript and CSS, wrapped together in a document that happens to use the HTML5 DOCTYPE.
It goes in cycles on here.
EDIT: I believe Steve Jobs is largely responsible for popularising the idea of HTML5 as a Flash replacement. He's also popularised the idea that HTML5 is technology that can be used now, when the situation is actually a lot more complicated. I think that without Steve's input, HTML5 wouldn't have reached the wider public's consciousness in the way it has - and there'd be far less misuse as a result.
That is categorically untrue. There is a W3C specification which defines exactly what HTML5 is (or more correctly will become).
The specification is a proposal, but this still doesn't mean that the term 'HTML5' is able to acquire new meaning.
This is because it's technical shorthand used to describe a group of technologies - and the group of technologies it represents can be specified precisely.
If most people use HTML5 to refer to all new and upcoming web technologies the meaning changes. One person using it that way is an error, nearly everyone using it that way changes the meaning. You can’t impose definitions top-down.
While I agree with this concept - I don't think misuse of technical terms changes the meaning of those terms.
In this case, lack of education, misinformation and confusion are driving the misuse of the term. It won't change what HTML5 actually is, because we have an officially sanctioned definition.
HTML5 hasn't always referred to all upcoming web technologies. It's misuse is recent - and I think Steve Jobs has encouraged the change.
I find being asked for an 'HTML5' website problematic; a lot of clients use the term simply because they understand it's a buzz word - and don't actually know what they're asking for.
I think we'll have to disagree.
<!doctype html>
Reference: http://dev.w3.org/html5/spec/syntax.html#the-doctype http://ejohn.org/blog/html5-doctype/
I got all the way back here thinking it was just a pretty splash screen, after trying for 30 seconds to click on things above the fold with no success.
Only after reading comments did I go back to see if there was anything I had missed. I suspect a lot of people clicking through will simply hit the back button and remember nothing but having seen a slow-loading picture of a face.
The long load times are the main problem. That arrow will pop up only after everything has loaded. That takes a few seconds (more than almost any other popular website) even with a fast connection. Oh, and scrolling at any point before everything is loaded will result in a broken experience (the speech bubbles might not appear or the street might be invisible).
They either need to find a way to make it load faster or they might want to actually prevent you from scrolling before everything is loaded. It’s not elegant, but it would at least prevent some confusion. (The good thing is that even if you don’t scroll the page works. Sort of. Well, it’s a bit cryptic but all the functionality is there.)
They could have put the same message in two paragraphs of text and a bullet-point list, and I would have quickly glanced over it and forget it the same minute. Instead, I had a lot of fun reading each point, several times.
It's amazing how user experience IS the key.
I'm on FIOS, and it loaded extremely slow. So for 20 seconds I was staring at just the top image and the person's icon...and wondering how crappy they are to have so much black space.
Coming soon usually elicits the same response,
...yawn... move on.
I really don't have a need for the service (maybe I do, not sure), but I do like watching the way people market their services. This is something unique...well done.
Just shows you can always make improvements, even on something as clever as this ;)
However I think that clicking on the "scroll" popup should either:
- Cause a slow continuous scroll all the way to the bottom of the page
- or (even better) take you between each speech bubble and reappear so it can be clicked again.
A really unique approach. It was nice to see something genuinely fresh and captivating instead of the usual "Web 2.0" style sign up pages.
After all, they're both just "text editors" as per your example.
Perplexed, I scrolled up a little and ... Ben was standing there, waiting for me. At which point the page became extremely cool. But I almost missed it.
"Protecting your passwords, photos, contacts and other sensitive stuff on your iPhone® or iPod touch®"
I want it.
But what is it and where do I get it?
Thank you for connecting with Ben the Bodyguard. In order to receive updates on Ben and his app for iPhone and iPod touch, please confirm your security clearance...
(followed by NON-HTTPS link) ... LOL
I mean you could have used svgs and a js library like raphael to use svg instead to decrease the load times, etc..