Designing for the mobile web

2,350 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,350
On SlideShare
0
From Embeds
0
Number of Embeds
126
Actions
Shares
0
Downloads
46
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing for the mobile web

  1. 1. Designing for the Mobile Web http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/ Saturday, September 25, 2010
  2. 2. ahoj ! twitter:zibin slideshare.net/zibin Saturday, September 25, 2010
  3. 3. Mobile Web is growing..... Saturday, September 25, 2010
  4. 4. iphone ipad Mobile Web is growing..... android Saturday, September 25, 2010
  5. 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. 6. mobile developer :-( piece of crap (?)..... Designing a mobile site http://www.flickr.com/photos/hendry/763193147/sizes/l/ Saturday, September 25, 2010
  7. 7. iphone 5% users in EU5 countries http://www.flickr.com/photos/goincase/4973847949/ Saturday, September 25, 2010
  8. 8. the rest use something else... http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/ Saturday, September 25, 2010
  9. 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. 10. Approaches to design Saturday, September 25, 2010
  11. 11. 3 approaches to create a mobile site Saturday, September 25, 2010
  12. 12. 1. Do Nothing Saturday, September 25, 2010
  13. 13. 1. Do Nothing (at least not too much) Saturday, September 25, 2010
  14. 14. 1. Do Nothing (at least not too much) liquid layout semi liquid layout Saturday, September 25, 2010
  15. 15. 2. separate mobile site Saturday, September 25, 2010
  16. 16. Saturday, September 25, 2010
  17. 17. browser sniffing.... Saturday, September 25, 2010
  18. 18. Saturday, September 25, 2010
  19. 19. selection & cookie Saturday, September 25, 2010
  20. 20. 3. one site to rule them all Saturday, September 25, 2010
  21. 21. 3. one site to rule them all (including ipad) Saturday, September 25, 2010
  22. 22. 3. one site to rule them all (including ipad) viewport media queries Saturday, September 25, 2010
  23. 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. 24. viewport visual viewport actual viewport http://www.quirksmode.org/mobile/viewports2.html Saturday, September 25, 2010
  25. 25. viewport <meta name=”viewport” content=”width=device- width”> Saturday, September 25, 2010
  26. 26. viewport http://www.quirksmode.org/mobile/viewports2.html Saturday, September 25, 2010
  27. 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. 28. 1. do nothing 2. separate site 3. one site to rule them all Saturday, September 25, 2010
  29. 29. hard to debug debugging the mobile phone Saturday, September 25, 2010
  30. 30. Mobile Emulator Saturday, September 25, 2010
  31. 31. Remote Debugging demo: http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick Saturday, September 25, 2010
  32. 32. děkuji ! , Q&A twitter:zibin slideshare.net/zibin Saturday, September 25, 2010
  33. 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

×