Fluid Layouting Techniques - Over The Air 2009

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    Fluid Layouting Techniques - Over The Air 2009 - Presentation Transcript

    1. Fluid Layout Techniques for Widgets Daniel Herzog,Vodafone @danfooo Vodafone Internet Services
    2. Vodafone offices, Düsseldorf 13th floor Daniel Herzog,Vodafone
    3. Out of topic:Vodafone Widgets Daniel Herzog,Vodafone
    4. Out of topic:Vodafone Widgets • There‘s the store • There are lots of competitions • Developer community at betavine.net/widgetzone • And jil.org Daniel Herzog,Vodafone
    5. The web & resolutions • Rather easy topic. • Available space is a de-facto standard. • ~960 (960 Grid System 960.gs) Daniel Herzog,Vodafone
    6. The web & resolutions • If you do care, you‘ll resize your window around to try. Daniel Herzog,Vodafone
    7. The web & resolutions • But that‘s not what I mean by resolution. Daniel Herzog,Vodafone
    8. What I mean by resolution • Run a number of resolutions • Mostly what the user found comfortable. • 1024 x 768 Pixel • 800 x 600 Pixel • whatever else. Daniel Herzog,Vodafone
    9. What I mean by resolution • Runs 1680 x 1050 Pixel • full stop. Daniel Herzog,Vodafone
    10. What I mean by resolution • Runs 800 x 480 Pixel • full stop. Daniel Herzog,Vodafone
    11. What I mean by resolution 3.5 inch 7 inch • Actually these two both run 800 x 480 Pixel Daniel Herzog,Vodafone
    12. The mobile web & resolutions • Why that wasn‘t a problem? • Mobile browsers mostly zoom. • Which is want you‘ll want. • Different game for app-type of things though Daniel Herzog,Vodafone
    13. Example: S60 3rd edition developed widget Daniel Herzog,Vodafone
    14. Put on S60 5th edition Before Daniel Herzog,Vodafone
    15. Put on S60 5th edition After Daniel Herzog,Vodafone
    16. How not to do it. if (window.innerWidth*window.innerHeight > 150000) … Daniel Herzog,Vodafone
    17. Solutions in detail How to do it. Fonts | Images | UI-Elements Daniel Herzog,Vodafone
    18. Solutions in detail Fonts | Images | UI-Elements • Use media queries to switch to high dpi mode. Daniel Herzog,Vodafone
    19. Media Queries? • w3.org/TR/css3-mediaqueries/ • Detection for things like width color-index height monochrome orientation resolution aspect- scan ratio grid color Daniel Herzog,Vodafone
    20. Media Queries? a { color: #000; text-decoration: none; } @media all and (-o-touch) { a {padding: 1em} } Daniel Herzog,Vodafone
    21. Solutions in detail Fonts | Images | UI-Elements • Use media queries to switch to high dpi mode. @media all and (min-resolution: 200dpi) { body {font-size: 22px} } .myDiv {margin: 1em;} Daniel Herzog,Vodafone
    22. Solutions in detail Fonts | Images | UI-Elements Only use them at their native resolution. Maybe provide alternative versions. When you don‘t know your images: img { max-width: 95%; } Daniel Herzog,Vodafone
    23. Solutions in detail Fonts | Images | UI-Elements Rules for images mostly apply Very important to keep big enough. If possible: Stay scalable with SVG. Daniel Herzog,Vodafone
    24. SVG? Made for scaling. W3C standard for years and years. Complex and powerful. Widely available in most browsers today. Just not on IE and IE based stuff. That is to change in 2009! Daniel Herzog,Vodafone
    25. SVG in your widget <object type="image/svg+xml" data="busy.svg"> HTML <img src="the-fallback-busy.gif" /> </object> object { CSS width: 20%; } Pixel-perfect rendering of that vector, size that fits. Daniel Herzog,Vodafone
    26. Even more resolutions • Portrait and landscape mode. • Docked mode. In portrait and landscape! Daniel Herzog,Vodafone
    27. One more: Resize the window. function myResize() { if (widget.widgetMode === "application") window.resizeTo(screen.availWidth, screen.availHeight); } // Do initially! myResize(); // And when the orientation changes widget.addEventListener("resolution",myResize,false); Daniel Herzog,Vodafone
    28. Futures • I believe we‘re in trouble • Widget Runtimes need to run real dpi/ppi values • Browsers can‘t, and that might be okay • But it would be a nice extra there too, also to have the two compatible. Daniel Herzog,Vodafone
    29. One more to confuse you: Zooming Widgets. Daniel Herzog,Vodafone
    30. Ask & Discuss. credits for all the nice pictures coming soon. Daniel Herzog,Vodafone @danfooo Vodafone Internet Services
    31. Resources betavine.net/widgetzone jil.org dev.opera.com developer.mozilla.org quirksmode.org/m/widgets.html widget.vodafone.com/dev/ Daniel Herzog,Vodafone @danfooo Vodafone Internet Services
    32. Picture credits Pictures fund on flickr, done by users markfftang Xiaolin Li farmerfranco Josh Bancroft Many thanks!
    SlideShare Zeitgeist 2009

    + danfooodanfooo Nominate

    custom

    731 views, 3 favs, 1 embeds more stats

    My Fluid Layouting Techniques presentation for Over more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 731
      • 729 on SlideShare
      • 2 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 10
    Most viewed embeds
    • 2 views on http://adamcohenrose.blogspot.com

    more

    All embeds
    • 2 views on http://adamcohenrose.blogspot.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories