diff options
author | Christian Cleberg <hello@cleberg.net> | 2024-01-08 20:11:17 -0600 |
---|---|---|
committer | Christian Cleberg <hello@cleberg.net> | 2024-01-08 20:11:17 -0600 |
commit | 25945b8fead989cca09a23983623b63ce36dcc0c (patch) | |
tree | 0dfc869ce8b028e04ce9da196af08779780915ce /blog/2020-12-27-website-redesign.org | |
parent | 22b526be60bf4257c2a1d58a5fad59cf6b044375 (diff) | |
download | cleberg.net-25945b8fead989cca09a23983623b63ce36dcc0c.tar.gz cleberg.net-25945b8fead989cca09a23983623b63ce36dcc0c.tar.bz2 cleberg.net-25945b8fead989cca09a23983623b63ce36dcc0c.zip |
feat: total re-write from Emacs org-mode to Zola markdown
Diffstat (limited to 'blog/2020-12-27-website-redesign.org')
-rw-r--r-- | blog/2020-12-27-website-redesign.org | 87 |
1 files changed, 0 insertions, 87 deletions
diff --git a/blog/2020-12-27-website-redesign.org b/blog/2020-12-27-website-redesign.org deleted file mode 100644 index 771178a..0000000 --- a/blog/2020-12-27-website-redesign.org +++ /dev/null @@ -1,87 +0,0 @@ -#+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 =<div>= tags into things like =<ul>= lists and choosing accent -colors. - -* The Results - -** Reflection - -So, what did all of this reorganizing do to my webpages? Well, first, my -websites are now *ridiculously fast*. Since the prior designs were also minimal -and didn't have many images, they measured up in Firefox's Network Monitor -around 300 KB - 600KB. After making the changes, my main site is at 5 KB -transferred (22 KB total), and my blog is at 6.5 KB transferred (13 KB -total). *That means the redesigned pages are less than 2% the size of the old -designs.* - -Google Lighthouse ranks the new webpage as 100 in performance, accessibility, -and best practices, with SEO at 92 since they think tap targets are not sized -appropriately for mobile users. First contextual paints of the pages are under -0.8 seconds with 0 ms of blocking time. However, the blog subdomain ranks at 100 -for all four categories! First contextual paints of the blog homepage are under -1.0 seconds with 0 ms of blocking time, due to the fact that the CSS for my blog -is within a separate CSS file, and the CSS for my main website is simply -embedded in the HTML file. - -Now that everything is complete, I can confidently say I'm happy with the result -and proud to look at the fastest set of websites I've created so far. |