Mobile web development techniques (and Opera's developer tools)

6,432 views

Published on

Slides of my Mobile 2.0 workshop on mobile web development techniques. The developer tools part consisted mostly of live demos of Opera Dragonfly and the Opera Mobile emulator, which you can download from http://www.opera.com/developer/tools/

Textures from http://www.flickr.com/photos/delanydean/4460819042/ (CC by 2.0) and http://www.flickr.com/photos/poetatum/3380087493/ (CC by-nc 2.0)

Published in: Technology, Design

Mobile web development techniques (and Opera's developer tools)

  1. 1. Mobile web development techniques and Opera’s developer tools. dreas An ens r Relations Bopveader Develope u L Gro e Phon
  2. 2. Andreas Bovens Group Leader Developer Relations Opera Software ASA Phone: +47 23 69 26 68 Waldemar Thranes gate 98 Fax: +47 23 69 24 01 P.O. Box 2648, St. Hanshaugen Mobile: +47 40 03 48 59 0131 Oslo E-mail: andreasb@opera.com Norway Web site: www.opera.com
  3. 3. “Mobile web development”
  4. 4. Before: WML, XHTML-MP, XHTML basic, cHTML, i-HTML ... CC by-nc 2.0 Jaime Pérez http://www.flickr.com/photos/jaimeperez/2562068910/
  5. 5. Before: WML, XHTML-MP, XHTML basic, cHTML, i-HTML ...
  6. 6. Mobile browser landscape has changed dramatically CC by 2.0 Magnera http://www.flickr.com/photos/magnera/4571460751/
  7. 7. Mobile browsers can deal with “desktop” content just fine :-)
  8. 8. Small Screen Rendering
  9. 9. zoom and pan
  10. 10. ... top notch standards support more powerful devices faster connections
  11. 11. “Mobile web development”
  12. 12. “Mobile web development” = normal web development + mobile specific techniques
  13. 13. Three approaches to catering for mobile users
  14. 14. 1. Do nothing
  15. 15. 1. Do nothing (or at least not too much)
  16. 16. 1. Do nothing (or at least not too much) liquid layout semi-liquid layout
  17. 17. 2. Create a separate mobile site
  18. 18. navigation
  19. 19. navigation mysite.com m.mysite.com
  20. 20. navigation UserAgent sniffing mysite.com m.mysite.com
  21. 21. navigation UserAgent sniffing mysite.com m.mysite.com CC by-nc-sa 2.0 Tim Dorr http://www.flickr.com/photos/timdorr/2096272747/
  22. 22. navigation UserAgent sniffing mysite.com m.mysite.com
  23. 23. navigation UserAgent sniffing mysite.com m.mysite.com m.mysite.com mysite.com
  24. 24. navigation UserAgent sniffing mysite.com m.mysite.com m.mysite.com mysite.com set cookie
  25. 25. navigation check cookie, else UserAgent sniffing mysite.com m.mysite.com m.mysite.com mysite.com set cookie
  26. 26. page layout
  27. 27. page layout Use normal HTML
  28. 28. page layout Use normal HTML Control zoom level with the viewport meta tag
  29. 29. Control zoom level with the viewport meta tag No viewport meta tag: viewport width is interpreted as 850px, and squeezed inside browser width
  30. 30. Control zoom level with the viewport meta tag No viewport meta tag: viewport width is interpreted as 850px, and horizontal panning is required
  31. 31. Control zoom level with the viewport meta tag With viewport meta tag: set value is taken as viewport width, and then fit inside browser width
  32. 32. Control zoom level with the viewport meta tag <meta name="viewport" content="width=320">
  33. 33. Control zoom level with the viewport meta tag <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width">
  34. 34. Control zoom level with the viewport meta tag <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width"> makes browser behave like there is no zoom
  35. 35. page layout Use normal HTML Control zoom level with the viewport meta tag
  36. 36. navigation check cookie, else UserAgent sniffing mysite.com m.mysite.com m.mysite.com mysite.com set cookie
  37. 37. 3. Create one site that works everywhere
  38. 38. 3. Create one site that works everywhere viewport meta tag
  39. 39. 3. Create one site that works everywhere viewport meta tag media queries
  40. 40. media queries
  41. 41. media queries @media screen and (max-width: 400px) { /* CSS for browser widths smaller than 400px */ #nav {margin: 0} #ad {display: none;} } @media screen and (min-width: 401px) and (max-width: 800px) { /* CSS for browser widths between 401 and 800px */ #ad {float: left} #content {padding: 5px;} } ...
  42. 42. media queries @media screen and (max-width: 400px) { /* CSS for browser widths smaller than 400px */ #nav {margin: 0} #ad {display: none;} } @media screen and (min-width: 401px) and (max-width: 800px) { /* CSS for browser widths between 401 and 800px */ #ad {float: left} #content {padding: 5px;} } ...
  43. 43. different layouts for all media queries kinds of browser sizes
  44. 44. different layouts for all media queries kinds of browser sizes What about mobile browsers with a virtual width of e.g. 850px?
  45. 45. different layouts for all media queries kinds of browser sizes What about mobile browsers with a virtual width of e.g. 850px? viewport meta tag to the rescue!
  46. 46. media queries max/min-width relates directly to the viewport meta tag viewport width value
  47. 47. media queries max/min-width relates directly to the viewport meta tag viewport width value e.g. Nokia 5800: 360px <meta name="viewport" content="width=device-width"> ... @media screen and (max-width: 360px) { /* CSS for browser widths smaller than 360px */ #nav {margin: 0} #ad {display: none;} } ...
  48. 48. 1. Do nothing 2. Create a separate mobile site 3. Create one site that works everywhere
  49. 49. 1. Do nothing 2. Create a separate mobile site 3. Create one site that works everywhere “holy grail”
  50. 50. How to reach the one site holy grail?
  51. 51. How to reach the one site holy grail? •keep mobile in mind from the very start
  52. 52. How to reach the one site holy grail? •keep mobile in mind from the very start •resist the “mobile context” argument, and use it the other way around: simplify your desktop layout and content
  53. 53. How to reach the one site holy grail? •keep mobile in mind from the very start •resist the “mobile context” argument, and use it the other way around: simplify your desktop layout and content •reduce the number of HTTP requests
  54. 54. and now: tools! (live demo) http://www.opera.com/developer/tools/

×