« »

gomobile

developing for a mobile web

To follow along...

slides.scurker.com/gomobile

Hello. Bonjour. Guten Tag.

Who am I?

Jason Wilson

  • Birmingham Native
  • Front-end Engineer by Night
  • 10+ years Experience on the Web
  • Software Engineer by Day (at Daxko)

Mobile is GROWING...

In Q4 2010, mobile
phone shipments overtook
PC shipments.

Mobile Phones in the US

  • 83% own a cellphone
  • 35% own a smartphone
  • 8.3% primary device for online

Not everyone has an iphone...

Mobile Marketshare (OS)

Android 29%
Apple (iOS) 27%
Blackberry 27%
Windows Mobile 10%
Other 6%

Mobile Marketshare (Browsing)

iPhone/iPod Safari 23%
Opera 22%
Nokia 16%
Android 16%
Blackberry 13%
Other 10%

Is Webkit the new IE?

=

?

Browser Matchup

Webkit

  • webkit rendering engine
  • excellent standards support
  • HTML5, CSS3, SVG, Geolocation...
  • used by many hardware vendors
  • Apple, Blackberry, Google, Nokia...
  • used in many mobile OSs
  • iOS, Android, webOS, Symbian...

Opera

Opera Mini

  • presto rendering engine
  • minimal features - renders on server
  • good standards support
  • HTML5, CSS3, SVG, Geolocation...
  • used in many mobile OSs
  • iOS, Android, Blackberry, Symbian, Windows Mobile...

Opera

Opera Mobile

  • presto rendering engine
  • good standards support
  • HTML5, CSS3, SVG, Geolocation...
  • used in some mobile OSs
  • Android, Symbian, Windows Mobile...

IE Mobile

  • trident rendering engine
  • Currently a mix between IE7-8 trident
  • varying standards support
  • HTML5*, CSS3*, SVG*
  • *IE9 coming soon - 7.5 Mango

Consumers and Mobile

  • 57% of users had a problem accessing a site from mobile.
  • 46% of users are unlikely to return to a mobile site they had trouble accessing.
  • 34% of users would visit a competitor's mobile site instead.

Rethinking Mobile Design

Not just the desktop anymore...

Our normal approach...

Desktop Site + Mobile Site

...or even...

Desktop Site Mobile Site

But perhaps it should be...?

Mobile Site Desktop Site

Mobile First

  • Focussing on content
  • Prioritize on the necessary
  • Only use what is needed

...a better user experience!

Think about developing in "layers"...

The Problem Today...

← fixed layouts →

How do we tackle this?

resolutions

Responsive Design

Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. ~ Ethan Marcotte

It's not about the device...

One Site, Many Devices

Responsive design is...

Flexible

Fluid

Adaptable

Say Hello to Media Queries!

Inline Media Queries

@media screen and (min-width: 801px) {
  #content {
    max-width: 980px;
  }
}
      
@media screen and (min-width: 320px) 
              and (max-width: 480px) {              
  #sidebar {
    display: none;
  }
}

Seperate Stylesheets

<link rel="stylesheet"
  media="screen and (min-width: 321px) and (max-width: 800px)"
  href="link/to/my/stylesheet.css"></link>
  
<link rel="stylesheet"
  media="screen and (min-width: 801px)"
  href="link/to/my/stylesheet.css"></link>

Available Features

  • min-width
  • max-width
  • min-height
  • max-height

Applies rules according to the size of the viewport. To get the device size, use device-width/height instead.

@media screen 
  and (min-width: 480px) 
  and (max-width: 800px) { ... }

Available Features

  • orientation

Portait rule applies when the height is greater than the width, otherwise landscape is used.

@media screen and (orientation: portrait) { ... }
@media screen and (orientation: landscape) { ... }

Available Features

  • min-device-pixel-ratio
  • max-device-pixel-ratio

