I spent last weekend poking around the outer edges of devices, browsers and websites, trying to find a way to make this site display nicely in as many of those places as possible. Of course, we can’t test every browser and device, but it’s worth trying some outside your everyday laptop or phone. In this case I opted for the Nokia 8110 and my TV’s browser.
Turns out even very simple sites can struggle to work everywhere. While designing for all screen dimensions is doable, accounting for browser CSS support is a lot more tricky. Before this exercise, I was merrily using a combination of custom and logical properties – both of which are brilliant CSS features – and assuming progressive enhancement would take care of the rest. It didn’t.
I ended up grudgingly dropping logical properties. During my experiments, I discovered the concept of restricted enhancement, and I’m broadly following its tenets:
Restricted enhancement limits all enhancements to those that solve specific accessibility, security, performance, or significant usability problems faced by people besides the author. These enhancements must be made progressively when possible, with a preference for using older or more widespread features, taking into account unorthodox user agents. Purely-cosmetic changes should be kept to a minimum.
So this resulted in a very minimal design: one
sans-serif typeface and no decoration at all. I quite liked it, but I’m not hardcore enough to not want some decoration.
But there’s a pay-off to non-designing a website: decoration is easy, even for someone as visually ungifted as myself. Every deviation from the minimal baseline has a clear and obvious effect. Adding a serif (our trusty Iowan Old Style on Apple devices, a more underused and possibly risky Calisto for Windows and an admittedly ugly Droid Serif for Android) lifted the feel immediately, and all it took after that was a bright, contrasting highlight colour and a rule running across the top of the screen.
Visually, I’ve returned to where I was when I started, but functionally the site – should! – be a lot more resilient across more devices and screens. Now I just need to rewrite the post that started this.