Inside an HTML5 Interactive Experience: Never Mind the Bullets

Inside an HTML5 Interactive Experience: Never Mind the Bullets

  • Comments 17

I wrote in my previous post about the approach we took to the IE9 beta launch: partnering with design agencies and interesting customers to build what we believe are some of the most comprehensive HTML5 reference sites on the web today. Over the course of a couple of blog posts, I wanted to delve into a few of my favorite examples and talk about what I think makes them special, as well as highlight how the designers and developers took advantage of some of the new capabilities of HTML5.

The first experience I want to highlight is Never Mind the Bullets, an interactive comic book set in the Wild West. It comes from Steaw Web Design, a small Paris-based web studio who I met for the first time back in May. Steaw had done some early prototypes with using parallax-style effects with layered images and were keen to see whether they could create a complete experience using that technique. They pulled it off very nicely indeed with the final project, which also takes advantage of the WOFF font format for the comic-style typography and SVG for graphical effects.

image

You read the comic left to right by simply panning the mouse cursor across to the right side. Each panel of the story is composed out of a series of several transparent or alpha-blended PNG images that are overlaid onto a JPEG background. For example, in the panel above there are separate images for the cowboy, the steam from the train, the traincar, and the passengers. The speech bubbles are created out of an SVG shape with real text rendered using a WOFF display font that is loaded through the @font-face CSS attribute (with fallback solutions for browsers that don’t yet support WOFF).

All these elements are simply positioned using inline styles within a <div> element that represents the panel itself, as shown in this example (edited for brevity and formatting):

<div class="Panel" style="width: 723px; height: 700px;">
  <div class="Layers In">
    <img class="Layer" style="left:-95px;  top:-75px" src="soif-5.jpg" 
         cp:y="50" cp:x="50" />
    <img class="Layer" style="left:-127px; top:-75px" src="soif-4.png" 
         cp:y="70" cp:x="100" />
    <img class="Layer" style="left:-190px; top:-75px" src="soif-3.png" 
         cp:y="100" cp:x="200" />
    <img class="Layer" style="left:-444px; top:-75px" src="soif-2.png" 
         cp:y="100" cp:x="600" />
   </div>
   <div class="Layers Out">
    <p class="Balloon" cp:text="Little" cp:balloon="Tell"
       style="left: 74px; top: 35px; width: 280px; position: absolute">
     He's come to the west; the land of opportunity.
    </p>
    <div class="Layer" cp:y="100" cp:x="550"
         style="left: -575px; top: -100px; width: 900px; height: 900px">
     <p class="Balloon" cp:text="Medium" cp:balloon="Speak" cp:arrow="BottomLeft"
         style="left: 530px; top: 200px; width: 280px; position: absolute">
      I need a drink.
     </p>
    </div>
   </div>
  </div>

The magic of the comic comes from its interactivity, and here Steaw used a clever technique. Each panel element (the cowboy, the traincar etc.) is extended with several custom attributes (prefixed with “cp:”) that contain metadata on how it should be rendered and the depth of field for the parallax effect.

For rendering purposes, the browser itself ignores these custom attributes since they don’t have any defined semantics. But in the $.fn.parallax() function (found in parallax.js), these attributes are read out and used to generate a displacement value that is applied using a callback on the mousemove event, as can be seen below (again, slightly edited):

self.each(function() {
  var $this = $(this);
  
  $this.mousemove(function(event) {
    var pos = $this.offset();
    var mouseX = event.clientX - pos.left;
    var mouseY = event.clientY - pos.top;
    var containerDemiWidth = $this.width() / 2;
    var containerDemiHeight = $this.height() / 2;
    var centerX = containerDemiWidth;
    var centerY = containerDemiHeight;
    var displacementX = Math.min(1, Math.max(-1, (mouseX - centerX) / 
      (containerDemiWidth - settings.xMargin)));
    var displacementY = Math.min(1, Math.max(-1, (mouseY - centerY) / 
      (containerDemiHeight - settings.yMargin)));
 
    $this.children(".Layers").children(".Layer").each(function() {
      var $layer = $(this);
      var rect = $layer.data("rect");
      var xFactor = $layer.attr(settings.xFactor);
      var yFactor = $layer.attr(settings.yFactor);
      var x = Math.round(centerX - displacementX * (-xFactor) / 
                         100.0 * (rect.centerX - centerX));
      var y = Math.round(centerY - displacementY * (-yFactor) / 
                         100.0 * (rect.centerY - centerY));
 
      $layer.animationMoveTo(x, y);
    });
  });
});

