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.
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:
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.
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
- 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 🙌
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: