Mobile Web Development: The Challenges & How to Meet Them

Mobile Web
Development
The Challenges and How To Meet Them
Tony Thomas - Student Unions & Activities at The University of Minnesota

Tuesday, April 17, 12

Student Unions &
Activities 2011 Poll

50% have a smartphone
7% plan to get one


Our unscientiﬁc student poll.


Recognize?

Yavin


This is Yavin, a red giant planet.

Yavin 4 Yavin


This is Yavin 4, the location of the rebel base

Student Unions &
Activities Website

2011: 4.34%


A snapshot from SUA a year ago.

Student Unions &
Activities Website

2012: 9.03%


This year.

Homecoming Website

2010: 3.8%


Homecoming 2010 during the event.

Homecoming Website

2011: 11.64%


Homecoming 2011 during the event.

Spring Jam Website

2010: 5.46%


Spring Jam 2011 during the event.

Spring Jam Website

2011: 13.44%


Spring Jam 2011 during the event.

Mobile Operating
Systems
21458
21500

10330

767
82 56 37 31 6 4
0
S d y e S g ia top
iO roi err on ianO sun ok LG
nd ckb Ph b am N Hip
A
Bla ows Sym
S
nge
r
d
W
in Da


Our users are predominantly iOS & Android. Blackberry distant 3rd. Long tail of others.

Device Dimensions
Android Android Samsung Nokia Android

Android Android
Android Blackberry
Android
Blackberry
Android Windows
Android
Android Android
Android
Blackberry
Android Android
Android Android

Android

Android
Android Android
Nokia Android
Android iPhone iPod Android
Android
Blackberry
Samsung
Blackberry Blackberry SymbianOS
SymbianOS
Blackberry


This is just a small sample of device dimensions taken from 1 month of SUA mobile traffic.

Responsive Design

Ethan Marcotte

Photo: Peter J. Hart
ﬂickr.com/photos/40054618@N03/5140728113/


This is Ethan Marcotte who introduced the concept of responsive design in 2010.

A Dao of Web Design

John Allsopp

Photo: drewm ﬂickr.com/photos/drewm/
ﬂickr.com/photos/drewm/4732738890/


It’s in part inspired by John Allsopp’s 2000 A List Apart article called “A Dao of Web Design.”

A Dao of Web Design

alistapart.com/articles/dao/
“It’s time to throw out the rituals of the
printed page, and to engage the medium of
the web and its own nature.”


[Read quote.] Back in 2000, Allsopp was advocating for embracing the inherent ﬂexible
nature of the web.

Responsive
Architecture
“If a building could
change its posture,
tighten its muscles
and brace itself
against the wind, its
structural mass could
literally be cut in
half.” --Guy
Nordenson
Photo: Evangelos Kotsioris


Responsive design is also inspired by Responsive, or adaptive architecture where buildings
respond and change according to their environment. [read quote] Think of markup, CSS,
JavaScript & media as the structural mass of a website.

Flexible, Fluid Layouts

widths, margins, padding in
relative units

Photo: Sabrina Campagna
ﬂickr.com/photos/mar1lyn84/5649648853/


The foundation of responsive design are layouts in relative units. That means widths, margins
& padding are deﬁned in ems or percents.


Target / Context = Result

Photo: ansik
ﬂickr.com/photos/ansik/304526237/


This is Ethan Marcotte’s formula for calculating widths in ems. The assumption here is that
most browsers maintain their default setting of a 16px font-size.


24 / 16 = 1.5

Photo: ansik


In this example, we’re looking for a 24 pixel font-size. 24/16 is 1.5, so our font size is
1.5em.

Context Changes

13 / 24 = 0.54166666666666

Photo: ansik


Beware of context changes. If our font is 1.5em and thus, 24px and we want a 13px font in
that context, we have to divide 13 by 24 (our new context). Notice the number of decimal
points in this example. Marcotte advocates for keeping all those decimal places. I haven’t
been able to ﬁnd any information as to how many places a different browsers will calculate.

Media Queries

Tablet Netbook Desktop
Sm
art
p ho
ne


Back to media queries. After we’ve established our grids, margins and padding in relative
units, media queries are the next important step in making a design responsive.

Media Queries

@media screen and (min-width: 480px) {
/* CSS goes here */
}


First a browser reads the media type, then evaluates the query. In this case, if the media is
‘screen’ and the browser viewport is at least 480px, the enclosed styles will be rendered.

