Sandia is a multiprogram laboratory operated by Sandia Corporation, a Lockheed Martin Company,for the United States Department of Energy’s National Nuclear Security Administration

under contract DE-AC04-94AL85000.

Refactoring for the Mobile WebRefactoring for the Mobile WebRefactoring for the Mobile WebRefactoring for the Mobile WebJoseph R. Lewis — Sandia National Laboratories

Some questions to keep in mind:Some questions to keep in mind:

• What is the mobile web?• Why is this important to us

now?• What trends are driving this

importance?• What should we be doing as

web developers for our mobile audience?

• How can I make this happen in my web sites now?

What is the mobile webWhat is the mobile web

• Web access via handheld and wireless devices:• Smartphones

• iPhone• Palm Prē• Android• Blackberry

• PDAs & Other gadgetry (Kindle, iPod Touch, etc)

• Forget about low-end phones with claimed web access.

Mobile Web Use TrendsMobile Web Use Trends

• Explosive growth:• Bango: Mobile web use in the US experienced

three fold increase in 2007• Juniper: Mobile web users will grow from 577

million in 2008 to more than 1.7 billion in 2013• iPhone leading the way since launch of June 2007:

• AdMob: iPhone in 11/2008 became single most-used web device over any other handset

• Google 2/2008: Apple iPhone generates 50 times more searches than any other device

• Opera is most widely deployed mobile browser: ~54% market share

Expect increased mobile web useExpect increased mobile web use

• Some major sites reporting over 13% of their traffic coming from mobile devices• Weather & Entertainment: often over 20%

• Web-enabled client apps are critical to the market.• ~100,000 apps for iPhone• ~10,000 for Android• ~300 for Prē

• Social networking dominates web+app use• Global use > 40% for social networking• USA, South Africa, and Indonesia register > 60%

use (Opera, 5/2008)

Advantages for mobile web appsAdvantages for mobile web apps

• Convenience: Always on, always near the owner.• 60% of mobile users keep their phones

bedside at night (Ahonen, 2008)

• Ubiquitous, omnipresent information streams: Don’t need to return to a desk to input data

• Location aware: GPS, accelerometers widely available

• Media input: Most smartphones have built-in camera, microphone, and speaker in addition to keyboard input

Mobile Web ChallengesMobile Web Challenges

• Small screen size• Navigation• Reduced functionality

• Do not rely on JavaScript, Java, Flash, etc.

• Slow Networks• City congestion/canyons• Events• No 3G

• Lower processing capability• Less CPU power• Less RAM

Embedded BrowsersEmbedded Browsers

• Mobile web not just about the default web browser

• SDKs allow embedding of rendering engine in software

• For iPhone OS – WebKit is the only option• Entire applications can be built on skinning a

web interface• Might only need HTML, CSS, JavaScript,

and/or some simple server-side language such as Ruby or PHP to build an app

OperaOpera

• Two flavors: • Opera Mini – works on just about any

phone, most common version• Opera Mobile – more full-featured, works

w/ PDAs running Windows Mobile and Symbian UIQ Touch

• Now defaults to ‘screen’ media instead of ‘handheld’ media type rendering, following WebKit

• Supports CSS3 media queries: http://www.w3.org/TR/css3-mediaqueries/

WebKitWebKit

• Open source, lightweight codebase• Strong deployment

• Safari on iPhone OS• Android OS• WebOS (Palm Prē)• Nokia S60

• No support for media type = ‘handheld’• Instead uses media queries

Other rendering engines to considerOther rendering engines to consider

• Internet Explorer Mobile• NetFront• Gecko (Fennec)• Obigo• Polaris

Browsers vs.

Screen Sizes

Browsers vs.

Screen Sizes

Developing on the desktop for mobileDeveloping on the desktop for mobile

• Use Opera in Small Screen mode for developing for handheld media

• Use iPhone SDK & Android SDK emulators for developing for WebKit

• Opera has a menu item to switch to handheld media.

• Firefox users can install the Web Developer Toolbar to switch to handheld media easily.

Strategies for mobile web deliveryStrategies for mobile web delivery

