SlideShare a Scribd company logo
1 of 92
Download to read offline
http://bit.ly/J9REzG
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




http://flic.kr/p/6sbgQu
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




http://flic.kr/p/bgenU
We’re not good at
                         predicting the future



http://flic.kr/p/6e7uqr
“   We see the world through a rear-
    view mirror. We march
    backwards into the future.
    Marshall McLuhan
Pre-iPhone




      Post-iPhone



http://bit.ly/A6AhV1
“Moving pictures”
http://flic.kr/p/8j93Sm
Reading out loud




http://flic.kr/p/g4F5j
Radio with pictures
               http://flic.kr/p/5cZQTZ
Print is full of constraints
                       http://flic.kr/p/6vmzSp
...not shared by the web
 http://flic.kr/p/anLpJ5
http://www.lukew.com/ff/entry.asp?1506
http://www.lukew.com/ff/entry.asp?1506
http://www.lukew.com/ff/entry.asp?1506
http://www.lukew.com/ff/entry.asp?1506
http://www.lukew.com/ff/entry.asp?1506
Tablet sales
$49 billion by 2015




                      http://buswk.co/fK2Q9e
Global connected devices
30




20




10




   0
                               2011          2020


Source: http://bit.ly/KoRXS0
Global connected devices
30




20

       Over 50% non-mobile
10




   0
                               2011          2020


Source: http://bit.ly/KoRXS0
iCow




 http://flic.kr/p/y44Rv
http://flic.kr/p/8wwtH4
Different sizes
          http://flic.kr/p/7S5qAB
Different networks




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




http://flic.kr/p/anHsXT
Different support
http://flic.kr/p/a9GzWC
Different input

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


             http://flic.kr/p/2ynHaS
“   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
Chaotic & confusing...




 http://flic.kr/p/6qi1eD
...but also awesome
http://flic.kr/p/6tTRT1
Just the start

http://flic.kr/p/3HE7Eq
Rant #1
Layout is not enough
Responsive experiences
Constellation of experiences
http://flic.kr/p/RJUvh
59%
http://yhoo.it/rSflAg
34%
http://yhoo.it/rSflAg
Contextual experiences

http://flic.kr/p/6e7uqr
Context is the key to moving
from a web that responds to
devices, to a web that
responds to people
Smarter defaults
“    Typically, masking passwords
     doesn't even increase security,
     but it does cost you business
     due to login failures
     Jakob Nielson




    http://bit.ly/9X3LAG
Hide
Capabilities
http://bit.ly/nJSlwX
http://bit.ly/nJSlwX
http://flic.kr/p/6e7uqr
Battery status
Contacts
HTML Media Capture
Media Capture
Network Information
Sensor
Vibration
Web Intents
Calendar
Menu
Geolocation
NFC
Do some research




  http://flic.kr/p/6e7uqr
“   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
We need all the tools
we can get


http://flic.kr/p/7MdW6A
Rant #2
No more dogma
UA detection
is evil!
UA detection
is evil!
Don’t blame the tools
for the craftsman


http://flic.kr/p/7MdW6A
There are bad
RWD sites
There are bad
separate sites
http://bit.ly/GH2nBe
http://flic.kr/p/6e7uqr
http://flic.kr/p/6e7uqr
http://flic.kr/p/6e7uqr
Hug it out
                         Hug it out




http://flic.kr/p/7cVEwZ
Use both!




http://flic.kr/p/81vbku
Bad UA detection
is evil!
Don’t exclude.
  http://flic.kr/p/6RtJPG
Don’t exclude. Enhance.
  http://flic.kr/p/6RtJPG
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;
}
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;
}
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;
}
<?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 } ?>
<?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 } ?>
<?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 } ?>
var width = window.innerWidth;
//set a cookie


<?php
$featureWidth = $_COOKIE[‘featureWidth’];
?>
http://flic.kr/p/5ox3ax
</rant>
http://www.ubuntu.com/devices/android
http://bit.ly/KuHXaH
http://breakoutjs.com/
http://jsdo.it/controller
http://jsdo.it/controller
“   Whatʼs holding smart devices
    back is our oh-so-human ability
    to misunderstand their potential.
    Scott Jenson




    http://bit.ly/HS0Jvs
Beware the rear-view mirror

http://flic.kr/p/6e7uqr
http://flic.kr/p/8wwtH4
thank you!



TIM KADLEC
WebVisions, May 2012

@tkadlec   timkadlec.com
responsiveenhancement.com
http://flic.kr/p/6e7uqr

More Related Content

Similar to Embracing the anywhere, everywhere web

Creating Responsive Experiences
Creating Responsive ExperiencesCreating Responsive Experiences
Creating Responsive ExperiencesTim Kadlec
 
IR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwIR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwYusuke Kawasaki
 
