0
The Contextual Experience                    of the Mobile Web                                    Jeff Carouth            ...
Howdy!                        (Yeah, I’m from Texas.)                        PHP Developer since 2003                     ...
This is not a presentation                      about development…Wednesday, October 19, 2011
…nor is it about design…Wednesday, October 19, 2011
…it’s about the collision of                the two on the mobile web.Wednesday, October 19, 2011
The Big Three                    The context of the mobile web is the                    specific environment and expectati...
Environment, expectations, and intent                              Mobile and mobility                              Device...
In my opinion, design plays                     a major role in mobile                            success.Wednesday, Octob...
Wednesday, October 19, 2011
Wednesday, October 19, 2011
The question then becomes                how can you accommodate                  both a 27” iMac and an                  ...
Or, more accurately, how                       can you accommodate                        browsers of differing           ...
Obvious Answer: LayoutsWednesday, October 19, 2011
Option–redirectWednesday, October 19, 2011
User Agent sniffing                              If UA indicates mobile device                               redirect to se...
function mobile_device_detect(/* bunch of params */) {      $mobile_browser   = false;      $user_agent       = $_SERVER[H...
Or Show A LinkWednesday, October 19, 2011
Problems with this method                              Perhaps your user wants your full site.                          Th...
Option–layout switchingWednesday, October 19, 2011
function is_mobile() {      $user_agent = strtolower($_SERVER[HTTP_USER_AGENT]);      if (in_array(          substr($user_...
if (is_mobile()) {        require_once "mobile-layout.php";    } else {        require_once "desktop-layout.php";    }Wedn...
That’s very basic, and                               largely unreliable.Wednesday, October 19, 2011
We can use a device                        database to improve the                         accuracy of matches.Wednesday, ...
Choices                        WURFL (Wireless Universal Resource                        FiLe)                            ...
class Bootstrap        extends Zend_Application_Bootstrap_Abstract    {        protected function _mobileLayoutSwitch() { ...
protected function _mobileLayoutSwitch() {        $this->bootstrap(useragent);        $this->bootstrap(layout);        $re...
It works…                              But we can do better.                         We can apply the mantra: “branch on  ...
The problem with user                                agents is: they lie.Wednesday, October 19, 2011
Option–responsive layoutWednesday, October 19, 2011
So, how many of you                        remember liquid or fluid                                layouts?Wednesday, Octob...
Responsive breakpointsWednesday, October 19, 2011
Techniques                 All in one CSS file                 Base CSS file and one CSS file for each                class o...
<link rel=stylesheet type=text/css        href=styles/base.css media="screen,handheld" />    <link rel=stylesheet type=tex...
Desktop and iPadWednesday, October 19, 2011
A couple mobile devices       iPhone 3GS                           iPhone 4                                Nexus OneWednes...
That’s great, but we haven’t                   really solved the device                          context yet.Wednesday, Oc...
Problem: limited bandwidthWednesday, October 19, 2011
All we adjusted for is width                         Images are the same size for desktops                        as they ...
JavaScript-based image                                       resize                                            Credit: htt...
<img src="images/sample-small.jpg?full=images/sample-    large.jpg" />    (function(win) {      /* code */      var loadLa...
Alternative                              Do the work on the server.                         (You know, like in the 1990s w...
The Process                   Device requests page from server.                  Service asks device for its device profile...
I haven’t seen this                              implemented yet.Wednesday, October 19, 2011
The mobility contextWednesday, October 19, 2011
Wednesday, October 19, 2011
The Go To Example                        Geolocation                        i.e., driving directions or stores near       ...
Do you trust directions                           from my site, or from                              Google Maps?Wednesday...
Right. I use Google Maps                                   too.Wednesday, October 19, 2011
So let’s use geolocation for                        something else.Wednesday, October 19, 2011
Working on a CRM                              Sales agent travels to Switzerland                         Give a listing of...
HTML5 Geolocation API     if (navigator.geolocation) {         navigator.geolocation.getCurrentPosition(             funct...
<geonames>        <code>            <postalcode>8775</postalcode>            <name>Luchsingen</name>            <countryCo...
Fetch Data From Your AppWednesday, October 19, 2011
function findCustomersByPostalCode(            $postalCodes,            $recency) {        //some SQL        //where posta...
That’s just one example.            Mobility context is absolutely                application-specificWednesday, October 19...
Recap                         Many options for dealing with device                        context                         ...
Recap (cont.)                         Users want to complete a task, not                        always informative in natu...
What about jQuery Mobile                    and other mobile                       frameworks?Wednesday, October 19, 2011
Thank you!Wednesday, October 19, 2011
Questions?                              Contact me                               jcarouth@gmail.com                       ...
Upcoming SlideShare
Loading in...5
×

The Contextual Experience of the Mobile Web

1,900

Published on

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.

Published in: Technology, Business
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,900
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "The Contextual Experience of the Mobile Web"

  1. 1. The Contextual Experience of the Mobile Web Jeff Carouth ZendCon, October 19, 2011Wednesday, October 19, 2011
  2. 2. Howdy! (Yeah, I’m from Texas.) PHP Developer since 2003 Web and mobile developer at Texas A&M UniversityWednesday, October 19, 2011
  3. 3. This is not a presentation about development…Wednesday, October 19, 2011
  4. 4. …nor is it about design…Wednesday, October 19, 2011
  5. 5. …it’s about the collision of the two on the mobile web.Wednesday, October 19, 2011
  6. 6. 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
  7. 7. Environment, expectations, and intent Mobile and mobility Devices and capabilitiesWednesday, October 19, 2011
  8. 8. In my opinion, design plays a major role in mobile success.Wednesday, October 19, 2011
  9. 9. Wednesday, October 19, 2011
  10. 10. Wednesday, October 19, 2011
  11. 11. The question then becomes how can you accommodate both a 27” iMac and an iPhone?Wednesday, October 19, 2011
  12. 12. Or, more accurately, how can you accommodate browsers of differing widths?Wednesday, October 19, 2011
  13. 13. Obvious Answer: LayoutsWednesday, October 19, 2011
  14. 14. Option–redirectWednesday, October 19, 2011
  15. 15. User Agent sniffing If UA indicates mobile device redirect to separate mobile site, or provide a link to a separate mobile siteWednesday, October 19, 2011
  16. 16. 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.mobiWednesday, October 19, 2011
  17. 17. Or Show A LinkWednesday, October 19, 2011
  18. 18. 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
  19. 19. Option–layout switchingWednesday, October 19, 2011
  20. 20. 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
  21. 21. if (is_mobile()) { require_once "mobile-layout.php"; } else { require_once "desktop-layout.php"; }Wednesday, October 19, 2011
  22. 22. That’s very basic, and largely unreliable.Wednesday, October 19, 2011
  23. 23. We can use a device database to improve the accuracy of matches.Wednesday, October 19, 2011
  24. 24. Choices WURFL (Wireless Universal Resource FiLe) Device AtlasWednesday, October 19, 2011
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. The problem with user agents is: they lie.Wednesday, October 19, 2011
  29. 29. Option–responsive layoutWednesday, October 19, 2011
  30. 30. So, how many of you remember liquid or fluid layouts?Wednesday, October 19, 2011
  31. 31. Responsive breakpointsWednesday, October 19, 2011
  32. 32. 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 stylesheetWednesday, October 19, 2011
  33. 33. <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)" /> /****** mobile.css ******/ @media screen and (min-width: 480px) { /* styles for this class of mobile browser */ } @media screen and (min-width: 640px) { /* iPad maybe? */ }Wednesday, October 19, 2011
  34. 34. Desktop and iPadWednesday, October 19, 2011
  35. 35. A couple mobile devices iPhone 3GS iPhone 4 Nexus OneWednesday, October 19, 2011
  36. 36. That’s great, but we haven’t really solved the device context yet.Wednesday, October 19, 2011
  37. 37. Problem: limited bandwidthWednesday, October 19, 2011
  38. 38. 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
  39. 39. JavaScript-based image resize Credit: http://jedimsieer.deviantart.com/Wednesday, October 19, 2011
  40. 40. <img src="images/sample-small.jpg?full=images/sample- large.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); https://github.com/filamentgroup/Responsive-ImagesWednesday, October 19, 2011
  41. 41. Alternative Do the work on the server. (You know, like in the 1990s when JavaScript was Evil(tm))Wednesday, October 19, 2011
  42. 42. The Process 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.Wednesday, October 19, 2011
  43. 43. I haven’t seen this implemented yet.Wednesday, October 19, 2011
  44. 44. The mobility contextWednesday, October 19, 2011
  45. 45. Wednesday, October 19, 2011
  46. 46. The Go To Example Geolocation i.e., driving directions or stores near meWednesday, October 19, 2011
  47. 47. Do you trust directions from my site, or from Google Maps?Wednesday, October 19, 2011
  48. 48. Right. I use Google Maps too.Wednesday, October 19, 2011
  49. 49. So let’s use geolocation for something else.Wednesday, October 19, 2011
  50. 50. Working on a CRM Sales agent travels to Switzerland Give a listing of leads/customers in the area.Wednesday, October 19, 2011
  51. 51. 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
  52. 52. <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
  53. 53. Fetch Data From Your AppWednesday, October 19, 2011
  54. 54. function findCustomersByPostalCode( $postalCodes, $recency) { //some SQL //where postal_code in $postalCodes //and last_contact between $recency and today return $customers; }Wednesday, October 19, 2011
  55. 55. That’s just one example. Mobility context is absolutely application-specificWednesday, October 19, 2011
  56. 56. Recap Many options for dealing with device context User Agent sniffing Redirect Layout switch Responsive designWednesday, October 19, 2011
  57. 57. 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
  58. 58. What about jQuery Mobile and other mobile frameworks?Wednesday, October 19, 2011
  59. 59. Thank you!Wednesday, October 19, 2011
  60. 60. Questions? Contact me jcarouth@gmail.com @jcarouth jcarouth on Freenode Rate at: http://joind.in/3786Wednesday, October 19, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×