designing for the mobile web
DESCRIPTION
TRANSCRIPT
for the Mobile WebDesigning
for Mobile Webhttp://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
Saturday, September 25, 2010
ahoj !twitter:zibin
slideshare.net/zibin
Saturday, September 25, 2010
Mobile Web is growing.....
Saturday, September 25, 2010
Mobile Web is growing.....
iphone
android
ipad
Saturday, September 25, 2010
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
mobile developer :-(
Designing a mobile site
piece of crap (?).....
http://www.flickr.com/photos/hendry/763193147/sizes/l/
Saturday, September 25, 2010
iphone
5% users in EU5 countrieshttp://www.flickr.com/photos/goincase/4973847949/
Saturday, September 25, 2010
for Mobile Webhttp://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
the rest use something else...
Saturday, September 25, 2010
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
Approaches to design
Saturday, September 25, 2010
3 approachesto create a mobile site
Saturday, September 25, 2010
1. Do Nothing
Saturday, September 25, 2010
1. Do Nothing(at least not too much)
Saturday, September 25, 2010
1. Do Nothing(at least not too much)
liquid layout
semi liquid layout
Saturday, September 25, 2010
2. separate mobile site
Saturday, September 25, 2010
Saturday, September 25, 2010
browser sniffing....
Saturday, September 25, 2010
Saturday, September 25, 2010
selection & cookie
Saturday, September 25, 2010
3. one site to rule them all
Saturday, September 25, 2010
3. one site to rule them all (including ipad)
Saturday, September 25, 2010
3. one site to rule them all
viewport media queries
(including ipad)
Saturday, September 25, 2010
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
viewport
visual viewport actual viewport
http://www.quirksmode.org/mobile/viewports2.html
Saturday, September 25, 2010
viewport
<meta name=”viewport” content=”width=device-width”>
Saturday, September 25, 2010
viewport
http://www.quirksmode.org/mobile/viewports2.html
Saturday, September 25, 2010
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
1. do nothing2. separate site3. one site to rule them all
Saturday, September 25, 2010
debugging the mobile phone
hard to debug
Saturday, September 25, 2010
Mobile Emulator
Saturday, September 25, 2010
Remote Debuggingdemo: http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick
Saturday, September 25, 2010
děkuji ! , Q&Atwitter:zibin
slideshare.net/zibin
Saturday, September 25, 2010
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