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