cmc/cleberg.net

 1#+date:        [2020-12-27 Sun 00:00:00]
 2#+title:       Minimalist Website Redesign (5kb)
 3#+description: A retrospective summary of recent changes to minimize my site.
 4#+slug:        website-redesign
 5#+filetags:    :web:
 6
 7* A Brief History
 8
 9As a form of continuous learning and entertainment, I've been running a handful
10of websites since 2016 when I took my first programming courses in college. I
11maintain one main website, the place I consider the official website to
12represent me. Under this site, I have a handful of subdirectories and
13subdomains.
14
15One of the parts I've enjoyed the most about web development is the aspect of
16designing an identity for a web page and working to find exciting ways to
17display the site's content. Inevitably, this means I've changed the designs for
18my websites more times than I could possibly count. Since I don't really host
19anything on my main webpage that's vital, it allows me the freedom to change
20things as inspiration strikes.
21
22Historically, I've relied on core utilities for spacing, components, and layouts
23from [[https://getbootstrap.com][Bootstrap]] and added custom cascading style sheets (CSS) for fonts, accents,
24colors, and other items. I also tend to create sites with no border radius on
25items, visible borders, and content that takes up the entire screen (using
26whitespace inside components instead of whitespace around my components).
27
28* The Redesign Process
29
30About a week ago, I found myself wishing for a new design yet again. The prior
31design was largely inspired by IBM's [[https://www.carbondesignsystem.com][Carbon Design System]] and relied on jQuery,
32Bootstrap, along with some compressed [[https://en.wikipedia.org/wiki/WebP][.webp]] images.
33
34To anyone who knows my preferences toward web design - and even in my personal
35life - it should be no surprise that I immediately started looking for
36inspiration on minimalism. While there are some decent minimalistic designs on
37sites 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
38ask about minimalism. While brutalist web design doesn't have to be minimal, it
39often is.
40
41I suppose, in a way, I did create a brutalist website since my HTML is semantic
42and accessible, hyperlinks are colored and underlined, and all native browser
43functions like scrolling and the back button work as expected. However, I didn't
44think about brutalism while designing these sites.
45
46The new design followed a simple design process. I walked through the screens on
47my blog and asked myself: "Is this element necessary for a user?" This allowed
48me to first start by removing all javascript, which had the sole purpose of
49allowing users to open a collapsed navbar on mobile. Replacing the collapsible
50navbar allowed me to remove both jQuery and Bootstrap's javascript.
51
52Next, I removed things like author names (since I'm literally the only person
53who will ever write on this site), multiple ways to click on a blog post card,
54blog post descriptions, and the scroll-to-top button. It also helped to move all
55categories to a single page, rather than have each category on its own page.
56
57The final big piece to finish the "[[https://en.wikipedia.org/wiki/Marie_Kondo#KonMari_method][KonMari]]"-like part of my process was to
58remove Bootstrap CSS in its entirety. However, this meant pulling out a few very
59useful classes, such as =.img-fluid= and the default font stacks to keep in my
60custom CSS.
61
62After removing all the unnecessary pieces, I was finally able to reorganize my
63content and add a very small amount of custom CSS to make everything pretty.
64This took a brief amount of time, effectively just consisting of me converting
65=<div>= tags into things like =<ul>= lists and choosing accent colors.
66
67* The Results
68
69** Reflection
70
71So, what did all of this reorganizing do to my webpages? Well, first, my
72websites are now *ridiculously fast*. Since the prior designs were also minimal
73and didn't have many images, they measured up in Firefox's Network Monitor
74around 300 KB - 600KB. After making the changes, my main site is at 5 KB
75transferred (22 KB total), and my blog is at 6.5 KB transferred (13 KB total).
76*That means the redesigned pages are less than 2% the size of the old designs.*
77
78Google Lighthouse ranks the new webpage as 100 in performance, accessibility,
79and best practices, with search engine optimization (SEO) at 92 since they think
80tap targets are not sized appropriately for mobile users. First contextual
81paints of the pages are under 0.8 seconds with 0 ms (millisecond) of blocking
82time. However, the blog subdomain ranks at 100 for all four categories! First
83contextual paints of the blog homepage are under 1.0 seconds with 0 ms of
84blocking time, due to the fact that the CSS for my blog is within a separate CSS
85file, and the CSS for my main website is simply embedded in the HTML file.
86
87Now that everything is complete, I can confidently say I'm happy with the result
88and proud to look at the fastest set of websites I've created so far.