A Focused Redesign
A Focused Redesign êŽë š
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!
