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.
Ben the Bodyguard: Gorgeous HTML5 Website
41–50 of 104 posts
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#42Nice 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.
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#43Earlier quoted context omitted.
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.
Can't you just use a graphics format that loads from top to bottom?
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#44I'm not really familar with web dev atm, but I was wondering whether this was built using js or canvas?
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#45Might 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…
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.
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#46This 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.
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.
Seems like the site is just getting hammered.
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#47I think he did a great Job! Go Ben!
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#48I 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.
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#49Calling 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.
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.
Re: Ben the Bodyguard: Gorgeous HTML5 Website
#50In 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