The resultant effect is very polished and fluid. Open it in Internet Explorer 9, hit F12 to bring up the developer tools and browse around the code – they make heavy use of jQuery but the whole site is a surprisingly small amount of code.

The piece de resistance is that you can customize your own comic strip with the link at the top. Because they’ve used SVG and text for the speech bubbles, it was relatively easy for them to implement this feature, and you can share your own comic strip with others via email, Facebook or Twitter.

image

Never Mind the Bullets is receiving a good reaction from the community so far:

Check it out (even if you’re not using Internet Explorer 9) – I’m interested in your thoughts!

  • Very nicely done.

    One tiny question though - the title says "Inside an HTML5 Interactive Experience". Where is the HTML5? I see WOFF (a font format) and SVG (a W3C graphics specification). I see JavaScript, but not making use of any of the new HTML5 APIs. I see good old fashioned HTML 4 in constructs like div class="Panel" (couldn't that be marked up with the HTML section or article elements?)?

    So can you mention the HTML5 please?

  • It does occur to me that you could have added at least one aspect of HTML5 here.

    "Each panel element (the cowboy, the traincar etc.) is extended with several custom attributes (prefixed with “cp:”) that contain metadata on how it should be rendered and the depth of field for the parallax effect."

    Why not use the data-* attributes that HTML5 provides precisely for this purpose? See the HTML5 spec dev.w3.org/.../elements.html

  • So it's not HTML5 at all? Just JavaScript and web fonts?

  • You keep using that word HTML5. I do not think it means what you think it means…

  • **Where's the HTML5??**

    Yes, there's loads of cool CSS3, js, SVG stuff in here, but no explicit mention of anything that's actually HTML5.

    C'mon Microsoft. After years of being beaten up by the web development community for lagging so far behind everyone else, with IE9 you've finally got a chance to prove that you 'get' the web. Posts like this show that you've still got some catching up to do.

    Hats off to the people who created the sites you mention though, they are truly awesome. And *they* probably understand what HTML5 actually is...

  • I've just visited "Never mind the Bullets" in Chrome 6, and it recommends I download and install IE9 to see the site better. That's not based on checking the features my browser supports though, it's based on explicitly checking on whether I'm using IE9.

    Please can everyone stop using these bad habits of yester-year's browser wars. Design to standards, and use feature-detection (not horrible, dirty, discredited concepts like browser-sniffing), to enable graceful degredation. Something like modernizr.js (see modernizr.com - and no they are nothing to do with me), is ideal for this.

    To all designers and developers: please, please let's not go back to the dark days of "This site best viewed in [insert browser-war contender of your choice here]". We're can be much better that that! :-)

  • Bruce, of course you're quite right that formally speaking HTML5 is a W3C working draft specification. But as you also know, the term is also used in common parlance to refer to a slightly broader set of technologies that are part of the emerging web, including HTML5 itself, CSS3, SVG, Canvas 2D, WOFF and others.

    I don't like the conflation of these terms myself, but it's a reality I think we have to live with. And in fact, you do exactly the same yourself (assuming you're the same Bruce Lawson) with your very good book Introducing HTML5, which includes coverage of Canvas 2D, Web SQL database, Web Workers and Web Sockets- none of which are part of the W3C HTML5 spec as far as I'm aware.

    I'd also briefly note that SVG is referenced as a namespace within the HTML5 spec (4.8.15 and 2.8), for what it's worth.

    Best wishes,

    Tim

  • Glad you liked the book, Tim! And  you're correct: Web Workers, Web Sockets etc are in our book, but not in the W3C spec, but they are all related WHATWG APIs, so that is "a slightly broader set of technologies", and are contained in www.whatwg.org/.../complete.html

    Adding graphics specifications like SVG, font specs like WOFF and styling specs like CSS is stretching the bounds of credibility too far, in my opinion - and, from what you said, your opinion too. So we're agreeing.

    But I'm still genuinely at a loss to understand why, when you had the opportunity to use some genuine HTML5 features (new semantic tags, data-* attributes) you elected for HTML 4 constructs or just invalid markup.

  • Tim, it's quite obvious you didn't do any research before writing that last comment. All of those features you just mentioned are in the HTML5 spec.

    Also, why do you insist on calling technologies not in the spec "HTML5" when you quite obvious are against the idea? It's not HTML5, and never will be. I'm surprised to find Microsoft employees pushing this misconception to the public. You're just making it worse!

  • I think that the discussion here in the comments raise an serious point, that being the use of HTML5 as an umbrella term for "emerging web" technologies.

    I have concerns that HTML5 will become common place as a reference for SVG, CSS3, GeoLocation and the like, as they are frequently seen in the same context or writings without any clear definitions. We have an opportunity whilst HTML5 is still in draft to make a clear distinction between these technologies/specifications and educate not only those that will be on the frontline using these them, but also those that will be in a position to commission projects using these technologies.

    It's possible. Just look at XHTML and CSS, a very clear distinction was made very early on and adopted with little fuss. We are all familiar with those little badges that were very popular a few years back stating my site is valid XHTML and Valid CSS, 2 badges, 2 technologies clearly seen as such. so why not in this instance. (Note: No I'm not advocating lots of little badges.....).

    I would hate to see HTML5 become the new Web 3.0, simply through lack of education.

    .

  • Ah, HTML5--the breakfast of champions.

    I do like seeing SVG used inline in HTML. Hopefully other uses will follow.

    Question: Bruce asked about why you didn't use data-* attributes. I was curious myself about this.

  • Where is the HTML5/CSS3 support on IE9???

    www.impressivewebs.com/html5-support-ie9

    www.impressivewebs.com/css3-support-ie9

  • Where is the WPF discussions? where is the Silverlight discussions? WHERE!.

    We thought you were cool Tim, but you've sold out to the HTML5 overlords.

  • Mark, I think we need to find a suitable alternative umbrella term if we don't want HTML5 to be used as a term both for the core specification and the family of modern web technologies. It's going to be tough to persuade a publisher that the "correct" title for a book is "HTML5, CSS3, SVG 1.1, Canvas 2D API, ARIA, WOFF, and Indexed DB for Dummies" :) I'm genuinely interested in this topic - there's no hidden agenda. A few of us toyed with "Web 5.0" for a while, but I don't think that works.

    I think a few folk commenting have a slightly different impression of what we were setting out to achieve with these demos. To be clear, the goal wasn't to create the ultimate HTML5 core spec reference site. I'm sure across the 30+ sites we partnered with, you can find some things to pick apart in terms of their usage of HTML - and I quite look forward to that kind of "technical audit" discussion. But while interesting, the point was more to show the kind of quality experience you can now build with browsers that just a few months ago would often have been impossible to accomplish without a plug-in. I personally think that's an exciting development that many web developers people will be delighted in, not least those who are still skeptical of our investment in web standards.

    VivaClient, you'll be pleased to hear that I have a couple of Silverlight and WPF articles queued up already. Stay tuned - I haven't met the "overlords" yet...

  • I'm also curious about the attributes. Why use these non-standard "namespaced" attribute names when you have data-* specifically for that purpose?

    And where are the HTML5 tags? Semantics? The dialog element?

Page 1 of 2 (17 items) 12