OverTheAir '09: Fluid Layouting Techniques for Widget Development

Daniel Herzog

Original slides:

Fluid Layouting Techniques - Over The Air 2009

View more documents from danfooo.

My notes…

• There’s one web — “You don’t want .mobi — it wasn’t a big success”
• widgets should be cross-platform
  • should take a small amount of space on the desktop, but be bigger (full screen) on mobile
• Vodafone widget engine is based on Opera 9

Fonts

• use media queries to switch to high dpi mode, e.g.

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

  • uses opera-specific -o-touch
• alternative:

    @media all and (min-resolution: 200dpi) {
        body {font-size: 22px}
    }
    .myDiv {margin: 1em;}

Images

• should use them at native resolution, loaded from server…
• if you’re desperate, use image scaling using screen width percentages

UI-Elements

• use dynamic images, or scalable SVG
• SVG works across most browsers, apart from IE (but may change in 2009)
• Google working on SVG Web — uses Flash plugin to render SVG content
  • But if widget engine doesn’t support SVG, it may not support Flash either
• Daniel uses Illustrator to create initial SVG, then uses TextMate to hand edit it…
  • Can also use Inkscape but the UI is horrible

More resolutions…

• Portrait & landscape, docked mode (also in portrait and landscape!)
• Deal with these using window.resizeTo
• Call this initially and when the orientation changes

Future

• We’re in trouble — widget runtimes need to return real dpi/ppi values
• Not possible at the moment since developers assume that 10pt is a certain number of pixels
• Would be nice to have an extra CSS property for the real dpi

And another thing… zooming widgets

• Zooming enlarges pixels — see Opera for an example
• But SVG still scales effectively
• Another example: WidgetCity is a widget version of Sim City!