Updated Website Look and Feel

2020-05-16 · Creativity >> website

I took some time to properly set up a web developer environment with this useful shell script. I was using the Github web editor (!) which without live preview, made it very challenging to update the CSS. But now I’m all set up to develop locally and git push to the server when ready!

I’m proudest of the following:

  • Found a font I really like–you are looking at Merriweather Light (font weight of 300), inspired by The Plain Text Project
  • Implemented Kevin McGillivray’s typeguide.css, which is in turn inspired by Butterick’s Practical Typography. This ensures proper font size proportions that is also responsive for mobile viewing
  • Changed color scheme to match my Word of 2020 🔥
  • Changed the date display format to ISO 8601
  • Moved the category tag to the same line as the date
  • Removed social share links to Twitter, Facebook–I never use these functions on other people’s websites, and they are antithetical to Indie Web Principles.

I had previously chatted with Kevin about the website and what was bothering me, and I found the process of articulating the exact issues helped me solve them quickly, instead of being stranded in the vagueness of “this looks off.” Here are some screenshots from our conversations–the annotations look hilariously messy too, because I did them quickly using the Preview app.

Old Website 1 Old Website 2 Old Website 3

After this experience, I have decided to put a new mantra on my todo list: “Do it badly and articulate why it’s bad.” I feel that this mantra helps me push through the initial perfectionist stage, since I am presenting a prototype with all of the caveats I see myself. And they can be fixed!