Fluid Layouting Techniques - Over The Air 2009
Upcoming SlideShare
Loading in...5
×
 

Fluid Layouting Techniques - Over The Air 2009

on

  • 2,115 views

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

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

Statistics

Views

Total Views
2,115
Views on SlideShare
2,031
Embed Views
84

Actions

Likes
4
Downloads
14
Comments
0

6 Embeds 84

http://blog.cohen-rose.org 57
http://adamcohenrose.blogspot.com 12
http://lanyrd.com 9
http://www.slideshare.net 4
http://192.168.12.135 1
http://www.linkedin.com 1

Accessibility

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

Fluid Layouting Techniques - Over The Air 2009 Fluid Layouting Techniques - Over The Air 2009 Presentation Transcript

  • Fluid Layout Techniques for Widgets Daniel Herzog,Vodafone @danfooo Vodafone Internet Services
  • Vodafone offices, Düsseldorf 13th floor Daniel Herzog,Vodafone
  • Off topic:Vodafone Widgets Daniel Herzog,Vodafone
  • 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
  • The web & resolutions • Rather easy topic. • Available space is a de-facto standard. • ~960 (960 Grid System 960.gs) Daniel Herzog,Vodafone
  • The web & resolutions • If you do care, you‘ll resize your window around to try. Daniel Herzog,Vodafone
  • The web & resolutions • But that‘s not what I mean by resolution. Daniel Herzog,Vodafone
  • 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
  • What I mean by resolution • Runs 1680 x 1050 Pixel • full stop. Daniel Herzog,Vodafone
  • What I mean by resolution • Runs 800 x 480 Pixel • full stop. Daniel Herzog,Vodafone
  • What I mean by resolution 3.5 inch 7 inch • Actually these two both run 800 x 480 Pixel Daniel Herzog,Vodafone
  • 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
  • Example: S60 3rd edition developed widget Daniel Herzog,Vodafone
  • Put on S60 5th edition Before Daniel Herzog,Vodafone
  • Put on S60 5th edition After Daniel Herzog,Vodafone
  • How not to do it. if (window.innerWidth*window.innerHeight > 150000) … Daniel Herzog,Vodafone
  • Solutions in detail How to do it. Fonts | Images | UI-Elements Daniel Herzog,Vodafone
  • Solutions in detail Fonts | Images | UI-Elements • Use media queries to switch to high dpi mode. Daniel Herzog,Vodafone
  • 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
  • Media Queries? a { color: #000; text-decoration: none; } @media all and (-o-touch) { a {padding: 1em} } Daniel Herzog,Vodafone
  • 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
  • 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
  • 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
  • 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
  • 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
  • Even more resolutions • Portrait and landscape mode. • Docked mode. In portrait and landscape! Daniel Herzog,Vodafone
  • 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
  • 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
  • One more to confuse you: Zooming Widgets. Daniel Herzog,Vodafone
  • Ask & Discuss. credits for all the nice pictures coming soon. Daniel Herzog,Vodafone @danfooo Vodafone Internet Services
  • 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
  • Picture credits Pictures found on flickr, done by users markfftang Xiaolin Li farmerfranco Josh Bancroft Daniel Herzog,Vodafone @danfooo Vodafone Internet Services