Making of this site

05/05/2020
So I've finally made a simple, minimal website for myself and I am pretty happy with it. This post will detail some of the ideas and reasoning I took that ended with the final design you see here. I hope it is informative.

Development

Concept

I've always been a big fan of minimal design, the lightest elements needed to convey the message. When planning this site, I always knew that it was going to be basic. Simple column layout, text driven menus, static pages and sparing use of basic colour pallets. The content is the MVP and the design should get out of the way.

I'll be hopefully writing a lot, so text needs to be presented correctly, with semantic html used for the correct elements. Styling around paragraphs are perfectly fine with default styles, it renders well, but I want to play around with the other elements such as headers, photos ect. Print media is an influence, namely column based publications that disregard flashy cover pages for more simple layouts that maximise space for content. #insert simple layout photo

Technical

From a technical standpoint, software minimalism is key. I've imposed some pretty restrictive limitations how the site will be built, these restrictions are to aid in "creative" thinking/design and to also learn. My HTML and CSS skills are okay, but I wanted to learn some new techniques for implementing functionality that would normally be lazily built in Javascript or have some library imported to handle it. Some of the restrictions are:

  • Performance is paramount
  • No Javascript1
  • No or limited 3rd party dependencies
  • Static pages, optimised images, audio and video
  • Semantic HTML 5 elements (article, section, aside, blockqoutes, sup ect...)
  • Clear visuals that are presented when needed but hidden when not
  • Implement effects and functionality (animations, ui elements) with CSS only
  • Consistent visuals
  • Allow for easy parsing by "read later" services2
  • No new tools to learn, unless the tool provides a signification increase in productivity

The technical aspects of this site are rather straight forward. It's all static html, built from the ground up on each page. I have a common layout document that I copy and rename, then I type away. I manually add the link to the homepage. It's all very old school but it's simple and it doesn't seem to have created a maintenance issue (i'll see if this is the case in the future). There no fancy compiler for less or vue, no shadowdom, no cdn, no ci pipeline. It's all just files. I was thinking of trying to write in markdown, then convert to html. But I don't see what this will bring me over writing in an editor and use markup directly. Maybe in time, I'll see the benefit. These technical restrictions really made me learn and plan what I really wanted this site to become. They allowed me to improve my html and css greatly, even though I only used a very small subset of each, I do feel like I learnt from it.

Tools

In keeping with the minimal philosophy of this site, I also used a very small amount of tools to build it. Namely, I used Visual Studio Code for all the development with some addons. These addons are:

  • Code Spell Checker
  • CSS Formatter
  • GitFlow 4 Code
  • GitLens
  • HTML CSS Support
  • HTML Snippets
  • IntelliSense for CSS class names in HTML
  • Path Intellisense
Most of these tools were used to have a productive editor, VSC is a bit spartan by design which I like but I needed some extras. I also decided on using VSC to handle all the source control needs for the site. With extensions, the git functionality is adequate.

I also plan to make some code snippets for elements like aside, blockquote ect... These snippets will help with keeping the sites markup correct and easy writing. This could be where markdown could help, but I assume I'd still need to make some export rules for each markup node. In the future, I envision maintenance on topic pages and the homepage may become tedious, so I'm planning on building a small generator program to read the files in the folders, find the header and create a link. An afternoons works maybe?

Progression

Here's some progression screenshots I made while developing the site.
The first screenshot I took, showcasing the orignal aside design
Showcasing the orignal aside opacity when not selected
Mobile aside design
Before font selection
Testing the Georgia font
Testing the liberation font
Final font, Orkney
Redesigning aside
Aside progression
Intro progression
Block quote progression
Dev env