Back to blog list  

Brutally Simple Website Design

Monday, 11th December 2017

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.

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