This document discusses the contextual experience of the mobile web. It begins by defining the context of the mobile web as the environment, expectations, and intent a user brings when accessing a website via a mobile device. It then discusses several options for accommodating different screen widths, including redirecting mobile users, detecting devices via user agents, and using responsive layouts with breakpoints. It emphasizes that mobility context is application-specific and provides an example using geolocation to surface local leads. The document concludes with a recap of options for dealing with device context and emphasizes that mobile experiences are increasingly important.
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
The Contextual Experience of the Mobile Web
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
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
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
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. <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
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-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. 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
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