Saturday 3 October 2009

OverTheAir '09: Fluid Layouting Techniques for Widget Development

Daniel Herzog

Original slides:

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


  • 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;}


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


  • 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


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

No comments: