Making your site mobile-friendly / RIT++

2,454 views

Published on

Expanded version of my "Making your site mobile-friendly" speed talk, delivered via Skype for the Russian Internet Technology (RIT) conference, Moscow, 12 April 2010

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,454
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Making your site mobile-friendly / RIT++

  1. 1. Making your site mobile-friendly Patrick H. Lauke / Opera Software Patrick H. Lauke / RIT++ 2010 / Moscow / 12 April 2010
  2. 2. mobile web is increasingly important
  3. 3. we need a site that works on iPhone
  4. 4. ...works on iPhone... oh, and iPad
  5. 5. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  6. 6. make your site work on all (most) mobile devices
  7. 7. 1. do nothing
  8. 8. not WAP or text anymore...
  9. 9. mobile browsers will work ok-ish
  10. 10. “But the mobile context...”
  11. 11. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  12. 12. beware browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  13. 13. offer users choice: desktop or mobile?
  14. 14. refactored for small screen, not dumbed down for mobile
  15. 15. 3. single adaptive site
  16. 16. nothing new... fluid layout, progressive enhancement, graceful degradation
  17. 17. CSS 2 Media Types (screen, print, handheld)
  18. 18. CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
  19. 19. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  20. 20. CSS 3 Media Queries ● build and extend CSS 2.1 Media Types ● more granular control of capabilities ● width, height, orientation, color, resolution, … http://www.w3.org/TR/css3-mediaqueries/
  21. 21. CSS 3 Media Queries <link rel="stylesheet" ... media="screen and (max-width:480px)" href="..."> @import url("...") screen and (max-width:480px); @media screen and (max-width:480px) { // insert CSS rules here }
  22. 22. viewport meta
  23. 23. viewport meta ● on desktop viewport = visible area of browser ● mobile browsers have “virtual viewport” ● viewport meta gives hints http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWeb Content/UsingtheViewport/UsingtheViewport.html
  24. 24. viewport meta <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=320, initial- scale=2.3,user-scalable=no">
  25. 25. minimise data and server requests (minify JavaScript, combine CSS, …)
  26. 26. minimise data ● data transfer over network can be slow ● compress images (PNGCrush) ● optimise your HTML (death to div-itis) ● minify JavaScript ● combine CSS
  27. 27. minimise server requests ● each request has overhead ● limit to concurrent requests ● caching not reliable (e.g. iPhone > 25Kb)
  28. 28. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
  29. 29. width: 50px; height: 50px; background: url(icons.gif) no-repeat -51px 0;
  30. 30. data URLs http://software.hixie.ch/utilities/cgi/data/data
  31. 31. data URLs <img width="48" height="48" alt="Redux gravatar" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF %00%01%01%01%00H%00H%00%00%FF% … "> h1 { background: url("data:image/jpeg,%FF%D8%FF %E0%00%10JFIF%00%01 … ") no-repeat left top; }
  32. 32. 1. do nothing 2. separate mobile site 3. single adaptive site
  33. 33. www.opera.com/developer patrick.lauke@opera.com people.opera.com/patrickl/presentations/RIT_12.04.2010/RIT_12.04.2010.pdf

×