Slide 1
Slide 1 text
armony & proportion in
reonsive web design
Owen G · eonsive Day Out · Brighton · Mar
Slide 2
Slide 2 text
armony & proportion in
reonsive web design
Owen G · eonsive Day Out · Brighton · Mar
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
It’s impossible to perceive
content and presentation
separately. e two
combine to create
something more
valuable: meaning.”
What bugs me about “content out” · Cennydd B · November
“
Slide 9
Slide 9 text
Creating layouts on the
web has to be different
because there are no
edges. ere are no ‘pages’.
We’ve made them up.”
A Richer Canvas · Mar B · March
“
Slide 10
Slide 10 text
N
feel the
Slide 11
Slide 11 text
e page is a piece of
paper. It is also a visible
and tangible proportion,
silently sounding the
thoroughbass of the book
On it lies the text block,
which must answer to the
page. e two together –
page and textblock –
produce an antiphonal
geometry.”
e Elements of Typographic Style · obert B ·
“
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
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Frames are part of the
fundamental architecture
of graphic design. Indeed,
framing is one of the
most persistent,
unavoidable and infinitely
variable acts performed
by the graphic designer.”
Graphic Design: e New Basics · Ellen L Jennifer C P ·
“
Slide 22
Slide 22 text
Vitruvian Man
Leonardo V
Slide 23
Slide 23 text
Vitruvian Man
Leonardo V ·
Slide 24
Slide 24 text
Vitruvian Man
Leonardo V
Slide 25
Slide 25 text
Vitruvian Man
Leonardo V ·
Slide 26
Slide 26 text
e frame is a form
which has as its
traditional determination
not that it stands out but
that it disappears, buries
itself, effaces itself, melts
away at the moment it
deploys its greatest
energy.”
La vérité en peinture · Jacques D ·
“
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
2:3 (portrait)
×
×
,×,
Slide 29
Slide 29 text
2:3 (portrait)
×
×
,×,
Slide 30
Slide 30 text
2:3 (portrait)
×
×
,×,
Slide 31
Slide 31 text
3:4 (portrait)
×
×
×
×
4:3 (landscape)
,×
,×,
Slide 32
Slide 32 text
3:4 (portrait)
×
×
×
×
4:3 (landscape)
,×
,×,
Slide 33
Slide 33 text
3:4 (portrait)
×
×
×
×
4:3 (landscape)
,×
,×,
Slide 34
Slide 34 text
3:4 (portrait)
×
×
×
×
4:3 (landscape)
,×
,×,
Slide 35
Slide 35 text
3:4 (portrait)
×
×
×
×
4:3 (landscape)
,×
,×,
Slide 36
Slide 36 text
3:4 (portrait)
×
×
×
×
4:3 (landscape)
,×
,×,
Slide 37
Slide 37 text
3:5 (portrait)
×
×,
Slide 38
Slide 38 text
3:5 (portrait)
×
×,
Slide 39
Slide 39 text
3:5 (portrait)
×
×,
Slide 40
Slide 40 text
3:5 (portrait)
×
×,
Slide 41
Slide 41 text
5:8 (portrait)
×,
,×,
Slide 42
Slide 42 text
5:8 (portrait)
×,
,×,
Slide 43
Slide 43 text
5:8 (portrait)
×,
,×,
Slide 44
Slide 44 text
8:5 (landscape)
,×
,×,
,×,
Slide 45
Slide 45 text
8:5 (landscape)
,×
,×,
,×,
Slide 46
Slide 46 text
8:5 (landscape)
,×
,×,
,×,
Slide 47
Slide 47 text
9:16 (portrait)
×,
×,
Slide 48
Slide 48 text
9:16 (portrait)
×,
×,
Slide 49
Slide 49 text
9:16 (portrait)
×,
×,
Slide 50
Slide 50 text
16:9 (landscape)
,×,
,×,
Slide 51
Slide 51 text
16:9 (landscape)
,×,
,×,
Slide 52
Slide 52 text
16:9 (landscape)
,×,
,×,
Slide 53
Slide 53 text
16
9
Slide 54
Slide 54 text
φ
Slide 55
Slide 55 text
T φ
is for the
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
C (:)
unison CC 1:1 1:1 100 100
minor second CD̆ 15:16 1:1.067 93.75 106.667
major second CD 8:9 1:1.125 88.889 112.5
minor third CĔ 5:6 1:1.2 83.333 120
major third CE 4:5 1:1.25 80 125
perfect fourth CF 3:4 1:1.333 75 133.333
augmented fourth or
diminished fih
CF̅/Ğ 1:√2 1:1.414 70.711 141.421
perfect fih CG 2:3 1:1.5 66.667 150
minor sixth CĂ 5:8 1:1.6 62.5 160
major sixth CA 3:5 1:1.667 60 166.667
minor seventh CB̆ 9:16 1:1.778 56.25 177.778
major seventh CB 8:15 1:1.875 53.333 187.5
octave CC^ 1:2 1:2 50 200
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
body { font: 100%/1.5 “Minion Pro”, Georgia, serif; }
/* =2:3 = perfect fifth(C→G) */
ting the ratio of fon
e to line height in C
Slide 62
Slide 62 text
16
9
×px = : = minor seventh
Slide 63
Slide 63 text
body { font-size: 75%; } /* =12px = base size or tonic */
h1 { font-size: 32px; font-size: 2.667rem; }
/* =32px = 3:8 = major eleventh (C→F↑) */
h2 { font-size: 24px; font-size: 2rem; }
/* =24px = 1:2 = octave (C→C↑) */
h3 { font-size: 20px; font-size: 1.667rem; }
/* =20px = 3:5 = major sixth (C→A) */
.caption, small { font-size: 9px; font-size: 0.75rem }
/* =9px = 3:4 = perfect fourth (C→F) */
Slide 64
Slide 64 text
@media only screen and (device-aspect-ratio: 768/1024) { }
@media only screen and (device-aspect-ratio: 600/800) { }
@media only screen and (device-aspect-ratio: 480/640) { }
@media only screen and (device-aspect-ratio: 3/4) { }
Slide 65
Slide 65 text
h1 { font-size: 8vh; }
p { font-size: 5vw; }
article { width: 80vw; }
img { max-height: 25vh; }
Viewport-percentage lengths
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text