refactoring for the mobile web n.
Skip this Video
Loading SlideShow in 5 Seconds..
Refactoring for the Mobile Web PowerPoint Presentation
Download Presentation
Refactoring for the Mobile Web

Loading in 2 Seconds...

play fullscreen
1 / 29

Refactoring for the Mobile Web - PowerPoint PPT Presentation

  • Uploaded on

Refactoring for the Mobile Web. Joseph R. Lewis — Sandia National Laboratories. 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?

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Refactoring for the Mobile Web' - serge

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
refactoring for the mobile web

Refactoring for the Mobile Web

Joseph 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 web
What 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 trends
Mobile 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 use
Expect 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 apps
Advantages 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 challenges
Mobile 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 browsers
Embedded 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
  • 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:
  • 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 consider
Other rendering engines to consider
  • Internet Explorer Mobile
  • NetFront
  • Gecko (Fennec)
  • Obigo
  • Polaris
developing on the desktop for mobile
Developing 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 delivery
Strategies for mobile web delivery
  • User-agent sniffing
  • CSS media types
  • Separate site ( or
  • Combinations of the above usually are most effective
user agent detection
User-agent detection


function detectWebkit($query){

$container = $_SERVER[’HTTP_USER_AGENT’];

$useragents = array (


$this->webkit = false;

foreach ( $useragents as $useragent ) {

if (eregi($useragent,$container)){

$this->webkit = true;



if($this->webkit) {

// do something for the webkits

} else {

// do something for non-webkits




  • Variation and lack of standards mean constant chase as UA strings change
  • PPK is gathering data & to build stronger example.
separate sites or codebases
Separate 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 style
Delivering 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"> { color: red; }


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

@media handheld { { color: red; } }

Using @media handheld to import a mobile stylesheet:

<style type="text/css">

@import url(mobile.css) handheld;


viewport and media queries
Viewport 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 {




combine handheld and media query targets
Combine 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 1
Mobile Refactoring Rule No.1
  • Hide unneeded sections

div#sidebar { display:none; }

  • Or move them

div#sidebar { float:none; }

mobile refactoring rule no 2
Mobile Refactoring Rule No.2
  • Reset the content width

div#layout {width:100%;}

  • Reset wide text using the content property:

img#masthead {

content: attr(alt);

font-family: cursive;


#sitenav a[href=""] {

content: "CV";


#sitenav a[href=""] {

content: "Events";


#sitenav a[href=""] {

content: "A/V";


design for a touch screen
Design for a touch screen

div#sitenav a {




border:1px solid #333;



nifty webkit tricks transforms css3
Nifty WebKit Tricks: Transforms & CSS3

dl {


-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 refactoring
Use 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
  • A List Apart – Return of the Mobile Style Sheet:
  • Mobile Web Best Practices:
  • Google Android:
  • Apple iPhone Developer:
  • Designing with Opera Mini in mind:
  • Opera Mini emulator:

Joseph R. Lewis

Sandia National Laboratories