Codebase for my homepage.
git clone git://vcs.sapka.me/michal-sapka-me
Log | Files | Refs

commit 6e038781e06adbf623d43b82a312e90f402496be
parent e102ea1883f4281b6e4172023f849f538a0b58f4
Author: MichaƂ M. Sapka <michal@sapka.me>
Date:   Wed,  8 Feb 2023 13:18:17 +0100

feat: article for 2023-02-08

and centered imagem shortcde.

Aassets/content_images/mcdonalds-1996.png | 0
Acontent/2023/joylessness-of-modern-web-design.md | 26++++++++++++++++++++++++++
Alayouts/shortcodes/img-center.html | 16++++++++++++++++
3 files changed, 42 insertions(+), 0 deletions(-)

diff --git a/assets/content_images/mcdonalds-1996.png b/assets/content_images/mcdonalds-1996.png Binary files differ. diff --git a/content/2023/joylessness-of-modern-web-design.md b/content/2023/joylessness-of-modern-web-design.md @@ -0,0 +1,26 @@ +--- +title: "Joylessness of Modern Web Design" +category: "software" +abstract: I think that websites have lost all resemblence of joyfullness and playfullness +date: 2023-02-08T13:01:09+01:00 +year: 2023 +draft: false +tags: +- retro-computing +- webdesign +--- +Recently I stumbled upon [Web Design Museum](https://www.webdesignmuseum.org) collecting screenshots of webpages of the past. + +> Browse through the gallery of websites created between 1991 and 2006 and discover the forgotten web design trends. + +Quite sad how boring the internet of 2023 is. Every webpage looks (more or less) the same. All web apps are inspired by Material Design. Where is joy? Just look at how playful Mcdonald's looked in 1996. + +{{<img-center "mcdonalds-1996.png" "mcdonalds.com in 1996. Most of the screen is blank, becasue why not?" "https://www.webdesignmuseum.org/gallery/mcdonald-s-1996">}} + +On the museum's website, we can see more [phases of the website's evolution](https://www.webdesignmuseum.org/gallery/mcdonald-s-1996). Unfortunately, with each next design, the joyfulness evaporates, and in 2012 or 2016 completely lost any pretense of personality. A similar story can be seen for [Lego](https://www.webdesignmuseum.org/gallery/lego-1996) or [Microsoft](https://www.webdesignmuseum.org/gallery/microsoft-1996) in a similar timeframe. + +I blame iPhone, as it all happened just a few years after its first reveal in 2007. Web designers could no longer assume that they have 1024 pixels on 15'' monitors. Now sites had to work on 4'' and 40''. No longer was a dedicated and precise cursor the default; everything had to be touchable with fat fingers. Just a few days ago, Google screamed at my small font footer. + +Soon, I'll be recreating this website's layout as the current one results from the laziness of reactive design. How little can I design to assume it will be usable on all devices? Luckily, I wasn't so lazy that I would use the hamburger button, the worst thing for desktop usage. It makes the navigation easy to touch but hard to use, as everything is hidden. But I was just lazy enough to use one-column - and multi-column websites are the most incredible thing for computers! [Bruce Schneier](https://www.schneier.com/) puts so much essential info right in front of you that I can't stop myself from feeling at home. And it has web banners! And it works even on my tiny iPhone 13 mini. Are there any cons here? I don't think so. + +Bring back multi-column layouts! diff --git a/layouts/shortcodes/img-center.html b/layouts/shortcodes/img-center.html @@ -0,0 +1,16 @@ +{{- $file := .Get 0 }} +{{- $path := printf "content_images/%s" $file}} +{{- $img := resources.Get $path }} +{{- $caption := .Get 1 }} +{{- $source := .Get 2 }} +{{- $img = $img.Resize "500x" }} +<figure> + <img class="centered" alt="{{ $caption }}" src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}"> + <figcaption> + {{ $caption }} + + {{- if $source }} + <a href="{{ $source }}" target="_blank" title="source">[source]</a> + {{ end }} + </figcaption> +</figure>