Your SlideShare is downloading. ×
0
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
Designing for the mobile web
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,802

Published on

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

No Downloads
Views
Total Views
1,802
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

×