The document discusses making websites mobile-friendly by either creating a separate mobile site with a different domain (like m.example.com) or using a single adaptive site with fluid layouts, viewport meta tags, and CSS media queries to dynamically adjust the layout for different screen sizes. It recommends minimizing requests through techniques like CSS sprites and combining files to optimize performance on mobile networks.

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

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

6. 1. do nothing

7. mobile browsers
will work ok-ish

8. “But the mobile context...”

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

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

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

12. 3. single adaptive site

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

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

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

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

17. SVG (Scalable Vector Graphics)

18. minimise server requests
(minify JavaScript, combine CSS, …)

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

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

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