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