1. Making your site mobile-friendly
Patrick H. Lauke / Opera Software
Patrick H. Lauke / RIT++ 2010 / Moscow / 12 April 2010

2. we need a site that
works on iPhone

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

4. “remove iPhone from ass”
Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

5. make your site work on
all (most) mobile devices

7. 1. do nothing

8. mobile browsers
will work ok-ish

9. “But the mobile context...”

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

11. beware browser sniffing
photo: http://www.flickr.com/photos/timdorr/2096272747/

12. offer users choice:
diet or “full fat”?

13. 3. single adaptive site

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

15. CSS 2 Media Types
(screen, print, handheld)

16. CSS 3 Media Queries
<link rel=”stylesheet”
media=”screen and (min-width:800px)”… >

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

18. SVG (Scalable Vector Graphics)

19. minimise data
and server requests
(minify JavaScript, combine CSS, …)
http://developer.yahoo.com/performance/rules.html

20. CSS sprites
Dave Shea, A List Apart
www.alistapart.com/articles/sprites

21. data URLs
http://software.hixie.ch/utilities/cgi/data/data

22. www.opera.com/developer
patrick.lauke@opera.com