Fluid Layout Techniques for Vodafone Widgets
Upcoming SlideShare
Loading in...5
×
 

Fluid Layout Techniques for Vodafone Widgets

on

  • 2,911 views

The presentation as I gave it at http://widgetdevcamp.nl/ , some modifications made to make things shorter and clearer.

The presentation as I gave it at http://widgetdevcamp.nl/ , some modifications made to make things shorter and clearer.

Statistics

Views

Total Views
2,911
Views on SlideShare
2,902
Embed Views
9

Actions

Likes
1
Downloads
29
Comments
1

3 Embeds 9

http://www.slideshare.net 7
http://www.linkedin.com 1
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Updated version is here: http://www.slideshare.net/danfooo/fluid-layouting-techniques-over-the-air-2009
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Fluid Layout Techniques for Vodafone Widgets Fluid Layout Techniques for Vodafone Widgets Presentation Transcript

  • 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 - S60 Phones 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 - S60 Phones 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 display 640 x 360 = 229dpi. 100px are 11mm. Outsch. Daniel Herzog, Vodafone
  • Example Before Daniel Herzog, Vodafone
  • Example After Daniel Herzog, Vodafone
  • Solutions in detail Fonts | Images | UI-Elements Daniel Herzog, Vodafone
  • 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} } Daniel Herzog, Vodafone
  • 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
  • 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
  • SVG? W3C standard for years. Complex and powerful. Widely available in most browsers today. Just not on IE and IE based stuff. Made for scaling. Daniel Herzog, Vodafone
  • SVG! A little demo Daniel Herzog, Vodafone
  • 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
  • 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 changes widget.addEventListener("resolution",myResize,false); Daniel Herzog, Vodafone
  • Questions: Resolutions Daniel Herzog, Vodafone