Fluid Layout Techniques for Widgets

Daniel Herzog, VodafoneVodafone Internet Services

@danfooo

Vodafone offices,Düsseldorf

13th floor

Daniel Herzog, Vodafone

Off topic: Vodafone Widgets

Daniel Herzog, Vodafone

Daniel Herzog, Vodafone

• There‘s the store

• There are lots of competitions

• Developer community at betavine.net/widgetzone

• And jil.org

Off topic: Vodafone Widgets

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

• Actually these two both run 800 x 480 Pixel

7 inch3.5 inch

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

After

Put on S60 5th edition

Daniel Herzog, Vodafone

How not to do it.

Daniel Herzog, Vodafone

if (window.innerWidth*window.innerHeight > 150000)…

Solutions in detail

Fonts | Images | UI-Elements

Daniel Herzog, Vodafone

How to do it.

• Use media queries to switch to high dpi mode.

Fonts | Images | UI-Elements

Solutions in detail

Daniel Herzog, Vodafone

Media Queries?

Daniel Herzog, Vodafone

• w3.org/TR/css3-mediaqueries/

• Detection for things like

widthheight

orientationaspect-ratiocolor

color-indexmonochrome

resolutionscangrid

Media Queries?

Daniel Herzog, Vodafone

a { color: #000; text-decoration: none;}

@media all and (-o-touch) { a {padding: 1em}}

• Use media queries to switch to high dpi mode.

Fonts | Images | UI-Elements

@media all and (min-resolution: 200dpi){ body {font-size: 22px}}

.myDiv {margin: 1em;}

Solutions in detail

Daniel Herzog, Vodafone

Only use them at their native resolution.Maybe provide alternative versions.When you don‘t know your images:

Fonts | Images | UI-Elements

img {max-width: 95%;

}

Solutions in detail

Daniel Herzog, Vodafone

Rules for images mostly applyVery important to keep big enough.If possible: Stay scalable with SVG.

Fonts | Images | UI-Elements

Solutions in detail

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

Pixel-perfect rendering of that vector, size that fits.

object {width: 20%;

}

<object type="image/svg+xml" data="busy.svg"> <img src="the-fallback-busy.gif" /></object>

HTML

CSS

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 changeswidget.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:

Daniel Herzog, Vodafone

Zooming Widgets.

@danfooo

Ask & Discuss.

credits for all the nice pictures coming soon.

Daniel Herzog, Vodafone

Vodafone Internet Services

@danfooo

Resources

Daniel Herzog, Vodafone

Vodafone Internet Services

betavine.net/widgetzone

jil.org

dev.opera.com

developer.mozilla.org

quirksmode.org/m/widgets.html

widget.vodafone.com/dev/

Picture credits

Pictures found on flickr, done by users

markfftang

Xiaolin Li

farmerfranco

Josh Bancroft

@danfoooDaniel Herzog, Vodafone

Vodafone Internet Services