Building better

with the mobile web

Links are clickable

Designed 1822 ish

"Analytical Machine Babbage London" by Bruno Barral (ByB). Licensed under CC BY-SA 2.5 via Wikimedia Commons

​

goo.gl/Ry8Odk

NEVER BUILT

60’s - Mid 80’s

Far less capable

​

Massively better delivery model

Friction was removed

Diskettes

CD

Web

App Stores

Mobilithic era

Mobile era

Chat + Others

Pre internet

DVD

Diskettes

CD

Web

App Stores

Mobilithic era

Mobile era

Chat + Others

Pre internet

DVD

This is where it gets interesting

Smartphone users spend most of their time in apps

86%

spent in apps

14%

spent in the browser

Source: Flurry 2014

Google Confidential and Proprietary

Smartphone users spend most of their time in apps

86%

spent in apps

14%

spent in the browser

Source: Flurry 2014

?%

spent on web in apps

Google Confidential and Proprietary

The Web is no longer all about Browsers

Just on mobile traffic comes from:

• Mail
• Messaging
• Social
• Search
• WebView
• “Beacons”
• ...

Multi-channel all via a URL

Web is moving closer to Native

How does the Web match the cadence of Native and Play Services?

In a consumer mobile app, every step you make a user perform before they get value out of your app will cost you 20% of users.

http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

What happens to the web when native solves this?

What happens when native moves closer to web?

What to do? There's not really much you can do until users get to the point where they've opened your app. But once a user has signed up, make sure you take them by the hand along the funnel.

http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

It’s all about

reducing Friction

<rant>

If you are building a mobile app at the expense of a mobile site you are doing it wrong.

Make an engaged user on the web

Engaged native user

Upgrade to

Make an engaged user on the web

Keep them there

Chrome’s goal

​

Build better things more quickly

Improve

Developer Experience

Increase engagement

Developer Experience

DEVTOOLS

Source: goo.gl/DgoXpJ

Filmstrip View

• View your site as it loads
• Catch render bottlenecks
• Optimize your critical path

Visual Easing

• Preview animations
• Fine-tune animation curves
• Easier custom easing

Animations panel

• Scrub animation properties
• Slow down, and debug animations

umaar.com/dev-tips

WEB COMPONENTS

Source: goo.gl/qyfTQd

<nav class="navbar navbar-default">� <div class="container-fluid">� <!-- Brand and toggle get grouped for better mobile display -->� <div class="navbar-header">� <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">� <span class="sr-only">Toggle navigation</span>� <span class="icon-bar"></span>� <span class="icon-bar"></span>� <span class="icon-bar"></span>� </button>� <a class="navbar-brand" href="#">Brand</a>� </div>�� <!-- Collect the nav links, forms, and other content for toggling -->� <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">� <ul class="nav navbar-nav">� <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>� <li><a href="#">Link</a></li>� <li class="dropdown">� <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>� <ul class="dropdown-menu" role="menu">� <li><a href="#">Action</a></li>� <li><a href="#">Another action</a></li>� <li><a href="#">Something else here</a></li>� <li class="divider"></li>� <li><a href="#">Separated link</a></li>� <li class="divider"></li>� <li><a href="#">One more separated link</a></li>� </ul>� </li>� </ul>� <form class="navbar-form navbar-left" role="search">� <div class="form-group">� <input type="text" class="form-control" placeholder="Search">� </div>� <button type="submit" class="btn btn-default">Submit</button>� </form>� <ul class="nav navbar-nav navbar-right">� <li><a href="#">Link</a></li>� <li class="dropdown">� <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>� <ul class="dropdown-menu" role="menu">� <li><a href="#">Action</a></li>� <li><a href="#">Another action</a></li>� <li><a href="#">Something else here</a></li>� <li class="divider"></li>� <li><a href="#">Separated link</a></li>� </ul>� </li>� </ul>� </div><!-- /.navbar-collapse -->� </div><!-- /.container-fluid -->�</nav>

​

Turn this...

<paper-toolbar>� <paper-icon-button icon="menu"></paper-icon-button>� <span>Toolbar</span>� <paper-icon-button icon="refresh"></paper-icon-button>� <paper-icon-button icon="add"></paper-icon-button>�</paper-toolbar>

​

Into this...

Created Polymer as an experiment to get developer input on the component standards.

#itshackademic

• 154+ Polytechnics
• 16K+ developers participated
• 82% surveyed say they are likely to use Polymer in a future project

THANK YOU!

MAKE IT

FAST

There’s an element for that

