Design, Coffee, and I-Have-No-Idea-What-I’m-Doing-Oh-Maybe-I-Do

Slides from my Localhost Deployment talk in June 2017. (Initial upload for reference, needs context added for spoken content)

Transcript

1. Design, Coffee, and IHNIWIDOMID Simon Wright
 @diversionary
2. Design, Coffee, and
 I-Have-No-Idea-
 What-I’m-Doing-
 Oh-Maybe-I-Do Simon Wright
 @diversionary
3. Design, Coffee, and IHNIWIDOMID Simon Wright
 @diversionary
4. I’m a web nerd. Making print things.
5. Building things for the web for about 20 years.
6. spacer.gifs!
7. framesets!
8. tables!
9. CSS! (eventually)
11. !
12. <!--This file created 22/5/97 6:48 PM by Claris Home Page version 2.0--> “For those interested in the Adventures of the Geeky kind, I designed the site in Adobe Photoshop 3.0.5 (making extensive use of layers) before transferring everything over to Claris Home Page 2.0”
13. So, that’s web ✅
14. And now, coffee.
17. Coffee subscription? That’s a website! I got this. 
 #
20. People can make coffee at home!
24. &
31. We need print things! Time to learn… print?
32. InDesign.
 Pantone.
 Bleed.
 Alignment.
33. (ugh)
39. Graphic design apps
 aren’t always the right tools.
40. Workflow
41. Who your team is.
45. It turns out I’m really bad with
 copy and paste
46. Maybe there’s
 an easier way?
47. What do I
 already know?
48. …the web?
49. Well, kinda. (I guess?)
54. @page
 (and the joys
 of paper sizes)
55. @page { size: A4 landscape; margin: 0mm; // full-bleed }
56. Using mm as a unit feels weird but it’s legit
57. also: mm, cm, in, pt, pc
71. @page size: A6; { } margin: 0;
 padding: 0;
72. @page size: 97mm 146mm; { } margin: 0;
 padding: 0;
73. Now use all the usual css tricks
76. 
 Pagination
78. .page { } page-break-before: always; page-break-inside: avoid;
 overflow-y: hidden;
81. But this is the web. It’s never that easy.
84. The inevitable Chrome: custom margins, but no print settings Safari: ❌ Firefox: Maybe both? (and IE8?)
85. Look like a pro @page :left {
 marks: crop cross;
 bleed: 5mm
 } CSS Paged Media Module Level 3 (Draft)
87. Look like a pro @page :left {
 marks: crop cross;
 bleed: 5mm
 } CSS Paged Media Module Level 3 (Draft)
88. :first :left :right
89. Do you miss CMYK? color: device-cmyk(0 81% 23% 47%); CSS Color Module Level 4 (Draft) c m y k
90. Like, really miss CMYK? CSS Color Module Level 4 (Draft) background: color(fergus 0 .81 .23 .47); @color-profile fergus {
 src: url('http://example.org/ fooprinter-coated.icc'); }
91. So.
92. &
95. Don’t be defined by your output
96. Thanks! 
 @diversionary @samplecoffeebar samplecoffee.com.au/localhost
97. Thanks! 
 @diversionary @samplecoffeebar 
 samplecoffee.com.au/localhost