Low-Tech Web Design
ロー・テック・ウェブ / 2018– / Stil / Interface-Stile
Der Stil beginnt dort, wo Kris De Decker und seine Mitstreiter Low-tech Magazine 2018 auf einen solarbetriebenen Server umgezogen haben und offenlegten, wie sie ihn gebaut hatten. Bilder fallen auf Schwarzweiß mit vier Graustufen, keine einzige Webfont wird geladen, und die Höhe der Farbfläche hinter der Seite meldet, wie viel Ladung die Batterie noch hat. Das Datengewicht wird zur ersten Bedingung des Layouts.
Fotografien sind auf Schwarzweiß mit vier Graustufen reduziert, das Punktkorn bleibt offen sichtbar / Die Höhe der Farbfläche hinter der Seite zeigt die verbleibende Ladung und sinkt nachts oder bei schlechtem Wetter / Es wird keine einzige Webfont geladen, der Text erscheint dicktengleich oder in der Standardschrift des Browsers / Jede Inhaltskategorie färbt die Seite in einem festen Ton, im Blau #162DAB, im Rot #D11305 oder im Grün #006951
Abbildungen auf der Quellseite
Wörterbucheintrag
- Geeignet für
- Eine Artikelseite um eine Größenordnung leichter bauen, ohne die Fotografien aufzugeben, für Leser mit wenig Strom und wenig Bandbreite · Den Zustand eines Systems, etwa Restladung oder Laufzeit, über das Aussehen der Seite selbst mitteilen statt über eine Anzeige
- Typografie
- Keine Webfont laden, sondern dicktengleich oder mit dem setzen, was der Browser schon hat, und den Text in einer Spalte von etwa 33rem halten.
- Komposition
- Eine Spalte, die die Seite hinunterläuft, ohne schmückende Rahmen, und Bilder dürfen breiter als der Text sein, solange sie weniger wiegen als die Ausgangsdatei.
- Material
- Bilder in ein Schwarzweiß-Dithering mit vier Stufen umrechnen, die Farbe danach je Kategorie mit einem CSS-Filter auftragen und die Höhe einer Hintergrundfläche an den Ladezustand koppeln.
- Zu vermeiden
- Wer den Dither-Look nur mit einem Filter über hochaufgelöste Fotos nachahmt, ändert am Datenvolumen nichts und bekommt eine schwere Seite, die bloß leicht aussieht.
- Zum Weiterlesen
- 2018年のHow to Build a Low-tech Website?本文（4階調のディザと静的生成の記述） / 同サイトのCSS変数（地の#FFF5D1と分類ごとの青・赤・緑） / ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる
Verwandte Einträge
Diesen Eintrag zitieren
Das Wörterbuch ist zum Verlinken gedacht. Nehmen Sie die Form, die dorthin passt, wo Sie schreiben.
- Link
- https://indexstyle.org/de/styles/low-tech-web
- Markdown
- [Low-Tech Web Design — IndexStyle](https://indexstyle.org/de/styles/low-tech-web)
- HTML
- <a href="https://indexstyle.org/de/styles/low-tech-web">Low-Tech Web Design — IndexStyle</a>