Daniel Herzog of Vodafone discusses fluid layout techniques for widgets across different screen resolutions. He explains that mobile browsers zoom content to fit various screen sizes, and provides solutions like using media queries to detect resolution and font sizes, only using images at native resolutions, and preferring scalable SVG images. Herzog also notes challenges of portrait vs landscape modes, docked modes, and zooming widgets.

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

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

3. Off topic:Vodafone Widgets
Daniel Herzog,Vodafone

4. Off topic:Vodafone Widgets
• There‘s the store
• There are lots of competitions
• Developer community at
betavine.net/widgetzone
• And jil.org
Daniel Herzog,Vodafone

5. The web & resolutions
• Rather easy topic.
• Available space is a de-facto standard.
• ~960 (960 Grid System 960.gs)
Daniel Herzog,Vodafone

6. The web & resolutions
• If you do care, you‘ll resize your window
around to try.
Daniel Herzog,Vodafone

7. The web & resolutions
• But that‘s not what I mean by resolution.
Daniel Herzog,Vodafone

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

9. What I mean by resolution
• Runs 1680 x 1050 Pixel
• full stop.
Daniel Herzog,Vodafone

10. What I mean by resolution
• Runs 800 x 480 Pixel
• full stop.
Daniel Herzog,Vodafone

11. What I mean by resolution
3.5 inch 7 inch
• Actually these two both run 800 x 480 Pixel
Daniel Herzog,Vodafone

12. The mobile web & resolutions
• Why isn‘t that a problem?
• Mobile browsers mostly zoom.
• Which is want you‘ll want.
• Different game for app-type of things though
Daniel Herzog,Vodafone

13. Example: S60 3rd edition developed widget
Daniel Herzog,Vodafone

14. Put on S60 5th edition
Before
Daniel Herzog,Vodafone

15. Put on S60 5th edition
After
Daniel Herzog,Vodafone

16. How not to do it.
if (window.innerWidth*window.innerHeight > 150000)
…
Daniel Herzog,Vodafone

17. Solutions in detail
How to do it.
Fonts | Images | UI-Elements
Daniel Herzog,Vodafone

18. Solutions in detail
Fonts | Images | UI-Elements
• Use media queries to switch to high dpi
mode.
Daniel Herzog,Vodafone

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

20. Media Queries?
a {
color: #000;
text-decoration: none;
}
@media all and (-o-touch) {
a {padding: 1em}
}
Daniel Herzog,Vodafone

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

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

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

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

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

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

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

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

29. One more to confuse you:
Zooming Widgets.
Daniel Herzog,Vodafone

30. Ask & Discuss.
credits for all the nice pictures coming soon.
Daniel Herzog,Vodafone
@danfooo
Vodafone Internet Services

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

32. Picture credits
Pictures found on flickr, done by users
markfftang
Xiaolin Li
farmerfranco
Josh Bancroft
Daniel Herzog,Vodafone
@danfooo
Vodafone Internet Services