Exploring retro web design

I have spent quite a bit of time working on the design of my website. I didn't wake up one day and come up with a full idea for how I wanted every page on my site to look. As I have added new pages and features and learned more about the web, my thoughts on how my website should look have changed. For example, when I learned about focus styles and how they can help make a site more accessible, I added focus styles to my links (if you press "tab" on your keyboard to navigate around links, you'll see the background changes to a distinct blue colour).

I am content with the style of my website so I reuse its main components across all of my web applications, from my feed reader to my webmention receiver. I have an aesthetic and I like it. However, I was recently thinking that design is never really a solved problem on the web, just like art in the real world is not a solved problem. You may have written a song but that doesn't mean you never need to write another one again. Likewise, you may have created a website theme but that by no means prohibits you from making another one.

Retro website design

Recently, I have been in the rabbit hole of exploring retro web design, specifically the late '90s and early '00s eras of web design. The Web Design Museum has some great examples of old-school websites. What appeals to me about sites in that era is that they were incredibly creative. There has been a modern resurgence in creative web design—you need only look at modern CSS to see what is now possible—but the retro aesthetic appeals to me more than modern designs.

I love how retro web design was mostly not "clean" and often used many default HTML styles like fonts and link colors. Retro designs were rough around the edges but got their point across. I looked at the official White House website in the Internet Archive and I wish I had seen the internet at that stage. I do not intend to romanticize the era of early web development: there were issues, especially with regard to the accessibility of some designs. But I feel a connection to older websites.

So I decided to build my own retro theme.

My "retro" web site

I now have a separate website called retro.jamesg.blog. On this website, you will see almost exactly the same content as my main site (give or take a few changes because I am still figuring out how everything fits together). But the content will look a bit different. I wrote a couple of CSS rules to make the site feel a bit different. I also made a HTML change to add a sidebar to my site. Instead of using an orange background with dashed borders in my menus, I use a white background with a grey sidebar. My links use different colours. My headings are now maroon instead of the royal blue they are on my main site.

Here is how the retro design looks:

You can see my homepage is roughly the same in terms of content—all my blog posts are listed and I have the same description as I do on the top of my main site—but looks very different. The new style was inspired by the prominence of grey and white in older website designs and by a more adventurous use of colour where appropriate.

The implementation

You may be wondering: why is your new theme on a subdomain? Could you add a button that lets me easily change theme?

My theme is on a subdomain because my entire site is generated using Jekyll, a static site builder. This means that every web page is pre-written before it is added to my site. I cannot change web pages without relying on JavaScript. I did not want to add JavaScript because I like my content to use HTML and CSS where possible.

I cannot add dynamic features such as a theme change function to my website without fully rewriting the site. I did not think that was appropriate for this project because I am just exploring new themes. Although I admit moving over to a dynamic site it did cross my mind. A dynamic site would let me give visitors the option of switching themes without having to host a duplicate site on a subdomain. I may still explore this in the future because dynamic sites have other positives.

Wrapping up

Making the new style did not take that much time. The design is still rough around the edges. I need to test more web pages to make sure they work as expected. I still have not decided how I want to render my social pages such as my likes and bookmarks. More thought is needed. However, I have a version one with which to play and experiment.

I like my retro design because it is a new slate. I reuse many style rules from my main site but have plenty of room for experimentation. I do not see the retro design becoming my main site design any time soon but I have to try new styles to see what really suits me. Ultimately, the style I choose for my main site needs to be accessible, easy for visitors to navigate, and to feel nice to me. Those criteria are met with my existing design but I want a playground to explore new designs that may also meet this criteria.

Also posted on IndieNews.

Tagged in website.