Recently my personal site passed 20 years. I’m not 100% sure on the exact date it went online, but Smigit.com looks to have gone live sometime around January 2024. Over that time I’ve had multiple iterations of the page, and in recent years have more recently changed the domain to courtenay.net after a short stint as courtenay.io.
I thought it’d be interesting to go back and look at some of the designs over the years with Archive.org’s Wayback Machine. In many cases I didn’t even recall having used certain designs. Over time the site has certainly evolved from a more journal (stream of conscious) like platform with initially a forum attached, to something I’ve used more sparingly for blogging. The shift potentially has aligned with the rise of other social media platforms that I increasingly used around 2010. By 2020 I had de-emphasised the blog aspect entirely and had just a bit of a portfolio/cv style page in a design that never fully got fleshed out, before bringing blogging back more recently.
The Internet of January 2024
Before I jump into the screenshots I’ve taken, I thought it’d be fun to note what 20 years of the internet looked like.
- In January 2004, MySpace was 5 months old. Facebook would not arrive for another 13 months as “TheFacebook”, and it wouldn’t be until September 2006 that just anyone could sign up (initially Facebook was limited to people with select college email addresses).
- Gmail would not be announced until 3 months later, on April 1 2024, as an invite only beta. It would launch with a 1GB mailbox that would spend several years expanding its capacity daily. It was not until Feb 2007 that signups without an invite were possible. Microsoft responded to the initial Gmail announcement in 2004 by itself announcing in June that it would increase their Hotmail services mailbox from 2MB to 250MB.
- YouTube would not launch until December 2015, almost two years later.
- Twitter, Instagram, Google Maps and most other common platforms did not exist.
- Internet Explorer had 80% of the browser market, with version 6.0 being around 55% of that.
- Lastly, WordPress was at the time 8 months old. It would go on to become a dominant platform online for hosting sites with reportedly around 43.1% of sites in 2024 using it. While I wouldn’t use it day one, I did move to the platform relatively early on in its life (during the 1.x period).
With the recent changes I’ve made to the site and in particular the goal of making the site more responsive, I’ve gone back and looked at how I display text. Until now I’ve gone by what looked good to my eye, with no real consideration for established accessibility guidelines. This led to the previous setup where I had a ‘hero container’ of 1100px with a default font size that by default would be around 16px. It’s largely been something I got away with ignoring as I wasn’t concerned about mobile experience, but as soon as that became a concern, I discovered my current font setup was not scaling well to mobile.
Turns out that best practices for prioritisation of readability is to have lines of text that are roughly 45 to 75 characters long. This is noted time and time again on the web as something to aim for, and the more I see examples of the more I agreed there may be some merit to that guideline. The layout I used previously far exceeded this and was running at lines of around 120 characters per a line. It wasn’t horrendous as the page was clean, but other sites were easier to follow. To try and get closer to this target I’ve made the following changes:
- Reduced the site hero container to 900px.
- Increased the padding between the main container and text, effectively making the text region around 800px.
These two actions decreased the amount of horizontal space for text. As I have no plans for vertical navigation, multiple columns or lots of graphics, it was necessary to drastically reduce the canvas width. So far, I think it looks fine and the extra white space frames the text well. Even with these changes lines were running long, so I additionally:
- Increased the desktop font size.
Right now, I have fonts set on desktop to the equivalent of 20px. The blog is largely just written content so having larger more present text allows that to take centre stage and makes the articles in turn very readable (in my opinion). A blog post, 4 Reasons I Use Large Type by Mike Anderson, lead me down that path and I think it has worked well for me.
After making those changes, I found that when I flipped to mobile that text was now much too large. To fix that I’ve decreased the root font size that all text scales against on mobile is 80% of what is used on desktop. I also drastically reduce the page borders on mobile.
The net result of the is that currently on desktop lines are around 80 characters while on mobile it’s around 55. I’m happy with the result.
Counterintuitively, and probably to my detriment, I haven’t settled on a font yet. Depending on whether I change that then I may be forced to experiment with the above numbers some more, although the targets will remain the same.
Something to note is that I’m also using scalable font sizes where previously these were fixed. This was important to allow people to scale text if they so desire. While above I noted 16px and 20px as the target output, this assumes a default text zoom at the browser. Actual fonts are being rendered using rem versus px, which makes the sizing relative to a base sizing to improve scalability. The text should scale gracefully for people with non-standard text settings.
Lastly, another useful tool for web development and font layout is this golden ratio tool. Recommend using this as a starting point as it helps to inform vertical spacing and other layout elements that I’ve begun to consider and also contribute to the presentation of text.
New website content is coming along. I’ll be updating this post as I go to list changes, as well as where my priorities are. As it stands, I’m largely making this up as I go and haven’t gone in with any sort of prototype, so there might be some back and forth on design and some pages will be broken for a bit.
Priorities
- Fast (Performance)
Looking to massively improve site performance with a lighter design and better server setup (more considered caching and optimisations). Pretty much there already but will strive to not let that slide. Ohh, and I’ve moved the site to a much faster VPS instance. All in all the previous homepage was very graphic heavy and slow to load, and I’m looking to get away from that. - Good page benchmark in general
Along with the actual speed, I’m looking to ensure accessibility and other factors that Google Page Insights or GTmetrix might measure. - Responsive design
I’ll be giving attention to mobile that I didn’t previously. - Blogging content back to the front
With the previous redesign I removed emphasis on the blog component of the site. Thing is, I never could think of much static content to include. I’m bringing the blog content back. - Non ‘article’ blog post
Following the previous point, I’d like to post more but I’ll hopefully look to have support for a few post types that aren’t full articles. Something I can churn out quickly. Not sure how these will look, and it may just be a templated blog post with stock images. We’ll see how that plays out.
Changes
- Brand new header, which is responsive and scales to mobile
- Retired old homepage and brought blog to front
- New blog template
- Removed contact page (I’d never have answered these anyway!)
- New caching. Now using FastCGI via NGINX and Hummingbird Pro (possibly don’t need both, but we’ll see).
- Cleaned up image optimisation, fixed some lazy loading etc
- New Single Post page
- Fixed spacing under bullet list
To Do
- Improve mobile performance
- Disable unnecessary Javascript (Including theme elements)
- Review column use of flex
- Fast (Performance)
