1. Designing
for the Mobile Web
http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
Saturday, September 25, 2010

2. ahoj !
twitter:zibin
slideshare.net/zibin
Saturday, September 25, 2010

3. Mobile Web is growing.....
Saturday, September 25, 2010

4. iphone
ipad
Mobile Web is growing.....
android
Saturday, September 25, 2010

5. big screen
family photo
happy :-)
tab tab “keyboard”
click click “mouse”
Designing a desktop site
http://www.flickr.com/photos/anantablamichhane/438854995/sizes/l/
Saturday, September 25, 2010

6. mobile developer :-(
piece of crap (?).....
Designing a mobile site http://www.flickr.com/photos/hendry/763193147/sizes/l/
Saturday, September 25, 2010

7. iphone
5% users in EU5 countries
http://www.flickr.com/photos/goincase/4973847949/
Saturday, September 25, 2010

8. the rest use something else...
http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/
Saturday, September 25, 2010

9. different screen size != iphone
small screen
hard to debug
memory issue
the real mobile phone http://www.flickr.com/photos/osde-info/2270663393/sizes/l/
Saturday, September 25, 2010

10. Approaches to
design
Saturday, September 25, 2010

11. 3 approaches
to create a mobile site
Saturday, September 25, 2010

12. 1. Do Nothing
Saturday, September 25, 2010

13. 1. Do Nothing
(at least not too much)
Saturday, September 25, 2010

14. 1. Do Nothing
(at least not too much)
liquid layout
semi liquid layout
Saturday, September 25, 2010

15. 2. separate mobile
site
Saturday, September 25, 2010

16. Saturday, September 25, 2010

17. browser sniffing....
Saturday, September 25, 2010

18. Saturday, September 25, 2010

19. selection & cookie
Saturday, September 25, 2010

20. 3. one site to rule
them all
Saturday, September 25, 2010

21. 3. one site to rule
them all (including ipad)
Saturday, September 25, 2010

22. 3. one site to rule
them all (including ipad)
viewport media queries
Saturday, September 25, 2010

23. 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

24. viewport
visual viewport actual viewport
http://www.quirksmode.org/mobile/viewports2.html
Saturday, September 25, 2010

25. viewport
<meta name=”viewport” content=”width=device-
width”>
Saturday, September 25, 2010

26. viewport
http://www.quirksmode.org/mobile/viewports2.html
Saturday, September 25, 2010

27. media queries viewport
<meta name=”viewport” content=”width=device-
width”>
@media screen and (max-width: 360px){
// CSS style here
}
max/min-width relates directly to the viewport width
value
Saturday, September 25, 2010

28. 1. do nothing
2. separate site
3. one site to rule them all
Saturday, September 25, 2010

29. hard to debug
debugging the mobile phone
Saturday, September 25, 2010

30. Mobile Emulator
Saturday, September 25, 2010

31. Remote Debugging
demo: http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick
Saturday, September 25, 2010

32. děkuji ! , Q&A
twitter:zibin
slideshare.net/zibin
Saturday, September 25, 2010

33. Credits
My colleague Andreas Bovens
http://www.slideshare.net/andreasbovens/mobile-web-development-techniques-and-operas-developer-
tools
A dude Bryan Rieger
http://www.slideshare.net/bryanrieger/going-mobile-2010-by-yiibu
Image credits are listed in every image
Saturday, September 25, 2010