SlideShare uma empresa Scribd logo
1 de 92
Baixar para ler 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

Mais conteúdo relacionado

Semelhante a Embracing the anywhere, everywhere web

Remixable Media Week 2 Seminar
Remixable Media Week 2 SeminarRemixable Media Week 2 Seminar
Remixable Media Week 2 Seminar
Michela Ledwidge
 
60 Gadgets In 60 Minutes
60 Gadgets In 60 Minutes60 Gadgets In 60 Minutes
60 Gadgets In 60 Minutes
Vickie Kline
 

Semelhante a 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
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
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
 
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...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
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
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
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
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
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
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 

Embracing the anywhere, everywhere web