The Contextual Experience of the Mobile Web

  • 1,739 views
Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,739
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
41
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The Contextual Experience of the Mobile Web Jeff Carouth ZendCon, October 19, 2011Wednesday, October 19, 2011
  • 2. Howdy! (Yeah, I’m from Texas.) PHP Developer since 2003 Web and mobile developer at Texas A&M UniversityWednesday, October 19, 2011
  • 3. This is not a presentation about development…Wednesday, October 19, 2011
  • 4. …nor is it about design…Wednesday, October 19, 2011
  • 5. …it’s about the collision of the two on the mobile web.Wednesday, October 19, 2011
  • 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. Environment, expectations, and intent Mobile and mobility Devices and capabilitiesWednesday, October 19, 2011
  • 8. In my opinion, design plays a major role in mobile success.Wednesday, October 19, 2011
  • 9. Wednesday, October 19, 2011
  • 10. Wednesday, October 19, 2011
  • 11. The question then becomes how can you accommodate both a 27” iMac and an iPhone?Wednesday, October 19, 2011
  • 12. Or, more accurately, how can you accommodate browsers of differing widths?Wednesday, October 19, 2011
  • 13. Obvious Answer: LayoutsWednesday, October 19, 2011
  • 14. Option–redirectWednesday, October 19, 2011
  • 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. 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. Or Show A LinkWednesday, October 19, 2011
  • 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. Option–layout switchingWednesday, October 19, 2011
  • 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. if (is_mobile()) { require_once "mobile-layout.php"; } else { require_once "desktop-layout.php"; }Wednesday, October 19, 2011
  • 22. That’s very basic, and largely unreliable.Wednesday, October 19, 2011
  • 23. We can use a device database to improve the accuracy of matches.Wednesday, October 19, 2011
  • 24. Choices WURFL (Wireless Universal Resource FiLe) Device AtlasWednesday, October 19, 2011
  • 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. 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. 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. The problem with user agents is: they lie.Wednesday, October 19, 2011
  • 29. Option–responsive layoutWednesday, October 19, 2011
  • 30. So, how many of you remember liquid or fluid layouts?Wednesday, October 19, 2011
  • 31. Responsive breakpointsWednesday, October 19, 2011
  • 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. <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. Desktop and iPadWednesday, October 19, 2011
  • 35. A couple mobile devices iPhone 3GS iPhone 4 Nexus OneWednesday, October 19, 2011
  • 36. That’s great, but we haven’t really solved the device context yet.Wednesday, October 19, 2011
  • 37. Problem: limited bandwidthWednesday, October 19, 2011
  • 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. JavaScript-based image resize Credit: http://jedimsieer.deviantart.com/Wednesday, October 19, 2011
  • 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. Alternative Do the work on the server. (You know, like in the 1990s when JavaScript was Evil(tm))Wednesday, October 19, 2011
  • 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. I haven’t seen this implemented yet.Wednesday, October 19, 2011
  • 44. The mobility contextWednesday, October 19, 2011
  • 45. Wednesday, October 19, 2011
  • 46. The Go To Example Geolocation i.e., driving directions or stores near meWednesday, October 19, 2011
  • 47. Do you trust directions from my site, or from Google Maps?Wednesday, October 19, 2011
  • 48. Right. I use Google Maps too.Wednesday, October 19, 2011
  • 49. So let’s use geolocation for something else.Wednesday, October 19, 2011
  • 50. Working on a CRM Sales agent travels to Switzerland Give a listing of leads/customers in the area.Wednesday, October 19, 2011
  • 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. <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. Fetch Data From Your AppWednesday, October 19, 2011
  • 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. That’s just one example. Mobility context is absolutely application-specificWednesday, October 19, 2011
  • 56. Recap Many options for dealing with device context User Agent sniffing Redirect Layout switch Responsive designWednesday, October 19, 2011
  • 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. What about jQuery Mobile and other mobile frameworks?Wednesday, October 19, 2011
  • 59. Thank you!Wednesday, October 19, 2011
  • 60. Questions? Contact me jcarouth@gmail.com @jcarouth jcarouth on Freenode Rate at: http://joind.in/3786Wednesday, October 19, 2011