1. User-agent sniffing2. CSS media types3. Separate site (m.yoursite.gov or

yoursite.gov/m)4. Combinations of the above usually are most

effective

User-agent detectionUser-agent detection

Separate sites or codebasesSeparate sites or codebases

• Might mean a lot more code to maintain• Improve situation in MVC using modified

routes, controllers & views

• Can more effectively address constrained bandwidth through ruthless optimization

Delivering mobile styleDelivering mobile style

The link method:<link rel="stylesheet" href="mobile.css"

type="text/css" media="handheld">

Applying handheld to an embedded stylesheet:<style type="text/css" media="handheld">

div.foo { color: red; }

</style>

Using @media handheld to target handheld styles in embedded or external CSS:

@media handheld { div.foo { color: red; } }

Using @media handheld to import a mobile stylesheet:<style type="text/css">

@import url(mobile.css) handheld;

</style>

Viewport and media queriesViewport and media queries

• WebKit assumes 960 pixels• Reset that assumption:

• <meta name="viewport” content="width=640" />

• As mentioned, Opera and WebKit default to screen media but support media queries

• Use media query to reset width:<style type="text/css" media="only screen and (max-

device-width: 480px)">

div.layout {

width:100%;

}

</style>

Combine handheld and media query targetsCombine handheld and media query targets

• Add the handheld value to your media string:

<style type="text/css" media="handheld, only screen and (max-device-width: 480px)">

Mobile Refactoring Rule No.1Mobile Refactoring Rule No.1

• Hide unneeded sections

div#sidebar { display:none; }

• Or move them

div#sidebar { float:none; }

Mobile Refactoring Rule No.2Mobile Refactoring Rule No.2

• Reset the content width

div#layout { width:100%; }

AbbreviateAbbreviate

• Reset wide text using the content property:

img#masthead {

content: attr(alt);

font-family: cursive;

}

#sitenav a[href="http://natasha.example.com/cv/"] {

content: "CV";

}

#sitenav a[href="http://natasha.example.com/cal/"] {

content: "Events";

}

#sitenav a[href="http://natasha.example.com/av/"] {

content: "A/V";

}

Design for a touch screenDesign for a touch screen

div#sitenav a {

width:100%;

font-size:2em;

margin:0;

border:1px solid #333;

text-align:center;

}

Nifty WebKit Tricks: Transforms & CSS3Nifty WebKit Tricks: Transforms & CSS3

dl {

opacity:0.25;

-webkit-transform: skew(-30deg) rotate(-8deg) translate(-5em,-10em) scale(1.5);

-webkit-box-shadow: 2px 10px 13px rgba(0,0,0,0.5);

-webkit-transition-duration: 2s;

-webkit-transition-timing-function: ease-in;

}

dl:hover {

-webkit-transform: skew(0deg) rotate(0deg) translate(0,0) scale(1);

opacity: 1;

-webkit-border-radius: 20px;

}

Use cases for mobile refactoringUse cases for mobile refactoring

• Public web presence• Mobile users on your intranet (travel, time,

information)• Scientific applications

• Lab notes• Collaboration• Status & project management• Mobile data distribution to field users, first

responders• Research using mobile data gathering

What about mobile apps?What about mobile apps?

• Apps require installation – web pages are instantly accessible, instantly updated

• No app store approval waiting• Not platform dependent – no need to compile

for iPhone/Android/Pre/Blackberry/WinMobile• Database storage support in HTML5

• Users leverage this in Safari for iPhone via “Add to home screen” feature

Questions?Questions?

ResourcesResources

• A List Apart – Return of the Mobile Style Sheet: http://www.alistapart.com/articles/returnofthemobilestylesheet

• Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/

• Google Android: http://code.google.com/android/ • Apple iPhone Developer:

http://developer.apple.com/iphone/• Designing with Opera Mini in mind:

http://dev.opera.com/articles/view/designing-with-opera-mini-in-mind/

• Opera Mini emulator: http://www.opera.com/mini/demo/

Thanks!Thanks!

Joseph R. LewisSandia National Laboratories