Ampersand Conference 2018

My slides from my talk at the brilliant Ampersand Conference in Brighton detailing how I re-created twelve responsive Blues Note album sleeves in the browser.

Transcript

2. Steve Honeyman Bringing Blue Notes to the Web
23. Responsive Type
24. Two methods: Reset font-size to VW on HTML Element Use CSS locks and calc()
40. Fluid Formula: To Calculate Subtract starting font-size from finishing font-size: 37px - 127px = 90px Subtract starting viewport from finishing viewport: 180px - 600px = 420px Divide sum 1 into sum 2 90 / 420 = 0.2142 Times result by 100vw calc(0.2142 * 100vw)
41. For precise control: Subtract equation from start font-size then times this by starting viewport width 37 – 0.2142 * 180 = -1.556 Add this to our initial calc function font-size: calc(0.2142 * 100vw + -1.556px) Convert to em calc(0.2142 * 100vw + -0.093em)
66. Thanks! :) stevehoneyman.co.uk/blog/blue-notes github.com/stevehoneyman/blue-notes