Designing for the mobile web
3 likes1,290 views
The document discusses three approaches to designing a mobile website: 1) Do nothing and rely on liquid or semi-liquid layouts, 2) Create a separate mobile site using browser sniffing or cookies, 3) Use a single responsive site with media queries and viewport meta tags to adapt layout and styling based on screen size. It also covers challenges of mobile development like different screen sizes and debugging mobile browsers.
Designing for the mobile web
- 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