SlideShare a Scribd company logo
Fluid Layout Techniques
           for Widgets


            Daniel Herzog,Vodafone
@danfooo
           Vodafone Internet Services
Vodafone offices,
                           Düsseldorf




              13th floor




Daniel Herzog,Vodafone
Off topic:Vodafone Widgets




         Daniel Herzog,Vodafone
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
The web & resolutions

• Rather easy topic.
• Available space is a de-facto standard.
• ~960 (960 Grid System 960.gs)


               Daniel Herzog,Vodafone
The web & resolutions


• If you do care, you‘ll resize your window
  around to try.




              Daniel Herzog,Vodafone
The web & resolutions



• But that‘s not what I mean by resolution.



             Daniel Herzog,Vodafone
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
What I mean by resolution

                     • Runs 1680 x 1050 Pixel
                     • full stop.




        Daniel Herzog,Vodafone
What I mean by resolution



                     • Runs 800 x 480 Pixel
                     • full stop.


        Daniel Herzog,Vodafone
What I mean by resolution

3.5 inch                                    7 inch




  • Actually these two both run 800 x 480 Pixel
                Daniel Herzog,Vodafone
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
Example: S60 3rd edition developed widget




              Daniel Herzog,Vodafone
Put on S60 5th edition




Before




            Daniel Herzog,Vodafone
Put on S60 5th edition




After




           Daniel Herzog,Vodafone
How not to do it.


if (window.innerWidth*window.innerHeight > 150000)
   …




                  Daniel Herzog,Vodafone
Solutions in detail
   How to do it.

Fonts | Images | UI-Elements




       Daniel Herzog,Vodafone
Solutions in detail
      Fonts | Images | UI-Elements

• Use media queries to switch to high dpi
  mode.




             Daniel Herzog,Vodafone
Media Queries?

• w3.org/TR/css3-mediaqueries/
• Detection for things like
           width
                              color-index
          height
                             monochrome
        orientation
                               resolution
          aspect-
                                  scan
           ratio
                                  grid
           color



               Daniel Herzog,Vodafone
Media Queries?

a {
  color: #000;
  text-decoration: none;
}

@media all and (-o-touch) {
  a {padding: 1em}
}




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

     .myDiv {margin: 1em;}




              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?


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
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 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
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
One more to confuse you:




Zooming Widgets.



       Daniel Herzog,Vodafone
Ask & Discuss.


       credits for all the nice pictures coming soon.



               Daniel Herzog,Vodafone
@danfooo
             Vodafone Internet Services
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
Picture credits
 Pictures found on flickr, done by users
 markfftang
 Xiaolin Li
 farmerfranco
 Josh Bancroft



                  Daniel Herzog,Vodafone
@danfooo
                 Vodafone Internet Services

More Related Content

Viewers also liked

Futureofthequalitymanagementprinciples 1
Futureofthequalitymanagementprinciples 1Futureofthequalitymanagementprinciples 1
Futureofthequalitymanagementprinciples 1Paul Robere
 
Les friches culturelles d’hier à aujourd’hui : entre fabriques d’art et démar...
Les friches culturelles d’hier à aujourd’hui : entre fabriques d’art et démar...Les friches culturelles d’hier à aujourd’hui : entre fabriques d’art et démar...
Les friches culturelles d’hier à aujourd’hui : entre fabriques d’art et démar...
La French Team
 
Guía de matrícula 2011 2012 Universidad de Burgos
Guía de matrícula 2011 2012 Universidad de BurgosGuía de matrícula 2011 2012 Universidad de Burgos
Guía de matrícula 2011 2012 Universidad de Burgos
Oscar Herrera
 
