The presentation as I gave it at http://widgetdevcamp.nl/ , some modifications made to make things shorter and clearer.

1. Fluid Layout
Techniques for
Widgets
Daniel Herzog, Vodafone

2. The web & resolutions
Easy topic.
Available space is a de-facto standard.
Mobile browsers mostly zoom.
Daniel Herzog, Vodafone

3. The web & resolutions
The physical size of the monitor is not respected.
High res displays mean small fonts, images, GUI.
Daniel Herzog, Vodafone

4. Phones - S60
Phones 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

5. Phones - S60
Phones 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 display
640 x 360 = 229dpi. 100px are 11mm.
Outsch.
Daniel Herzog, Vodafone

6. Example
Before
Daniel Herzog, Vodafone

7. Example
After
Daniel Herzog, Vodafone

8. Solutions in detail
Fonts | Images | UI-Elements
Daniel Herzog, Vodafone

9. 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}
}
Daniel Herzog, Vodafone

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

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

12. SVG?
W3C standard for years.
Complex and powerful.
Widely available in most browsers today.
Just not on IE and IE based stuff.
Made for scaling.
Daniel Herzog, Vodafone

13. SVG!
A little demo
Daniel Herzog, Vodafone

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

15. Even more
resolutions
Portrait and landscape mode.
Docked mode. In portrait and landscape!
Daniel Herzog, Vodafone

16. One more: Resize yourself.
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

17. Questions: Resolutions
Daniel Herzog, Vodafone