Media Queries
Media

/* CSS goes here */
}



Media Queries
Media Query

/* CSS goes here */
}



Media Queries

@import url(“css/phone.css”) screen
and min-width: 480px);


Here’s an alternate syntax that will load a separate style sheet based on the parameters of
the media query.

Media Queries


Media


the media query.

Media Queries


Query Media


the media query.

Media Query Options
• width (browser width)

• height (browser height)
• device-width (device-width)
• device-height (device-height)

• orientation (portrait or landscape)
• aspect-ratio (browser aspect ratio)
• device-aspect-ratio (device aspect ratio)
• color (bits of color component of device)

• color-index (number of entries in the color lookup proﬁle)
• monochrome (similar to color but for monochrome devices)
• resolution (pixel-density in DPI)

• scan (TV’s-whether scanning process is progressive or scan)
• grid (grid-based display, like feature phone)


Here’s a complete list of media query options--including some related to television scanning.

Media Query Options

• width (browser width)
• height (browser height)
• device-width (device-width)
• device-height (device-height)
• orientation (portrait or landscape)


In reality these are the most common. I want to point out a few distinctions here. ‘width’ &
‘height’ refer to the browser viewport. ‘device-width’ & ‘device-height’ refer to the height &
width of the device. Device orientation is another handy option.

There are no
standard devices!

Photo: Oliver White
ﬂickr.com/photos/nuage_de_lait/6580839781/


Until recently, it’s been popular to write queries based on the dimensions of popular devices.
The list on the left of this slide is taken from SUA’s analytics. You can see the incredible
diversity of screen sizes in our mobile analytics. There are no standard devices. Instead of
trying to keep up w/ new device dimensions, you should evaluate the breakpoints of your
design. Look at where the layout gets awkward and set a breakpoint. Then let the devices fall
where they may. New devices appear almost every day. Your design is the constant in the
equation. Plan accordingly.

Set media
query
breakpoints
where the
design
breaks.

Photo: Ballookey Klugeypop
ﬂickr.com/photos/ballookey/136450028/


“CSS Pixels” &
“Hardware Pixels”
Apple iPhone 4: 326 ppi Sony Ericsson XPERIA X10: 245 ppi

LG KM900 Arena: 311 ppi Samsung I9000 Galaxy S: 233 ppi

Samsung S8000 Jet: 301 ppi HTC HD2: 217 ppi

Canon EOS 550D (T2i): 289 ppi Nokia N8: 210 ppi

HTC Touch Diamond: 286 ppi Apple iPhone 3GS: 165 ppi

Samsung S8500 Wave: 283 ppi Apple iPad: 132 ppi

HTC Desire: 252 ppi

Google Nexus One: 252 ppi
Source: blog.gsmarena.com/how-does-the-iphone-4-pixel-density-stand-in-comparison/


Here are points per inch for several mobile devices. Notice the iPhone 4 at the top with the
most points per inch.

Some Pixels Are More
Equal Than Others

Hardware Pixel CSS Pixel


The iPhone 4 has a pixel-density of 2. That means there are 2 “hardware” pixels on the screen for every “CSS
pixel.” That makes fonts and images render very crisply on the screen, but it’s a problem when we’re trying to
calculate CSS. Thus we level the ﬁeld by setting the zoom-level to 100%. When the zoom level is 100%, the ratio of
hardware pixels to CSS is 1.

Some Pixels Are More
Equal Than Others

Hardware Pixel CSS Pixel


By putting “initial-scale=1” in the viewport meta tag forces the browser to make hardware
pixels equal CSS pixels. The problem is, this will apply to text and layout, but images will
zoom up and appear pixelated. You need to ﬁgure out the pixel density so the image quality
matches the density of the screen. Which leads us to...

Take Control of The
Screen

<meta name="viewport"
content="width=device-width, initial-
scale=1, maximum-scale=1">


It’s a good idea to use a “viewport” meta tag in the head of your document to gain some
control and provide better consistency between mobile devices.

Take Control of The
Screen

width=device-width
Without this, mobile browsers will zoom the
page out to 980px.


First in that meta tag, I’m telling the browser to make the content width the device width.
device-width

Take Control of The
Screen

initial-scale = 1
Controls the zoom level when the page is
loaded. (1 = 100%)


Take Control of the
Screen

