Back to blog list  

Brutally Simple Website Design

Feature Aim

Create a simple, clear design that builds in better performance and accessibility.

Development Notes

I took a mobile first approach, which I’ve always found works well.

One tricky bit was having an ‘about’ section that is fixed on desktop but aligned with the rest of the content on smaller screens. Simple enough. However, on the home page I wanted this information at the top of the page but on blog post pages, such as this one, I wanted it at the bottom. I also didn’t want duplicate the content.

This is where the static site generator came in handy because the same block of code can have a different class on different page types:

<%- partial('_partial/about', {class_name: 'pg-post-about'}) %>

I suspect there is a better, cleaner way to do this with Flex or Grid but I will modernise this in future.

I used the Lighthouse chrome plugin to run a performance, SEO and accessibility audit.

Results of Lighthouse performance and accessibility audit. Performance: 98, accessibility: 100, Best practices: 94, SEO: 100.

This seems like a decent starting point. I’ll aim to keep the scores around this as I add new features.

Cross-browser consistency was checked on Browserstack.

^ Go to top


I'm Patrick Grey, a web developer working in Lochgilphead, Argyll, Scotland.

I dabble in web development, e‑learning & motion graphics.

Email me or find me on Twitter: @PatrickGreyCoUk