Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010

1,684 views

Published on

  • Be the first to comment

Patrick Lauke – Opera Patrick Lauke Rit++ 12 04 2010

  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
  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 data and server requests (minify JavaScript, combine CSS, …) http://developer.yahoo.com/performance/rules.html
  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

×