ANTIUROLITHIATIC ACTIVITY OF ACTIVITY OF TECOMA STANS LEAF EXTRACT *1Anil kum...
ANTIUROLITHIATIC ACTIVITY OF ACTIVITY OF TECOMA STANS LEAF EXTRACT *1Anil kum...ANTIUROLITHIATIC ACTIVITY OF ACTIVITY OF TECOMA STANS LEAF EXTRACT *1Anil kum...
ANTIUROLITHIATIC ACTIVITY OF ACTIVITY OF TECOMA STANS LEAF EXTRACT *1Anil kum...
pharmaindexing
 
IBM Lotus Mobile Strategy
IBM Lotus Mobile StrategyIBM Lotus Mobile Strategy
IBM Lotus Mobile Strategy
Dvir Reznik
 
Product list of fancy ladies bags
Product list of fancy ladies bagsProduct list of fancy ladies bags
Product list of fancy ladies bagsArijit Chatterjee
 
Mapa Visual Web 2.0
Mapa Visual Web 2.0Mapa Visual Web 2.0
Mapa Visual Web 2.0MarcusC
 
Analisis de imagen; McDonals
Analisis de imagen; McDonalsAnalisis de imagen; McDonals
Analisis de imagen; McDonalsPaola Mendoza
 
Stroke Victim
Stroke VictimStroke Victim
Stroke Victimodorox
 
Fraudes en la red
Fraudes en la redFraudes en la red
Punteros y elementos dinámicos en c++
Punteros y elementos dinámicos en c++Punteros y elementos dinámicos en c++
Punteros y elementos dinámicos en c++
Tensor
 
Presentación precios trabajo-final-6-a-mkt
Presentación precios trabajo-final-6-a-mktPresentación precios trabajo-final-6-a-mkt
Presentación precios trabajo-final-6-a-mkt
Marco Renán Chávez Andrade
 
Towards User-defined Cross-Device Interaction
Towards User-defined Cross-Device InteractionTowards User-defined Cross-Device Interaction
Towards User-defined Cross-Device Interaction
Audrey Sanctorum
 
Manual alarma or bi-t6-userman-spn
Manual alarma or bi-t6-userman-spnManual alarma or bi-t6-userman-spn
Manual alarma or bi-t6-userman-spnmarlenebelgica2012
 
Social Networking Project - MLF Presentation
Social Networking Project - MLF PresentationSocial Networking Project - MLF Presentation
Social Networking Project - MLF Presentation
Jenna Ducut
 
Presentación Equipo Ciclista Cartucho.es 2016
Presentación Equipo Ciclista Cartucho.es 2016Presentación Equipo Ciclista Cartucho.es 2016
Presentación Equipo Ciclista Cartucho.es 2016
EC Cartucho es
 

Viewers also liked (20)

Tics
TicsTics
Tics
 
Futureofthequalitymanagementprinciples 1
Futureofthequalitymanagementprinciples 1Futureofthequalitymanagementprinciples 1
Futureofthequalitymanagementprinciples 1
 
Les friches culturelles d’hier à aujourd’hui : entre fabriques d’art et démar...
Les friches culturelles d’hier à aujourd’hui : entre fabriques d’art et démar...Les friches culturelles d’hier à aujourd’hui : entre fabriques d’art et démar...
Les friches culturelles d’hier à aujourd’hui : entre fabriques d’art et démar...
 
Guía de matrícula 2011 2012 Universidad de Burgos
Guía de matrícula 2011 2012 Universidad de BurgosGuía de matrícula 2011 2012 Universidad de Burgos
Guía de matrícula 2011 2012 Universidad de Burgos
 
ANTIUROLITHIATIC ACTIVITY OF ACTIVITY OF TECOMA STANS LEAF EXTRACT *1Anil kum...
ANTIUROLITHIATIC ACTIVITY OF ACTIVITY OF TECOMA STANS LEAF EXTRACT *1Anil kum...ANTIUROLITHIATIC ACTIVITY OF ACTIVITY OF TECOMA STANS LEAF EXTRACT *1Anil kum...
ANTIUROLITHIATIC ACTIVITY OF ACTIVITY OF TECOMA STANS LEAF EXTRACT *1Anil kum...
 
