Making your site mobile-friendly Patrick H. Lauke / Opera Software

Patrick H. Lauke / RIT++ 2010 / Moscow / 12 April 2010

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

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:diet or “full fat”?

3. single adaptive site

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

CSS 2 Media Types(screen, print, handheld)

CSS 3 Media Queries<link rel=”stylesheet”

media=”screen and (min-width:800px)”… >

viewport meta<meta name="viewport"

content="width=device-width"><meta name="viewport"

content="width=320, initial-scale=2.3,user-scalable=no">

SVG (Scalable Vector Graphics)

minimise dataand server requests

(minify JavaScript, combine CSS, …)http://developer.yahoo.com/performance/rules.html

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

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

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