From 0a572596983641cbf510209a3ab5c5329be68bd6 Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Thu, 25 Sep 2025 21:10:12 -0500 Subject: add minimalist-website-redesign post --- .../2025-09-24-minimalist-website-redesign.org | 140 +++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 content/blog/2025-09-24-minimalist-website-redesign.org diff --git a/content/blog/2025-09-24-minimalist-website-redesign.org b/content/blog/2025-09-24-minimalist-website-redesign.org new file mode 100644 index 0000000..8cfaf58 --- /dev/null +++ b/content/blog/2025-09-24-minimalist-website-redesign.org @@ -0,0 +1,140 @@ +#+date: <2025-09-25 Thu 21:08:00> +#+title: Simplifying the Site: A Minimalist Approach +#+description: This post details a complete redesign of a blog post, stripping away extraneous CSS and HTML elements to prioritize readability and user experience. +#+slug: minimalist-website-redesign + +I know what you're thinking: "ANOTHER blog post about redesigning the website?" + +Yes. Another blog post about redesigning the website. I enjoy it, what can I +say? + +I wrote my latest post about redesigning from a monospace-driven, +terminal-styled theme to a more natural paper-inspired theme. However, it left a +nagging feeling that something was missing. What if I took it further? Was there +really any reason that I had any of that CSS at all? + +| Old Theme | New Theme | +|-----------------------------------------------------------------------+-----------------------------------------------------------------------| +| https://img.cleberg.net/blog/20250905-human-website-design/after.png | https://img.cleberg.net/blog/2025-09-25-minimalist-website-redesign/minimal.png | + +* Inspiration + +I /briefly/ touched on my inspiration in the last post (hint: wabi-sabi, sho ga +nai, brutalism, minimalism), but I didn't expand on the /why/ for these +concepts. + +So, why? The minimalismtic approach to web design has resonated with me for a +long time. But why minimalism? + +Officially, "the concept of minimalist architecture is to strip everything down +to its essential quality and achieve simplicity." + +This is a blog. It also has pages dedicated to describing who I am and what I +offer. Therefore, the essential quality is the information delivered by the +words and the design on your screen. To effectively communicate this +information, I tried to understand how online information is best read. + +With all of that out of the way, let's get on with it. + +* Core Changes + +Below is a quick audit of the original style sheet and markup, and the elements +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]]. + +*HTML* + +- HTML is now minified +- File tags +- Links to site pages are moved from the =index= to the =about= page +- Wiki was removed entirely +- Added a few =
= elements to compensate for some of the CSS removals + +*CSS* + +For the CSS, I removed /everything/, except the following rules. + +#+begin_src css +body { + max-width: 50em; + margin: 1.5rem; +} + +nav ul { + list-style-type: none; + display: flex; + padding: 0; +} + +nav ul li { + margin-right: 0.5rem; +} + +img { + border-style: none; + width: 100%; +} + +table { + border: 1px solid #111; + border-collapse: collapse; + width: 100%; +} + +pre, +pre>code, +code { + font-size: 0.9rem; +} + +pre { + border: 1px solid #111; + margin: 0.5rem 0; + padding: 0.5rem; + overflow-x: auto; +} + +time { + display: block; +} + +:not(pre)>code { + color: #f00; +} + +@media (prefers-color-scheme: dark) { + body { + background-color: #222; + color: #eee; + } + + a { + color: #add8e6; + } + + pre { + border-color: #eee; + } +} +#+end_src + +That's it. No frameowk, no vendor prefixes, no unnecessary selectors. + +This gave me an almost-pure HTML site. It's freeing. It's liberating. It's +comfortable. + +* Reading Experience Benefits + +Recent research shows that line length between 45–75 characters maximizes +reading speed and comprehension. By constraining the container width to ~50 rem +(≈ 100 characters), we stay close to that range while still staying wide enough +for my personal preferences. Additionally, a lean stylesheet eliminates *FOUC* +(flash‑of‑unstyled‑content) on slower networks, delivering a smoother +first‑paint experience. + +* Final Thoughts + +I am very pleased with the new theme and will see how it holds up to time. Based +on enabling short-term server logs to debug issues (before promptly wiping it to +the ether), I notice that most visitors to my site are via RSS anyway. Either +way, I hope you reach out if you have an opinion; I always enjoy hearing from +you. -- cgit v1.2.3-70-g09d2