The redesign and development of one’s own site is an excellent chance to really hone in on your craft. Somehow I let mine sit stale for nearly 4 years, and in web development, that’s basically a century.

One of my main reasons for the redo will seem like a flip-flop from last time: I wanted to bring back in the sweet flexbox goodness of Bootstrap 4 (in 2014 I was trying to get away from the bloat that Bootstrap brought with it).

I was spurred on towards this re-development due to being fresh off the heels of a large-scale website redo where I was able to figure out a slim build tools process for working with Bootstrap 4 (read about the build tools process on my blog).

In addition, the redesign brings about a modern, clean vibe, and addresses a few issues from the 2014 site.

Accessibility

In 2014, I was very new to ideas about accessibility, and gave no thought to it when choosing my color scheme. This resulted in issues like the following when using an accessibility checker like Wave:

Example of contrast fail for orange and blue text with Wave

This time around, I ensured that my primary color had a high contrast ratio at AA and AAA levels for the appropriate font and style. My lovely purple passes with a 4.52. The rest of my palette is largely supporting colors, with the pink buttons able to pass due to using large text plus the hint of a drop shadow to help it out even more.

I was able to bypass issues with images by using none in my base theme, and ensuring alt text added for those in blog posts.

The requisite skip link is available, and form fields for my contact form are visible and clearly labeled.

Performance

Several measures were taken to ensure excellent performance, including:

  • Inline SVG instead of images in the base theme
  • Use of Bootstrap utility classes v. writing new, extra CSS
  • Compiling of only necessary Bootstrap scss along with my own to produce one condensed css file
  • Zero use of javascript files for base theme, with the only script of any kind that loaded by Gravity Forms
  • Moved to SiteGround [ref] for hosting and enabled all caching and optimization available

The home page weighs less than 60kb including Google Analytics, and loads in approx. 700ms on average 🙌

Transparency

My work for this theme is available on a public Github repo, so if you’re interested in my process as a developer, please check it out.

In closing, a comparison of the old design to the new:

Left - old design, Right - updated design