Presentation: Rocking the boat - and causing a ripple

HTML5 causes an amazing excitement around the developer scene and we are pushing the open technologies of the web far beyond we ever imagined. The only thing that really holds us back is adoption of new browsers and the unanswered question on how to deal with legacy browsers and systems. In this talk Chris Heilmann shows what HTML5 can do for us as an application platform and what we can do to make sure that we don't leave people behind. With great power comes great responsibility and it is up to us to embrace progress and build things that work at the same time. We can't do that if we assume a perfect audience or advocate things that can not be used in real products

Rocking the boat…

…and causing a ripple

Christian Heilmann, Mozilla, HTML5 Live London/NYC, October/November 2011

Today I want to remind us a bit about a few of the things HTML5 is good for and what you can do with it. It seems to me that we are very good in hyping it up, but less good in really using it in our products.

Déja vu

confused cat

Having been on the web and professionally developing sites for quite a while I get a distinct feeling of deja vu. We always get incredibly excited about what is technically possible and show that off.

Déja vu

confused cat

Having been on the web and professionally developing sites for quite a while I get a distinct feeling of deja vu. We always get incredibly excited about what is technically possible and show that off.

The pinnacle of web design

Satisfaction guaranteed ribbon

A few years ago we already achieved the ultimate in web design and development.

The Java Water applet!

The rain drop applet allowed us to enhance any boring image with awesome raindrop animations and thus allowed our clients to distract from the fact that they forgot to have any content for their web sites.

Now in Canvas!

Nowadays we don't need such shenanigans. Instead we can use HTML5 canvas to do that effect in a native and more open fashion.

WebGL Water

With WebGL we can even go 3D on that and really simulate water!

HTML5 bells and whistles

HTML5 2.0

Seriously though, a lot of what we gets the label HTML5 these days is shiny bells and whistles. And that is not the idea of it.

!Flash

Skip intro

HTML5 is not a replacement for Flash - we shouldn't fall into the same trap we did with that technology. When you look at the uses for modern new technologies though you'll find first and foremost brochureware sites and tech demos. And HTML5 is not that new any longer.

Best viewed with…

Best viewed with

Even more scary, we seem to be steering towards a world where it is needed to have a modern browser to see a certain site. That, to me is unacceptable.

It's a trainwreckcar

Yaris it's a car ad

One of the more annoying examples of that was the Toyota "It's a car" web site where a car salesman explained to you that it uses WebGL and HTML5 and that is why you need to download Chrome. Fact is that the site didn't do anything better in Chrome than in Firefox it seems. It was just a strange way of telling the audience that the agency didn't care much about cross-browser support.

A marvel of engineering

This example was annoying on a few levels. One of the biggest ones being that the new technologies we are playing with were sold as a marvel of engineering.

Technology is there to help!

End users should not have to care which technology is in use - I also don't know what programs were used to print a book. We were always fascinated by that as developers and tried to make our sites more interesting by telling the world all about it. Now our marketing people have learned from that - which is scary.

The formula works!

If we really want HTML5 to make a difference we should be thinking about what made the other web technologies widely adopted and gave us maintainability in addition to the cool and shiny things.

Use the source, Luke?

The ability to view source to me was probably the biggest part of the success of web standards. Instead of having to get the source files we just had to look and see how things were done.

Therefore I think it is important to take a look at how we treat the source of our products. Right now I feel there is a big divide in the market.

Keep it <semantic>, <stupid>

On the one hand we have markup enthusiasts who love to use the correct elements and preach that they need to be used no matter what. This is a sensible thing but we should also question the need.

Chicken and egg!

It is a classic chicken and egg problem - if browsers don't do anything with new elements developers don't use it. If developers don't use the new or even the correct semantic elements browser vendors put them far down the list of need to have fixes.

Performance is the only goal!

On the other hand we have those who see markup as a necessary evil and want to build extremely flexible and high performance applications. Pointing out that their code is semantically bad is pretty pointless as the code was not written by hand but converted from another language and optimised to be read by a browser, not a human.

Happy middle ground

  • Use the correct semantic HTML for the task (duh!)
  • Use new HTML5 elements when they make sense and are stable.
  • Write for humans, convert for computers.
  • Clearly mark generated code - this stops accusations
  • Avoid unnecessary dependencies

Using new capabilities

Progressive Enhancement

I feel like sounding like a broken record, but I yet have to hear a single valid argument against progressive enhancement. Yes, there are concerns that it can not always be applied, what I am talking about is the concept and the mindset of progressive enhancement.

Be safe out there…

don't walk on ice

As web developers we always had to be paranoid about writing code. We detect support, then we apply it. We check if the ice can hold us before skating on it. We jump into the river after checking that it is deep enough. Simple, really.

Awesome opportunities…

  • Replace technology alien to the browser with native one
  • Improve existing interactions
  • Add interactivity to previously static things
  • Replace simulated interfaces with real ones

'revolution'.replace('r','')

Baby Platypus

A lot of people talking about HTML5 throw everything out we've done before. No need for semantic markup, our job is to give the same experiences native applications give us.

