Vasilis’ nerd blog presents
We’re organising an event at my university about the web you want. The website we created for this event has all kinds of different themes, all made by colleagues, students and other enthusiasts. I decided to use some of these themes to make the posters for the event. In one evening I created ten completely different posters.
The content is the same for all posters, and it is rather minimalist. A title, a paragraph, a short URL + QR-code, and six pictures of speakers with their names. The styles are all different.
Of course, I didn’t make these themes myself. I made two of them. The others were all made by incredibly talented web designers who clearly know their craft. I just used these themes, and changed them a bit for this rather specific purpose.
CSS is a great language for creating printed material like posters, especially if you want more than one version of a poster. For instance, you can use animations to change colour, or to change the rotation of things, or the layout, which will result in a different poster each time you hit the Print Button. I used this technique to create a large banner for the minor webdesign and development that we’re going to use at events. For the web you want I manually changed the themes, and manually switched between light and dark mode for some.
The only print specific piece of code I used is:
@page {
size: A3;
}This will indeed result in a PDF in A3 size. For the banner I used size: 865mm 2056mm.
The workflow is a bit annoying. There is no real good tooling for testing. I used Vivaldi as a browser, refreshed the page after each code change, and then hit command + p on my keyboard, and then hit the cancel button if it wasn’t good enough (most of the time), or used the option to generate a PDF. I also installed a virtual printer in order to create large PDFs. We have an A4 printer here at home. In theory there are more clever workflows possible, with headless browsers that generate a PDF whenever code changes. I tried it, but it’s much harder to debug. There is no web inspector in a headless browser.
You should all come over to Amsterdam and visit the event. Tickets for The Web You Want are already available, and they are free.