Skip to main content

Website Design

The very first website I ever made was around early 2003. It was written in Notepad and cobbled together from various WebMonkey tutorials.

It had a frame based layout with a side navigation, a header, footer and main content frame. I don't remember what the content was but it was almost certainty something to do with the Nintendo GameCube.

In 2006, I got the task of creating a website for our high school Solar Car Team. It's primary purpose was to display the logos of various corporate sponsors as well as progress photos of the solar car build. I used Macromedia Flash as we were learning that at the time in our Digital Media class. The website had colourful gradient backgrounds and animated buttons.

Over the years I've used various web technology including WordPress, ASP.net, Django, and for the past several years, I've been mostly using Express/React.js

2020 Website

When I set about creating a new website for myself I had several design goals

It should;

Jamstack - Old is new again

For this website instead of using a Content Management System such as WordPress, I decided instead to use a Static Website Generator called Eleventy.

Eleventy allows me to author posts in plain text files which use Markdown for styling. You still have the option to use HTML in these files which I do so for image layouts.

The next step is to create a few HTML templates which are then automatically populated with my content. These pages use a templating language called nunjucks to control how the content will appear on the page.

Once I have finished working on an update I can use Eleventy to compile an updated version of the site. As these are static pages, they are lightning fast to serve and can be hosted anywhere. A popular option is to host them on Github or Amazon S3.

Although this approach is not new and is quite similar to my first 2003 website, it's becoming increasingly popular and is often referred to as Jamstack.

Jamstack is about more than just static pre-rendered HTML pages. You can learn more at the Jamstack website.

Performance

As of the time of writing this (Jan 2021), it gets a perfect 100 score from Google Lighthouse in all categories.

Accessibility

I've tried to keep accessibility in mind for both the design and content of the website. One simple addition is creating a hidden link at the top of the page that jumps to the main content in order for screen readers to be able to skip the navigation menu. You can see this in action if you load a page and press the TAB button on your keyboard.

Analytics

In order to respect users privacy and reduce the amount of JavaScript that the page needs, I decided not to use Google Analytics on this website.

Instead, I use an old fashioned technique known as parsing server logs. I use NGINX to log the following data for each request;

This is logged to a file and then automatically copied to an database table where I can query it.

I wrote another post about this. Logging NGINX to a Database.