SlideShare a Scribd company logo
Adaptive Layout Design
V1




A   FEBRUARY 11, 2010
Adaptive Layout Design

Levels of adaptation


     Platform Variations   Layout Variations   Component Variations




A                                                                     2
Platform Variations




A
Platform Variations

Content



             Teasure Island
                   -
                         Part I.
                   The old bucanner.


           I saw the best minds of my generation
      destroyed by madness, starving hysterical
      naked, dragging themselves through the
                                                                 Treasure Island
      negro streets at dawn looking for an angry
      fix, angelheaded hipsters burning for the
                                                                  I saw the best minds of
      ancient heavenlyconnection to the starry                  my generation destroyed
      dynamo in the machinery of night,who                      by madness, starving
      poverty and tatters and hollow-eyed and                   hysterical naked,
                                                                dragging themselves
      high sat up smoking                                       through the negro streets
                                                                at dawn looking for an
          In the supernatural darkness ofcold-                  angry fix, angelheaded
      water flats floating across the tops of cities            hipsters burning for the
                                                                ancient
      contemplating jazz,who bared their brains                 heavenlyconnection to
      to Heaven under the El and saw oham.




                                                        Story                               Design



A    Confidential and Proprietary. Do not distribute.                                                4
Platform Variations

Screen sizes




                           15 inch   9.7 inch     3.5 inch      2 inches




                      Desktop        Tablet     Smartphones   Mobile Phones




A                                                                             5
Platform Variations

Resolution



                      iPhone   Droid




A                                      6
Platform Variations

UI Guidelines and Conventions




A                               7
Layout Variations




A
Layout Variations

Document


                    Direction                  Fixed                             Variable (by content)




                                Headline                                            Headline
                                Lorem ipsum dolor sit amet, consectetur             Lorem ipsum dolor sit amet, consectetur
                                adipiscing elit. Duis ultricies cursus neque,       adipiscing elit. Duis ultricies cursus neque,
                                nec molestie felis consectetur vel. Quisque         nec molestie felis consectetur vel. Quisque
                                ornare turpis nisi. Praesent consequat              ornare turpis nisi. Praesent consequat
                                aliquet tortor eget convallis. Vivamus              aliquet tortor eget convallis. Vivamus
                                fermentum lacus ac dolor condimentum                fermentum lacus ac dolor condimentum
                                elementum. Curabitur lobortis, diam quis            elementum. Curabitur lobortis, diam quis
                                luctus posuere, felis velit hendrerit orci, in      luctus posuere, felis velit hendrerit orci, in
                                aliquam nisi libero sed tellus. Suspendisse         aliquam nisi libero sed tellus. Suspendisse
                                in ipsum ut velit suscipit pharetra. Nulla          in ipsum ut velit suscipit pharetra. Nulla
                                metus dolor, ornare id interdum et, ultrices        metus dolor, ornare id interdum et, ultrices
                                vitae neque. Integer lacus turpis,                  vitae neque. Integer lacus turpis,
                                vestibulum eget porttitor et, bibendum nec          vestibulum eget porttitor et, bibendum nec
                                nisi. Lorem ipsum dolor sit amet,                   nisi. Lorem ipsum dolor sit amet,
                                consectetur adipiscing elit. Sed convallis          consectetur adipiscing elit. Sed convallis
                                sem vitae libero pharetra ac ornare odio            sem vitae libero pharetra ac ornare odio
                                condimentum. Sed cursus elit vitae urna             condimentum. Sed cursus elit vitae urna
                                mollis eget adipiscing ligula tempus.               mollis eget adipiscing ligula tempus.




A                                                                                                                                    9
Layout Variations

Grid based expansion




A                      10
Layout Variations

Grid Based Layout




A    Confidential and Proprietary. Do not distribute.   11
Layout Variations

Grid Based Layout




                                                        Columns - Variable   Gutters/Gaps - Fixed



                                  Baseline - Fixed




                                   Rows - Variable




A    Confidential and Proprietary. Do not distribute.                                               11
Layout Variations

Positioning

Attached to border   Inheritance




Full width/height




A                                  12
Layout Variations

Proportions

Pixels              Percentage

  80px               30%




A                                13
Layout Variations

Proportions

Pixels                                   Percentage
               Value can be left empty
                                                  Value is xed/de ned

  80px                                    30%   70%




A                                                                       13
Layout Variations

Proportions

Pixels                                       Percentage
                   Value can be left empty
                                                               Value is xed/de ned

     80px                                        30%         70%




 ?          80px      ?                      ?         30%         ?




A                                                                                    13
Layout Variations

Proportions

Pixels                                       Percentage
                   Value can be left empty
                                                               Value is xed/de ned

     80px                                        30%         70%




  Left takes precedence                      All sections are de ned




 ?          80px      ?                      ?         30%         ?




A                                                                                    13
Layout Variations

Proportions

