Ben the Bodyguard: Gorgeous HTML5 Website(benthebodyguard.com)
benthebodyguard.com
Ben the Bodyguard: Gorgeous HTML5 Website
http://benthebodyguard.com/
103 comments
Ben is a decent fall-back when Leon is still under copyright.
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.
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.
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.
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
http://javascript.crockford.com/script.html
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. :)
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®"
"Protecting your passwords, photos, contacts and other sensitive stuff on your iPhone® or iPod touch®"
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.
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.
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.
Love the interactive design, nicely done.
Excellent concept. Great execution.
Mystery meat is never gorgeous.
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..
I mean you could have used svgs and a js library like raphael to use svg instead to decrease the load times, etc..
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
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
Well, it's not like it actually matters. Or like sending a HTTPS link over an insecure channel like e-mail would help...
precisely
It looks very nice. A bit heavy on the FUD, though.
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.
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.
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.
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.
Seems like the site is just getting hammered.
But still I have no idea what this stuff actually does. Some encryption software? Maybe.
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.
[deleted]
Hm. Not a lot of sites tell a story. This one does with a suited dark theme.
I see html5boilerplate.com is getting reused properly :)
Any idea how they did the graphics? Is it straight photoshop + illustrator or something else?
I'm not too curious about the tools, whatever was used is beyond my ability, but the art kept me on the page - beautiful.
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.
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.
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).
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.
After all, they're both just "text editors" as per your example.
Considering all the effects are done via CSS, there's no reason the images couldn't have been made in MS Paint.
Very neat design, no question. Kind of the antithesis of the functional web, though. It's like a flash only website without the flash.
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 ;)
Just shows you can always make improvements, even on something as clever as this ;)
I was expecting a community safety message about the dangers of walking in the middle of the road at night
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.
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's really depressing seeing HN use HTML5 as incorrectly as my managers...
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.
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.
The fact that the HN submission says "Gorgeous HTML5" is also evidence that this is aimed at Apple users.
Sigh. It’s not incorrect. Language doesn’t work that way.
Unfortunately, it does when language is used to denote specific technologies.
No, it doe not, even then. It’s unfortunately not that simple. HTML5 has acquired new meaning, its definition has changed.
HTML5 has acquired new meaning, its definition has changed
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.
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.
That’s not how it works.
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.
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.
I know what you're trying to say - language is a fluid changing thing, which evolves.
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.
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 has become a very relevant term outside of technical circles and there it refers to all upcoming web technologies and – pretty much – always has. I guess you will just have to life with the two different meanings in two different context. I don’t think it’s a problem, I quite like HTML5 as a catch-all term for upcoming web technologies.
HTML5 [..] refers to all upcoming web technologies and – pretty much – always has.
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.
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.
Hype du jour. Great way to get front-paged.
It goes in cycles on here.
It goes in cycles on here.
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.
I'm also tired of seeing HTML5 this and that (as it's mostly grossly misused to mean 'highly dynamic'), but this
Reference: http://dev.w3.org/html5/spec/syntax.html#the-doctype http://ejohn.org/blog/html5-doctype/
<!doctype html>
Reference: http://dev.w3.org/html5/spec/syntax.html#the-doctype http://ejohn.org/blog/html5-doctype/
Speaking of DOCTYPE, it seems there is no DOCTYPE on HN.
And somehow it works anyway. It's almost like nobody actually thinks HTML is SGML anymore...
No DOCTYPE means "old document" to the browser and render it in Quirks Mode: http://www.quirksmode.org/css/quirksmode.html
If this is the future of the web count me out.
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.
Coming soon usually elicits the same response,
...yawn... move on.
But it's top because of the design of this "Coming Soon" page - not because of what the product does.
So the fact that people are using HTML5 to do what people were doing with Flash ten years ago is somehow interesting?
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.
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.
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.
What you need is a half-hidden line of text or graphic near the bottom screen-edge. only way to hint at scrolling.
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.
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.)
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.)
The scrollbar on the right wasn't a bit of a give-away?
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.
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.
After 30s I was prompted to scroll.
I wouldn't want to visit that site regularly. It looks nice, but it isn't easy to navigate.
It's an introduction to a service, I don't think it is meant to be visited regularly.
Gorgeous?
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.
I think he did a great Job! Go Ben!
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.
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.
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
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
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).
Clickable: http://rclayton.net
I think it's very elegantly done. Kudos.
I think it's very elegantly done. Kudos.
is beautiful in firefox but it looks like this in my default chromium: http://imgur.com/NVP1i.png
D:
Wow, I thought I had tested it in Chrome. Thanks!
Yeah, Chrome doesn't like this site. Which is a shame - when I opened it in Firefox I was impressed, but if I had not been prompted to check it out by the comments on this thread I would have moved on...
[deleted]
Rendering problems in Chrome, first time I've seen this.
Very unusable in mobiles too
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.
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.
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.
I suddenly have the urge to watch The Professional.