92

Embracing the anywhere, everywhere web

Embed Size (px)

DESCRIPTION

Presented at WebVisions 2012 in Portland on May 17, 2012.

Citation preview

Page 1: Embracing the anywhere, everywhere web
Page 3: Embracing the anywhere, everywhere web

http://flic.kr/p/6sbgQu

Page 4: Embracing the anywhere, everywhere web

http://flic.kr/p/6sbgQu

It is apparent to me that the possibilities of the aeroplane, which two or three years ago were thought to hold the solution to the [flying machine] problem, have been exhausted, and that we must turn elsewhere.Thomas Edison, 1895

Page 5: Embracing the anywhere, everywhere web

http://flic.kr/p/bgenU

Page 6: Embracing the anywhere, everywhere web

http://flic.kr/p/bgenU

Television won't last because people will soon get tired of staring at a plywood box every night.Daryl Zanuck, movie producer, 20th Century Fox, 1946

Page 7: Embracing the anywhere, everywhere web

http://flic.kr/p/6e7uqr

We’re not good atpredicting the future

Page 8: Embracing the anywhere, everywhere web

We see the world through a rear-view mirror. We march backwards into the future.Marshall McLuhan

Page 9: Embracing the anywhere, everywhere web

http://bit.ly/A6AhV1

Pre-iPhone

Post-iPhone

Page 10: Embracing the anywhere, everywhere web

“Moving pictures”http://flic.kr/p/8j93Sm

Page 11: Embracing the anywhere, everywhere web

http://flic.kr/p/g4F5j

Reading out loud

Page 12: Embracing the anywhere, everywhere web

http://flic.kr/p/5cZQTZ

Radio with pictures

Page 13: Embracing the anywhere, everywhere web

http://flic.kr/p/6vmzSp

Print is full of constraints

Page 14: Embracing the anywhere, everywhere web

http://flic.kr/p/anLpJ5

...not shared by the web

Page 20: Embracing the anywhere, everywhere web

Tablet sales

http://buswk.co/fK2Q9e

$49 billion by 2015

Page 21: Embracing the anywhere, everywhere web

Source: http://bit.ly/KoRXS0

0

10

20

30

2011 2020

Global connected devices

Page 22: Embracing the anywhere, everywhere web

Source: http://bit.ly/KoRXS0

0

10

20

30

2011 2020

Global connected devices

Over 50% non-mobile

Page 23: Embracing the anywhere, everywhere web

http://flic.kr/p/y44Rv

iCow

Page 24: Embracing the anywhere, everywhere web

http://flic.kr/p/8wwtH4

Page 25: Embracing the anywhere, everywhere web

Different sizeshttp://flic.kr/p/7S5qAB

Page 26: Embracing the anywhere, everywhere web

Different networks

http://flic.kr/p/3bqHYJ

Page 27: Embracing the anywhere, everywhere web

Different hardware

http://flic.kr/p/anHsXT

Page 28: Embracing the anywhere, everywhere web

Different supporthttp://flic.kr/p/a9GzWC

Page 29: Embracing the anywhere, everywhere web

Different input

http://flic.kr/p/3eVaZ1

Page 30: Embracing the anywhere, everywhere web

Different context

http://flic.kr/p/2ynHaS

Page 31: Embracing the anywhere, everywhere web
Page 32: Embracing the anywhere, everywhere web

These examples are just the initial, telltale signs of a huge new wave of cheap devices about to invade our lives—a zombie apocalypse of electronics, if you will.Scott Jenson

http://bit.ly/giroPy

Page 33: Embracing the anywhere, everywhere web

http://flic.kr/p/6qi1eD

Chaotic & confusing...

Page 34: Embracing the anywhere, everywhere web

http://flic.kr/p/6tTRT1

...but also awesome

Page 35: Embracing the anywhere, everywhere web
Page 36: Embracing the anywhere, everywhere web
Page 37: Embracing the anywhere, everywhere web
Page 38: Embracing the anywhere, everywhere web

http://flic.kr/p/3HE7Eq

Just the start

Page 39: Embracing the anywhere, everywhere web

Layout is not enoughRant #1

Page 40: Embracing the anywhere, everywhere web
Page 41: Embracing the anywhere, everywhere web

Responsive experiences

Page 42: Embracing the anywhere, everywhere web

Constellation of experiences

http://flic.kr/p/RJUvh

Page 43: Embracing the anywhere, everywhere web

http://yhoo.it/rSflAg

59%

Page 44: Embracing the anywhere, everywhere web

http://yhoo.it/rSflAg

34%

Page 45: Embracing the anywhere, everywhere web

Contextual experiences

http://flic.kr/p/6e7uqr

Page 46: Embracing the anywhere, everywhere web

Context is the key to moving from a web that responds to devices, to a web that responds to people

Page 47: Embracing the anywhere, everywhere web

Smarter defaults

Page 48: Embracing the anywhere, everywhere web

Typically, masking passwords doesn't even increase security, but it does cost you business due to login failuresJakob Nielson

http://bit.ly/9X3LAG

Page 49: Embracing the anywhere, everywhere web
Page 50: Embracing the anywhere, everywhere web

Hide

Page 51: Embracing the anywhere, everywhere web

Capabilities

Page 54: Embracing the anywhere, everywhere web

http://flic.kr/p/6e7uqr

Page 55: Embracing the anywhere, everywhere web