Polymer and modern web APIs: In production at Google scale

​

May 29 / 9:00 AM - 10:00 AM / Room 1 (L2)

​

Hands-on with Polymer

​

May 28 / 12:30 PM - 1:00 PM / Alcove 3 (L2)

May 28 / 3:00 PM - 3:30 PM / Alcove 3 (L2)

​

​

The Gold Standard:

Accessible Web Components

​

May 28 / 1:00 PM - 1:30 PM / Develop Talk 1 (L2)

May 29 / 12:30 PM - 1:00 PM / Develop Talk 1 (L2)

Increase Engagement

Extrapolated from http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

Service Worker

​

​

You are offline.

​

To continue searching please check your wifi and mobile data are turned on.

Indicative Example

onnotificationclick

onnotifications click

Complete offline experiences

​

​

wiki-offline.jakearchibald.com

{� "short_name": "Kinlan's Amaze App",� "name": "Kinlan's Amazing Application ++",� "icons": [� {� "src": "launcher-icon-2x.png",� "sizes": "96x96",� "type": "image/png"� },� ....� ],� "start_url": "/index.html",� "display": "standalone",� "orientation": "landscape"�}

Web App Manifest

<link rel="manifest" href="manifest.json">

Web App Install banner

• The app uses a service worker
• The site is using HTTPS
• The app has a manifest declared
• The manifest has a short_name, 144 pixel icon

Theme Integration

<meta� name="theme-color" � content="#3f4348">

Push Notifications

sup-messenger.appspot.com

Camera

exp.bartekdrozdz.com/app/webfilter/

navigator.getUserMedia = navigator.getUserMedia ||� navigator.webkitGetUserMedia ||� navigator.mozGetUserMedia ||� navigator.msGetUserMedia;��var video = document.querySelector('video');��if (navigator.getUserMedia) {� navigator.getUserMedia({ video: true }, � function(stream) {� video.src = window.URL.createObjectURL(stream);� }� , errorCallback);�}

Microphone

voice-memos.appspot.com/

navigator.getUserMedia = navigator.getUserMedia ||� navigator.webkitGetUserMedia ||� navigator.mozGetUserMedia ||� navigator.msGetUserMedia;��var video = document.querySelector('video');��if (navigator.getUserMedia) {� navigator.getUserMedia({ audio: true }, � function(stream) {� audio.src = window.URL.createObjectURL(stream);� }� , errorCallback);�}

Battery Status

googlechrome.github.io/samples/battery-status/

var batterySuccess = function(battery) {�� updateState(battery);�� // Monitor further updates� battery.addEventListener("levelchange", function() {

/* battery.level changed */

});� battery.addEventListener("chargingchange", function() {

/* battery.charging changed */

});� battery.addEventListener("dischargingtimechange", function() { });� battery.addEventListener("chargingtimechange", function() { });�};��navigator.getBattery().then(batterySuccess);

​

Permissions

navigator.permissions.query({name:'geolocation'})� .then(function(permStatus) � { � // geo permission is permStatus.status � permStatus.onchange = function() { � // geo permission changed to this.status); � };� });

jsbin.com/kafeju/latest

Net Info

jsbin.com/moturi/2

function changeHandler(e) {� // Handle change to connection here.� connEl.innerText = navigator.connection.type;�}���navigator.connection.addEventListener(

'typechange', changeHandler);

Optimize Form Entry

<input type=tel>�<input type=number>�<input type=date>�<input type=email>�<input type=search>

<input type="text" autocomplete="shipping street-address">�<input type="text" autocomplete="shipping postal-code">�<input type="text" autocomplete="shipping country">��<input type="text" autocomplete="cc-name">�<input type="text" autocomplete="cc-number">�<input type="text" autocomplete="cc-exp">

Massive increase in form fill speed when using autocomplete (*Chrome usage data)

Use autocomplete

• Interaction on demand.
• Walk up to any smart device - a vending machine, a poster, a toy, a bus stop, a rental car and not have to download an app first.
• Everything should be just a tap away.

Physical Web

google.github.io/physical-web/

Native

vs

Web

We have a great opportunity

Make an engaged user on the web

Engaged native user

Upgrade to

If you need:

Build better things more quickly

We want to show off your work

We are looking for your help

developers.google.com/web/showcase/spotlight/

More content bundles in Q3/Q4

We are looking for your help

THANK YOU!

THANK YOU!

Wonjae Lee

Jimmy Moon

Chang W. Doh

paulkinlan@google.com

Slack: chromiumdev-slack.herokuapp.com