$ ls -R ~/








Live With Coal, Plan For A Diamond – The Redesign


Date: 06/10/2019

If you’re reading this in June 2019, you’re looking at a new redesign of my website. To celebrate 20 years of being a web designer/developer (yes, I started when I was 16 years old, crafting HTML templates and designing video game mod sites), I opted to pursue a theme contrasting the previous, ego.

If you read the artist statement on my homepage, you’ll understand a bit more on the theme. This blog post is going to focus on the redesign goals and technology.

The Redesign Goals

There were 3 main goals I wanted to achieve with my redesign, and they are as follows.

  1. Increase the speed of the site even more. With the previous redesign, nearly every piece of art was SVG based, and it loaded FAST. This time around, I wanted it to be even faster.
  2. Create a more minimal look and feel. The previous design was cool, but it was a bit busy with the illustration work. However, that was moreso tied to my own rebranding, emphasizing the curved pillars of my new logo.
  3. Refactor parts of the site to speed up future redesigns. Since I switched to Oxygen for my website, I’ve realized I can essentially utilize Custom Post Types and Advanced Custom Fields to speed things up significantly.

How did I achieve these? Let’s dig in to the details and technology.

Increasing the speed of the site

This was an easy one. First, I stuck with SVG artwork, but also kept things slimmer. Fewer points in the SVG artwork means faster load times. It may not seem like much, but we’re fine-tuning a sports car. I also switched from jQuery-based animations to CSS; this results in not just faster load times, but faster APPARENT load times. jQuery is just used to handle the triggering, which it is fantastic for. I’m not bashing jQuery for animation; it actually is pretty good, but there are differences between utilizing jQuery to handle animations and CSS. CSS is just plain faster because it eliminates steps, which eliminates CPU cycles and code.

Creating a more minimal look and feel

The redesigned art is based on work I’ve done for my resume web app I’m building. It is clean, simple, and accessible. Also, tying into the speed, I eliminated two typefaces and went with just one (my current favorite, Brandon Grotesque). The readability at slightly larger sizes is great, and it is just plain beautiful for a sans-serif typeface. At first, I swore by it just for headlines, but now I see it’s beauty in body text. As well, I refactored the navigation to be more accessible, breaking pages into categories.

Refactoring parts of the site for future redesigns

This was actually the easiest part of it all. Essentially, all I did was create a few additional custom fields that I will always use in every redesign (such as a primary and secondary headline for every page), and integrated those into my templates in Oxygen. I also created a secondary page template to cover the header, while the primary just handles the navigation icon and the footer. Redesigning my site this time took just about 6 hours; in the future, it can take even less, especially if I move to Gutenberg for content layouts of basic pages.

What about the technology?

As I noted, I’m utilizing Oxygen builder for WordPress, custom post types (using CPT UI), ACF for custom fields, and I’m still using the REST API for pulling content into the navigation (seriously love working with a REST API).

I considered switching away from my current hosts (Siteground, which have been fantastic) and utilizing a VPS, but thought against it just because of the time investment for a VPS setup for this sort of site. I am actually going to be running a VPS soon for other projects, but not for this website.

Switching all my animation to CSS has been weird for me. It feels like I’m reverting back to old technology, but realistically, I’m utilizing the best stuff available for what I’m doing. Seriously; all jQuery does for me is pull in content in the navigation, and handle the triggers for the various animation states (aside from hover, of course). All totaled, I’m just using 61 lines of Javascript. 11 of those are triggers for the homepage animation. The rest handles the nav REST API, scroll trigger, and entrance animations.

Enough geeking out. Let me know if you catch any errors with the redesign!