The Contextual Experience of the Mobile Web

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

1. The Contextual Experience of the Mobile Web Jeff Carouth ZendCon, October 19, 2011 Wednesday, October 19, 2011
2. Howdy! (Yeah, I’m from Texas.) PHP Developer since 2003 Web and mobile developer at Texas A&M University Wednesday, 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 capabilities Wednesday, 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: Layouts Wednesday, October 19, 2011
14. Option–redirect Wednesday, 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 site Wednesday, 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.mobi Wednesday, October 19, 2011
17. Or Show A Link Wednesday, 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 switching Wednesday, 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. WURFL (Wireless Universal Resource FiLe) Device Atlas Choices Wednesday, 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 layout Wednesday, October 19, 2011
30. So, how many of you remember liquid or fluid layouts? Wednesday, October 19, 2011
31. Responsive breakpoints Wednesday, 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 stylesheet Wednesday, October 19, 2011
33. /****** 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
34. Desktop and iPad Wednesday, October 19, 2011
35. A couple mobile devices Nexus One iPhone 3GS iPhone 4 Wednesday, October 19, 2011
36. That’s great, but we haven’t really solved the device context yet. Wednesday, October 19, 2011
37. Problem: limited bandwidth Wednesday, 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. (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
41. Alternative Do the work on the server. (You know, like in the 1990s when JavaScript was Evil(tm)) Wednesday, October 19, 2011
42. 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
43. I haven’t seen this implemented yet. Wednesday, October 19, 2011
44. The mobility context Wednesday, October 19, 2011
45. Wednesday, October 19, 2011
46. The Go To Example Geolocation i.e., driving directions or stores near me Wednesday, 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 App Wednesday, 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-specific Wednesday, October 19, 2011
56. Recap Many options for dealing with device context User Agent sniffing Redirect Layout switch Responsive design Wednesday, 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/3786 Wednesday, October 19, 2011