Download - Fluid Layout Techniques for Vodafone Widgets
![Page 1: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/1.jpg)
Fluid Layout Techniques for
Widgets
Daniel Herzog, Vodafone
![Page 2: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/2.jpg)
The web & resolutions
Easy topic.
Available space is a de-facto standard.
Mobile browsers mostly zoom.
Daniel Herzog, Vodafone
![Page 3: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/3.jpg)
The web & resolutions
The physical size of the monitor is not respected.
High res displays mean small fonts, images, GUI.
Daniel Herzog, Vodafone
![Page 4: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/4.jpg)
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
![Page 5: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/5.jpg)
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
![Page 6: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/6.jpg)
Example
Daniel Herzog, Vodafone
Before
![Page 7: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/7.jpg)
Daniel Herzog, Vodafone
Example
After
![Page 8: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/8.jpg)
Solutions in detail
Fonts | Images | UI-Elements
Daniel Herzog, Vodafone
![Page 9: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/9.jpg)
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
![Page 10: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/10.jpg)
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
![Page 11: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/11.jpg)
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
![Page 12: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/12.jpg)
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.
![Page 13: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/13.jpg)
SVG!
Daniel Herzog, Vodafone
A little demo
![Page 14: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/14.jpg)
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
![Page 15: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/15.jpg)
Even more resolutions
Portrait and landscape mode.
Docked mode. In portrait and landscape!
Daniel Herzog, Vodafone
![Page 16: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/16.jpg)
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
![Page 17: Fluid Layout Techniques for Vodafone Widgets](https://reader038.vdocuments.mx/reader038/viewer/2022103110/547c53d35806b5ef3f8b4768/html5/thumbnails/17.jpg)
Daniel Herzog, Vodafone
Questions: Resolutions