IBM Lotus Mobile Strategy
IBM Lotus Mobile StrategyIBM Lotus Mobile Strategy
IBM Lotus Mobile Strategy
 
Product list of fancy ladies bags
Product list of fancy ladies bagsProduct list of fancy ladies bags
Product list of fancy ladies bags
 
Mapa Visual Web 2.0
Mapa Visual Web 2.0Mapa Visual Web 2.0
Mapa Visual Web 2.0
 
Analisis de imagen; McDonals
Analisis de imagen; McDonalsAnalisis de imagen; McDonals
Analisis de imagen; McDonals
 
Stroke Victim
Stroke VictimStroke Victim
Stroke Victim
 
Fraudes en la red
Fraudes en la redFraudes en la red
Fraudes en la red
 
Punteros y elementos dinámicos en c++
Punteros y elementos dinámicos en c++Punteros y elementos dinámicos en c++
Punteros y elementos dinámicos en c++
 
Presentación precios trabajo-final-6-a-mkt
Presentación precios trabajo-final-6-a-mktPresentación precios trabajo-final-6-a-mkt
Presentación precios trabajo-final-6-a-mkt
 
Towards User-defined Cross-Device Interaction
Towards User-defined Cross-Device InteractionTowards User-defined Cross-Device Interaction
Towards User-defined Cross-Device Interaction
 
Manual alarma or bi-t6-userman-spn
Manual alarma or bi-t6-userman-spnManual alarma or bi-t6-userman-spn
Manual alarma or bi-t6-userman-spn
 
A crise demográfica en galicia
A crise demográfica en galiciaA crise demográfica en galicia
A crise demográfica en galicia
 
Social Networking Project - MLF Presentation
Social Networking Project - MLF PresentationSocial Networking Project - MLF Presentation
Social Networking Project - MLF Presentation
 
SGM Glesmann Bio2
SGM Glesmann Bio2SGM Glesmann Bio2
SGM Glesmann Bio2
 
Presentación Equipo Ciclista Cartucho.es 2016
Presentación Equipo Ciclista Cartucho.es 2016Presentación Equipo Ciclista Cartucho.es 2016
Presentación Equipo Ciclista Cartucho.es 2016
 
IB
IBIB
IB
 

Similar to Fluid Layouting Techniques - Over The Air 2009

Widget Development And SDK
Widget Development And SDKWidget Development And SDK
Widget Development And SDKDaniel Herzog
 
Supporting multi screen in android
Supporting multi screen in androidSupporting multi screen in android
Supporting multi screen in android
rffffffff007
 
Supporting multi screen in android cn
Supporting multi screen in android cnSupporting multi screen in android cn
Supporting multi screen in android cn
rffffffff007
 
Android在多屏幕、多设备上的适配 | 布丁 任斐
Android在多屏幕、多设备上的适配 | 布丁 任斐Android在多屏幕、多设备上的适配 | 布丁 任斐
Android在多屏幕、多设备上的适配 | 布丁 任斐
imShining @DevCamp
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
Site Studio Fundamentals Supplemental Slides
Site Studio Fundamentals Supplemental SlidesSite Studio Fundamentals Supplemental Slides
Site Studio Fundamentals Supplemental Slides
Lee Klement
 
Using the Presentation API and external screens on Android
Using the Presentation API and external screens on AndroidUsing the Presentation API and external screens on Android
Using the Presentation API and external screens on AndroidXavier Hallade
 
WePresent WiPG 1000 & 1500
WePresent WiPG 1000 & 1500WePresent WiPG 1000 & 1500
WePresent WiPG 1000 & 1500
Paul Richards
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
Dee Sadler
 
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLEast of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLFrédéric Harper
 
Social storage drive s talesapp 2012
Social storage drive s talesapp 2012Social storage drive s talesapp 2012
Social storage drive s talesapp 2012
Will Kim
 
