Making your site mobile-friendly - Ignite Manchester 01.03.2010

1,389 views

Published on

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,389
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Making your site mobile-friendly - Ignite Manchester 01.03.2010

  1. 1. Making your site mobile-friendly Patrick H. Lauke / Opera Software
  2. 2. we need a site that works on iPhone
  3. 3. ...works on iPhone... oh, and iPad
  4. 4. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  5. 5. make your site work on all (most) mobile devices
  6. 6. 1. do nothing
  7. 7. mobile browsers will work ok-ish
  8. 8. “But the mobile context...”
  9. 9. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  10. 10. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  11. 11. offer users choice: diet or “full fat”?
  12. 12. 3. single adaptive site
  13. 13. nothing new... fluid layout, progressive enhancement, graceful degradation
  14. 14. CSS 2 Media Types (screen, print, handheld)
  15. 15. CSS 3 Media Queries <link rel=”stylesheet” media=”screen and (min-width:800px)”… >
  16. 16. viewport meta <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=320, initial- scale=2.3,user-scalable=no">
  17. 17. SVG (Scalable Vector Graphics)
  18. 18. minimise server requests (minify JavaScript, combine CSS, …)
  19. 19. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
  20. 20. data URLs http://software.hixie.ch/utilities/cgi/data/data
  21. 21. www.opera.com/developer patrick.lauke@opera.com

×