the contextual experience of the mobile web

The Contextual Experience of the Mobile Web

Jeff CarouthZendCon, October 19, 2011

Wednesday, October 19, 2011

Howdy!

(Yeah, I’m from Texas.)

PHP Developer since 2003

Web and mobile developer at Texas A&M University


This is not a presentation about development…


…nor is it about design…


…it’s about the collision of the two on the mobile web.


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.


Environment, expectations, and intent

Mobile and mobility

Devices and capabilities


In my opinion, design plays a major role in mobile

success.


The question then becomes how can you accommodate

both a 27” iMac and an iPhone?


Or, more accurately, how can you accommodate browsers of differing

widths?


Obvious Answer: Layouts


Option–redirect


User Agent sniffing

If UA indicates mobile device

redirect to separate mobile site, or

provide a link to a separate mobile site


Or Show A Link


Problems with this method

Perhaps your user wants your full site.

They’ll likely miss any links

and alert boxes are terrible.


Option–layout switching


if (is_mobile()) { require_once "mobile-layout.php";} else { require_once "desktop-layout.php";}


That’s very basic, and largely unreliable.


We can use a device database to improve the

accuracy of matches.


WURFL (Wireless Universal Resource FiLe)

Device Atlas

Choices


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'); } }}


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);}


It works…

But we can do better.

We can apply the mantra: “branch on features not user agents” to our mobile layouts.


The problem with user agents is: they lie.


Option–responsive layout


So, how many of you remember liquid or fluid

layouts?


Responsive breakpoints


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


/****** 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)" />


Desktop and iPad


A couple mobile devices

Nexus OneiPhone 3GS iPhone 4


That’s great, but we haven’t really solved the device

context yet.


Problem: limited bandwidth


All we adjusted for is width

Images are the same size for desktops as they are for mobile

This is bad. Very bad.

Solution?


JavaScript-based image resize

Credit: http://jedimsieer.deviantart.com/Wednesday, October 19, 2011

http://jedimsieer.deviantart.com/

http://jedimsieer.deviantart.com/

Alternative

Do the work on the server.

(You know, like in the 1990s when JavaScript was Evil(tm))


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


I haven’t seen this implemented yet.


The mobility context


The Go To Example

Geolocation

i.e., driving directions or stores near me


Do you trust directions from my site, or from

Google Maps?


Right. I use Google Maps too.


So let’s use geolocation for something else.


Working on a CRM

Sales agent travels to Switzerland

Give a listing of leads/customers in the area.


HTML5 Geolocation API

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { callGeonamesWebservice( position.coords.latitude, position.coords.longitude); }, function (error) { //handle error } );}


<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>


Fetch Data From Your App


function findCustomersByPostalCode( $postalCodes, $recency) { //some SQL //where postal_code in $postalCodes //and last_contact between $recency and today

return $customers;}


That’s just one example. Mobility context is absolutely

application-specific


Recap

Many options for dealing with device context

User Agent sniffing

Redirect

Layout switch

Responsive design


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.


What about jQuery Mobile and other mobile

frameworks?


Thank you!


Questions?

Contact me

[email protected]

@jcarouth

jcarouth on Freenode

Rate at: http://joind.in/3786


mailto:[email protected]

mailto:[email protected]

the contextual experience of the mobile web

Technology