This content originally appeared on dbushell.com and was authored by dbushell.com
It’s time to lock-in! You might have noticed a change with my blog posts (take a look if you’re in an RSS reader). If you’re on a phone there isn’t much of a difference to see.
I love my design so this is more of a realign than a redesign. I know what you’re thinking, a single centred column of text? Inspired! But I really do think it’s the best format to read long-form content. My asymmetrical layout remains for other pages, including my notes blog.
Following my 2020 redesign I made a time machine (see behind the scenes) to visit my homepage throughout eight design iterations. My latest design has lasted a while and this refresh gives it new life.
Zoomers and readability
My new layout is friendlier to zoomers — I mean literally people who zoom-in. I zoom-in regularly. As I’ve gotten older my eyes have gotten knackered. I like big boring undistracted text. This change minimises layout shift with zoom. Last year I also made an experimental change mixing rem and px units to improve base font size adaptability.
Although I like reading big text I’m not a fan of huge text by default. I think it’s better to use sensible on-par font sizes and just avoid messing up the built-in accessibility inherent to the web.
I also like legible fonts and Atkinson Hyperlegible is the bee knees. I switched from Raleway, which I originally chose from a limited set of early variable web fonts. I’ve increasingly struggled with Raleway’s roundness. Coupled with its large x-height I find letters look too similar. I changed to 0xProto for code snippets too. With these two font changes my eyes feel ten years younger!
Dark mode
Speaking of eyes, mine don’t appreciate staring into a lightbulb. So much so that I almost regret making a career out of sitting in front of one. I’ve heard studies say actually dark mode is bad for me. All I know is my eyes get less strain from dark mode.
Contradictory, I prefer the design aesthetics of light themes. They feel friendlier, warmer. I find that dark website designs are dominated by the dark background. Whereas light ones give focus to the foreground allowing more expression. That said, in [current year] brands with a digital presence — all of them? — should have a colour scheme for both. Dark mode is an unnecessarily divisive subject. Don’t force dark mode, or light mode. Provide both and everyone is happy :)
But what should the default mode be?
My website has always been light with a hidden dark mode. (I’ve made the setting more prominent now; see top-left.) Although I’ve provided the option for “system setting” — this allows for automatic light/dark switching — I default to light because my “brand” was primarily designed with the light colour scheme in mind. That might be controversial! Should websites honour the system preference as default, or give it as an option?
I would default to it but:
- I’m not entirely happy with my dark colour scheme yet
- I’m not happy with CSS light-dark()
I expect in the next year (or two, or more) CSS theming options will be easier and I’ll default to the system preference. I’ll do it sooner if I get chastised on social media!
At the risk of sounding ungrateful I’m increasingly finding new CSS syntax and APIs to be rather unintuitive and unwieldy. It doesn’t help that rendering bugs and the Chrome-onlyness of new standards leaves me wondering whether I did something wrong, or it’s just broken. I’m not all that savvy to the politics of Interop, but please, can browser vendors fix the stuff we have, before kowtowing to the stuff Google wants? Styling a <table> is still a nightmare.
I keep ending blog posts with a moan. So on a positive note, I’ll link to Open Up With Brad Frost: Episode 1 — great stuff!
This content originally appeared on dbushell.com and was authored by dbushell.com
dbushell.com | Sciencx (2025-03-21T10:00:00+00:00) A Focused Redesign. Retrieved from https://www.scien.cx/2025/03/21/a-focused-redesign/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.