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

Mobile web development techniques and Opera’s developer tools. dreas An ens r Relations Bopveader Develope u L Gro e Phon

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

“Mobile web development”

Before: WML, XHTML-MP, XHTML basic, cHTML, i-HTML ... CC by-nc 2.0 Jaime Pérez http://www.ﬂickr.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.ﬂickr.com/photos/magnera/4571460751/

Mobile browsers can deal with “desktop” content just ﬁne :-)

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 speciﬁc 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 snifﬁng mysite.com m.mysite.com

navigation UserAgent snifﬁng mysite.com m.mysite.com CC by-nc-sa 2.0 Tim Dorr http://www.ﬂickr.com/photos/timdorr/2096272747/

navigation UserAgent snifﬁng mysite.com m.mysite.com

navigation UserAgent snifﬁng mysite.com m.mysite.com m.mysite.com mysite.com

navigation UserAgent snifﬁng mysite.com m.mysite.com m.mysite.com mysite.com set cookie

navigation check cookie, else UserAgent snifﬁng mysite.com m.mysite.com m.mysite.com mysite.com set cookie

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 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 ﬁt 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 <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

navigation check cookie, else UserAgent snifﬁng mysite.com m.mysite.com m.mysite.com mysite.com 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 tag media queries

media 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;} } ...

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 virtual width of e.g. 850px?

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!

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 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;} } ...

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/

http://nundefined.tistory.com	246
http://mobile20.eu	89
http://blog.nundefined.com	60
http://abava.blogspot.com	6
http://lanyrd.com	3
http://xss.yandex.net	2
http://www.slideshare.net	1
http://static.slidesharecdn.com	1

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

by Andreas Bovens on Jun 17, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 408

Statistics

Mobile web development techniques (and Opera’s developer tools) — Presentation Transcript