Welcome to the New Web

Welcome to the New Web

Open sign

The Snow Cruiser

The arctic explorer

A marvel of technology

The arctic explorer

Running tests…



Arctic explorer trapped in snow

Old approaches, new challenge…


When we hear HTML5 we think…

Toyota Motor Triathlon Race Car Concept Photo by Ian Muttoo

The reason is the hype

Hype cycle

The hype cycle

HTML5 is the new Flash!

Apple killed Flash

Demo time!

Shiny Demos


Failing to impress…

Laughing about demos breaking but it is an indicator of a not reliable platform

@andrewdobson at #createtheweb

Backwards compatible?

How to tell what is HTML5 - it doesn't work in IE

Business reports

HTML5 reports

A few truths…

A new challenge

Responsive Design Photo by Jason Weaver

There is no "one browser"

Connectivity will always be an issue

Fat hamster stuck

No love from hardware providers

clamped wheel
Photo by Ricardo Liberato

Paths to enlightenment

Hype cycle

The hype cycle

HTML5 should be thought of as this…

Volkswagen Schwimmwagen VW Schwimmwagen

Which can look like this…

Quadski Gibbs sports quadski

HTML5 = necessary evolution from documents to apps

Great ideas

  • Not breaking the web (backwards compatible)
  • Consistent parsing of markup
  • Multimedia access
  • Richer forms

It is not about what we can add, it is about what we can't take away.

  • Web distribution (URLs)
  • Very small footprint
  • Adaptation to environment
  • Offline storage
  • Best mean to achieve a goal
  • Atomic updates
  • Simple maintenance / localisation

Liberating hardware

Hardware blowup


Firefox OS - we're on it!

Firefox OS


Emulator/previewer in the browser

B2G desktop item


Install page as app…

Install page as app



App in B2G

Knowledge merger

Hardware blowup

Christie Fidura at #createtheweb

Conversion as a way in…

Bananabread demo


Edge suite


Browser: consumption and creation

Firefox devtools

Remote debugging

Remote debugging


Shifting our approach

Magic is outside your comfort zone

Escalator engineering

Escalators Photo by Joe Buckingham

Doing your part…

Responsive Design

        @media only screen and (max-width: 1024px) {
          body { background: yellow; }
        @media only screen and (max-width: 780px) {
          body { background: blue; }
        @media only screen and (max-width: 480px) {
        body { background: red; }

Testing responsive design

Responsive view in Firefox

Demo | Screencast

Client-side validation for lazy bones

        <label>City:<input name="city" required></label>

Multimedia with simple fallback

        <video controls>
          <source src="hedgehogs.mp4" type="video/mp4">
          <source src="hedgehogs.webm" type="video/webm">
          <a href="hedgehogs.mp4">
            <img src="hedgehogs.jpg" alt="Frolicking hedgehogs">
          Click image above to download video

Animation and transitions in CSS

        #foxkeh { position: absolute; top: 200px; left: 300px;
          animation: move 2s alternate ease-in-out infinite;}
        @keyframes move { from {left: 300px;} to {left: 700px} }
        #ball { width: 100px; height: 100px;
                background: blue; transition: 1s; }
        #ball:hover { border-radius: 50% 50%;
                      background: red; }

Offline and local storage

        localStorage.setItem('keepthis','for later')
        localStorage.getItem('keepthis') // => 'for later'

Drag and drop upload and conversion

Thumbnails generated client side


Making it dead simple

Guitar Hero - now on Linux

Prototyping extended HTML5

X-tags examples

Web Components - X-Tag - WebGame stub - Mortar

Simple packaging



Re-think tooling

editor showing the final gameplay amended changing the code

Bret Victor - inventing on principle

Re-think explaining

Learnable programming

It is happening already!

Adobe brackets

Adobe Brackets

The time is now, the place is here…

Today is the tomorrow you expected yesterday

Shaun Tan: the lost thing


impatient cookie monster