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
 
Case study: ArtFinder - Building digital capacity for the arts
Case study: ArtFinder - Building digital capacity for the artsCase study: ArtFinder - Building digital capacity for the arts
Case study: ArtFinder - Building digital capacity for the artsArts Council England
 
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
 

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
 
Case study: ArtFinder - Building digital capacity for the arts
Case study: ArtFinder - Building digital capacity for the artsCase study: ArtFinder - Building digital capacity for the arts
Case study: ArtFinder - Building digital capacity for the arts
 
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
 

Recently uploaded

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAndrey Devyatkin
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 

Recently uploaded (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

Embracing the anywhere, everywhere web