mobile web development: the challenges & how to meet them

Mobile Web Development

The Challenges and How To Meet ThemTony 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 unscientific 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

0

21500

iOSAndroid

Blackberr

y

Windows Phone

SymbianOS

Samsung

Nokia LG

Danger Hiptop

21458

10330

76782 56 37 31 6 4


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

Android

Android

Device Dimensions

Android

Android

Android Android Samsung Nokia

AndroidAndroidBlackberry

Android

Nokia

Samsung

AndroidAndroid iPhone iPod Android

Android

Blackberry

Blackberry SymbianOS

Android

Blackberry

Android

Android Blackberry

BlackberryAndroid Windows

AndroidAndroid

AndroidAndroid

Android

SymbianOSBlackberry

Android

Android


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

Responsive Design

Photo: Peter J. Hart

flickr.com/photos/40054618@N03/5140728113/

Ethan Marcotte


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

A Dao of Web Design

Photo: drewm flickr.com/photos/drewm/

flickr.com/photos/drewm/4732738890/

John Allsopp


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 flexible nature of the web.

Responsive Architecture

Photo: Evangelos Kotsioris

“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


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

flickr.com/photos/mar1lyn84/5649648853/


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


Target / Context = Result

Photo: ansik

flickr.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 find any information as to how many places a different browsers will calculate.

Media Queries

Smartphone

Tablet Netbook Desktop


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


/* CSS goes here */

}

Media



Media Queries


/* CSS goes here */

}

Media Query



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



Media Queries


MediaQuery



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

• 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

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

flickr.com/photos/ballookey/136450028/


http://www.flickr.com/people/ballookey/

http://www.flickr.com/people/ballookey/

“CSS Pixels” & “Hardware Pixels”

Apple iPhone 4: 326 ppi

LG KM900 Arena: 311 ppi

Samsung S8000 Jet: 301 ppi

Canon EOS 550D (T2i): 289 ppi

HTC Touch Diamond: 286 ppi

Samsung S8500 Wave: 283 ppi

HTC Desire: 252 ppi

Google Nexus One: 252 ppi

Sony Ericsson XPERIA X10: 245 ppi

Samsung I9000 Galaxy S: 233 ppi

HTC HD2: 217 ppi

Nokia N8: 210 ppi

Apple iPhone 3GS: 165 ppi

Apple iPad: 132 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.

http://blog.gsmarena.com/how-does-the-iphone-4-pixel-density-stand-in-comparison/

http://blog.gsmarena.com/how-does-the-iphone-4-pixel-density-stand-in-comparison/

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 field 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 figure 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.


width=device-widthWithout 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


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


Take Control of the Screen

maximum-scale = 1Controls 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

flickr.com/photos/tgaw/2556511663/


After after fluid 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.

http://sua.umn.edu

http://sua.umn.edu

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.


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.


/* 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 ‘undefined’. 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.


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


$('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 FirstLuke 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 sniffing


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

PolyfillsRespond: 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 IEOverthrow for using overflow: autohtml5shiv if you’re using html5

Feature DetectionModernizr modernizr.com

Photo: Patrick Ciebilski

flickr.com/photos/mccieb/


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

Modernizr• @font-face

• background-size

• border-image

• border-radius

• box-shadow

• Flexible Box Model

• hsla & rgba color

• Multiple backgrounds

• opacity

• text-shadow

• CSS Animations

• CSS Columns

• CSS generated content

• CSS gradients

• CSS reflections

• CSS 2D transforms

• CSS 3D transforms

• CSS transitions

• applicationCache

• Canvas

• Canvas text

• Drag and drop

• haschange Event

• History management

• HTML5 audio & video

• IndexedDB

• Input attributes

• Input types

• localStorage

• Cross-window messaging

• sessionStorage

• Web Sockets

• Web SQL DB

• Web Workers

• Geolocation

• Inline SVG

• SMIL

• SVG

• SVG clip pathes

• Touch events

• WebGL


Modernizr has a long list of features that it detects.

Mobile First

Flexible, Fluid Layout

Media Queries

Responsive Images


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

Mobile First

Flexible, Fluid Layout

Media Queries

Responsive Images

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.


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


• 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

Photo: Brad Buchanan

flickr.com/photos/frozenisles/3443607776/

detectmobilebrowsers.comdetector.dmolsen.com


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.

detectmobilebrowsers.com

Apache

ASP

ASP.NET

ColdFusion

C#

IIS

JSP

JavaScript

jQuery

Lasso

nginx

node.js

PHP

Perl

Python

Rails

Photo: Herr Olsen

flickr.com/photos/herrolsen/6199045384/


Returns boolean. Available is several languages.

detectmobilebrowsers.com

<?php

is_mobile();

?>

Photo: Jeff Kubina

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

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

flickr.com/photos/urban-spaceman/3947680057/


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

http://www.flickr.com/photos/urban-spaceman/

http://www.flickr.com/photos/urban-spaceman/

Preserve The URI When Redirecting Photo: Chris Campbell

flickr.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 specific 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.

http://www.flickr.com/photos/cgc/


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” defined 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 defined in a “data-transition” attribute.

JQuery Mobile Page Transition Options• fade

• pop

• flip

• turn

• flow

• slide

• slideup

• slidedown

• none


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

• five-column: ui-grid-d

Photo: Mike Smail

flickr.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 first page load. To successfully trigger events when pages load, use JQuery Mobile’s pageInit instead.

REsponsive & Server Side (RESS)

Photo: foltzwerk

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

• Heavy lifting handled on server side

• Able to provide a finely-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 finely-tuned experience. No more redirects to a different mobile site. Preserves what Phil Hawksworth calls the contract of the URI for providing content.

• Harder to execute

• Requires some user agent sniffing


Tuesday, April 17, 12• 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 & ResourcesTesting

• Comprehensive list of emulators: mobilexweb.com/emulators

• springbox.com/mobilizer

Books• Responsive Web Design - Ethan

Marcotte

• Mobile First - Luke Wroblewski

Links• MobilePerf (z.umn.edu/mobileperf)

• Adobe Shadow (labs.adobe.com/technologies/shadow)

• lukew.com (@lukew)

• ethanmarcotte.com (@beep)

• jquerymobile.com

• detectmobilebrowsers.com

• detector.dmolsen.com

• mobilizr.com


mobile web development: the challenges & how to meet them

Technology

media screen

media isscreen

media type

javascript media

media queriesmedia query

ios android

px fontsize

design responsive