Battery statusContactsHTML Media CaptureMedia CaptureNetwork InformationSensorVibrationWeb IntentsCalendarMenuGeolocationNFC

Page 56: Embracing the anywhere, everywhere web

Do some research

http://flic.kr/p/6e7uqr

Page 57: Embracing the anywhere, everywhere web

If nothing else, it would be wise for us all to remember that, while our information technology may be digital in nature, the human beings interacting with it will always be infuriatingly and delightfully analog.Adam Greenfield

Everyware: The Dawning Age of Ubiquitous Computing

Page 58: Embracing the anywhere, everywhere web

We need all the tools we can get

http://flic.kr/p/7MdW6A

Page 59: Embracing the anywhere, everywhere web

No more dogmaRant #2

Page 60: Embracing the anywhere, everywhere web

UA detectionis evil!

Page 61: Embracing the anywhere, everywhere web

UA detectionis evil!

Page 62: Embracing the anywhere, everywhere web

Don’t blame the tools for the craftsman

http://flic.kr/p/7MdW6A

Page 63: Embracing the anywhere, everywhere web

There are badRWD sites

Page 64: Embracing the anywhere, everywhere web

There are badseparate sites

Page 66: Embracing the anywhere, everywhere web

http://flic.kr/p/6e7uqr

Page 67: Embracing the anywhere, everywhere web

http://flic.kr/p/6e7uqr

Page 68: Embracing the anywhere, everywhere web

http://flic.kr/p/6e7uqr

Page 69: Embracing the anywhere, everywhere web

Hug it out

http://flic.kr/p/7cVEwZ

Hug it out

Page 70: Embracing the anywhere, everywhere web

Use both!

http://flic.kr/p/81vbku

Page 71: Embracing the anywhere, everywhere web

Bad UA detectionis evil!

Page 72: Embracing the anywhere, everywhere web

Don’t exclude.http://flic.kr/p/6RtJPG

Page 73: Embracing the anywhere, everywhere web

Don’t exclude.Enhance.http://flic.kr/p/6RtJPG

Page 74: Embracing the anywhere, everywhere web

if ($device->getCapability('has_cellular_radio') ===

'true') {

! if ($device->getCapability

('xhtml_make_phone_call_string') !== 'none') {

! ! $wireless = true;

! ! $method = $device->getCapability

('xhtml_make_phone_call_string');

! } else {

! ! $wireless = false;

! }

} else {

! $wireless = false;

}

Page 75: Embracing the anywhere, everywhere web

if ($device->getCapability('has_cellular_radio') ===

'true') {

! if ($device->getCapability

('xhtml_make_phone_call_string') !== 'none') {

! ! $wireless = true;

! ! $method = $device->getCapability

('xhtml_make_phone_call_string');

! } else {

! ! $wireless = false;

! }

} else {

! $wireless = false;

}

Page 76: Embracing the anywhere, everywhere web

if ($device->getCapability('has_cellular_radio') ===

'true') {

! if ($device->getCapability

('xhtml_make_phone_call_string') !== 'none') {

! ! $wireless = true;

! ! $method = $device->getCapability

('xhtml_make_phone_call_string');

! } else {

! ! $wireless = false;

! }

} else {

! $wireless = false;

}

Page 77: Embracing the anywhere, everywhere web

<?php if ($wireless) { ?>

! <p><a href="<?php echo $method; ?>

+18005555555">1-800-555-5555</a></p>

<?php } else { ?>

! <p class="call">1-800-555-5555</p>

<?php } ?>

Page 78: Embracing the anywhere, everywhere web

<?php if ($wireless) { ?>

! <p><a href="<?php echo $method; ?>

+18005555555">1-800-555-5555</a></p>

<?php } else { ?>

! <p class="call">1-800-555-5555</p>

<?php } ?>

Page 79: Embracing the anywhere, everywhere web

<?php if ($wireless) { ?>

! <p><a href="<?php echo $method; ?>

+18005555555">1-800-555-5555</a></p>

<?php } else { ?>

! <p class="call">1-800-555-5555</p>

<?php } ?>

Page 80: Embracing the anywhere, everywhere web

var width = window.innerWidth;

//set a cookie

<?php

$featureWidth = $_COOKIE[‘featureWidth’];

?>

Page 81: Embracing the anywhere, everywhere web

http://flic.kr/p/5ox3ax

Page 82: Embracing the anywhere, everywhere web

</rant>

Page 85: Embracing the anywhere, everywhere web

http://breakoutjs.com/

Page 86: Embracing the anywhere, everywhere web

http://jsdo.it/controller

Page 87: Embracing the anywhere, everywhere web

http://jsdo.it/controller

Page 88: Embracing the anywhere, everywhere web

Whatʼs holding smart devices back is our oh-so-human ability to misunderstand their potential.Scott Jenson

http://bit.ly/HS0Jvs

Page 89: Embracing the anywhere, everywhere web

http://flic.kr/p/6e7uqr

Beware the rear-view mirror

Page 90: Embracing the anywhere, everywhere web

http://flic.kr/p/8wwtH4

Page 91: Embracing the anywhere, everywhere web

thank you!

TIM KADLECWebVisions, May 2012

@tkadlec timkadlec.com

Page 92: Embracing the anywhere, everywhere web

http://flic.kr/p/6e7uqr

responsiveenhancement.com