HTC Developer - 2012
HTC Developer - 2012HTC Developer - 2012
HTC Developer - 2012
Bruce Jones
 
WiPG WePresent Gateway
WiPG WePresent GatewayWiPG WePresent Gateway
WiPG WePresent Gateway
camax_adm
 
Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel Publishing
Joe Welinske
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
Producing Effective Screencasts
Producing Effective ScreencastsProducing Effective Screencasts
Producing Effective Screencasts
Richard Harrington
 
Three things you probably don’t know about hd voice
Three things you probably don’t know about hd voiceThree things you probably don’t know about hd voice
Three things you probably don’t know about hd voice
Michael Graves
 
Social storage drive s talesapp_20120711
Social storage drive s talesapp_20120711Social storage drive s talesapp_20120711
Social storage drive s talesapp_20120711Will Kim
 

Similar to Fluid Layouting Techniques - Over The Air 2009 (20)

Widget Development And SDK
Widget Development And SDKWidget Development And SDK
Widget Development And SDK
 
Supporting multi screen in android
Supporting multi screen in androidSupporting multi screen in android
Supporting multi screen in android
 
Supporting multi screen in android cn
Supporting multi screen in android cnSupporting multi screen in android cn
Supporting multi screen in android cn
 
Android在多屏幕、多设备上的适配 | 布丁 任斐
Android在多屏幕、多设备上的适配 | 布丁 任斐Android在多屏幕、多设备上的适配 | 布丁 任斐
Android在多屏幕、多设备上的适配 | 布丁 任斐
 
GAN
GANGAN
GAN
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile designDreamweaver CS6, jQuery, PhoneGap, mobile design
Dreamweaver CS6, jQuery, PhoneGap, mobile design
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Site Studio Fundamentals Supplemental Slides
Site Studio Fundamentals Supplemental SlidesSite Studio Fundamentals Supplemental Slides
Site Studio Fundamentals Supplemental Slides
 
Using the Presentation API and external screens on Android
Using the Presentation API and external screens on AndroidUsing the Presentation API and external screens on Android
Using the Presentation API and external screens on Android
 
WePresent WiPG 1000 & 1500
WePresent WiPG 1000 & 1500WePresent WiPG 1000 & 1500
WePresent WiPG 1000 & 1500
 
Designing for mobile
Designing for mobileDesigning for mobile
Designing for mobile
 
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLEast of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
 
Social storage drive s talesapp 2012
Social storage drive s talesapp 2012Social storage drive s talesapp 2012
Social storage drive s talesapp 2012
 
HTC Developer - 2012
HTC Developer - 2012HTC Developer - 2012
HTC Developer - 2012
 
WiPG WePresent Gateway
WiPG WePresent GatewayWiPG WePresent Gateway
WiPG WePresent Gateway
 
Multi Channel Publishing
Multi Channel PublishingMulti Channel Publishing
Multi Channel Publishing
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
Producing Effective Screencasts
Producing Effective ScreencastsProducing Effective Screencasts
Producing Effective Screencasts
 
Three things you probably don’t know about hd voice
Three things you probably don’t know about hd voiceThree things you probably don’t know about hd voice
Three things you probably don’t know about hd voice
 
Social storage drive s talesapp_20120711
Social storage drive s talesapp_20120711Social storage drive s talesapp_20120711
Social storage drive s talesapp_20120711
 

Recently uploaded

Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 

Recently uploaded (20)

Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 

Fluid Layouting Techniques - Over The Air 2009

  • 1. Fluid Layout Techniques for Widgets Daniel Herzog,Vodafone @danfooo Vodafone Internet Services
  • 2. Vodafone offices, Düsseldorf 13th floor Daniel Herzog,Vodafone
  • 3. Off topic:Vodafone Widgets Daniel Herzog,Vodafone
  • 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
  • 19. Media Queries? • w3.org/TR/css3-mediaqueries/ • Detection for things like width color-index height monochrome orientation resolution aspect- scan ratio grid color 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