Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making your site mobile-friendly - Ignite Manchester 01.03.2010

1,483 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

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

×