The website IsMyWebsiteWellDone is an example of how I would envision the ideal outcome of my work. It’s not just about the test result, but also about ideal responsiveness and adherence to all accessibility rules, along with a pleasant WordPress user interface that I can explain to the client within 5 minutes.
Responsive
As you can try out, the website displays perfectly on any screen width. Not only font sizes adjust, but also paddings and margins, including all columns. And the most incredible part is that there is not a single mention of media-query in the entire CSS.
The main inspiration for the CSS system for me is Andy Bell and his Progressive Enhancement. In its simplicity, it means that the website will somehow function even on the worst and slowest devices, and the better the device, the better the result. To put it aptly in Andy’s words: “Be the browser’s mentor, not its micromanager.”
Speed
The biggest credit for speed goes to the Flynt starter theme. It’s an absolutely fantastic WP theme that utilizes methods like JS islands / Partial Hydration, thus loading JavaScript only when necessary. For example, JavaScript for mobile menu loads only on mobile devices, and JavaScript for the slider loads only when the user actually sees the slider.
Usability
The theme combines the ACF plugin for easy creation of page blocks and the Gutenberg editor for posts. Therefore, it takes me roughly 5 minutes to explain to the client, how to adjust the content on the website. The ACF allow me to create what’s called the headless CMS, meaning that the client just fills fields up and chooses content, that they want to show on the website, all the design happens by itself.
Accessibility
Lately, I’ve become more interested in this often overlooked aspect of web application development, and I actually feel a bit ashamed that I didn’t start addressing this aspect long ago. In my opinion, it’s absolutely crucial, and paradoxically it has far-reaching implications beyond the user environment for the disabled because general accessibility rules are very often applicable to overall UX.
The website where I tried my new workflow
https://ismywebsitewelldone.eu/