Hi, I'm Darren

@73rhodes

Bridgewater. Kindsight. Alcatel-Lucent. Shopify.

Telecom. AAA. Security. Mobile.

Mobile World Congress. Blackhat.

Layout

Canonical or Accidental

grids

templates

accidental?

wtf?

Incunabula

"Phisicorum", HMD Collection, c. 1485

University of Glasgow Collection, c. 1465

Gutenberg Bible, Johannes Gutenberg, c. 1455

unknown, 15th Century Germany

The Bauhaus School of Design, Dessau

The Golden Canon

Raúl Rosarivo

1903 - 1966

Divina proporción tipográfica, Argentina, 1953

Rosarivo's Canon

J. A. Van de Graaf

c. 1900

"Nieuwe berekening voor de vormgeving" in Tete, Amsterdam, 1946

The Secret Canon

Villard de Honnecourt

Folio, Picardy, 33 pages, c. 1230

Villard Folio

p. 29

The "Villard Diagram"

• Attribution by Tschichold
• Divide into N equal parts
• Provenance unclear

The Golden Ratio

A / B = (A + B) / A

The Golden Rectangle

Leonardo da Vinci

Vitruvian Man, c. 1490

Giacomo Andrea Da Ferrara

Vitruvian Man, c.1490

Marcus Vitruvius Pollio

Di Architura

c.80 BC - c. 15 BC

Euclid

Elements, c. 300 BC

"A straight line is said to have been cut in extreme and mean ratio when, as the whole line is to the greater segment, so is the greater to the lesser."

Plato

Timaeus, c.360 BC

"For whenever in any three numbers, whether cube or square, there is a mean, which is to the last term what the first term is to it; and again, when the mean is to the first term as the last term is to the mean—then the mean becoming first and last, and the first and last both becoming means, they will all of them of necessity come to be the same, and having become the same with one another will be all one"

The Modern Web

a scrolling medium

Arbitrary text areas -

canons for book layout won't work

CSS grid systems

• Bootstrap
• Foundation
• 960, etc.

Transcribing the Secret Canons to the Web

• Use viewport, not page dimensions, as the baseline.
• CSS height percentages are based on element width.
• So dynamically size top and foot margins with JS.

Phi.JS - Secret Canons on the Web

• Van de Graaf's 'Secret Canon'
• Tschichold's Golden Canon (adapted)
• "Neo-Tschichold" - new canon proposal
• Optical Centering for images