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.
Mobile web development
techniques and Opera’s
developer tools.

                       dreas
                    An ens r ...
Andreas
Bovens
Group Leader Developer Relations


Opera Software ASA              Phone:      +47 23 69 26 68
Waldemar Thr...
“Mobile web development”
Before:
WML, XHTML-MP, XHTML basic,
cHTML, i-HTML ...
                  CC by-nc 2.0 Jaime Pérez http://www.flickr.com/phot...
Before:
WML, XHTML-MP, XHTML basic,
cHTML, i-HTML ...
Mobile browser landscape has
changed dramatically
                     CC by 2.0 Magnera http://www.flickr.com/photos/magne...
Mobile browsers can deal with
“desktop” content just fine :-)
Small Screen Rendering
zoom and pan
...
top notch standards support
more powerful devices
faster connections
“Mobile web development”
“Mobile web development”
             =
normal web development +
mobile specific techniques
Three approaches
to catering for mobile users
1. Do nothing
1. Do nothing
   (or at least not too much)
1. Do nothing
             (or at least not too much)



                                liquid layout
semi-liquid layout
2. Create a separate mobile site
navigation
navigation




mysite.com   m.mysite.com
navigation


      UserAgent sniffing
mysite.com          m.mysite.com
navigation


      UserAgent sniffing
mysite.com                      m.mysite.com




                 CC by-nc-sa 2.0 Tim...
navigation


      UserAgent sniffing
mysite.com          m.mysite.com
navigation


       UserAgent sniffing
mysite.com           m.mysite.com


m.mysite.com               mysite.com
navigation


       UserAgent sniffing
mysite.com           m.mysite.com


m.mysite.com               mysite.com

         ...
navigation


check cookie, else UserAgent sniffing
  mysite.com            m.mysite.com


  m.mysite.com             mysite...
page layout
page layout




Use normal HTML
page layout




             Use normal HTML


Control zoom level with the viewport meta tag
Control zoom level with the viewport meta tag




                  No viewport meta tag:
                  viewport width...
Control zoom level with the viewport meta tag




                  No viewport meta tag:
                  viewport width...
Control zoom level with the viewport meta tag




                  With viewport meta tag:
                  set value is...
Control zoom level with the viewport meta tag



                  <meta name="viewport"
                  content="width=...
Control zoom level with the viewport meta tag



                  <meta name="viewport"
                  content="width=...
Control zoom level with the viewport meta tag



                  <meta name="viewport"
                  content="width=...
page layout




             Use normal HTML


Control zoom level with the viewport meta tag
navigation


check cookie, else UserAgent sniffing
  mysite.com            m.mysite.com


  m.mysite.com             mysite...
3. Create one site that works everywhere
3. Create one site that works everywhere

  viewport meta tag
3. Create one site that works everywhere

  viewport meta tag
                       media queries
media queries
media queries

@media screen and (max-width: 400px) {
/* CSS for browser widths smaller than 400px */
#nav {margin: 0}
#ad...
media queries

@media screen and (max-width: 400px) {
/* CSS for browser widths smaller than 400px */
#nav {margin: 0}
#ad...
different layouts for all
media queries
                kinds of browser sizes
different layouts for all
  media queries
                       kinds of browser sizes

What about mobile browsers with a...
different layouts for all
  media queries
                       kinds of browser sizes

What about mobile browsers with a...
media queries      max/min-width
                    relates directly to the
viewport meta tag   viewport width value
media queries              max/min-width
                               relates directly to the
  viewport meta tag       ...
1. Do nothing
2. Create a separate mobile site
3. Create one site that works everywhere
1. Do nothing
2. Create a separate mobile site
3. Create one site that works everywhere
             “holy grail”
How to reach the one site holy grail?
How to reach the one site holy grail?

•keep mobile in mind from the very start
How to reach the one site holy grail?

•keep mobile in mind from the very start
•resist the “mobile context” argument, and...
How to reach the one site holy grail?

•keep mobile in mind from the very start
•resist the “mobile context” argument, and...
and now: tools!
           (live demo)
http://www.opera.com/developer/tools/
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
Mobile web development techniques (and Opera's developer tools)
Upcoming SlideShare
Loading in …5
×

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

6,568 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
  • Be the first to comment

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/

×