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

Designing for the mobile web

on

  • 2,214 views

 

Statistics

Views

Total Views
2,214
Views on SlideShare
2,134
Embed Views
80

Actions

Likes
3
Downloads
43
Comments
0

10 Embeds 80

http://webexpo.cz 26
http://webexpo.net 26
http://hoangthinh.tumblr.com 16
http://linkhay.com 6
http://my.opera.com 1
http://translate.googleusercontent.com 1
http://beta.linkhay.com 1
http://static.slidesharecdn.com 1
http://safe.tumblr.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Designing for the mobile web Designing for the mobile web Presentation Transcript

    • Designing for the Mobile Web http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/ Saturday, September 25, 2010
    • ahoj ! twitter:zibin slideshare.net/zibin Saturday, September 25, 2010
    • Mobile Web is growing..... Saturday, September 25, 2010
    • iphone ipad Mobile Web is growing..... android Saturday, September 25, 2010
    • 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
    • mobile developer :-( piece of crap (?)..... Designing a mobile site http://www.flickr.com/photos/hendry/763193147/sizes/l/ Saturday, September 25, 2010
    • iphone 5% users in EU5 countries http://www.flickr.com/photos/goincase/4973847949/ Saturday, September 25, 2010
    • the rest use something else... http://www.flickr.com/photos/albanyassociates/3308582269/sizes/l/in/photostream/ Saturday, September 25, 2010
    • 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
    • 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) liquid layout semi liquid layout Saturday, September 25, 2010
    • 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) viewport media queries Saturday, September 25, 2010
    • 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
    • viewport visual viewport actual viewport http://www.quirksmode.org/mobile/viewports2.html Saturday, September 25, 2010
    • viewport <meta name=”viewport” content=”width=device- width”> Saturday, September 25, 2010
    • 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-width: 360px){ // CSS style here } max/min-width relates directly to the viewport width value Saturday, September 25, 2010
    • 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 Saturday, September 25, 2010
    • děkuji ! , Q&A twitter:zibin slideshare.net/zibin Saturday, September 25, 2010
    • 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