Refactoring for the mobile web
Download
1 / 29

Refactoring for the Mobile Web - PowerPoint PPT Presentation


  • 333 Views
  • Updated 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?

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

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


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 l.jpg

Refactoring for the Mobile Web

Joseph R. Lewis — Sandia National Laboratories


Some questions to keep in mind l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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


Opera l.jpg
Opera

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


Webkit l.jpg
WebKit

  • 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 l.jpg
Other rendering engines to consider

  • Internet Explorer Mobile

  • NetFront

  • Gecko (Fennec)

  • Obigo

  • Polaris



Developing on the desktop for mobile l.jpg
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 l.jpg
Strategies for mobile web delivery

  • User-agent sniffing

  • CSS media types

  • Separate site (m.yoursite.gov or yoursite.gov/m)

  • Combinations of the above usually are most effective


User agent detection l.jpg
User-agent detection

<?php

function detectWebkit($query){

$container = $_SERVER[’HTTP_USER_AGENT’];

$useragents = array (

'iPhone','iPod','Android','S60');

$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 http://twitter.com/ppk/status/56782351 & http://quirksmode.org/m/d/ to build stronger example.


Separate sites or codebases l.jpg
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 l.jpg
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">

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 queries l.jpg
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 {

    width:100%;

    }

    </style>


Combine handheld and media query targets l.jpg
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 l.jpg
Mobile Refactoring Rule No.1

  • Hide unneeded sections

    div#sidebar { display:none; }

  • Or move them

    div#sidebar { float:none; }


Mobile refactoring rule no 2 l.jpg
Mobile Refactoring Rule No.2

  • Reset the content width

    div#layout {width:100%;}


Abbreviate l.jpg
Abbreviate

  • 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 screen l.jpg
Design 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 css3 l.jpg
Nifty 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 refactoring l.jpg
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 l.jpg
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



Resources l.jpg
Resources

  • 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 l.jpg
Thanks!

Joseph R. Lewis

Sandia National Laboratories


ad