nullcon 2011 - No bullshit on underground crime: traces, trends, attribution,...
nullcon 2011 - No bullshit on underground crime: traces, trends, attribution,...nullcon 2011 - No bullshit on underground crime: traces, trends, attribution,...
nullcon 2011 - No bullshit on underground crime: traces, trends, attribution,...n|u - The Open Security Community
 
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014Christian Heilmann
 
Remixable Media Week 2 Seminar
Remixable Media Week 2 SeminarRemixable Media Week 2 Seminar
Remixable Media Week 2 SeminarMichela Ledwidge
 
Georgia library association 2011
Georgia library association 2011Georgia library association 2011
Georgia library association 2011Jason Griffey
 
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian SudaConnecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Sudabeyond tellerrand
 
AssetTouchAndTry-20180322
AssetTouchAndTry-20180322AssetTouchAndTry-20180322
AssetTouchAndTry-20180322Takashi Jona
 
Open Source Hardware at OTA11
Open Source Hardware at OTA11Open Source Hardware at OTA11
Open Source Hardware at OTA11Paul Downey
 
computer science project on movie booking system
computer science project on movie booking systemcomputer science project on movie booking system
computer science project on movie booking systemAnurag Yadav
 
Angular js活用事例:filydoc
Angular js活用事例:filydocAngular js活用事例:filydoc
Angular js活用事例:filydocKeiichi Kobayashi
 
60 Gadgets In 60 Minutes
60 Gadgets In 60 Minutes60 Gadgets In 60 Minutes
60 Gadgets In 60 MinutesVickie Kline
 
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera SoftwareYandex
 
Responsive Web Design: A Deep-Dive Crash Course
Responsive Web Design: A Deep-Dive Crash CourseResponsive Web Design: A Deep-Dive Crash Course
Responsive Web Design: A Deep-Dive Crash CourseMatt Smith
 
Real time web (Orbited) at BCNE3
Real time web (Orbited) at BCNE3Real time web (Orbited) at BCNE3
Real time web (Orbited) at BCNE3Alex Kavanagh
 
Open Hardware and Libraries
Open Hardware and LibrariesOpen Hardware and Libraries
Open Hardware and LibrariesJason Griffey
 

Similar to Embracing the anywhere, everywhere web (20)

Creating Responsive Experiences
Creating Responsive ExperiencesCreating Responsive Experiences
Creating Responsive Experiences
 
IR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwIR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctw
 
nullcon 2011 - No bullshit on underground crime: traces, trends, attribution,...
nullcon 2011 - No bullshit on underground crime: traces, trends, attribution,...nullcon 2011 - No bullshit on underground crime: traces, trends, attribution,...
nullcon 2011 - No bullshit on underground crime: traces, trends, attribution,...
 
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
 
Remixable Media Week 2 Seminar
Remixable Media Week 2 SeminarRemixable Media Week 2 Seminar
Remixable Media Week 2 Seminar
 
Georgia library association 2011
Georgia library association 2011Georgia library association 2011
Georgia library association 2011
 
Connecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian SudaConnecting The Digital To Analog - Brian Suda
Connecting The Digital To Analog - Brian Suda
 
AssetTouchAndTry-20180322
AssetTouchAndTry-20180322AssetTouchAndTry-20180322
AssetTouchAndTry-20180322
 
Open Source Hardware at OTA11
Open Source Hardware at OTA11Open Source Hardware at OTA11
Open Source Hardware at OTA11
 
Xenforo
XenforoXenforo
Xenforo
 
computer science project on movie booking system
computer science project on movie booking systemcomputer science project on movie booking system
computer science project on movie booking system
 
Angular js活用事例:filydoc
Angular js活用事例:filydocAngular js活用事例:filydoc
Angular js活用事例:filydoc
 
60 Gadgets In 60 Minutes
60 Gadgets In 60 Minutes60 Gadgets In 60 Minutes
60 Gadgets In 60 Minutes
 
"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software"How to Destroy The Web". Bruce Lawson, Opera Software
"How to Destroy The Web". Bruce Lawson, Opera Software
 
Responsive Web Design: A Deep-Dive Crash Course
Responsive Web Design: A Deep-Dive Crash CourseResponsive Web Design: A Deep-Dive Crash Course
Responsive Web Design: A Deep-Dive Crash Course
 
Simplicity
SimplicitySimplicity
Simplicity
 
Simplicity
SimplicitySimplicity
Simplicity
 
DEBUGGING THE MOBILE WEB
DEBUGGING THE MOBILE WEBDEBUGGING THE MOBILE WEB
DEBUGGING THE MOBILE WEB
 
Real time web (Orbited) at BCNE3
Real time web (Orbited) at BCNE3Real time web (Orbited) at BCNE3
Real time web (Orbited) at BCNE3
 
Open Hardware and Libraries
Open Hardware and LibrariesOpen Hardware and Libraries
Open Hardware and Libraries
 

Recently uploaded

React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...itnewsafrica
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 

Recently uploaded (20)

React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 

Embracing the anywhere, everywhere web