Adaptive Layout Design is a complex problem for many interactive Designers. These are the results on the research done over the course of a few months in which designers were observed as they designed multiscreen projects both for publishing and for the open web.

1. Adaptive Layout Design
V1
A FEBRUARY 11, 2010

2. Adaptive Layout Design
Levels of adaptation
Platform Variations Layout Variations Component Variations
A 2

3. Platform Variations
A

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

6. Platform Variations
Resolution
iPhone Droid
A 6

7. Platform Variations
UI Guidelines and Conventions
A 7

8. Layout Variations
A

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

10. Layout Variations
Grid based expansion
A 10

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

20. Component Variations

21. Component Variations
Layout
Simple Composite
Scale 9 Constrains
A 16

22. Component Variations
Conditional States
A 17

23. The end.