Ben the Bodyguard: Gorgeous HTML5 Website

by bjonathan • 16 years ago

586 97 16 years ago

bound008• 16 years ago

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

JoachimSchipper2• 16 years ago

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

aristidesfl• 16 years ago

precisely

JoachimSchipper2• 16 years ago

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

gregschlom• 16 years ago

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.

thingie• 16 years ago

But still I have no idea what this stuff actually does. Some encryption software? Maybe.

pmorici• 16 years ago

Software to secure your sensitive information on your mobile device from my reading of it. It's obviously aimed at people who aren't interested in implementation details. Wether or not it uses encryption is an implementation detail.

vaksel• 16 years ago

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• 16 years ago

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.

brown9-2• 16 years ago

Seems like the site is just getting hammered.

uast23• 16 years ago

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

buro9• 16 years ago

Great.

I want it.

But what is it and where do I get it?

J3L24042• 16 years ago

Under construction and AppStore I assume.

trezor• 16 years ago

I see html5boilerplate.com is getting reused properly :)

jscore3• 16 years ago

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

aw3c2• 16 years ago

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.

jscore3• 16 years ago

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.

mgcross• 16 years ago

I'm not too curious about the tools, whatever was used is beyond my ability, but the art kept me on the page - beautiful.

trotsky• 16 years ago

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

DamonOehlman• 16 years ago

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• 16 years ago

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

mathias3• 16 years ago

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.

franck• 16 years ago

True. It seems HTML5 is the new way of saying "Not using Flash".

jbail• 16 years ago

...or what we used to call DHTML.

axod• 16 years ago

It's just the latest buzzword to mean 'New!'. Couple of years ago everything was 'ajax'.

watty• 16 years ago

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

alnayyir• 16 years ago

Hype du jour. Great way to get front-paged.

It goes in cycles on here.

lwhi5• 16 years ago

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.

ugh5• 16 years ago

Sigh. It’s not incorrect. Language doesn’t work that way.

sushi• 16 years ago

Speaking of DOCTYPE, it seems there is no DOCTYPE on HN.

jrockway• 16 years ago

And somehow it works anyway. It's almost like nobody actually thinks HTML is SGML anymore...

kd5bjo• 16 years ago

I've come around to accepting that anything conforming to the relevant standards can (and should) properly be called HTML5, even if it doesn't actually take advantage of anything that wasn't available in HTML4.

andymism• 16 years ago

I'm also tired of seeing HTML5 this and that (as it's mostly grossly misused to mean 'highly dynamic'), but this

  <!doctype html>

is actually how you declare an HTML5 doctype. They're also using the semantic HTML5 elements header and footer.

Reference: http://dev.w3.org/html5/spec/syntax.html#the-doctype http://ejohn.org/blog/html5-doctype/

jacquesm• 16 years ago

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

J3L24042• 16 years ago

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• 16 years ago

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

GiraffeNecktie• 16 years ago

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

mathias3• 16 years ago

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

Aleul• 16 years ago

As stated it's not really using features of HTML5. I'm curious though, what do you want to see in HTML5 that would actually impress you?

jasonkester• 16 years ago

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• 16 years ago

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

rudd• 16 years ago

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.

ZeroGravitas• 16 years ago

I saw the scrollbar, and the little hint saying scroll at the bottom of the page. However, using either the page down key or clicking in the scrollbar confused it. It only worked for me if I scrolled down with the down arrow key and I got to see the speech bubbles that didn't trigger the first time.

alanh• 16 years ago

After 30s I was prompted to scroll.

kingsley_20• 16 years ago

What you need is a half-hidden line of text or graphic near the bottom screen-edge. only way to hint at scrolling.

lovskogen• 16 years ago

Hardly 'the only way'. With a animated arrow jumping up and down one can hint at scrolling. And by slowly moving bottom parts up and down you can hint at scrolling.

akamaka• 16 years ago

I left the site without realizing there's anything else, before being prompted to scroll, and only realized that there was more after I read the comments here.

philfreo• 16 years ago

It works great on the iPhone - didn't think twice about scrolling and was quickly impressed

peng• 16 years ago

It's too bad the site doesn't use high resolution textures for the iPhone 4. The site looks far sharper on my Macbook.

ugh5• 16 years ago

There is an arrow that pops up, prompting you to scroll.

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.)

markkat• 16 years ago

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

dmitri1981• 16 years ago

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

chopsueyar• 16 years ago

Gorgeous?

mark_l_watson• 16 years ago

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.

Jackel• 16 years ago

I think he did a great Job! Go Ben!

nhangen2• 16 years ago

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.

sgentle• 16 years ago

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

mortenjorck2• 16 years ago

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• 16 years ago

Clickable: http://rclayton.net

I think it's very elegantly done. Kudos.

retroryan• 16 years ago

This website http://www.hellokeepa.com is also doing some interesting things with what looks to be the onscroll event, the page continuously wraps around. Also notice how you can drag the page left and right.

whiskers• 16 years ago

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.

evo_9• 16 years ago

I suddenly have the urge to watch The Professional.

sjs3• 16 years ago

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• 16 years ago

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

sjs3• 16 years ago

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• 16 years ago

How many Frenchmen do you know named Ben?

nhangen2• 16 years ago

The name is Benoit.

mangool• 16 years ago

Love the interactive design, nicely done.

Vivtek• 16 years ago

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.

lurchpop• 16 years ago

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.

kingkawn• 16 years ago

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

shareme• 16 years ago

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..

tlrobinson• 16 years ago

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®"

ses• 16 years ago

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.

tonycore• 16 years ago

Excellent concept. Great execution.

alextebbs• 16 years ago

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.

Andrewski• 16 years ago

Mystery meat is never gorgeous.

Ben the Bodyguard: Gorgeous HTML5 Website

Related Stories