* Not an official CSS3 recommendation and should currently be appended with the vendor prefixes (-webkit, -moz). Currently only iPhone 4, but other devices may be supported in the future.

@media screen and (min-device-pixel-ratio:2),
       screen and (-webkit-min-device-pixel-ratio:2) { ... }

Media Queries & Browser Compatability

  • IOS 3.2+ / Android 2.1+ / Blackberry 6+
  • Opera Mini 5+ / Opera Mobile 10+
  • IE Mobile 9+

Responsive Images, Embeds

img, object {
  max-width: 100%;
}

Content Stacking

Hiding Content

Was this content really necessary in the first place?

Hiding Content

@media screen and (max-width: 800px) {
  #column1, #column2 {
    width: 45%;
  }

  #column3 {
    display: none;
  }
}
  
@media screen and (max-width: 480px) {
  #column1 {
    width: 90%;
  }

  #column2 {
    display: none;
  }
}

Controlling the Viewport

<meta name="viewport" 
  content="width=device-width; initial-scale=1.0" />

Possible options:

  • width (pixel width or device-width)
  • height (pixel height or device-height)
  • initial-scale
  • minimum-scale
  • maximum-scale
  • user-scalable (yes or no)

There is no silver bullet...

Responsive Guidelines

  1. Mobile first!

Responsive Guidelines

  1. Mobile first!
  2. Think "relative", not static.
← relative to viewport →

Remember, many devices!

Responsive Guidelines

  1. Mobile first!
  2. Think "relative", not static
  3. Progressively enhance using CSS/Javascript

Responsive Guidelines

  1. Mobile first!
  2. Think "relative", not static
  3. Progressively enhance using CSS/Javascript
  4. Avoid sending unnecessary data

we're only halfway there...

Touch

Touch Events

Available on...

Touch Events

touchstart

  • When a finger touches the surface.

touchmove

  • When an event moves on the surface.

touchend

  • When an event ends on the surface.

Touch Events

Listen to events...

document.addEventListener('touchstart', function(e) { ... });
document.addEventListener('touchmove', function(e) { ... });
document.addEventListener('touchend', function(e) { ... });

Touch Events

Available event properties:

  • event.touches - all touches
  • event.targetTouches - all touches for target element
  • event.changedTouches - all touches in current event

touchmove & touchend

  • event.scale - scale relative to two fingers
  • event.rotate - delta rotation of an event

Touch Events

Available touch properties:

  • identifier - touch identifier
  • touch.pageX / touch.pageY - page coordinates
  • touch.screenX / touch.screenY - screen coordinates
  • event.target - target element

Touch Events

This Presentation uses Touch Events:

onTouchStart: function(e) {
  if(e.touches.length == 1) {
    touchStartX = e.touches[0].pageX; 
  }
}

Touch Events

onTouchEnd: function(e) {
  var change = touchStartX - e.changedTouches[0].pageX,
      delta = 175;

  if(change < -delta) {
    this.previous();
  } else if(change > delta) {
    this.next();
  }
  touchStartX = 0;
}

(view on your iPhone or Android device to see)

Touch Events

Touch Support

Sometimes, the network is down...

Application Cache

<html manifest="manifest.mf">
  ...
</html>
Remember to serve your manifest files with text/cache-manifest!

Application Cache

CACHE MANIFEST
# timestamp 2011-01-11 00:00:00
css/stylesheet.css
js/javascript.js
images/myimage.png
  • Files are stored in the cache until:
    • The manifest file is updated
    • The uses clears their storage data
    • The cache is forcably updated

Don't cache the manifest files!

Application Cache

Why use application cache?

Other Tips

  • Use CSS transitions instead of javascript animations
    - these are sometimes hardware accelerated.
  • Take advantage of CSS sprite sheets.
  • Simplify!

Testing

Remember...

Mobile first!

One site, many devices

Be fluid and adaptable

Progressively enhance your design

Thanks for listening!

Questions?