I created this site to take part in the time honoured tradition of having a web pressence and being able to independantly publish content most people will never read.
Inspiration
Inspired by brutalist web design and the extreme miniamilism of the 1kB club.
Most of my work recently has been spent researching and testing ways to make websites more sustainable. This has bled into this site as well.
Design Choices
I set myself a few restrictions, this site has to be:
- fully valid HTML5
- accessible
- (text) content first
- no unecessary images
Since the 1kB club was one of the inspirations I did set myself the stretch goal of a:
How
Most of this is targeted at the home page but will apply to other pages as well. Most of this advice can be found at ht.bt but duplicating here with my own spin and a few extras, and incase Brad's site goes down.
HTML
Head tags:
- color-scheme: is set to
<meta name="color-scheme" content="dark light">
,
this was a big win for page weight as it gives you dark mode without any css - favicon: is set to
<link rel="icon" href="data:,">
,
which avoids an unesecary request saving 300+ bytes - title: keeping these small but relevant for screen readers
Optional extras that have been included:
- charset: the encoding this page uses (UTF-8)
- viewport: important for assistive technologies and smaller screens
- html lang attribute: important for screen readers to understand the language of the content
- description: another one for screen readers
Valid HTML5 tags:
while the last section is called 'Head Tags', the 'head' tag doesn't actually exist in the markup of this site. The only tags included in the home page are:
- 'html'
- 'main'
- 'footer'
- 'nav'
Believe it or not but 'p' and 'li' and a number of other tags have optional close tags (full list).For the home page, only unclosed 'p' tags were used, saving 32 bytes.
CSS
This is the extent of the CSS on the home page:
<style>
*{font:1rem "Century Gothic",serif;}
body{width:90%;margin:auto;}
main{border:.1rem solid;text-align:center;width:fit-content;padding:2rem 3rem;}
main *{font-family:monospace;margin:.4rem auto;}
main hr{width: 50%;}
</style>
Most of this is related to the business card design. Bit of fun but ultimately pretty costly for what it is.
Acessibility:
Most of the accessibility on this site is done through using proper HTML5 and keeping content simple and text based. Where meaning isn't clear, 'aria-label' attributes are used. This is something I may come back to on the home page as a design that relies less on these attributes would allow for more content.
Optimisations
Minifying
I rolled my own minifier for the CSS and HTML based on GNU tr. It loops over all html files and runs the following:
cat $file | tr '/t/r/n' > ./build/$file;
Being so simple, it does require you to write code with only essential spaces in the CSS and HTML. Be careful minifying HTML5 as the specification requires spaces between attributes to be valid.
With 'pre' and 'code' elements being used on this page, the minifier did have to become more complex and track opening and closing 'pre' tags.
For the home page this minifying brings the page weight from 1067 to 990 bytes at the time of writing.