maximum-scale = 1
Controls zooming. In my example, the
maximum scale is set to 100%. Other
options: minimum-scale & user-scalable.


Take Control of the
Screen


Left: before setting the viewport meta tag. Right: after.

Responsive Images &
Media

Photo:Vicky Somma
ﬂickr.com/photos/tgaw/2556511663/

After after ﬂuid layouts and media queries come responsive images. The talking phones are
outraged that we’re trying to send them a gigantic image.

Responsive Images &
Media

#container img {
max-width: 100%;
}


At their simplest, responsive images respond to the layout by never exceed the width of their
container. Unfortunately HTML alone is lacking in terms of providing a way to place the
smallest possible image on the page. Remember, mobile devices are often lacking in
bandwidth. Sending a large image to a small screen is an unnecessary burden. JavaScript
does provide some relief.

Start with Basic HTML

<a id=”home-link” href=”http://sua.umn.edu”>Home</a>


Start with the lowest common denominator. In this example, I’m using a link, but this could
be any container. This HTML will work with any feature phone.

Use JavaScript to Detect
Screen Dimensions

h = screen.height;


Next we have to try to evaluate the screen height. I use height because smart phones could
be turned to landscape mode at any time, making the height the new width.

Screen Dimensions
h = screen.height;

// Pixel ratio (WebKit Only)
r = window.devicePixelRatio;


With the advent of high density screens, we have to account for pixel-density. The iPhone 4
has a pixel density of 2 and many Android phones have a pixel density of 1.5. Depending on
meta tags in the head of your document, an iPhone might report dimensions of 320x480
even though it’s true resolution is 640x960. Caution: devicePixelRatio is WebKit-only.
Fortunately this scenario if pure enhancement and won’t affect the functionality or
information on the page. A non-WebKit browser will simply report a lower resolution and so
the image may seem a little pixelated.

Screen Dimensions
/* if devicePixelRatio is supported,
calculate the device height */
if (typeof r !== 'undefined')
{
/* Calculate the true number of pixels on
the screen */
height = h * r;
}


We can test for this by making sure the result of devicePixelRatio is not ‘undeﬁned’. If it is,
we simply use the original height reading. If not, we can get the true height by multiplying
the reported height by the pixel-density.

Screen Dimensions
// Set the image directory accordingly
if (height <= 320)
{
// load 320 header
d = 320;
}


In this example, I have directories with names matching a few key heights. A copy of the
image is stored in each directory that matches it’s width. So a 320px wide image resides in
the 320 directory.

Screen Dimensions

