Making your site mobile-friendly TIPS AND TECHNIQUES FOR A BETTER MOBILE PRESENCE

Patrick H. Lauke / ThoughtWorks Manchester GeekNights / 17 November 2010

mobile web is increasingly important

we need a site that works on iPhone

...works on iPhone...oh, and iPad

“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession

www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

make your site work on all (most) mobile devices

1. do nothing

not WAP or text anymore...

mobile browserswill work ok-ish

“But the mobile context...”

2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)

beware browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/

offer users choice:desktop or mobile?

refactored for small screen,not dumbed down for mobile

3. single adaptive site

nothing new...fluid layout, progressive enhancement, graceful degradation

CSS 2 Media Types(screen, print, handheld)

CSS 2.1 Media Types

<link rel="stylesheet" ... media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}

CSS 3 Media Queries“...the new hotness” Jeffrey Zeldman

http://www.zeldman.com/2010/04/08/best-aea-yet/

CSS 3 Media Queries

● build and extend CSS 2.1 Media Types● more granular control of capabilities● width, height, orientation, color, resolution, …

http://www.w3.org/TR/css3-mediaqueries/

CSS 3 Media Queries

<link rel="stylesheet" ... media="screen and (max-width:480px)" href="...">@import url("...") screen and (max-width:480px);@media screen and (max-width:480px) { // insert CSS rules here}

viewport meta

viewport meta

● on desktop viewport = visible area of browser● mobile browsers have “virtual viewport”● viewport meta gives hints

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

viewport meta

<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=320, initial-scale=2.3,user-scalable=no">

minimise dataand server requests

(minify JavaScript, combine CSS, …)

minimise data

● data transfer over network can be slow● compress images (PNGCrush)● optimise your HTML (death to div-itis)● minify JavaScript● combine CSS

minimise server requests

● each request has overhead● limit to concurrent requests● caching not reliable (e.g. iPhone > 25Kb)

CSS spritesDave Shea, A List Apartwww.alistapart.com/articles/sprites

width: 50px; height: 50px;background: url(icons.gif) no-repeat -51px 0;

data URLshttp://software.hixie.ch/utilities/cgi/data/data

data URLs

<img width="48" height="48" alt="Redux gravatar" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%00H%00H%00%00%FF% … ">h1 {

background: url("data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01 … ") no-repeat left top;}

1. do nothing2. separate mobile site3. single adaptive site

www.opera.com/developerpatrick.lauke@opera.com

people.opera.com/patrickl/presentations/mcr-geeknights_17.11.2010/mcr-geeknights_17.11.2010.pdf