Pixels                                       Percentage
                   Value can be left empty
                                                               Value is xed/de ned

     80px                                        30%         70%




  Left takes precedence                      All sections are de ned                 Align to center




 ?          80px      ?                      ?         30%         ?                     50%           50%




A                                                                                                            13
PRESENTATION TITLE

Text and Typography

Cropping a label:
This is a label that is too...




Expandable text
 Lorem ipsum dolor sit amet, consectetur      Lorem ipsum dolor sit amet, consectetur
 adipiscing elit. Duis molestie sem ut nibh   adipiscing elit. Duis molestie sem ut nibh
 porta molestie. Phasellus dolor ... more     porta molestie. Phasellus dolor purus,
                                              pellentesque vel imperdiet et, egestas vel
                                              nunc. Nunc sem ante, commodo eu
                                              commodo sit amet, luctus nec mauris.
                                              Nunc eu justo ut libero elementum varius.
                                              Less




UI specific line break rules:

Certain phrases can’t be split on line breaks. For example, “Chapter 5” and “6 mm” should always be together.




A                                                                                                               14
Component Variations
Component Variations

Layout


 Simple                Composite
 Scale 9               Constrains




A                                   16
Component Variations

Conditional States




A                      17
The end.

More Related Content

PDF
Fellini 058
PDF
Istanbul Seaport TECH Storyboard / Squint Opera
PPT
Digital demokrati i kommunerne
PPT
IdéMarken
PPSX
Presentatie k it 14 oktober mj12_versie4.0
PDF
Mesa julio 2016
PPT
Photo
PPT
Oral presentation of my learning pla
Fellini 058
Istanbul Seaport TECH Storyboard / Squint Opera
Digital demokrati i kommunerne
IdéMarken
Presentatie k it 14 oktober mj12_versie4.0
Mesa julio 2016
Photo
Oral presentation of my learning pla

Viewers also liked (10)

PPT
Testing
PDF
企画突っ込み
PPT
Faces Of Marketing Deception And Child Neglect For
PPT
My learning plan
PDF
In context
PDF
Instructivo para tabulación IF D y T Nº 9-006"Prof. Francisco H Tolosa"
PDF
Programa del II CONGRESO REGIONAL DE EDUCACIÓN TÉCNICO PROFESIONAL
PPTX
Inmunología obstetrica y manejo de paciente rh negativo
PPTX
PPTX
Mecanismos del trabajo de parto
Testing
企画突っ込み
Faces Of Marketing Deception And Child Neglect For
My learning plan
In context
Instructivo para tabulación IF D y T Nº 9-006"Prof. Francisco H Tolosa"
Programa del II CONGRESO REGIONAL DE EDUCACIÓN TÉCNICO PROFESIONAL
Inmunología obstetrica y manejo de paciente rh negativo
Mecanismos del trabajo de parto
Ad

Similar to Adaptive layout (20)

KEY
Making the Transition from Print to Digital Design

PDF
Design Basics for Non-Designers
PDF
Paint it Plone!
PPTX
Style Sheet, Flat Plans and Pitch
PPT
PDF
Addons And Fennec UI
PDF
Basics of Multimedia Content
PDF
Lecture04 / scenarios
KEY
How to do content strategy
PPTX
Pre production final
PDF
Roadmap 01
PDF
Basic tutorial dreamweaver_cs5
PPT
Jsm2003 02-with-narration
PDF
Embracing Uncertainty: Learning to Think Responsively
PDF
Clive pm presentation
PDF
Design
PPTX
Approaches to CSS Layout
PDF
The Art of Presentation III. Following the ZEN path. DESIGN
PPT
23--Web-Design-Principles
Making the Transition from Print to Digital Design

Design Basics for Non-Designers
Paint it Plone!
Style Sheet, Flat Plans and Pitch
Addons And Fennec UI
Basics of Multimedia Content
Lecture04 / scenarios
How to do content strategy
Pre production final
Roadmap 01
Basic tutorial dreamweaver_cs5
Jsm2003 02-with-narration
Embracing Uncertainty: Learning to Think Responsively
Clive pm presentation
Design
Approaches to CSS Layout
The Art of Presentation III. Following the ZEN path. DESIGN
23--Web-Design-Principles
Ad

Recently uploaded (20)

PDF
Electronic commerce courselecture one. Pdf
PDF
NewMind AI Monthly Chronicles - July 2025
PPTX
Cloud computing and distributed systems.
PDF
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
PPT
Teaching material agriculture food technology
PPTX
Big Data Technologies - Introduction.pptx
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Approach and Philosophy of On baking technology
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PDF
Encapsulation theory and applications.pdf
Electronic commerce courselecture one. Pdf
NewMind AI Monthly Chronicles - July 2025
Cloud computing and distributed systems.
Shreyas Phanse Resume: Experienced Backend Engineer | Java • Spring Boot • Ka...
Teaching material agriculture food technology
Big Data Technologies - Introduction.pptx
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
Encapsulation_ Review paper, used for researhc scholars
Mobile App Security Testing_ A Comprehensive Guide.pdf
Advanced methodologies resolving dimensionality complications for autism neur...
Building Integrated photovoltaic BIPV_UPV.pdf
Reach Out and Touch Someone: Haptics and Empathic Computing
Approach and Philosophy of On baking technology
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
CIFDAQ's Market Insight: SEC Turns Pro Crypto
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
NewMind AI Weekly Chronicles - August'25 Week I
Encapsulation theory and applications.pdf

