The Contextual Experience of the Mobile Web

The Contextual Experience of the Mobile Web Jeff Carouth ZendCon, October 19, 2011Wednesday, October 19, 2011

Howdy! (Yeah, I’m from Texas.) PHP Developer since 2003 Web and mobile developer at Texas A&M UniversityWednesday, October 19, 2011

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 speciﬁc 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

Environment, expectations, and intent Mobile and mobility Devices and capabilitiesWednesday, October 19, 2011

In my opinion, design plays a major role in mobile success.Wednesday, October 19, 2011

Wednesday, October 19, 2011

The question then becomes how can you accommodate both a 27” iMac and an iPhone?Wednesday, October 19, 2011

Or, more accurately, how can you accommodate browsers of differing widths?Wednesday, October 19, 2011

Obvious Answer: LayoutsWednesday, October 19, 2011

Option–redirectWednesday, October 19, 2011

User Agent snifﬁng If UA indicates mobile device redirect to separate mobile site, or provide a link to a separate mobile siteWednesday, October 19, 2011

Or Show A LinkWednesday, October 19, 2011

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

Option–layout switchingWednesday, October 19, 2011

if (is_mobile()) { require_once "mobile-layout.php"; } else { require_once "desktop-layout.php"; }Wednesday, October 19, 2011

That’s very basic, and largely unreliable.Wednesday, October 19, 2011

We can use a device database to improve the accuracy of matches.Wednesday, October 19, 2011

Choices WURFL (Wireless Universal Resource FiLe) Device AtlasWednesday, October 19, 2011

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

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

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

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 ﬂuid layouts?Wednesday, October 19, 2011

Responsive breakpointsWednesday, October 19, 2011

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

Desktop and iPadWednesday, October 19, 2011

A couple mobile devices iPhone 3GS iPhone 4 Nexus OneWednesday, October 19, 2011

That’s great, but we haven’t really solved the device context yet.Wednesday, October 19, 2011

Problem: limited bandwidthWednesday, October 19, 2011

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

JavaScript-based image resize Credit: http://jedimsieer.deviantart.com/Wednesday, October 19, 2011

<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/ﬁlamentgroup/Responsive-ImagesWednesday, October 19, 2011

Alternative Do the work on the server. (You know, like in the 1990s when JavaScript was Evil(tm))Wednesday, October 19, 2011

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

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 meWednesday, October 19, 2011

Do you trust directions from my site, or from Google Maps?Wednesday, October 19, 2011

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 leads/customers in the area.Wednesday, October 19, 2011

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

<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

Fetch Data From Your AppWednesday, October 19, 2011

function findCustomersByPostalCode( $postalCodes, $recency) { //some SQL //where postal_code in $postalCodes //and last_contact between $recency and today return $customers; }Wednesday, October 19, 2011

That’s just one example. Mobility context is absolutely application-speciﬁcWednesday, October 19, 2011

Recap Many options for dealing with device context User Agent snifﬁng Redirect Layout switch Responsive designWednesday, October 19, 2011

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

What about jQuery Mobile and other mobile frameworks?Wednesday, October 19, 2011

Thank you!Wednesday, October 19, 2011

Questions? Contact me jcarouth@gmail.com @jcarouth jcarouth on Freenode Rate at: http://joind.in/3786Wednesday, October 19, 2011

The Contextual Experience of the Mobile Web

by Jeff Carouth on Oct 19, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

The Contextual Experience of the Mobile Web — Presentation Transcript