Refactoring for the Mobile Web - PowerPoint PPT Presentation

Refactoring for the mobile web l.jpg
Download
1 / 29

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

Refactoring for the Mobile Web

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


Browsers vs screen sizes l.jpg

Browsers vs. Screen Sizes


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


Questions l.jpg

Questions?

?


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


  • Login