fluid layout techniques for vodafone widgets

Fluid Layout Techniques for

Widgets

Daniel Herzog, Vodafone

The web & resolutions

Easy topic.

Available space is a de-facto standard.

Mobile browsers mostly zoom.

Daniel Herzog, Vodafone

The web & resolutions

The physical size of the monitor is not respected.

High res displays mean small fonts, images, GUI.

Daniel Herzog, Vodafone

Phones - S60Phones running on S60 V3: 240 x 320 (QVGA)

Nokia N96, 2.8 inch display.

Phones running on S60 V5: 640 x 360

Nokia 5800 music, 3.2 inch display

Daniel Herzog, Vodafone

Phones - S60Phones running on S60 V3: 240 x 320 (QVGA)

Nokia N96, 2.8 inch display.240 x 320 = 142dpi. 100px are 18mm.

Phones running on S60 V5: 640 x 360

Nokia 5800 music, 3.2 inch display640 x 360 = 229dpi. 100px are 11mm.

Outsch.

Daniel Herzog, Vodafone

Example

Daniel Herzog, Vodafone

Before

Daniel Herzog, Vodafone

Example

After

Solutions in detail

Fonts | Images | UI-Elements

Daniel Herzog, Vodafone

Use media queries to switch to high dpi mode.

Fonts | Images | UI-Elements

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

Daniel Herzog, Vodafone

Solutions in detail

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

}

Daniel Herzog, Vodafone

Solutions in detail

Rules for images mostly apply

Very important to keep big enough.

If possible: Stay scalable with SVG.

Fonts | Images | UI-Elements

Daniel Herzog, Vodafone

Solutions in detail

SVG?

Daniel Herzog, Vodafone

W3C standard for years.

Complex and powerful.

Widely available in most browsers today.

Just not on IE and IE based stuff.

Made for scaling.

SVG!

Daniel Herzog, Vodafone

A little demo

SVG in your widget

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

Daniel Herzog, Vodafone

object {width: 20%;

}

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

HTML

CSS

Even more resolutions

Portrait and landscape mode.

Docked mode. In portrait and landscape!

Daniel Herzog, Vodafone

One more: Resize yourself.

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

Daniel Herzog, Vodafone

Questions: Resolutions