Date post: | 30-Nov-2014 |
Category: |
Technology |
Upload: | daniel-herzog |
View: | 2,955 times |
Download: | 1 times |
Fluid Layout Techniques for
Widgets
Daniel Herzog, Vodafone
The web & resolutions
Easy topic.
Available space is a de-facto standard.
Mobile browsers mostly zoom.
Daniel Herzog, Vodafone
The web & resolutions
The physical size of the monitor is not respected.
High res displays mean small fonts, images, GUI.
Daniel Herzog, Vodafone
Phones - S60Phones 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
Phones - S60Phones 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 display640 x 360 = 229dpi. 100px are 11mm.
Outsch.
Daniel Herzog, Vodafone
Example
Daniel Herzog, Vodafone
Before
Daniel Herzog, Vodafone
Example
After
Solutions in detail
Fonts | Images | UI-Elements
Daniel Herzog, Vodafone
Use media queries to switch to high dpi mode.
Fonts | Images | UI-Elements
@media all and (min-resolution: 200dpi){ body {font-size: 22px}}
Daniel Herzog, Vodafone
Solutions in detail
Only use them at their native resolution.
Maybe provide alternative versions.
When you don‘t know your images:
Fonts | Images | UI-Elements
img {max-width: 95%;
}
Daniel Herzog, Vodafone
Solutions in detail
Rules for images mostly apply
Very important to keep big enough.
If possible: Stay scalable with SVG.
Fonts | Images | UI-Elements
Daniel Herzog, Vodafone
Solutions in detail
SVG?
Daniel Herzog, Vodafone
W3C standard for years.
Complex and powerful.
Widely available in most browsers today.
Just not on IE and IE based stuff.
Made for scaling.
SVG!
Daniel Herzog, Vodafone
A little demo
SVG in your widget
Pixel-perfect rendering of that vector, size that fits.
Daniel Herzog, Vodafone
object {width: 20%;
}
<object type="image/svg+xml" data="busy.svg"> <img src="the-fallback-busy.gif" /></object>
HTML
CSS
Even more resolutions
Portrait and landscape mode.
Docked mode. In portrait and landscape!
Daniel Herzog, Vodafone
One more: Resize yourself.
function myResize() { if (widget.widgetMode === "application") window.resizeTo(screen.availWidth, screen.availHeight);}
// Do initially!myResize();
// And when the orientation changeswidget.addEventListener("resolution",myResize,false);
Daniel Herzog, Vodafone
Daniel Herzog, Vodafone
Questions: Resolutions