the contextual experience of the mobile web
DESCRIPTION
The great native apps vs mobile web debate will live on for a little while longer, but more and more we are realizing that we can get the best of both worlds with mobile web apps. However, there is an expectation of context on mobile devices, and ignoring that experience expectation is a mistake. Let's look at the contextual experience of the mobile web.TRANSCRIPT
![Page 1: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/1.jpg)
The Contextual Experience of the Mobile Web
Jeff CarouthZendCon, October 19, 2011
Wednesday, October 19, 2011
![Page 2: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/2.jpg)
Howdy!
(Yeah, I’m from Texas.)
PHP Developer since 2003
Web and mobile developer at Texas A&M University
Wednesday, October 19, 2011
![Page 3: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/3.jpg)
This is not a presentation about development…
Wednesday, October 19, 2011
![Page 4: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/4.jpg)
…nor is it about design…
Wednesday, October 19, 2011
![Page 5: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/5.jpg)
…it’s about the collision of the two on the mobile web.
Wednesday, October 19, 2011
![Page 6: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/6.jpg)
The Big Three
The context of the mobile web is the specific environment and expectations
a user or visitor of your website or application brings when he or she
accesses it while mobile or using a mobile device.
Wednesday, October 19, 2011
![Page 7: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/7.jpg)
Environment, expectations, and intent
Mobile and mobility
Devices and capabilities
Wednesday, October 19, 2011
![Page 8: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/8.jpg)
In my opinion, design plays a major role in mobile
success.
Wednesday, October 19, 2011
![Page 9: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/9.jpg)
Wednesday, October 19, 2011
![Page 10: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/10.jpg)
Wednesday, October 19, 2011
![Page 11: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/11.jpg)
The question then becomes how can you accommodate
both a 27” iMac and an iPhone?
Wednesday, October 19, 2011
![Page 12: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/12.jpg)
Or, more accurately, how can you accommodate browsers of differing
widths?
Wednesday, October 19, 2011
![Page 13: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/13.jpg)
Obvious Answer: Layouts
Wednesday, October 19, 2011
![Page 14: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/14.jpg)
Option–redirect
Wednesday, October 19, 2011
![Page 15: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/15.jpg)
User Agent sniffing
If UA indicates mobile device
redirect to separate mobile site, or
provide a link to a separate mobile site
Wednesday, October 19, 2011
![Page 16: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/16.jpg)
function mobile_device_detect(/* bunch of params */) { $mobile_browser = false; $user_agent = $_SERVER['HTTP_USER_AGENT']; $accept = $_SERVER['HTTP_ACCEPT'];
switch(true){ case (preg_match('/ipad/i',$user_agent)); $mobile_browser = $ipad; $status = 'Apple iPad'; if(substr($ipad,0,4)=='http'){ $mobileredirect = $ipad; } break; }
if($mobile_browser==true){ header('Location: '.$redirect); exit; }} http://detectmobilebrowsers.mobi
Wednesday, October 19, 2011
![Page 17: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/17.jpg)
Or Show A Link
Wednesday, October 19, 2011
![Page 18: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/18.jpg)
Problems with this method
Perhaps your user wants your full site.
They’ll likely miss any links
and alert boxes are terrible.
Wednesday, October 19, 2011
![Page 19: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/19.jpg)
Option–layout switching
Wednesday, October 19, 2011
![Page 20: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/20.jpg)
function is_mobile() { $user_agent = strtolower($_SERVER['HTTP_USER_AGENT']); if (in_array( substr($user_agent, 0, 4), array('ipod','cell',...))) { return true; } if (strpos($_SERVER['HTTP_ACCEPT'], 'wap') != false) { return true; } if (preg_match( "/(android|blackberry|ipod|palm|...))/i", $user_agent)) { return true; } return false;}
Wednesday, October 19, 2011
![Page 21: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/21.jpg)
if (is_mobile()) { require_once "mobile-layout.php";} else { require_once "desktop-layout.php";}
Wednesday, October 19, 2011
![Page 22: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/22.jpg)
That’s very basic, and largely unreliable.
Wednesday, October 19, 2011
![Page 23: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/23.jpg)
We can use a device database to improve the
accuracy of matches.
Wednesday, October 19, 2011
![Page 24: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/24.jpg)
WURFL (Wireless Universal Resource FiLe)
Device Atlas
Choices
Wednesday, October 19, 2011
![Page 25: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/25.jpg)
class Bootstrap extends Zend_Application_Bootstrap_Abstract{ protected function _mobileLayoutSwitch() { $this->bootstrap('useragent'); $this->bootstrap('layout'); $uaType = $this->getResource('useragent') ->getDevice() ->getType(); if ($uaType === 'mobile') { $this->getResource('layout') ->setLayout('mobile'); } }}
Wednesday, October 19, 2011
![Page 26: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/26.jpg)
protected function _mobileLayoutSwitch() { $this->bootstrap('useragent'); $this->bootstrap('layout'); $resolution = $this->getResource('useragent') ->getDevice() ->getFeature('resolution_width'); if ($resolution < 320) { $layout = 'poor'; } elseif ($resoution < 480) { $layout = 'medium'; } else { $layout = 'desktop'; } $this->getResource('layout')->setLayout($layout);}
Wednesday, October 19, 2011
![Page 27: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/27.jpg)
It works…
But we can do better.
We can apply the mantra: “branch on features not user agents” to our mobile layouts.
Wednesday, October 19, 2011
![Page 28: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/28.jpg)
The problem with user agents is: they lie.
Wednesday, October 19, 2011
![Page 29: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/29.jpg)
Option–responsive layout
Wednesday, October 19, 2011
![Page 30: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/30.jpg)
So, how many of you remember liquid or fluid
layouts?
Wednesday, October 19, 2011
![Page 31: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/31.jpg)
Responsive breakpoints
Wednesday, October 19, 2011
![Page 32: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/32.jpg)
Techniques
All in one CSS file
Base CSS file and one CSS file for each class of device
Major breakpoints in <link> media attribute
Minor breakpoints in device stylesheet
Wednesday, October 19, 2011
![Page 33: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/33.jpg)
/****** mobile.css ******/@media screen and (min-width: 480px) { /* styles for this class of mobile browser */}
@media screen and (min-width: 640px) { /* iPad maybe? */}
<link rel=stylesheet type=text/css href=styles/base.css media="screen,handheld" />
<link rel=stylesheet type=text/css href=styles/mobile.css media="only screen and (min-width: 320px)" />
<link rel=stylesheet type=text/css href=styles/desktop.css media="only screen and (min-width: 720px)" />
Wednesday, October 19, 2011
![Page 34: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/34.jpg)
Desktop and iPad
Wednesday, October 19, 2011
![Page 35: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/35.jpg)
A couple mobile devices
Nexus OneiPhone 3GS iPhone 4
Wednesday, October 19, 2011
![Page 36: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/36.jpg)
That’s great, but we haven’t really solved the device
context yet.
Wednesday, October 19, 2011
![Page 37: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/37.jpg)
Problem: limited bandwidth
Wednesday, October 19, 2011
![Page 38: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/38.jpg)
All we adjusted for is width
Images are the same size for desktops as they are for mobile
This is bad. Very bad.
Solution?
Wednesday, October 19, 2011
![Page 39: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/39.jpg)
JavaScript-based image resize
Credit: http://jedimsieer.deviantart.com/Wednesday, October 19, 2011
![Page 40: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/40.jpg)
(function(win) { /* code */ var loadLarge = win.screen.availWidth > 480; if (!loadLarge) { return; } // more code... imgs = document.getElementsByTagName("img"); for ( var i = 0, il = imgs.length; i < il; i++) { src = imgs[i].getAttribute("src"); fullImgSrc = src.match( /(\?|&)full=(.*)&?/ ) && RegExp.$2; if( fullImgSrc ) { imgs[i].src = fullImgSrc; } } //more code...})(this);
<img src="images/sample-small.jpg?full=images/sample-large.jpg" />
https://github.com/filamentgroup/Responsive-Images
Wednesday, October 19, 2011
![Page 41: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/41.jpg)
Alternative
Do the work on the server.
(You know, like in the 1990s when JavaScript was Evil(tm))
Wednesday, October 19, 2011
![Page 42: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/42.jpg)
Device requests page from server.
Service asks device for its device profile (cookie?)
No profile available, build one from base.
Load resources based on profile.
Deliver content AND profile to device.
The Process
Wednesday, October 19, 2011
![Page 43: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/43.jpg)
I haven’t seen this implemented yet.
Wednesday, October 19, 2011
![Page 44: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/44.jpg)
The mobility context
Wednesday, October 19, 2011
![Page 45: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/45.jpg)
Wednesday, October 19, 2011
![Page 46: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/46.jpg)
The Go To Example
Geolocation
i.e., driving directions or stores near me
Wednesday, October 19, 2011
![Page 47: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/47.jpg)
Do you trust directions from my site, or from
Google Maps?
Wednesday, October 19, 2011
![Page 48: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/48.jpg)
Right. I use Google Maps too.
Wednesday, October 19, 2011
![Page 49: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/49.jpg)
So let’s use geolocation for something else.
Wednesday, October 19, 2011
![Page 50: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/50.jpg)
Working on a CRM
Sales agent travels to Switzerland
Give a listing of leads/customers in the area.
Wednesday, October 19, 2011
![Page 51: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/51.jpg)
HTML5 Geolocation API
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { callGeonamesWebservice( position.coords.latitude, position.coords.longitude); }, function (error) { //handle error } );}
Wednesday, October 19, 2011
![Page 52: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/52.jpg)
<geonames> <code> <postalcode>8775</postalcode> <name>Luchsingen</name> <countryCode>CH</countryCode> <lat>46.98017</lat> <lng>8.99868</lng> <adminCode1/> <adminName1/> <adminCode2/> <adminName2/> <adminCode3>1631</adminCode3> <adminName3/> <distance>2.2072</distance> </code></geonames>
Wednesday, October 19, 2011
![Page 53: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/53.jpg)
Fetch Data From Your App
Wednesday, October 19, 2011
![Page 54: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/54.jpg)
function findCustomersByPostalCode( $postalCodes, $recency) { //some SQL //where postal_code in $postalCodes //and last_contact between $recency and today
return $customers;}
Wednesday, October 19, 2011
![Page 55: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/55.jpg)
That’s just one example. Mobility context is absolutely
application-specific
Wednesday, October 19, 2011
![Page 56: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/56.jpg)
Recap
Many options for dealing with device context
User Agent sniffing
Redirect
Layout switch
Responsive design
Wednesday, October 19, 2011
![Page 57: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/57.jpg)
Recap (cont.)
Users want to complete a task, not always informative in nature.
Mobile is quickly shifting from a nice-to-have to a must have component of your projects.
Wednesday, October 19, 2011
![Page 58: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/58.jpg)
What about jQuery Mobile and other mobile
frameworks?
Wednesday, October 19, 2011
![Page 59: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/59.jpg)
Thank you!
Wednesday, October 19, 2011
![Page 60: The Contextual Experience of the Mobile Web](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c90fbc4a79594f398b4593/html5/thumbnails/60.jpg)
Questions?
Contact me
@jcarouth
jcarouth on Freenode
Rate at: http://joind.in/3786
Wednesday, October 19, 2011