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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Designing for the mobile web

  • 1,730 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,730
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
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