Presentation: The web and browsers as the platform - exciting opportunities in new web technology

The web and browsers as the platform

Exciting opportunities in new web technology

Today I want to show some new technologies and ideas you can use to make your ecommerce offerings more interesting and take advantage of the great new features modern hardware offers us.

Misquoting

Darwin quotr

A lot of people quote Darwin as "survival of the fittest". The more interesting quote, however is: "It is not the strongest of the species that survive, nor the most intelligent, but the ones most responsive to change." - today I will talk about some of those changes in web technology you might not be aware of.

Forget the web - it is all about apps

Screen full of apps
Photo by Jim Trottier

In recent times the web has not made many headlines. Instead people seem to be spending their time and money on apps for their smartphones and tablets.

Smartphones for everybody?

Internet cafe
Photo by Beatrice Murch

The big issue I have with this argument is that not everybody has a smart phone. And not everybody wants one. There is a lot to be said for the web as it is.

Checking in on app stores

Apple app store
Apple App Store

With every cool device comes a cool app store where you can buy or get free apps with a single click directly to your device. You can also get music, videos and games and many other things.

Going to one place is amazing

Mall
Photo by "momentcaptured1"

This is what shopping malls are about. You find everything in one place and you spend only a fraction of the time you need to get everything you want.

App stores as innovation?

Download.com in 1996
Download.com in 1996

If you think about it, this is nothing new. In the past we had sites like download.com, tucows.com and later on for free software freshmeat.net, sourceforge.com and a few others to download programs from.

After the Zombie attack

zombies in a mall
Photo by David Fulmer

If you look at those web sites now, they do look a bit like a shopping mall after a Zombie attack. Things are outdated, all over the shop and frankly nobody dares to go there any longer. A lot of the bespoke software we had in the past was for tasks we now use the web for.

Go find that app!

Android market
Android Market

To a degree, this is already happening on some App stores. It becomes harder and harder to find good applications. A lot of them are shoddily put together and don't use the device you use them on to its full extend. Getting your app found is the new SEO and there is already a booming market for fake reviews.

Using existing infrastructure

Folding at home
Folding at home

Folding at home is an initiative by Stanford university to crowdsource analysis of protein folding - one of the causes of Alzheimer. By using people's computers it is now the biggest supercomputer on earth.

We can do the same with the web. People have powerful mobiles, tables and laptops. We should use them when we can.

Outside can be messy, but fun

Dog jumping in the woods
Photo on the daily squee

I think it is ridiculous to limit ourselves to target app stores and closed systems. Remember Myspace? Remember when everyone told you a Facebook app is all you ever need?

Outside is huge!

World Connection Density
World Connection Density map by Chris Harrison

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

Native vs. web - Playmobil vs. Lego

Playmobil and Lego car
Photos by "kruemel2010" and "Buck"

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.

What about syncing?

My different Android devices
My different Android devices

I own four Android devices. I played Angry Birds and Cut the Rope on all of them. Guess what? I always needed to start from scratch. Not fun. On the web it is much easier to sync things. Years of version controlling helped us with that.

Financial Times - web > native

Financial Times App
FT web app - more successful than iPhone app

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

Making flexible rigid is easy…

Phonegap.com
phonegap.com

Nothing for example stops you from building something with HTML5 and JS and then use a tool like phonegap to turn it into an iPhone and Android app. The other way around is harder.

The now!

HTML5 logo
HTML5 Logo

Instead of being scared and leaving the web for closed environments it makes sense to use the web and especially its strengths and new features.

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
The new Boston Globe page

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.

Madmanimation a CSS3 animation

CSS3 allows you to do animations without Flash. Madmanimation is a demo for the animatable CSS animation tool. It show how you can turn a list of small images with a description of the scenes into a very complex CSS3 animation. This is progressive enhancement like it should be done.

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.

WebGL Skin

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.

Motivational poster using File APIs

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 Shell

This shell is a clever use of a free video effect script. The video gets exploded into several squares and your task is to put it together as a puzzle whilst the song is playing. If you succeed, you can download the song for free, if not, you can still watch the video.

The future?

A flying car
Photo by Thomas Duchnicki

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
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.

Web APIs

  • Defining access for web services to:
    • Dialer, SMS
    • Address Book
    • Clock, Calculator
    • Camera
    • Gallery
    • Settings
    • Games
    • Maps

Web APIs are something Mozilla and a few others are working on - a standard to allow JavaScript access to things that we need to have if we want to have a standards based mobile web.

An open framework of apps

Let's play!

Dog wants to play
Photo by Mike McCune