
Ben the Bodyguard: Gorgeous HTML5 Website - bjonathan
http://benthebodyguard.com/
======
sgentle
In case anyone's not familiar with Javascript/HTML/CSS and is curious how this
works, it's actually pretty simple and elegant.

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>

~~~
mortenjorck
Javascript's onscroll event is a wonderful tool. It's one of the best ways to
leverage an extremely common and expected interaction pattern (scrolling down
a web page) to do interesting and unexpected things. I used it to create a
sort of paginated-persistent-bookmark navigation for my new portfolio site
earlier this year (in profile, if you're curious).

~~~
GavinB
Clickable: <http://rclayton.net>

I think it's very elegantly done. Kudos.

~~~
etcet
is beautiful in firefox but it looks like this in my default chromium:
<http://imgur.com/NVP1i.png> D:

~~~
mortenjorck
Wow, I thought I had tested it in Chrome. Thanks!

------
mathias
Calling it an “HTML5 website” is a bit of an overreaction IMHO.

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.

~~~
watty
It's really depressing seeing HN use HTML5 as incorrectly as my managers...

~~~
lwhi
I blame Steve Jobs; I honestly do.

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.

~~~
rmc
The fact that the HN submission says "Gorgeous HTML5" is also evidence that
this is aimed at Apple users.

------
jasonkester
Might want to start it scrolling automatically, or otherwise do a better job
of communicating that there's anything to see on the page.

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.

~~~
tomedme
The scrollbar on the right wasn't a bit of a give-away?

~~~
rudd
To be honest I had the same problem, but did eventually scroll. I think my
initial hesitation to scroll was because the top of the page looked so much
like it could be an entire landing page, with prominent twitter, facebook, and
email links. Of course (now?) there's also a little popup that says scroll,
which if clicked scrolls you to the beginning of Ben walking.

------
gregschlom
This is awesome.

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.

~~~
vaksel
personally I found it really crappy user experience.

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.

~~~
MarkSweep
I think a good improvement to address this problem would be to split up the
background image so that the top can be shown while the bottoms bits are still
loading. A 3MB single background image is not a great experience.

~~~
eru
Can't you just use a graphics format that loads from top to bottom?

------
trotsky
Very neat design, no question. Kind of the antithesis of the functional web,
though. It's like a flash only website without the flash.

------
jacquesm
If this is the future of the web count me out.

~~~
J3L2404
That seems a little harsh, he obviously has something interesting as it is on
the top spot of HN, although he should have finished the product first.

Coming soon usually elicits the same response,

...yawn... move on.

~~~
arethuza
But it's top because of the design of this "Coming Soon" page - not because of
what the product does.

------
nhangen
I think it rocks. Scrolling through was a great user discovery process and the
story/art combo had me hooked.

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.

------
DamonOehlman
I have to admit I was hoping Ben would fall in a open manhole cover towards
the bottom of the screen, but alas he did not.

Just shows you can always make improvements, even on something as clever as
this ;)

~~~
nikcub
I was expecting a community safety message about the dangers of walking in the
middle of the road at night

------
whiskers
I love the idea - the style, the artwork, the way the story progresses...

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.

------
JoachimSchipper
It looks very nice. A bit heavy on the FUD, though.

------
jscore
Any idea how they did the graphics? Is it straight photoshop + illustrator or
something else?

~~~
aw3c2
The tools are irrelevant, you could do that with many alternatives to those
proprietary programs. Contact details are on the bottom of the page,
"imprint", if you still feel like you want to know.

~~~
jscore
Wow, thanks for very helpful and useful reply. I wasn't aware we were having a
philosophical discussion on what's irrelevant or not in life.

~~~
sorbus
Asking what tool was used to make an image is, often, like asking which text
editor was used to write a program. Unless whatever tool they used had some
unique capabilities to make it easy to create images in the same style, it's
irrelevant (because someone skilled enough to do it with one tool could do it
with another).

