Designing
                     for the Mobile Web




http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/p...
ahoj !
                                   twitter:zibin
                               slideshare.net/zibin




Saturday, ...
Mobile Web is growing.....




Saturday, September 25, 2010
iphone
                                                ipad


                         Mobile Web is growing.....


      ...
big screen

                                     family photo




                               happy :-)



            ...
mobile developer :-(




     piece of crap (?).....




             Designing a mobile site   http://www.flickr.com/photo...
iphone




         5% users in EU5 countries
                                        http://www.flickr.com/photos/goincase...
the rest use something else...




http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/

Saturd...
different screen size                     != iphone
                               small screen
                          ...
Approaches to
                              design



Saturday, September 25, 2010
3 approaches
                                 to create a mobile site




Saturday, September 25, 2010
1. Do Nothing



Saturday, September 25, 2010
1. Do Nothing
                                 (at least not too much)




Saturday, September 25, 2010
1. Do Nothing
                                 (at least not too much)


                                                 ...
2. separate mobile
                   site



Saturday, September 25, 2010
Saturday, September 25, 2010
browser sniffing....

Saturday, September 25, 2010
Saturday, September 25, 2010
selection & cookie




Saturday, September 25, 2010
3. one site to rule
                   them all



Saturday, September 25, 2010
3. one site to rule
                   them all    (including ipad)




Saturday, September 25, 2010
3. one site to rule
                   them all                     (including ipad)




                               vi...
media queries


     @media all and (max-device-width: 480px) {
       // insert CSS rules here
     }

     @media all an...
viewport




                               visual viewport                                         actual viewport
      ...
viewport




            <meta name=”viewport” content=”width=device-
                             width”>




Saturday, S...
viewport




                               http://www.quirksmode.org/mobile/viewports2.html


Saturday, September 25, 2010
media queries      viewport


     <meta name=”viewport” content=”width=device-
     width”>

     @media screen and (max-...
1. do nothing
   2. separate site
   3. one site to rule them all




Saturday, September 25, 2010
hard to debug




     debugging the mobile phone
Saturday, September 25, 2010
Mobile Emulator




Saturday, September 25, 2010
Remote Debugging
        demo: http://my.opera.com/ODIN/blog/opera-mobile-10-and-its-remote-debugging-party-trick




Satu...
děkuji ! , Q&A
                                       twitter:zibin
                                   slideshare.net/zibi...
Credits
                  My colleague Andreas Bovens
                  http://www.slideshare.net/andreasbovens/mobile-web...
Upcoming SlideShare
Loading in...5
×

Designing for the mobile web

1,839

Published on

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

No Downloads
Views
Total Views
1,839
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
45
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×