Skip to main content

Website version 6

Posted in Accessibility, Design and Development

It has been around 2 years since I released version 5 of this website; that version didn’t do much visually but it represented a complete rebuild. Version 6, on the other hand, is almost entirely visual, with very few behind-the-scenes improvements.

Although there has been no real branding change, version 6 is the biggest single visual change since version 4 in December 2014. So what’s different?

No more light heading fonts

The first thing you’ll notice is that the headings are a lot punchier. On larger screens, the headings follow the golden ratio type-scale, so the heading levels are both distinct from one another and beautifully proportional.

No more Georgia

Georgia is great; it:

  • looks great
  • has serifs, which aid reading; leading the eye from one letter to the next effortlessly
  • was designed specifically for the screen nearly 30 years ago, so it’s legible on any quality of screen, even any relics that have survived since the early '90s!
  • is a system font, built in on nearly every device out there, so readers have no extra time to wait while it downloads, and it eats up zero data

Georgia was the typeface I chose for body copy on my website and replacing it was a tough decision, but the right one.

Despite all of its advantages, its serifs (the wee kicks and flicks on letters) were causing problems. Serifs can make letters less easy to identify for some people, such as those with dyslexia, so from an accessibility point of view I felt a move to sans-serif everywhere was the right thing to do. Previously, only headings were set in the sans-serif FS-Me, but now it’s used for everything. What sweetens the deal even further is that FS-Me was designed specifically to be as accessible as possible.

The downside to this is that I have to serve three fonts:

  • Regular
  • Bold
  • Italic

Where before I served two (Regular and Light), so there’s a little more burden on the user. I offset some of that by ensuring the fonts download without blocking the rendering of the page, and of course there’s the compression and CDN that Netlify provides to lighten the load.

All left-aligned

Versions 4 and 5 used a mixture of:

  • centre-aligned text to draw attention to content like the page heading and calls to action
  • left-aligned text to make body text easy to read

With version 6, readability has been prioritised, so all content is left aligned. This also makes content easier to read for visitors who use screen zoom/magnification or have a visual impairment like glaucoma: less zig-zagging to find the next chunk of content.

A couple of technical changes

It’s mainly visual, but I did make a few tweaks under the bonnet.

No more Susy

For years, I’ve relied on Susy for my grids; I even gave a talk on it back in 2015! But with the simplification of the overall layout, I moved to the more lightweight CSS grid for the handful of places I wanted to lay elements out to a grid.

Critical CSS

The other technical change I made was to use critical CSS. This is a good performance boost as the above-the-‘fold’ styling is all contained in a <style> block in each page’s <head>, meaning no requests for the initial page styling; the below-the-fold styles are still in a separate stylesheet, but it’s loaded asynchronously so doesn’t block page rendering.

It might be irrational, but I’m not sure I trust critical CSS tools to do as good a job as I would, so I separated the critical styling from the non-critical manually. I’m sure there’s more optimisation I could do, so it would be good to hear from anyone who’s had success with the automated route.

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.