initial commit

1 files changed, 87 insertions, 0 deletions

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 =<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.