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