From 797a1404213173791a5f4126a77ad383ceb00064 Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Mon, 4 Mar 2024 22:34:28 -0600 Subject: initial migration to test org-mode --- blog/website-redesign/index.org | 96 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 blog/website-redesign/index.org (limited to 'blog/website-redesign/index.org') diff --git a/blog/website-redesign/index.org b/blog/website-redesign/index.org new file mode 100644 index 0000000..cfa8795 --- /dev/null +++ b/blog/website-redesign/index.org @@ -0,0 +1,96 @@ +#+title: Redesigning My Website: The 5 KB Result +#+date: 2020-12-27 +#+description: A retrospective on my recent website redesign. +#+filetags: :sysadmin: + +* 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 =