9 ms·
Ben the Bodyguard: Gorgeous HTML5 Website
- bound008 16y agosubscription 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 16y agoWell, it's not like it actually matters. Or like sending a HTTPS link over an insecure channel like e-mail would help...
- aristidesfl 16y agoprecisely
- JoachimSchipper 16y agoIt looks very nice. A bit heavy on the FUD, though.
- gregschlom 16y agoThis 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 16y agoBut still I have no idea what this stuff actually does. Some encryption software? Maybe.
- deleted 16y ago[deleted]
- pmorici 16y agoSoftware 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 16y agopersonally 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 16y agoI 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 16y agoCan't you just use a graphics format that loads from top to bottom?
- brown9-2 16y agoSeems like the site is just getting hammered.
- uast23 16y agoHm. Not a lot of sites tell a story. This one does with a suited dark theme.
- buro9 16y agoGreat. I want it. But what is it and where do I get it?
- J3L2404 16y agoUnder construction and AppStore I assume.
- trezor 16y agoI see html5boilerplate.com is getting reused properly :)
- jscore 16y agoAny idea how they did the graphics? Is it straight photoshop + illustrator or something else?
- aw3c2 16y agoThe 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 16y agoWow, 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 16y agoAsking 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 16y agoOk, 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 16y agoConsidering all the effects are done via CSS, there's no reason the images couldn't have been made in MS Paint.
- trotsky 16y agoVery neat design, no question. Kind of the antithesis of the functional web, though. It's like a flash only website without the flash.
- DamonOehlman 16y agoI 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 16y agoI was expecting a community safety message about the dangers of walking in the middle of the road at night
- mathias 16y agoCalling 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 16y agoIt's really depressing seeing HN use HTML5 as incorrectly as my managers...
- lwhi 16y agoI 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 16y agoThe fact that the HN submission says "Gorgeous HTML5" is also evidence that this is aimed at Apple users.
- alnayyir 16y agoHype du jour. Great way to get front-paged. It goes in cycles on here.
- ugh 16y agoSigh. It’s not incorrect. Language doesn’t work that way.
- lwhi 16y agoUnfortunately, it does when language is used to denote specific technologies.
- jacquesm 16y agoIf this is the future of the web count me out.
- J3L2404 16y agoThat 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 16y agoBut it's top because of the design of this "Coming Soon" page - not because of what the product does.
- GiraffeNecktie 16y agoSo the fact that people are using HTML5 to do what people were doing with Flash ten years ago is somehow interesting?
- jasonkester 16y agoMight 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.
- alanh 16y agoAfter 30s I was prompted to scroll.
- tomedme 16y agoThe scrollbar on the right wasn't a bit of a give-away?
- rudd 16y agoTo 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 16y agoI 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.
- kingsley_20 16y agoWhat you need is a half-hidden line of text or graphic near the bottom screen-edge. only way to hint at scrolling.
- markkat 16y agoI wouldn't want to visit that site regularly. It looks nice, but it isn't easy to navigate.
- dmitri1981 16y agoIt's an introduction to a service, I don't think it is meant to be visited regularly.
- chopsueyar 16y agoGorgeous?
- mark_l_watson 16y agoNice 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.
- muffinman2010 16y agoI'm not really familar with web dev atm, but I was wondering whether this was built using js or canvas?
- Jackel 16y agoI think he did a great Job! Go Ben!
- nhangen 16y agoI 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.
- evo_9 16y agoI suddenly have the urge to watch The Professional.
- sgentle 16y agoIn 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 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 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 http://benthebodyguard.com/images/city-background.jpg
- mortenjorck 16y agoJavascript'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).
- whiskers 16y agoI 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.
- sjs 16y agoThere 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.
- AlekseyKorzun 16y agoYour browsers JS engine would not process the comments, there before it's valid.
- zerohp 16y agoIn 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
- sjs 16y agoAh, 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 16y agoHow many Frenchmen do you know named Ben?
- nhangen 16y agoThe name is Benoit.
- mangool 16y agoLove the interactive design, nicely done.
- Vivtek 16y agoIt 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 16y agoThe 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 16y agoBen is a decent fall-back when Leon is still under copyright.
- shareme 16y agoI 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 16y agoNeat 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®"
- gizmomagico 16y agoIs "Bonsoir" a joke?
- ses 16y agoI 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 16y agoExcellent concept. Great execution.
- alextebbs 16y agoBeautiful 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 16y agoMystery meat is never gorgeous.