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.

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

7. “Mobile web development”

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 :-)

12. Small Screen Rendering

13. zoom and pan

14. ...
top notch standards support
more powerful devices
faster connections

15. “Mobile web development”

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/