The Contextual Experience of the Mobile Web

2,349 views

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
2,349
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
44
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×