Fluid Layouting Techniques - Over The Air 2009

1,896 views

Published on

My Fluid Layouting Techniques presentation for Over The Air 2009 at Imperial College, London.

Published in: Technology, Art & Photos
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,896
On SlideShare
0
From Embeds
0
Number of Embeds
89
Actions
Shares
0
Downloads
16
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Fluid Layouting Techniques - Over The Air 2009

  1. Fluid Layout Techniques for Widgets Daniel Herzog,Vodafone @danfooo Vodafone Internet Services
  2. Vodafone offices, Düsseldorf 13th floor Daniel Herzog,Vodafone
  3. Off topic:Vodafone Widgets Daniel Herzog,Vodafone
  4. Off 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 isn‘t that 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 found on flickr, done by users markfftang Xiaolin Li farmerfranco Josh Bancroft Daniel Herzog,Vodafone @danfooo Vodafone Internet Services

×