This is limiting the impact and usefulness of HTML5. The web has become the success it is not by being limiting but by being inclusive and adapting.

Misquoting

Darwin quotr

A lot of people quote Darwin as "survival of the fittest". The real quote, however, is: "It is not the strongest of the species that survive, nor the most intelligent, but the ones most responsive to change." - this is what the web and HTML5 can be.

Playmobil vs. Lego

Playmobil and Lego car

The whole native vs web debate always reminds me of Playmobil vs. Lego. As a kid this was a big thing. Some kids had cool cars from Playmobil that would survive a fall and ships that really swam. My Lego cars lost parts and the ships always took in water. However, when I wanted to turn my ship into a plane, I could do that whilst the Playmobil kids had to pester their parents to get a plane. I guess this was partly what made me a developer, not a buyer.

Stop imitating and start inventing.

iphone interface on android

It is pretty much pointless to try to make an HTML5 app look and feel like a native app. First of all this only works on iPhone anyways as there is no "Android" look and feel. Instead, let's push HTML5 at what it is good at - being a web development stack.

Outside is huge!

World Connection Density

The web is huge. You can reach people world-wide, 24-7 and they can find your product and solve their problems with it.

Financial Times - web > native

Financial Times App

The FT lately showed that doing a web app can be more successful than a native iPad app.

Old challenge - better weapons!

Scorpio in Super Mario

Instead of trying to cry over the lack of support for native hardware in JavaScript we could start thinking about just how much cool stuff we have already out there.

Some "new" tech on the web

  • Flexible layouts with Mediaqueries
  • Native animation with CSS
  • Dynamic painting with Canvas / SVG
  • 3D interfaces with WebGL
  • Local and offline storage
  • File APIs
  • Video

A big annoyance to me is that not many web products really use the technology we have - there are awesome things possible in modern browsers. You can use those when and if they are available.

Mediaqueries for flexibility

Boston Globe

Using open web technology means you can be flexible. Upgrades are easy, and your app can easily adapt to the needs of the user. The Boston Globe is a great example of that. By cleverly employing mediaqueries the same site can be seen across a lot of devices.

CSS animations and transitions

The iphone 4s page is a clever example on how to use CSS animation and transformations.

Evolution of the web Canvas/SVG

Using Canvas and SVG you can do amazing interactive things. To celebrate the birthday of Chrome, Google released this wonderful timeline animation of how the web evolved. It uses SVG and is a great example of an interactive dashboard.

Pepetz.com using WebGL

Pepetz.com is a great example how you can use new technology in a seamless way. The 2D product images turn into 3D models without needing any videos. The user can directly interact with them.

Local Storage

  • Cookies are bad for you
  • Local Storage and Session Storage
  • Simple key/value store
  • 5MB of data across browsers

Local Storage (persistent) and Session Storage (deleted when the tab is closed) are a very simple way to store content on the user's machine without having to go through the pains of cookies.

Offline

  • Store parts of the page offline
  • Really good for apps (store state)
  • Simple manifest implementation

Offline storage makes sure that our apps give a real native app feeling. If a user gets disconnected it shouldn't be the end of the world.

File APIs

  • Client side file conversion
  • Packing before uploading
  • Drag and drop from the desktop

The new file APIs allow us to read and create files from the system easier than by going via a server. You can for example convert files before uploading them and allowing people to get their offline documents easier into an online system than with old-school file upload forms.

HTML5 video

  • Native browser controls
  • Style-able
  • Rich API

Video is one of the big break-through technologies for HTML5. As video elements are just like any other element in the page it makes it very easy to deliver engaging and interesting video solutions. The native browser controls makes it also much easier to make video more accessible for example to keyboard users.

Syncing HTML5 video

This demo shows how easy it is to sync page content with video in HTML5. Notice that the JavaScript is very simple and by using data- attributes on the HTML I can maintain the syncing without any JS knowledge. There is also a simple library available to do this called Popcorn.

The future?

A flying car

The future for open web applications is to build platforms that are as exciting as the native ones. For this, we are working on some very cool things.

Using the web to break the lock

Some things are not available to web applications on hardware like phones and tablets. That is not fair and we are working hard on making this possible.

Breaking the browser mould

Firefox with native toolbars

In order to keep the open web the alternative of choice for app development we need to free the browser as the platform to allow us to access hardware and do the same cool things we can do with native apps. There are a few things brewing there and we would love to get your feedback. One of them is allowing the site to change the browser toolbars.

An open framework of apps

Open web apps allow you to convert a web site into an app in a simple fashion and automatically open links to the same domain in the app.

Go and build an amazing web!

  • Build with sensible markup
  • Check for support, then apply
  • Raise the bar for day to day web sites
  • Use what improves the experience, not what is cool
  • File bugs and report successes
  • Don't limit yourself by what failed in the past

A big annoyance to me is that not many web products really use the technology we have - there are awesome things possible in modern browsers. You can use those when and if they are available.

Let's play!

Dog wants to play