Low-Tech Web Design

ロー・テック・ウェブ / 2018– / Style / UI Expression

The style starts where Kris De Decker and his collaborators moved Low-tech Magazine onto a solar powered server in 2018 and published how they had built it. Images drop to black and white with four levels of grey, not one web font is loaded, and the height of the colored field behind the page reports how much charge the battery has left. Data weight becomes the first constraint on the layout.

Photographs are reduced to black and white with four levels of grey, the dot grain left plainly visible / The height of the colored field behind the page shows remaining battery charge and falls at night or in bad weather / No web font is loaded at all, so text arrives in a monospace or the browser's own default / Each content category paints the page a fixed color, blue #162DAB, red #D11305, or green #006951

Images at the source page

Dictionary entry

Best used for: Building an article page an order of magnitude lighter without giving up its photographs, for readers on thin power and thin bandwidth · Reporting a system's state, such as remaining charge or uptime, through the look of the page itself rather than a readout
Type: Load no web font; set in a monospace or whatever the browser already has, and hold the text to a single column around 33rem wide.
Composition: One column running down the page with no decorative frames; images may exceed the text column in size as long as they weigh less than the original file.
Material: Convert images to four level black and white dither and add color afterwards with a CSS filter per category, then tie the height of a background field to the power supply.
Caution: Copying the dithered look by running a filter over full resolution photographs leaves the payload untouched, producing a heavy page that only looks light.
Further study: 2018年のHow to Build a Low-tech Website?本文（4階調のディザと静的生成の記述） / 同サイトのCSS変数（地の#FFF5D1と分類ごとの青・赤・緑） / ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる

Related entries

Cite this entry

The dictionary is meant to be linked to. Take whichever form fits where you are writing.

Link: https://indexstyle.org/styles/low-tech-web
Markdown: [Low-Tech Web Design — IndexStyle](https://indexstyle.org/styles/low-tech-web)
HTML: <a href="https://indexstyle.org/styles/low-tech-web">Low-Tech Web Design — IndexStyle</a>

Back to index position