SlideShare une entreprise Scribd logo
1  sur  92
Télécharger pour lire hors ligne
Embracing the anywhere, everywhere web
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
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
Chaotic & confusing...




 http://flic.kr/p/6qi1eD
...but also awesome
http://flic.kr/p/6tTRT1
Embracing the anywhere, everywhere web
Embracing the anywhere, everywhere web
Embracing the anywhere, everywhere web
Just the start

http://flic.kr/p/3HE7Eq
Rant #1
Layout is not enough
Embracing the anywhere, everywhere web
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
Embracing the anywhere, everywhere web
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

Contenu connexe

Similaire à 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
 
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
 
Containerize vs Virtualize? NGDC 2009
Containerize vs Virtualize? NGDC 2009Containerize vs Virtualize? NGDC 2009
Containerize vs Virtualize? NGDC 2009Andy d
 

Similaire à 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,...
 
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
 
Containerize vs Virtualize? NGDC 2009
Containerize vs Virtualize? NGDC 2009Containerize vs Virtualize? NGDC 2009
Containerize vs Virtualize? NGDC 2009
 

Dernier

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Dernier (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

Embracing the anywhere, everywhere web