Your SlideShare is downloading. ×
Designing for the mobile web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing for the mobile web

1,764
views

Published on


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

No Downloads
Views
Total Views
1,764
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×