Mobile web development techniques (and Opera's developer tools)
7 likes1,952 views
This document discusses mobile web development techniques and Opera's developer tools. It outlines three approaches to catering websites for mobile users: doing nothing, creating a separate mobile site, or creating one site that works for all devices. Key techniques discussed include using the viewport meta tag to control zoom levels, media queries to apply different CSS styles based on screen width, and keeping mobile design in mind from the start to simplify layouts. The document promotes the goal of a "one site holy grail" that works seamlessly across devices and concludes by introducing Opera's developer tools for testing mobile webpages.
Mobile web development techniques (and Opera's developer tools)
- 1. Mobile web development techniques and Opera’s developer tools. dreas An ens r Relations Bopveader Develope u L Gro e Phon
- 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
- 8. Before: WML, XHTML-MP, XHTML basic, cHTML, i-HTML ... CC by-nc 2.0 Jaime Pérez http://www.flickr.com/photos/jaimeperez/2562068910/
- 9. Before: WML, XHTML-MP, XHTML basic, cHTML, i-HTML ...
- 10. Mobile browser landscape has changed dramatically CC by 2.0 Magnera http://www.flickr.com/photos/magnera/4571460751/
- 11. Mobile browsers can deal with “desktop” content just fine :-)
- 13. zoom and pan
- 14. ... top notch standards support more powerful devices faster connections
- 16. “Mobile web development” = normal web development + mobile specific techniques
- 17. Three approaches to catering for mobile users
- 18. 1. Do nothing
- 19. 1. Do nothing (or at least not too much)
- 20. 1. Do nothing (or at least not too much) liquid layout semi-liquid layout
- 21. 2. Create a separate mobile site
- 22. navigation
- 23. navigation mysite.com m.mysite.com
- 24. navigation UserAgent sniffing mysite.com m.mysite.com
- 25. navigation UserAgent sniffing mysite.com m.mysite.com CC by-nc-sa 2.0 Tim Dorr http://www.flickr.com/photos/timdorr/2096272747/
- 26. navigation UserAgent sniffing mysite.com m.mysite.com
- 27. navigation UserAgent sniffing mysite.com m.mysite.com m.mysite.com mysite.com
- 28. navigation UserAgent sniffing mysite.com m.mysite.com m.mysite.com mysite.com set cookie
- 29. navigation check cookie, else UserAgent sniffing mysite.com m.mysite.com m.mysite.com mysite.com set cookie
- 30. page layout
- 31. page layout Use normal HTML
- 32. page layout Use normal HTML Control zoom level with the viewport meta tag
- 33. Control zoom level with the viewport meta tag No viewport meta tag: viewport width is interpreted as 850px, and squeezed inside browser width
- 34. Control zoom level with the viewport meta tag No viewport meta tag: viewport width is interpreted as 850px, and horizontal panning is required
- 35. 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
- 36. Control zoom level with the viewport meta tag <meta name="viewport" content="width=320">
- 37. Control zoom level with the viewport meta tag <meta name="viewport" content="width=320"> <meta name="viewport" content="width=device-width">
- 38. 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
- 39. page layout Use normal HTML Control zoom level with the viewport meta tag
- 40. navigation check cookie, else UserAgent sniffing mysite.com m.mysite.com m.mysite.com mysite.com set cookie
- 41. 3. Create one site that works everywhere
- 42. 3. Create one site that works everywhere viewport meta tag
- 43. 3. Create one site that works everywhere viewport meta tag media queries
- 44. media queries
- 45. 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;} } ...
- 46. 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;} } ...
- 47. different layouts for all media queries kinds of browser sizes
- 48. different layouts for all media queries kinds of browser sizes What about mobile browsers with a virtual width of e.g. 850px?
- 49. 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!
- 50. media queries max/min-width relates directly to the viewport meta tag viewport width value
- 51. 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;} } ...
- 52. 1. Do nothing 2. Create a separate mobile site 3. Create one site that works everywhere
- 53. 1. Do nothing 2. Create a separate mobile site 3. Create one site that works everywhere “holy grail”
- 54. How to reach the one site holy grail?
- 55. How to reach the one site holy grail? •keep mobile in mind from the very start
- 56. 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
- 57. 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
- 58. and now: tools! (live demo) http://www.opera.com/developer/tools/