Site updates and musings on web design and UX
People find your chairs and grab a bite, it's time for another colophon post.
Although my technical exploits have mostly been focused elsewhere in recent times, I keep making small changes to this site. One of these small changes ended up becoming a bit of a rabbit hole, and I thought it appropriate to document and share the discoveries I made down there.
Title change
For almost two decades the domain of this site, "Lars-Christian.com" has also doubled as its title. A little while back, I finally changed that.
I think I originally decided to use the domain as the title for reasons like "branding" or some such. If you see the domain repeated often enough, you're more likely to remember it, right? Regardless, I no longer have any notions of monetising this site. It is a strictly personal and not for profit hobby project. To wit, I don't even make use of analytics of any kind her and have no idea of anyone actually reads what I'm writing these days.
Having internalised this, it led to the liberating realisation that I could name the site whatever I wanted. Branding be damned!
My original idea was "Lars-Christian's blog". That felt a little bit limiting, however, as I think of it as something more than strictly a blog. So I went with "Lars-Christian's website" instead.
I also took changed up the styling of the title slightly, ditching the weightier all-caps look for a slimmer look that's in line with the normal text on the site. Here are screenshots of the old and new header look:
Whenever I open the site I enjoy seeing the new title and style, so it's a big success!
Updated blockquote styling
When I relaunched this blog back in late 2023, I took the default Wordpress theme and ran with it. That's to say, I spent a lot of time customising Twenty Twenty-Four. I literally went through every single element shown on the site and tweaked it to my liking.
Well, as far as the many idiosyncrasies of the block editor would allow.
Upon switching from Wordpress last year, my aim was to fatefully reproduce the look of my site with my own, handwritten styling. Doing that was much, much easier than I had feared and took far less time than creating the style in Wordpress in the first place.
Since then, I've made many small tweaks to the look. Being in full control of both markup and styling makes that fairly easy. Although starting from scratch is always tempting, I've made a point of instead trying to embrace incremental improvements. The site's look and feel is an ever-evolving representation of my own preferences.
Over the past year, that has been ever inching in the direction of readability and "user friendliness" over visual expression. (It should go without saying, but I will express it clearly nevertheless: I am a hobbyist. When I talk about these things, I am talking of my own experience of these things, rather than professional or even academic ideals.)
On that note, I recently discovered that posts heavy in blockquotes (like this one) were far more readable in my feed reader than in my web browser. The boxed look of the quotes, although I once enjoyed it visually, completely broke the flow and made the post appear disjointed and incoherent.
Here's a screenshot for reference:
This needed fixing.
Luckily, the fix was obvious. I've not come across a style that preservers readability than Reeder's default quote style. So I decided to copy it.
Doing all my "designing" directly in code, I spent some time experimenting with colours, padding and margin. Eventually I landed on a slightly dimmed colour for the vertical bar that frames the quote. And, although it looks awkward on first glance, preserving standard paragraph spacing is the best option for reading flow in my opinion. My gut "design sensibility" tells me that the quotes need more spacing to separate them from the text. After spending hours comparing by reading and scrolling through various samples, I'm convinced that it is detrimental to readability.
As a caveat, that probably necessitates identical text styling. I wanted to make quotes more distinct by reducing the font weight slightly or just italicizing the text, but it immediately disrupted the flow of my reading. The result is a more "boring" look overall, but I'm convinced it makes actually reading the words a far more better experience.
Enough rambling. Here's a comparison of the same post segment shown above, only with the new quote styling:
Document navigation
The web is over-paginated. That's my opinion, anyways.
I frequently come across pages containing no mare than a standard 13" laptop viewport or two in height before the document is split into multiple pages. I get why this is done. If you're generating content programmatically, pagination is a simple way to break it up and safe-guard against big, unwieldy documents.
A better approach is to think about the nature of the content you're presenting and consider if and when breaking it up into multiple (paginated) documents makes sense. The answer is of course a big and annoying "it depends". Relevant questions might be:
- What's the nature of information in the document? Is it a post or a note or some such? Or perhaps a "slide deck" presentation? Perhaps a list of some kind?
- How much content is there? Pagination only starts making sense when you're presenting a lot of information.
- In which way are you presenting the information? List-based information can be presented in bullet point lists, or tables, or card view and probably numerous options besides.
And a thousand more questions, besides. I asked myself many of these questions when creating this website. Most often, the answers have seen me land squarely in the camp of eschewing pagination. Especially when the oft-forgotten tool of on-page is taken into account.
Take my reading log for instance. It's a fairly big document. Nevertheless, for reasons outlined in my post about making the reading log, I decided to opt for a single-page approach. That approach only works with clear and understandable on-page navigation.
In the case of my reading log, I went for a two-tiered navigation:
- Sections: Books I'm reading, books I've read, books I want to read and books I didn't finish
- Year read: A sub-section of the books I've read, grouping them by year read
I've seen a number of different approaches to structuring information like this. Some split each section and sub-section into a separate page, others a sort of hybrid model where you dynamically generate the document based on reader actions like scroll and clicks. And that's the beauty of the web! Everyone can experiment and choose whatever they like. I'm just sharing the thoughts that landed me on a particular solution.
For someone who reads a hundred books per year, it's an entirely different proposition. And likely requires a different solution than the one that's right for me who reads between one and two dozen books each year.
Alright, I'm rambling. All of this was just to let you know that I've added some extra on-page navigation to the "big-pages" of this website. That's the reading log and the posts and notes archives. The title of each section or sub-section now has a right-aligned link that brings you back to the table of contents for that section. I think this improves the navigation and overall experience of using these pages of my website.
To close, I'll add an observation related to my musings above. The posts and notes archive pages really illustrate the why you shouldn't go for a blanket solution, but instead consider the content of each page.
My current structure works well for the posts archive, which maxes out at around 50 yearly posts. The notes archive, however, contains far too many entries. The number of entries necessitates a sub-section grouping the notes by month to make navigating the content more bearable. That requires a bit of development for my static site generator, however.
Let's see if I get to it someday.