~~~
jscore
Ok, so you're saying that you wouldn't have any problem manipulating some
complicated photos (changing backgrounds, masking out certain elements,
changing color levels, creating alpha mask, adding drop shadows to text,
touching up a person's face, blending several layers together so that the
layer below comes through to the layer above, etc, etc) in Microsoft Paint
instead of using Photoshop?

After all, they're both just "text editors" as per your example.

~~~
tedunangst
Considering all the effects are done via CSS, there's no reason the images
couldn't have been made in MS Paint.

------
uast23
Hm. Not a lot of sites tell a story. This one does with a suited dark theme.

------
kingkawn
Ben is a decent fall-back when Leon is still under copyright.

------
evo_9
I suddenly have the urge to watch The Professional.

------
Vivtek
It took a _long_ time to load and gave no indication that it was doing so, so
when I realized I could scroll down, Ben wasn't actually there yet. I wondered
why that guy was standing there talking on the phone.

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.

------
sjs
There are HTML comments in the JavaScript at the bottom of the source,
sandwiched in between the GA tracking code and some Google optimizer stuff. I
didn't get any JS errors, so is that legal? Are the comments stripped before
the text content of the script element is processed? If so that's pretty wild!
Never knew that was possible.

~~~
zerohp
In the bad old days of early web development, browsers that didn't understand
the script tag would display your code in the document. They allowed html
comments inside the script tag as a workaround for it. We always had to write
<script><!-- //--></script>

<http://javascript.crockford.com/script.html>

~~~
sjs
Ah, I had seen that written with //<!-- to open the comment and always
wondered why people would settle for old browsers displaying // in the script
tag, looks like it wasn't required and was just bad code written by people who
didn't know what they were doing. So it goes. :)

------
mrinterweb
How many Frenchmen do you know named Ben?

~~~
nhangen
The name is Benoit.

------
tlrobinson
Neat site, but I'm mostly curious how they implemented any sort of security
software for iOS. I didn't think iOS provided APIs for doing anything
interesting in that respect.

 _"Protecting your passwords, photos, contacts and other sensitive stuff on
your iPhone® or iPod touch®"_

------
buro9
Great.

I want it.

But what is it and where do I get it?

~~~
J3L2404
Under construction and AppStore I assume.

------
alextebbs
Beautiful site, but did anyone else think the image of a naked person tied to
a bed being whipped was a little overkill (its about halfway down the page)?
Not sure why the devs needed to include that one.

------
mark_l_watson
Nice site! I have been using Dojo, but I read Mark Pilgrim's HTML5 book. My
hope is that Dojo will eventually wrap HTML5, providing a smooth migration for
me since I am not a Javascript/UI expert.

------
bound008
subscription email:

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

~~~
JoachimSchipper
Well, it's not like it actually matters. Or like sending a HTTPS link over an
insecure channel like e-mail would help...

~~~
aristidesfl
precisely

------
ses
I really like this, I'm not usually one to go for flashy looking websites but
it communicates the idea very effectively in what is clearly a unique manner.

------
lurchpop
The only reason i knew there was more than meets the eye was the title was
"gorgeous html5 site". without knowing that i probably would've bounced.

------
GiraffeNecktie
So the fact that people are using HTML5 to do what people were doing with
Flash ten years ago is somehow interesting?

~~~
mathias
They’re not using any of the new HTML5 features (except the DOCTYPE). It’s all
HTML, JavaScript and CSS.

------
markkat
I wouldn't want to visit that site regularly. It looks nice, but it isn't easy
to navigate.

~~~
dmitri1981
It's an introduction to a service, I don't think it is meant to be visited
regularly.

------
mangool
Love the interactive design, nicely done.

------
tonycore
Excellent concept. Great execution.

------
Andrewski
Mystery meat is never gorgeous.

------
trezor
I see html5boilerplate.com is getting reused properly :)

------
Jackel
I think he did a great Job! Go Ben!

------
shareme
I have a question why did the website creator only use pngs?

I mean you could have used svgs and a js library like raphael to use svg
instead to decrease the load times, etc..

------
chopsueyar
Gorgeous?