$('a#home-link').html('<img
src="/images/mobile/' + d + '/
header.png" alt="This is alt
text." id="logo"
class="logos" />');


I can then use JQuery write in this HTML with the directory I want. The image will then load
that is large enough for the device, but somewhat optimized for the dimensions of the
screen. This method is not perfect. For instance, the image will not load until after the DOM
has fully loaded--since I’m using JQuery and the ready() method. Still it’s a fairly good
compromise to minimize the bandwidth necessary to load the page.

Mobile First, Mobile
Separate & RESS


Now that I’ve touched on a few techniques, I want to go over three approaches to developing
for mobile. Those are Mobile First, a separate mobile experience and RESS which stands for
Responsive and Server Side.

Mobile First
Luke Wroblewski

Photo: foltzwerk
flickr.com/photos/foltzwerk/2779814860/


Mobile First is a concept advocated by Luke Wroblewski in his book of the same name. The
basic approach is that sites should be first designed for mobile with desktop versions coming
after. This approach begins with a number of constraints that filter through to the desktop
experience.

Mobile First

• One site for all devices
• Focus on content that’s truly important
• No User Agent snifﬁng


Some of the advantage of this approach are that you have one site for all devices. The
constraints force you focus on what’s truly important. You avoid User Agent sniffing that
some other techniques rely upon.

Mobile First

• Potential for unnecessary overhead
• Convincing stakeholders to embrace
constraints may be a barrier
• Requires polyﬁlls for older browsers


Some disadvantages: Mobile networks are often slower, and sometimes users will have a cap
on their data plan. You have to be careful to truly embrace the constraints through the entire
stack so you can minimize the size of pages and media. Along with that, it’s not always easy
to convince stakeholders to embrace those constraints. Finally, for the site to work in all
browsers, you’re going to need to use a few JavaScript polyﬁlls.

Polyfills
Respond: github.com/scottjehl/Respond
(media queries)
Overthrow: github.com/filamentgroup/Overthrow
(overflow: auto)
html5shiv: code.google.com/p/html5shiv
(HTML5)


Respond for media queries in older versions of IE
Overthrow for using overflow: auto
html5shiv if you’re using html5

Feature Detection
Modernizr modernizr.com

Photo: Patrick Ciebilski
ﬂickr.com/photos/mccieb/


Modernizr is a JavaScript library for detecting browser features. It offers a lot of ﬂexibility in
that you can enhance your site based on the capabilities of each browser.

Modernizr
• @font-face • CSS reﬂections
• localStorage
• background-size • CSS 2D transforms
• Cross-window
• border-image • CSS 3D transforms messaging

• border-radius • CSS transitions • sessionStorage

• box-shadow • applicationCache • Web Sockets

• Flexible Box Model • Canvas • Web SQL DB

• hsla & rgba color • Canvas text • Web Workers

• Multiple backgrounds • Drag and drop • Geolocation

• opacity • haschange Event • Inline SVG

• text-shadow • History management • SMIL

• CSS Animations • HTML5 audio & video • SVG

• CSS Columns • IndexedDB • SVG clip pathes

• CSS generated content • Input attributes • Touch events

• CSS gradients • Input types • WebGL


Modernizr has a long list of features that it detects.

Mobile First

Responsive
Images

Media Queries

Flexible, Fluid Layout


Encompasses all aspects of a responsive design to deliver one site that works for all devices.

Mobile First
Responsive
Images

Media Queries

Flexible, Fluid Layout

Web Standards


And responsive design is built upon web standards. If you’re already used to developing with
standards, responsive design is just reaching a little further with the same concept.


Here’s an example of a responsive design in action. Notice how he’s designed the layout and
images to work across different screen widths.

Separate Mobile
Experience


Remember these guys? Both have also done sites with a totally separate mobile experience.

Separate Mobile
Experience
• Site tailored to use case
• Eliminate unnecessary markup, CSS &
JavaScript
• May be easier to convince stakeholders to
embrace constraints


Some of the advantages of providing a separate mobile experience: The site can be tailored
the use case. You have a lot of control over reducing unnecessary markup, CSS & JavaScript. It
may be easier to convince stakeholders to embrace constraints if they get to keep there
content somewhere else.

Separate Mobile
Experience

• Two sites
• Might not meet all users’ needs
• Relies on device detection


Some of the disadvantages: You maintain two sites. A separate experience might not meet all
your users’ needs. You’re going to have to rely on some sort of device detection.

Device Detection
detectmobilebrowsers.com
detector.dmolsen.com

Photo: Brad Buchanan
ﬂickr.com/photos/frozenisles/3443607776/


For the projects we’ve done at SUA so far, we’ve relied on the script at
detectmobilebrowsers.com. I have more recently come accross Detector and it looks quite
promising.

Apache Lasso
ASP nginx
ASP.NET node.js
ColdFusion PHP
C# Perl
IIS Python
JSP Rails
JavaScript
jQuery
Photo: Herr Olsen
ﬂickr.com/photos/herrolsen/6199045384/


Returns boolean. Available is several languages.


<?php
is_mobile();
?>

Photo: Jeff Kubina
ﬂickr.com/photos/kubina/170938326/


Using the script is very simple.

Detector

• detector.dmolsen.com
• PHP only
• Beta
• Uses same database of tests as
Modernizr

Photo: Jason Ahrns
ﬂickr.com/photos/musubk/5578348098/


Detector, by comparison, is only available in PHP. It’s still in beta. It does a lot more than
detect whether a device is mobile or not. It also has the same database of feature detection
as Modernizr.

Detector
<?php
if ($ua->isMobile)
{
// Code goes here
}
?>
Photo: DigiTaL~NomAd
ﬂickr.com/photos/urban-spaceman/3947680057/


Here’s an example of how you might use Detector to detect mobile devices.

Preserve
The URI
When
Redirecting Photo: Chris Campbell
ﬂickr.com/photos/cgc/3809196941/


If you’re using a method to detect and redirect mobile devices, remember to preserve the
URL. That is, if they’re trying to get to a speciﬁc page or resource, make sure you redirect
them to the equivalent page or resource on the mobile site. If you don’t have a mobile
version, you shouldn’t be redirecting.

if (is_mobile() && !isset($_COOKIE['mobile']))
{
$redirect = '/mobile/';
if (preg_match('/event/(d+)/',
$_SERVER['REQUEST_URI'], $matches) > 0)
{
$redirect .= $matches[0];
}
setcookie('mobile');
header('Location: ' . $redirect);
exit;
}


JQuery Mobile


We’ve used the JQuery Mobile framework for all of your mobile projects so far.

JQuery Mobile


For one reason: it’s thoroughly tested. This is an image of the JQuery Mobile testing table of
devices.

JQuery Mobile Setup
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>


Setting up the framework is fairly simple. First, it does a require an HTML5 doctype. After
that, it makes extensive use of the HTML5 data attribute. You ca see several “roles” deﬁned in
the markup here.

Ajax Page Loads

<a itemprop="url" data-transition="slide" href="/path/">link</a>


The framework also does a lot of heavy lifting for you. For instance, HTML page links are
automagically turned into AJAX page loads with nice transitions deﬁned in a “data-transition”
attribute.

JQuery Mobile Page
Transition Options
• fade • slideup
• pop • slidedown
• ﬂip • none
• turn
• ﬂow
• slide


The framework also offers several transition options.

JQuery Mobile Themes


There are also 6 built-in themes available. You also have the option of designing and coding
styles for your own theme.

JQuery Mobile Themes

<div data-theme="a"></div>


Themes are deﬁned using a “data-theme” attribute.

JQuery Mobile Grid
Framework
<div class="ui-grid-a">
<div class="ui-block-a">
</div>
<div class="ui-block-b">
</div>
</div>


There is also a grid framework available. Here’s an example of a two-column grid. There’s a
wrapper with the class “ui-grid-a”. The child elements have classes of “ui-block-a” and “ui-
block-b” respectively to place them as two columns on the page.

JQuery Mobile Grid
Framework
• two-column: ui-grid-a
• three-column: ui-grid-b
• four-column: ui-grid-c
• ﬁve-column: ui-grid-d
Photo: Mike Smail
ﬂickr.com/photos/smailtronic/2214772479/


You can create grids all the way up to 5 columns.

Binding JavaScript Events
in JQuery Mobile

Use pageInit() instead of
$(document).ready()


Since AJAX is used to load page content, $(document).ready() is only called with the ﬁrst page
load. To successfully trigger events when pages load, use JQuery Mobile’s pageInit instead.

REsponsive & Server
Side (RESS)

Photo: foltzwerk
ﬂickr.com/photos/foltzwerk/2779814860/


Luke Wroblewski, who authored Mobile First, also has written about RESS, which is a
combination of responsive design techniques and server-side feature detection.

REsponsive & Server
Side (RESS)

• Heavy lifting handled on server side
• Able to provide a ﬁnely-tuned experience
• Removes need for redirects


Some of RESS’ advantages: The work of feature detection is handled on the server side,
making the browser on the phone do less work. It offers a way to create a very ﬁnely-tuned
experience. No more redirects to a different mobile site. Preserves what Phil Hawksworth calls
the contract of the URI for providing content.

REsponsive & Server
Side (RESS)

• Harder to execute
• Requires some user agent snifﬁng

• Harder to execute
◦ more resources needed in terms of client and server side coding skills and time
◦ A lot of thought and planning needs to go into components and device classes (phone, tablet, desktop, TV, etc.)
• Requires some user agent sniffing

There is no single
solution and I will stand
on Jeffery Zeldman’s
coffee table and say
that.


Tools & Resources
Testing Links
• Comprehensive list of emulators: • MobilePerf (z.umn.edu/mobileperf)
mobilexweb.com/emulators
• Adobe Shadow (labs.adobe.com/
• springbox.com/mobilizer technologies/shadow)

Books • lukew.com (@lukew)

• Responsive Web Design - Ethan • ethanmarcotte.com (@beep)
Marcotte • jquerymobile.com
• Mobile First - Luke Wroblewski • detectmobilebrowsers.com
• detector.dmolsen.com
• mobilizr.com


Mobile Web Development: The Challenges & How to Meet Them

Recommandé

Recommandé

Contenu connexe

Similaire à Mobile Web Development: The Challenges & How to Meet Them

Similaire à Mobile Web Development: The Challenges & How to Meet Them (20)

Dernier

Dernier (20)

Mobile Web Development: The Challenges & How to Meet Them