diff options
Diffstat (limited to 'content/blog/2020-12-27-website-redesign.org')
| -rw-r--r-- | content/blog/2020-12-27-website-redesign.org | 155 |
1 files changed, 71 insertions, 84 deletions
diff --git a/content/blog/2020-12-27-website-redesign.org b/content/blog/2020-12-27-website-redesign.org index ac60c9d..c093696 100644 --- a/content/blog/2020-12-27-website-redesign.org +++ b/content/blog/2020-12-27-website-redesign.org @@ -5,96 +5,83 @@ * 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). +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. +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. +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. |