Beautiful, fluid layouts do not need to be mystifying. Designer and developer Nathan Ford will take you through some of the ways traditional grids and other layout methods on the web are hindering our designs, and show you ways to build with fluidity from the start. He will demonstrate how to derive bespoke grid systems from your content, strengthening the connectedness of device, content and layout, and then show you how to adapt your layout as needed to maintain your smart compositional decisions across an ever-changing landscape.

1. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Mastering the Dark Art
of Fluid Layout

2. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Design must communicate.

3. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Image courtesy @thenoyes

4. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Design must communicate.
• Type
• Color
• Imagery
• Layout

5. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Design must communicate.
• Type
• Color
• Imagery
• Layout

6. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout

7. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Goals:
• Hierarchy

8. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014

9. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014

10. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning

11. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014

12. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning
• Engagement

13. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning
• Engagement
• Consistency

14. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition

15. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity

16. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://wallpaper.com

17. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
• Similarity

18. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://smashingmagazine.com

19. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation

20. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014http://hofstede.com.au

21. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation
• Repetition

22. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://electrik.co

23. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation
• Repetition
• Rhythm

24. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://stashflaticons.com

25. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions

26. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs

27. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
• Lead the eye through the content

28. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
• Lead the eye through the content
• Unique footprint

29. https://gridsetapp.com

30. https://gridsetapp.com

31. https://gridsetapp.com

35. http://min.artequalswork.com

36. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
• Lead the eye through the content
• Unique footprint
• Asymmetrical triangle/quadrangle

40. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
• Lead the eye through the content
• Unique footprint
• Asymmetrical triangle
• Avoid trapped space

41. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014

42. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014

43. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014

44. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web

45. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units

46. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• Top/bottom margin and padding
percentages are based on width

47. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://alistapart.com/article/creating-intrinsic-ratios-for-video/

48. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• Top/bottom margin and padding
percentages are based on width
• A pixel is not a pixel, and subpixels are
insane

49. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• Top/bottom margin and padding
percentages are based on width
• A pixel is not a pixel, and subpixels are
insane
http://palantir.net/blog/responsive-design-s-dirty-little-secret

50. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible RIGHT NOW?

51. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible RIGHT NOW?
• Flexbox for content layout

52. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible RIGHT NOW?
• Flexbox for content layout
• VW VH for page/screen layout (soon!)

53. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible RIGHT NOW?
• Flexbox for content layout
• VW VH for page/screen layout (soon!)
• Percentages and floats for fallback or max
compatibility

54. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory

55. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!

56. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us build proportional harmony

58. Quadrat (or Square/Even) - 1:1
Hemidiagon - 1:1.118
Trion - 1:1.154
Quadriagon - 1:1.207
Biauron - 1:1.236
Penton - 1:1.272
Diagon - 1:1.414
Bipenton - 1:1.458
Hemiolion - 1:1.5
Auron (the Golden Ratio) - 1:1.618
Hecton (or Sixton) - 1:1.732
Doppelquadrat (Halves) - 1:2
12 ORTHOGONS

59. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us build proportional harmony
• Scales give us variety based on harmony

61. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us build proportional harmony
• Scales give us variety based on harmony
• Think content out

66. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us build proportional harmony
• Scales give us variety based on harmony
• Think content out
• Modularity for a more useful grid system

69. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
When to respond

70. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
When to respond
You may need to change layout when you see
the following:
• Sevens

72. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
When to respond
You may need to change layout when you see
the following:
• Sevens
• Drifters

74. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
When to respond
You may need to change layout when you see
the following:
• Sevens
• Drifters
• Pinches

77. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Examples

78. Al Jazeera Turk
http://aljazeera.com.tr/

79. http://aljazeera.com.tr/

80. http://aljazeera.com.tr/

81. Al Jazeera Turk
http://aljazeera.net

82. https://gridsetapp.com/specs/typekit-demos/chaparral.html

84. https://gridsetapp.com/specs/typekit-demos/chaparral.html

85. https://gridsetapp.com/specs/typekit-demos/chaparral.html

86. https://gridsetapp.com/specs/typekit-demos/chaparral.html

87. https://gridsetapp.com/specs/typekit-demos/chaparral.html

88. https://gridsetapp.com/specs/typekit-demos/chaparral.html

89. http://artequalswork.com

90. http://artequalswork.com

91. http://artequalswork.com

92. http://artequalswork.com

93. http://artequalswork.com

94. http://artequalswork.com

95. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://alistapart.com/article/content-out-layout

96. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Thank you.
Typeface: Clear Sans from Monotype
@nathan_ford
nathan@monotype.com