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/[email protected]
Top Related