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.
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
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”
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/