Fluid Layout Techniques
for Widgets
Daniel Herzog,Vodafone
@danfooo
Vodafone Internet Services

Vodafone offices,
Düsseldorf
13th floor
Daniel Herzog,Vodafone

Out of topic:Vodafone Widgets
Daniel Herzog,Vodafone

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

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 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

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 fund on flickr, done by users
markfftang
Xiaolin Li
farmerfranco
Josh Bancroft
Many thanks!