Flowing Comic Layouts
This began back when I was creating Chatting with Glue.
It's really damn hard to make responsive layouts that flow in the browser. Your only options are CSS Grid or an entirely custom layout engine. CSS Grid didn't really work well so I'm going with the latter option.
(1/??) Been thinking with @glitchyowl about dynamic comic authoring for the browser.— Max Krieger (@maxkriegers) August 19, 2020
By dynamic I mean semi-interactive and responsive.
By comic-for-browser I mean content laid out in scrollable narrative form. Beyond the panel grid and more serpentine.https://t.co/jFW7OlTfUi
Why layouts must flow
Our eyes saccade all over when we're outdoors. We evolved to scan.
Text and grids are fundamentally predictable and unsurprising.
- They're boring.
- Paragraphs are cubicles.
What if we had a plurality of pathways?
- Conveying a journey. Maintaining uncertainty.
Won't you get "lost" in a nonlinear layout?
Yes. But can't you get lost in a linear layout too? How many times have you lost focus while reading something dense? (text.reading (Private))
When essays involve visual components, your eyes will be attracted to them, like basins in a pool. In conventional articles, there's a stark contrast between an eye-catching figure and a big fat chunk of prose in an attentional vector field. In fact, undergraduates are instructed to scan the figures in a paper before reading the content.
See also: Unflattening
This is something I'm always open for advice on.
Main idea: Use cola's constraints to prevent overlaps between boxes and apply grouping.
Blocker: Weird behavior when several boxes in a row are smooshed right now. Unclear API.
Main idea: change a snake-shaped bezier curve as browser resizes.
Blocker: math. Currently figuring this out.
- A Comic Introduction to Idyll uses Grid, through and through
I've been working on a dead simple way to make websites.— HX (@ntsphx) February 22, 2021
Drag-and-drop, free-form, collage-like. pic.twitter.com/FhiJZO3Mu2
- dynamicland zine
- Artful design
- https://fffuel.co/ uses tailwind primitives