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...
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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'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.
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.
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.
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.
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.
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.)
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 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.
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
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).
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...
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.
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>
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. :)
103 comments
[ 3.6 ms ] story [ 168 ms ] threadThank 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
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.
I want it.
But what is it and where do I get it?
After all, they're both just "text editors" as per your example.
Just shows you can always make improvements, even on something as clever as this ;)
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.
Reference: http://dev.w3.org/html5/spec/syntax.html#the-doctype http://ejohn.org/blog/html5-doctype/
Coming soon usually elicits the same response,
...yawn... move on.
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.)
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.
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.
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.
http://javascript.crockford.com/script.html