The Contextual Experience of the Mobile Web

The Contextual Experience
of the Mobile Web
Jeff Carouth
ZendCon, 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
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.


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 snifﬁng

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.


Choices

WURFL (Wireless Universal Resource
FiLe)
Device Atlas


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


Desktop and iPad


A couple mobile devices

iPhone 3GS iPhone 4
Nexus One


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/

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


Alternative

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


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.


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


Recap

Many options for dealing with device
context
User Agent snifﬁng
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
jcarouth@gmail.com
@jcarouth
jcarouth on Freenode
Rate at: http://joind.in/3786


The Contextual Experience of the Mobile Web

More Related Content

Similar to The Contextual Experience of the Mobile Web

Recently uploaded

The Contextual Experience of the Mobile Web