![Page 1: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/1.jpg)
Making your site mobile-friendly Patrick H. Lauke / Opera Software
Patrick H. Lauke / RIT++ 2010 / Moscow / 12 April 2010
![Page 2: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/2.jpg)
we need a site that works on iPhone
![Page 3: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/3.jpg)
...works on iPhone...oh, and iPad
![Page 4: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/4.jpg)
“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
![Page 5: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/5.jpg)
make your site work on all (most) mobile devices
![Page 6: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/6.jpg)
![Page 7: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/7.jpg)
1. do nothing
![Page 8: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/8.jpg)
mobile browserswill work ok-ish
![Page 9: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/9.jpg)
“But the mobile context...”
![Page 10: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/10.jpg)
2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)
![Page 11: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/11.jpg)
beware browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/
![Page 12: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/12.jpg)
offer users choice:diet or “full fat”?
![Page 13: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/13.jpg)
3. single adaptive site
![Page 14: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/14.jpg)
nothing new...fluid layout, progressive enhancement, graceful degradation
![Page 15: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/15.jpg)
CSS 2 Media Types(screen, print, handheld)
![Page 16: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/16.jpg)
CSS 3 Media Queries<link rel=”stylesheet”
media=”screen and (min-width:800px)”… >
![Page 17: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/17.jpg)
viewport meta<meta name="viewport"
content="width=device-width"><meta name="viewport"
content="width=320, initial-scale=2.3,user-scalable=no">
![Page 18: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/18.jpg)
SVG (Scalable Vector Graphics)
![Page 19: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/19.jpg)
minimise dataand server requests
(minify JavaScript, combine CSS, …)http://developer.yahoo.com/performance/rules.html
![Page 20: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/20.jpg)
CSS spritesDave Shea, A List Apartwww.alistapart.com/articles/sprites
![Page 21: Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010](https://reader036.vdocuments.us/reader036/viewer/2022081400/555e24d3d8b42a6a4c8b4e36/html5/thumbnails/21.jpg)
data URLshttp://software.hixie.ch/utilities/cgi/data/data