Responsive Times Call For Responsive Measures

Slides from my talk at Smashing Conf.

Transcript

1. SMASHING CONF 9/18/2012 Responsive times call for Responsive Measures JOSH BREWER
3. Responsive compositions Images from Trent Walton
5. #responsivesummit
7. This
8. Gridset
9. Convergence
10. Things we do on the internet
11. Look at stuff
17. video: gotye, double-rainbow, dillon splashing
18. Read stuff
19. Tim Brown - modular scale +responsive type
20. trent - “redefined”
21. Mark Hurrell “fluid grids…”
23. iA “95% type”
24. Our job is to give content form in such a way that, despite the context or device it is consumed on, the clarity and purpose of the content is not compromised.
27. screenshot: 1st webpage (wide and narrow)
28. screenshot: 1st webpage (wide and narrow)
29. The DNA of the web is a fluid, hyperlinked document with default typographic hierarchy
30. “We should embrace the fact that the web doesn’t have the same constraints (as the printed page), and design for this flexibility.” John Allsopp “A Dao of Web Design”
34. “Make pages which are adaptable. Make pages which are accessible, regardless of the browser, platform or screen that your reader chooses or must use to access your pages. This means pages which are legible regardless of screen resolution or size, or number of colors… This means pages which adapt to the needs of a reader.” John Allsopp “A Dao of Web Design”
35. Sound familiar?
36. Pages
37. “The two together—page and textblock—produce an antiphonal geometry. That geometry alone can bond the reader to the book.” Robert Bringhurst “The Elements of Typographic Style”
38. But we aren’t talking about books…
39. Robert Irwin
40. “How do I paint a painting that doesn’t begin and end at the edge but rather starts to take in and become involved with the space or environment around it? ...I mean we ordinarily start with canvas as a fact, as more than a fact. We start with it as a truth so deeply hidden that we don’t even question it.” Robert Irwin, Seeing Is Forgetting The Name Of The Thing One Sees
41. The relationship of the viewport to the content is:
42. A) The viewport is a window over a multi-dimensional view of content
43. Sketch by Scott McCloud
44. B) The viewport as container, content fits to the container and it flows from there
45. The viewport is a container and content fits to it, then flows from there (iPad books? etc)
46. C) The viewport is a window over a vertically scrolling document
49. D) The viewport is a window over a horizontally scrolling document
52. E. All of the above
53. Cannons of page construction
55. The geometry of design
59. Josef Müller-Brockmann
60. 1. Figure out the page size 2. Divide it into a grid 3. Start designing
63. Proportions P = page proportion: h/w T = textblock proportion: d/m Page size w = width of page h = height of page Textblock m = measure (width of primary textblock) d = depth (height) of primary textblcok l = line-height n = secondary measure (width of secondary col) c = column width, where there are even no. of columns Margins s = spine t = top margin e = fore-edge (front margin) f = foot margin g = internal gutter (on a multi-col page
65. Viewport-based percentage units!
66. vw Equal to 1% of the width of the viewport vh Equal to 1% of the height of the viewport vmin Equal to either vw or vh, whichever is smaller vmax The opposite of vmin http://www.w3.org/TR/css3-values/#viewport-relative-lengths
67. h1 { font-size: 4vw; } p { font-size: 2vmin; }
70. Grand unified theory
71. Maybe there is a “Grand Unified Theory of Web Design”
73. Magic formula $ratio = vw/vh; $textblock = vw/$ratio; $idealFontSize = $textblock/30; $scale = [], $ratio, $idealFontSize, $increment;
74. 1024x768 $ratio = 1.333; $textblock = 768.192048012px; $idealFontSize = 25.6064016px; $scale = [6.169921875, 8.2265625, 10.96875, 14.625, 19.5, 26, 34.666666666666664, 46.22222222222222, 61.629629629629626, 82.17283950617283];
76. We can determine the ideal width for a textblock based the ratio of the viewport and some geometry!
79. Evil genius laugh!
80. Not quite.
82. Back to the drawing board
83. Font-size, line-height & measure
84. Identifying the core components of a “responsive composition”
85. 1. A modular scale based on a ratio (starting from your Ideal Font-size) 2. Fluid grids (media too) 3. Ideal measure with accompanying line-height. 4. Great content* * not necessary, but a damn good idea
86. Set up a resolution-independent typographic scale
87. Identify the container for the primary content
88. Ideal font-size for an ideal measure
89. Apply the ideal font-size to the <html> element
90. Cascade throughout the composition using your typographic scale in rems
91. Okay, show me
92. Start content-out
94. Basic styles
96. Then connect to the canvas
98. Add Responsive Measure
100. Demo time
101. Media-queries only for layout changes Resolution-independent typography Readable measure in every context
102. Up on Github now
103. http://tiny.cc/responsivemeasure
104. Thank you