designing for the mobile web
DESCRIPTION
TRANSCRIPT
![Page 1: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/1.jpg)
for the Mobile WebDesigning
for Mobile Webhttp://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
Saturday, September 25, 2010
![Page 2: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/2.jpg)
ahoj !twitter:zibin
slideshare.net/zibin
Saturday, September 25, 2010
![Page 3: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/3.jpg)
Mobile Web is growing.....
Saturday, September 25, 2010
![Page 4: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/4.jpg)
Mobile Web is growing.....
iphone
android
ipad
Saturday, September 25, 2010
![Page 5: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/5.jpg)
big screen
click click “mouse”
tab tab “keyboard”
family photo
happy :-)
Designing a desktop sitehttp://www.flickr.com/photos/anantablamichhane/438854995/sizes/l/
Saturday, September 25, 2010
![Page 6: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/6.jpg)
mobile developer :-(
Designing a mobile site
piece of crap (?).....
http://www.flickr.com/photos/hendry/763193147/sizes/l/
Saturday, September 25, 2010
![Page 7: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/7.jpg)
iphone
5% users in EU5 countrieshttp://www.flickr.com/photos/goincase/4973847949/
Saturday, September 25, 2010
![Page 8: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/8.jpg)
for Mobile Webhttp://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
the rest use something else...
Saturday, September 25, 2010
![Page 9: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/9.jpg)
the real mobile phone
small screen
different screen size
hard to debug
!= iphone
http://www.flickr.com/photos/osde-info/2270663393/sizes/l/
memory issue
Saturday, September 25, 2010
![Page 10: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/10.jpg)
Approaches to design
Saturday, September 25, 2010
![Page 11: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/11.jpg)
3 approachesto create a mobile site
Saturday, September 25, 2010
![Page 12: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/12.jpg)
1. Do Nothing
Saturday, September 25, 2010
![Page 13: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/13.jpg)
1. Do Nothing(at least not too much)
Saturday, September 25, 2010
![Page 14: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/14.jpg)
1. Do Nothing(at least not too much)
liquid layout
semi liquid layout
Saturday, September 25, 2010
![Page 15: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/15.jpg)
2. separate mobile site
Saturday, September 25, 2010
![Page 16: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/16.jpg)
Saturday, September 25, 2010
![Page 17: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/17.jpg)
browser sniffing....
Saturday, September 25, 2010
![Page 18: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/18.jpg)
Saturday, September 25, 2010
![Page 19: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/19.jpg)
selection & cookie
Saturday, September 25, 2010
![Page 20: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/20.jpg)
3. one site to rule them all
Saturday, September 25, 2010
![Page 21: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/21.jpg)
3. one site to rule them all (including ipad)
Saturday, September 25, 2010
![Page 22: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/22.jpg)
3. one site to rule them all
viewport media queries
(including ipad)
Saturday, September 25, 2010
![Page 23: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/23.jpg)
media queries
@media all and (max-device-width: 480px) { // insert CSS rules here}
@media all and (min-width: 480px) and (max-width: 800px) { // insert CSS rules here}
Saturday, September 25, 2010
![Page 24: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/24.jpg)
viewport
visual viewport actual viewport
http://www.quirksmode.org/mobile/viewports2.html
Saturday, September 25, 2010
![Page 25: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/25.jpg)
viewport
<meta name=”viewport” content=”width=device-width”>
Saturday, September 25, 2010
![Page 26: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/26.jpg)
viewport
http://www.quirksmode.org/mobile/viewports2.html
Saturday, September 25, 2010
![Page 27: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/27.jpg)
viewport
<meta name=”viewport” content=”width=device-width”>
@media screen and (max-width: 360px){// CSS style here
}
media queries
max/min-width relates directly to the viewport width value
Saturday, September 25, 2010
![Page 28: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/28.jpg)
1. do nothing2. separate site3. one site to rule them all
Saturday, September 25, 2010
![Page 29: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/29.jpg)
debugging the mobile phone
hard to debug
Saturday, September 25, 2010
![Page 30: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/30.jpg)
Mobile Emulator
Saturday, September 25, 2010
![Page 31: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/31.jpg)
Remote Debuggingdemo: http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick
Saturday, September 25, 2010
![Page 32: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/32.jpg)
děkuji ! , Q&Atwitter:zibin
slideshare.net/zibin
Saturday, September 25, 2010
![Page 33: Designing for the mobile web](https://reader031.vdocuments.site/reader031/viewer/2022020115/54c7f3d84a7959580b8b45b1/html5/thumbnails/33.jpg)
CreditsMy colleague Andreas Bovenshttp://www.slideshare.net/andreasbovens/mobile-web-development-techniques-and-operas-developer-tools
A dude Bryan Riegerhttp://www.slideshare.net/bryanrieger/going-mobile-2010-by-yiibu
Image credits are listed in every image
Saturday, September 25, 2010