New accessible theme for 2021

It’s been a long time since I updated the style of this website. In fact, the last time I sat down to work on the design was way back in 2012, when I picked Manifest as the base for my own CSS customizations. I loved the theme, as it was geared toward writers and writing, which I was doing considerably more of back then.

I like having a simple, minimalist site that puts the content first. In fact, the only real problem I had with using Manifest was the lack of a proper search bar at the top of each page. I have posts going back some twelve years on here, and even I rely on the search when referencing old material. My only option with Manifest was burying a search bar in the footer, which wasn’t ideal.

However, other problems have cropped up over the years. As WordPress.com upgraded their infrastructure, I was constantly at the mercy of subtle changes that required further custom CSS to keep the site looking the way I wanted. Eventually the theme was “retired” altogether – I could still use it but without any support or guarantees from WordPress.

Before you say, “You’re on WordPress.com, why not switch to self-hosted, or something else” – I ran self-hosted WordPress for years. I was a nut for making tons of customizations directly in the code to get exactly what I wanted, and was fine being completely responsible for the maintenance of the site. But I found myself spending more time on the design and maintenance of the site than actually adding any new content to it.

I moved to WordPress.com specifically so I could pay someone else to keep the site up-to-date and running, while I got away with a little personalization here and there. I’d rather spend my time focusing on writing posts.

So, despite having to tweak the CSS every year or so, I’ve been mostly happy with the setup. But as the web has moved to be more mobile friendly, I found a new problem: the old base theme just doesn’t have a mobile version. This has left the site with a functional, but completely plain, default Google AMP site on mobile. I don’t have any explicit issues with it (I love the built-in search at the top), but it felt impersonal for a personal site.

Then recently, I was trying to browse the site on some vintage hardware with older browsers and I wasn’t really happy with the results. For such a simple looking site, there was obviously more complexity in the underlying HTML and JS than I’d imagined. I thought maybe it was time to switch to something simpler, and by chance discovered that WordPress.com maintains a list of Accessibility Ready themes. Having an accessible website, especially an accessible mobile site, goes a long way toward making your site simpler and easier to use for everyone. Also, some of the most rewarding work I do in my career is in making software more accessible.

As a quick test I ran my site through a web accessibility tester and oof, I was not happy with the results. So I decided to finally sit down and update the site after almost nine years.

My number one goal was accessibility, but my stylistic preferences were still for a single-column layout with a simple menu and search bar at the top. If possible, a bonus would be built-in support for nice social icons. While none of the accessible themes were “perfect”, after a lot of experimenting and testing, I finally chose Floral. All it took was a font change and some minor color adjustments in CSS to make it into something my own.

I’ve also gone through and cleaned up all the pages to mesh better with the new theme. Not a lot of work, and I’m sure I’ll find little tweaks that need to be made here and there in the next few weeks, but overall I’m happy with the result. The site still looks pretty clean and minimalistic, but now more accessible and with some much needed mobile support.

What do you think?

/jon

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.