mobile web development techniques (and opera's developer tools)
DESCRIPTION
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)TRANSCRIPT
saerdnA snevoB snoitaleR repoleveD redaeL puorG
ASA erawtfoS arepO
89 etag senarhT ramedlaW
neguahsnaH .tS ,8462 xoB .O.P
:enohPxaF :
:eliboM
Mobile web development techniques and Opera’s developer tools.
saerdnA snevoB
snoitaleR repoleveD redaeL puorG
ASA erawtfoS arepO
89 etag senarhT ramedlaW
neguahsnaH .tS ,8462 xoB .O.P
1310 olsO
yawroN
86 62 96 32 74+
10 42 96 32 74+
95 84 30 04 74+
moc.arepo@bsaerdna
moc.arepo.www
:enohP
xaF :
:eliboM
:liam-E
:etis beW
“Mobile web development”
Before: WML, XHTML-MP, XHTML basic, cHTML, i-HTML ...
CC by-nc 2.0 Jaime Pérez http://www.flickr.com/photos/jaimeperez/2562068910/
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/magnera/4571460751/
Mobile browsers can deal with “desktop” content just fine :-)
Small Screen Rendering
zoom and pan
...top notch standards supportmore powerful devicesfaster connections
“Mobile web development”
“Mobile web development”
=normal web development + mobile specific techniques
Three approachesto 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)
semi-liquid layout liquid layout
2. Create a separate mobile site
navigation
mysite.com
navigation
m.mysite.com
mysite.com
navigation
m.mysite.com
UserAgent sniffing
mysite.com
navigation
m.mysite.com
CC by-nc-sa 2.0 Tim Dorr http://www.flickr.com/photos/timdorr/2096272747/
UserAgent sniffing
mysite.com
navigation
m.mysite.com
UserAgent sniffing
mysite.com
m.mysite.com
navigation
m.mysite.com
mysite.com
UserAgent sniffing
mysite.com
m.mysite.com
navigation
m.mysite.com
mysite.com
set cookie
UserAgent sniffing
mysite.com
m.mysite.com
navigation
m.mysite.com
mysite.com
check cookie, else UserAgent sniffing
set cookie
page layout
page layout
Use normal HTML
page layout
Use normal HTML
Control zoom level with the viewport meta tag
No viewport meta tag:viewport width is interpreted as 850px, and squeezed inside browser width
Control zoom level with the viewport meta tag
No viewport meta tag:viewport width is interpreted as 850px, and horizontal panning is required
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
Control zoom level with the viewport meta tag
<meta name="viewport" content="width=320">
Control zoom level with the viewport meta tag
<meta name="viewport" content="width=320">
<meta name="viewport" content="width=device-width">
Control zoom level with the viewport meta tag
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
page layout
Use normal HTML
Control zoom level with the viewport meta tag
mysite.com
m.mysite.com
navigation
m.mysite.com
mysite.com
check cookie, else UserAgent sniffing
set cookie
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 tagmedia queries
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;}}...
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;}}...
media queries
media queriesdifferent layouts for all kinds of browser sizes
media queriesdifferent layouts for all kinds of browser sizes
What about mobile browsers with a virtual width of e.g. 850px?
media queriesdifferent layouts for all kinds of browser sizes
What about mobile browsers with a virtual width of e.g. 850px?
viewport meta tag to the rescue!
media queries
viewport meta tag
max/min-width
relates directly to the
viewport width value
media queries
viewport meta tag
max/min-width
relates directly to the
viewport width value
<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;}}...
e.g. Nokia 5800: 360px
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 use it the other way around: simplify your desktop layout and content
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
and now: tools! (live demo)
http://www.opera.com/developer/tools/