SMASHING CONF 9/18/2012
Responsive
times
call for
Responsive
Measures
JOSH BREWER
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Responsive
compositions
Images from Trent Walton
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
#responsivesummit
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
This
Slide 8
Slide 8 text
Gridset
Slide 9
Slide 9 text
Convergence
Slide 10
Slide 10 text
Things we do on the internet
Slide 11
Slide 11 text
Look at stuff
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
video: gotye, double-rainbow, dillon
splashing
Slide 18
Slide 18 text
Read stuff
Slide 19
Slide 19 text
Tim Brown - modular scale
+responsive type
Slide 20
Slide 20 text
trent - “redefined”
Slide 21
Slide 21 text
Mark Hurrell “fluid grids…”
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
iA “95% type”
Slide 24
Slide 24 text
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.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
screenshot: 1st webpage
(wide and narrow)
Slide 28
Slide 28 text
screenshot: 1st webpage
(wide and narrow)
Slide 29
Slide 29 text
The DNA of the web is a fluid,
hyperlinked document with
default typographic hierarchy
Slide 30
Slide 30 text
“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”
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
“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”
Slide 35
Slide 35 text
Sound familiar?
Slide 36
Slide 36 text
Pages
Slide 37
Slide 37 text
“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”
Slide 38
Slide 38 text
But we aren’t talking about books…
Slide 39
Slide 39 text
Robert Irwin
Slide 40
Slide 40 text
“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
Slide 41
Slide 41 text
The relationship of the viewport to
the content is:
Slide 42
Slide 42 text
A) The viewport is a window over a
multi-dimensional view of content
Slide 43
Slide 43 text
Sketch by Scott McCloud
Slide 44
Slide 44 text
B) The viewport as container,
content fits to the container and
it flows from there
Slide 45
Slide 45 text
The viewport is a container and
content fits to it, then flows from
there (iPad books? etc)
Slide 46
Slide 46 text
C) The viewport is a window over a
vertically scrolling document
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
D) The viewport is a window over a
horizontally scrolling document
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
E. All of the above
Slide 53
Slide 53 text
Cannons of page construction
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
The geometry of design
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Josef Müller-Brockmann
Slide 60
Slide 60 text
1. Figure out the page size
2. Divide it into a grid
3. Start designing
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
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
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Viewport-based percentage units!
Slide 66
Slide 66 text
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
Slide 67
Slide 67 text
h1 {
font-size: 4vw; }
p {
font-size: 2vmin; }
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Grand
unified
theory
Slide 71
Slide 71 text
Maybe there is a
“Grand Unified Theory of Web Design”
We can determine the ideal width for
a textblock based the ratio of the
viewport and some geometry!
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
Evil genius laugh!
Slide 80
Slide 80 text
Not quite.
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
Back to the drawing board
Slide 83
Slide 83 text
Font-size, line-height & measure
Slide 84
Slide 84 text
Identifying the core components of a
“responsive composition”
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
Set up a resolution-independent
typographic scale
Slide 87
Slide 87 text
Identify the container for the
primary content
Slide 88
Slide 88 text
Ideal font-size for an ideal measure
Slide 89
Slide 89 text
Apply the ideal font-size to the
element
Slide 90
Slide 90 text
Cascade throughout the composition
using your typographic scale in rems
Slide 91
Slide 91 text
Okay, show me
Slide 92
Slide 92 text
Start content-out
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
Basic styles
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Then connect to the canvas
Slide 97
Slide 97 text
No content
Slide 98
Slide 98 text
Add Responsive Measure
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
Demo time
Slide 101
Slide 101 text
Media-queries only for layout changes
Resolution-independent typography
Readable measure in every context