Fluid Layouting Techniques - Over The Air 2009
-
Upload
daniel-herzog -
Category
Technology
-
view
2.156 -
download
1
description
Transcript of Fluid Layouting Techniques - Over The Air 2009
![Page 1: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/1.jpg)
Fluid Layout Techniques for Widgets
Daniel Herzog, VodafoneVodafone Internet Services
@danfooo
![Page 2: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/2.jpg)
Vodafone offices,Düsseldorf
13th floor
Daniel Herzog, Vodafone
![Page 3: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/3.jpg)
Off topic: Vodafone Widgets
Daniel Herzog, Vodafone
![Page 4: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/4.jpg)
Daniel Herzog, Vodafone
• There‘s the store
• There are lots of competitions
• Developer community at betavine.net/widgetzone
• And jil.org
Off topic: Vodafone Widgets
![Page 5: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/5.jpg)
The web & resolutions
• Rather easy topic.
• Available space is a de-facto standard.
• ~960 (960 Grid System 960.gs)
Daniel Herzog, Vodafone
![Page 6: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/6.jpg)
The web & resolutions
• If you do care, you‘ll resize your window around to try.
Daniel Herzog, Vodafone
![Page 7: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/7.jpg)
The web & resolutions
• But that‘s not what I mean by resolution.
Daniel Herzog, Vodafone
![Page 8: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/8.jpg)
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
![Page 9: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/9.jpg)
What I mean by resolution
• Runs 1680 x 1050 Pixel
• full stop.
Daniel Herzog, Vodafone
![Page 10: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/10.jpg)
What I mean by resolution
• Runs 800 x 480 Pixel
• full stop.
Daniel Herzog, Vodafone
![Page 11: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/11.jpg)
What I mean by resolution
• Actually these two both run 800 x 480 Pixel
7 inch3.5 inch
Daniel Herzog, Vodafone
![Page 12: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/12.jpg)
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
![Page 13: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/13.jpg)
Example: S60 3rd edition developed widget
Daniel Herzog, Vodafone
![Page 14: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/14.jpg)
Put on S60 5th edition
Before
Daniel Herzog, Vodafone
![Page 15: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/15.jpg)
After
Put on S60 5th edition
Daniel Herzog, Vodafone
![Page 16: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/16.jpg)
How not to do it.
Daniel Herzog, Vodafone
if (window.innerWidth*window.innerHeight > 150000)…
![Page 17: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/17.jpg)
Solutions in detail
Fonts | Images | UI-Elements
Daniel Herzog, Vodafone
How to do it.
![Page 18: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/18.jpg)
• Use media queries to switch to high dpi mode.
Fonts | Images | UI-Elements
Solutions in detail
Daniel Herzog, Vodafone
![Page 19: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/19.jpg)
Media Queries?
Daniel Herzog, Vodafone
• w3.org/TR/css3-mediaqueries/
• Detection for things like
widthheight
orientationaspect-ratiocolor
color-indexmonochrome
resolutionscangrid
![Page 20: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/20.jpg)
Media Queries?
Daniel Herzog, Vodafone
a { color: #000; text-decoration: none;}
@media all and (-o-touch) { a {padding: 1em}}
![Page 21: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/21.jpg)
• Use media queries to switch to high dpi mode.
Fonts | Images | UI-Elements
@media all and (min-resolution: 200dpi){ body {font-size: 22px}}
.myDiv {margin: 1em;}
Solutions in detail
Daniel Herzog, Vodafone
![Page 22: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/22.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%;
}
Solutions in detail
Daniel Herzog, Vodafone
![Page 23: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/23.jpg)
Rules for images mostly applyVery important to keep big enough.If possible: Stay scalable with SVG.
Fonts | Images | UI-Elements
Solutions in detail
Daniel Herzog, Vodafone
![Page 24: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/24.jpg)
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
![Page 25: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/25.jpg)
SVG in your widget
Pixel-perfect rendering of that vector, size that fits.
object {width: 20%;
}
<object type="image/svg+xml" data="busy.svg"> <img src="the-fallback-busy.gif" /></object>
HTML
CSS
Daniel Herzog, Vodafone
![Page 26: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/26.jpg)
Even more resolutions
• Portrait and landscape mode.
• Docked mode. In portrait and landscape!
Daniel Herzog, Vodafone
![Page 27: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/27.jpg)
One more: Resize the window.
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 28: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/28.jpg)
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
![Page 29: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/29.jpg)
One more to confuse you:
Daniel Herzog, Vodafone
Zooming Widgets.
![Page 30: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/30.jpg)
@danfooo
Ask & Discuss.
credits for all the nice pictures coming soon.
Daniel Herzog, Vodafone
Vodafone Internet Services
![Page 31: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/31.jpg)
@danfooo
Resources
Daniel Herzog, Vodafone
Vodafone Internet Services
betavine.net/widgetzone
jil.org
dev.opera.com
developer.mozilla.org
quirksmode.org/m/widgets.html
widget.vodafone.com/dev/
![Page 32: Fluid Layouting Techniques - Over The Air 2009](https://reader037.fdocuments.in/reader037/viewer/2022103014/548472755806b5a9588b4651/html5/thumbnails/32.jpg)
Picture credits
Pictures found on flickr, done by users
markfftang
Xiaolin Li
farmerfranco
Josh Bancroft
@danfoooDaniel Herzog, Vodafone
Vodafone Internet Services