From caccd81c3eb7954662d20cab10cc3afeeabca615 Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Sat, 2 Dec 2023 11:23:08 -0600 Subject: initial commit --- blog/2020-12-27-website-redesign.org | 87 ++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 blog/2020-12-27-website-redesign.org (limited to 'blog/2020-12-27-website-redesign.org') diff --git a/blog/2020-12-27-website-redesign.org b/blog/2020-12-27-website-redesign.org new file mode 100644 index 0000000..771178a --- /dev/null +++ b/blog/2020-12-27-website-redesign.org @@ -0,0 +1,87 @@ +#+date: 2020-12-27 +#+title: Redesigning My Website: The 5 KB Result + +* A Brief History + +As a form of continuous learning and entertainment, I've been running a handful +of websites since 2016 when I took my first programming courses in college. I +maintain one main website, the place I consider the official website to +represent me. Under this site, I have a handful of subdirectories and +subdomains. + +One of the parts I've enjoyed the most about web development is the aspect of +designing an identity for a web page and working to find exciting ways to +display the site's content. Inevitably, this means I've changed the designs for +my websites more times than I could possibly count. Since I don't really host +anything on my main webpage that's vital, it allows me the freedom to change +things as inspiration strikes. + +Historically, I've relied on core utilities for spacing, components, and layouts +from [[https://getbootstrap.com][Bootstrap]] and added custom CSS for fonts, accents, colors, and other +items. I also tend to create sites with no border radius on items, visible +borders, and content that takes up the entire screen (using whitespace inside +components instead of whitespace around my components). + +* The Redesign Process + +About a week ago, I found myself wishing for a new design yet again. The prior +design was largely inspired by IBM's [[https://www.carbondesignsystem.com][Carbon Design System]] and relied on jQuery, +Bootstrap, along with some compressed [[https://en.wikipedia.org/wiki/WebP][.webp]] images. + +To anyone who knows my preferences toward web design - and even in my personal +life - it should be no surprise that I immediately started looking for +inspiration on minimalism. While there are some decent minimalistic designs on +sites like [[https://dribbble.com/search/shots/popular/web-design?q=minimalism][Dribbble]], people seem to mostly discuss [[https://brutalist-web.design][brutalist web design]] when you +ask about minimalism. While brutalist web design doesn't have to be minimal, it +often is. + +I suppose, in a way, I did create a brutalist website since my HTML is semantic +and accessible, hyperlinks are colored and underlined, and all native browser +functions like scrolling and the back button work as expected. However, I didn't +think about brutalism while designing these sites. + +The new design followed a simple design process. I walked through the screens on +my blog and asked myself: "Is this element necessary for a user?" This allowed +me to first start by removing all javascript, which had the sole purpose of +allowing users to open a collapsed navbar on mobile. Replacing the collapsible +navbar allowed me to remove both jQuery and Bootstrap's javascript. + +Next, I removed things like author names (since I'm literally the only person +who will ever write on this site), multiple ways to click on a blog post card, +blog post descriptions, and the scroll-to-top button. It also helped to move all +categories to a single page, rather than have each category on its own page. + +The final big piece to finish the "[[https://en.wikipedia.org/wiki/Marie_Kondo#KonMari_method][KonMari]]"-like part of my process was to +remove Bootstrap CSS in its entirety. However, this meant pulling out a few very +useful classes, such as `.img-fluid` and the default font stacks to keep in my +custom CSS. + +After removing all the unnecessary pieces, I was finally able to reorganize my +content and add a very small amount of custom CSS to make everything pretty. +This took a brief amount of time, effectively just consisting of me +converting =
= tags into things like =