Commit d332512565
Unsigned
Layout: unified · split
content/blog/2025-09-24-minimalist-website-redesign.org added +140
| @@ -0,0 +1,140 @@ | ||
| 1 | #+date: <2025-09-25 Thu 21:08:00> | |
| 2 | #+title: Simplifying the Site: A Minimalist Approach | |
| 3 | #+description: This post details a complete redesign of a blog post, stripping away extraneous CSS and HTML elements to prioritize readability and user experience. | |
| 4 | #+slug: minimalist-website-redesign | |
| 5 | ||
| 6 | I know what you're thinking: "ANOTHER blog post about redesigning the website?" | |
| 7 | ||
| 8 | Yes. Another blog post about redesigning the website. I enjoy it, what can I | |
| 9 | say? | |
| 10 | ||
| 11 | I wrote my latest post about redesigning from a monospace-driven, | |
| 12 | terminal-styled theme to a more natural paper-inspired theme. However, it left a | |
| 13 | nagging feeling that something was missing. What if I took it further? Was there | |
| 14 | really any reason that I had any of that CSS at all? | |
| 15 | ||
| 16 | | Old Theme | New Theme | | |
| 17 | |-----------------------------------------------------------------------+-----------------------------------------------------------------------| | |
| 18 | | https://img.cleberg.net/blog/20250905-human-website-design/after.png | https://img.cleberg.net/blog/2025-09-25-minimalist-website-redesign/minimal.png | | |
| 19 | ||
| 20 | * Inspiration | |
| 21 | ||
| 22 | I /briefly/ touched on my inspiration in the last post (hint: wabi-sabi, sho ga | |
| 23 | nai, brutalism, minimalism), but I didn't expand on the /why/ for these | |
| 24 | concepts. | |
| 25 | ||
| 26 | So, why? The minimalismtic approach to web design has resonated with me for a | |
| 27 | long time. But why minimalism? | |
| 28 | ||
| 29 | Officially, "the concept of minimalist architecture is to strip everything down | |
| 30 | to its essential quality and achieve simplicity." | |
| 31 | ||
| 32 | This is a blog. It also has pages dedicated to describing who I am and what I | |
| 33 | offer. Therefore, the essential quality is the information delivered by the | |
| 34 | words and the design on your screen. To effectively communicate this | |
| 35 | information, I tried to understand how online information is best read. | |
| 36 | ||
| 37 | With all of that out of the way, let's get on with it. | |
| 38 | ||
| 39 | * Core Changes | |
| 40 | ||
| 41 | Below is a quick audit of the original style sheet and markup, and the elements | |
| 42 | I've removed or added. For more in-depth information, refer to the [[https://git.cleberg.net/cleberg.net.git/commit/?id=d7978b4ccf4c6c56b1c2888791f73271f91fd12c][git diff]]. | |
| 43 | ||
| 44 | *HTML* | |
| 45 | ||
| 46 | - HTML is now minified | |
| 47 | - File tags | |
| 48 | - Links to site pages are moved from the =index= to the =about= page | |
| 49 | - Wiki was removed entirely | |
| 50 | - Added a few =<br>= elements to compensate for some of the CSS removals | |
| 51 | ||
| 52 | *CSS* | |
| 53 | ||
| 54 | For the CSS, I removed /everything/, except the following rules. | |
| 55 | ||
| 56 | #+begin_src css | |
| 57 | body { | |
| 58 | max-width: 50em; | |
| 59 | margin: 1.5rem; | |
| 60 | } | |
| 61 | ||
| 62 | nav ul { | |
| 63 | list-style-type: none; | |
| 64 | display: flex; | |
| 65 | padding: 0; | |
| 66 | } | |
| 67 | ||
| 68 | nav ul li { | |
| 69 | margin-right: 0.5rem; | |
| 70 | } | |
| 71 | ||
| 72 | img { | |
| 73 | border-style: none; | |
| 74 | width: 100%; | |
| 75 | } | |
| 76 | ||
| 77 | table { | |
| 78 | border: 1px solid #111; | |
| 79 | border-collapse: collapse; | |
| 80 | width: 100%; | |
| 81 | } | |
| 82 | ||
| 83 | pre, | |
| 84 | pre>code, | |
| 85 | code { | |
| 86 | font-size: 0.9rem; | |
| 87 | } | |
| 88 | ||
| 89 | pre { | |
| 90 | border: 1px solid #111; | |
| 91 | margin: 0.5rem 0; | |
| 92 | padding: 0.5rem; | |
| 93 | overflow-x: auto; | |
| 94 | } | |
| 95 | ||
| 96 | time { | |
| 97 | display: block; | |
| 98 | } | |
| 99 | ||
| 100 | :not(pre)>code { | |
| 101 | color: #f00; | |
| 102 | } | |
| 103 | ||
| 104 | @media (prefers-color-scheme: dark) { | |
| 105 | body { | |
| 106 | background-color: #222; | |
| 107 | color: #eee; | |
| 108 | } | |
| 109 | ||
| 110 | a { | |
| 111 | color: #add8e6; | |
| 112 | } | |
| 113 | ||
| 114 | pre { | |
| 115 | border-color: #eee; | |
| 116 | } | |
| 117 | } | |
| 118 | #+end_src | |
| 119 | ||
| 120 | That's it. No frameowk, no vendor prefixes, no unnecessary selectors. | |
| 121 | ||
| 122 | This gave me an almost-pure HTML site. It's freeing. It's liberating. It's | |
| 123 | comfortable. | |
| 124 | ||
| 125 | * Reading Experience Benefits | |
| 126 | ||
| 127 | Recent research shows that line length between 45–75 characters maximizes | |
| 128 | reading speed and comprehension. By constraining the container width to ~50 rem | |
| 129 | (≈ 100 characters), we stay close to that range while still staying wide enough | |
| 130 | for my personal preferences. Additionally, a lean stylesheet eliminates *FOUC* | |
| 131 | (flash‑of‑unstyled‑content) on slower networks, delivering a smoother | |
| 132 | first‑paint experience. | |
| 133 | ||
| 134 | * Final Thoughts | |
| 135 | ||
| 136 | I am very pleased with the new theme and will see how it holds up to time. Based | |
| 137 | on enabling short-term server logs to debug issues (before promptly wiping it to | |
| 138 | the ether), I notice that most visitors to my site are via RSS anyway. Either | |
| 139 | way, I hope you reach out if you have an opinion; I always enjoy hearing from | |
| 140 | you. | |