Adaptive layout

  • 1. Adaptive Layout Design V1 A FEBRUARY 11, 2010
  • 2. Adaptive Layout Design Levels of adaptation Platform Variations Layout Variations Component Variations A 2
  • 4. Platform Variations Content Teasure Island - Part I. The old bucanner. I saw the best minds of my generation destroyed by madness, starving hysterical naked, dragging themselves through the Treasure Island negro streets at dawn looking for an angry fix, angelheaded hipsters burning for the I saw the best minds of ancient heavenlyconnection to the starry my generation destroyed dynamo in the machinery of night,who by madness, starving poverty and tatters and hollow-eyed and hysterical naked, dragging themselves high sat up smoking through the negro streets at dawn looking for an In the supernatural darkness ofcold- angry fix, angelheaded water flats floating across the tops of cities hipsters burning for the ancient contemplating jazz,who bared their brains heavenlyconnection to to Heaven under the El and saw oham. Story Design A Confidential and Proprietary. Do not distribute. 4
  • 5. Platform Variations Screen sizes 15 inch 9.7 inch 3.5 inch 2 inches Desktop Tablet Smartphones Mobile Phones A 5
  • 7. Platform Variations UI Guidelines and Conventions A 7
  • 9. Layout Variations Document Direction Fixed Variable (by content) Headline Headline Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies cursus neque, adipiscing elit. Duis ultricies cursus neque, nec molestie felis consectetur vel. Quisque nec molestie felis consectetur vel. Quisque ornare turpis nisi. Praesent consequat ornare turpis nisi. Praesent consequat aliquet tortor eget convallis. Vivamus aliquet tortor eget convallis. Vivamus fermentum lacus ac dolor condimentum fermentum lacus ac dolor condimentum elementum. Curabitur lobortis, diam quis elementum. Curabitur lobortis, diam quis luctus posuere, felis velit hendrerit orci, in luctus posuere, felis velit hendrerit orci, in aliquam nisi libero sed tellus. Suspendisse aliquam nisi libero sed tellus. Suspendisse in ipsum ut velit suscipit pharetra. Nulla in ipsum ut velit suscipit pharetra. Nulla metus dolor, ornare id interdum et, ultrices metus dolor, ornare id interdum et, ultrices vitae neque. Integer lacus turpis, vitae neque. Integer lacus turpis, vestibulum eget porttitor et, bibendum nec vestibulum eget porttitor et, bibendum nec nisi. Lorem ipsum dolor sit amet, nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis consectetur adipiscing elit. Sed convallis sem vitae libero pharetra ac ornare odio sem vitae libero pharetra ac ornare odio condimentum. Sed cursus elit vitae urna condimentum. Sed cursus elit vitae urna mollis eget adipiscing ligula tempus. mollis eget adipiscing ligula tempus. A 9
  • 11. Layout Variations Grid Based Layout A Confidential and Proprietary. Do not distribute. 11
  • 12. Layout Variations Grid Based Layout Columns - Variable Gutters/Gaps - Fixed Baseline - Fixed Rows - Variable A Confidential and Proprietary. Do not distribute. 11
  • 13. Layout Variations Positioning Attached to border Inheritance Full width/height A 12
  • 14. Layout Variations Proportions Pixels Percentage 80px 30% A 13
  • 15. Layout Variations Proportions Pixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70% A 13
  • 16. Layout Variations Proportions Pixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70% ? 80px ? ? 30% ? A 13
  • 17. Layout Variations Proportions Pixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70% Left takes precedence All sections are de ned ? 80px ? ? 30% ? A 13
  • 18. Layout Variations Proportions Pixels Percentage Value can be left empty Value is xed/de ned 80px 30% 70% Left takes precedence All sections are de ned Align to center ? 80px ? ? 30% ? 50% 50% A 13
  • 19. PRESENTATION TITLE Text and Typography Cropping a label: This is a label that is too... Expandable text Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie sem ut nibh adipiscing elit. Duis molestie sem ut nibh porta molestie. Phasellus dolor ... more porta molestie. Phasellus dolor purus, pellentesque vel imperdiet et, egestas vel nunc. Nunc sem ante, commodo eu commodo sit amet, luctus nec mauris. Nunc eu justo ut libero elementum varius. Less UI specific line break rules: Certain phrases can’t be split on line breaks. For example, “Chapter 5” and “6 mm” should always be together. A 14
  • 21. Component Variations Layout Simple Composite Scale 9 Constrains A 16