1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
#+date: <2020-12-27>
#+title: Redesigning My Website: The 5 KB Result
#+description:
#+slug: website-redesign
* 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.
|
