JoshMcCarty.com Redesign for 2016

— Web Design & Development

A Quick Note: This blog post is long overdue. It’s been sitting in my drafts for about six months, so keep in mind that most of this is in the context of late 2016.

It’s been a few years since I paid much attention to my personal website from a development perspective, so I decided to refresh the design and bring it up to date with some current best practices for websites. I was never totally satisfied with the way my last redesign turned out—the colors didn’t provide a great contrast ratio in some places, the typography was a bit awkward, and I didn’t incorporate some of the more advanced features and techniques that I had hoped to. Rather than iterate on that theme, I decided to make a clean break and start fresh.

Tooling I Used

As before, I started with the latest Underscores theme and borrowed some code snippets from my other WordPress projects to get up and running quickly. I also made a switch over from Grunt to Gulp to get some more exposure to Gulp (I’ve used Grunt quite a bit in the past, and Broccoli via EmberCLI, but never Gulp). For my development environment I use Vagrant with the WPLib Box. As for tooling, I used Git Bash for command line stuff, GitKraken to manage my commits, Atom for coding, and of course I used Node with Gulp to run Sass, PostCSS (with Autoprefixer), imagemin, sourcemaps, and browsersync.

Usually I reach for LiveReload to handle CSS injection, but this time around I opted for BrowserSync. This was the first time I’d used BrowserSync and it did not disappoint:

https://www.youtube.com/watch?v=h7MDNbJBdfA&rel=0

In addition to the software I used, there are a lot of WordPress plugins that are helpful for developing WordPress themes. I reached for the Developer plugin, which makes it easy to quickly install a bunch of other useful plugins for development (I particularly like the Debug Bar, Monster Widget, Log Deprecated Notices and Log Viewer plugins that it installs). I also used the Regenerate Thumbnails plugin so I could regenerate image sizes if/when I changed their dimensions while working on the theme. As a last step I used the Theme Check plugin to make sure my theme meets the standards of the WordPress.org theme repository.

Web Development Upgrades

Compared to my last theme, this 2016 theme takes advantage of newer web technologies, tricks, and best practices. Here are a few highlights:

  • Used lobotomized owl selector to minimize margin declarations
  • Simplified layout with a single column design (this is a content-focused blog, after all)
  • Used system font stack instead of helvetica/arial
  • Reduced CSS file size from 106KB to 39KB, a 63% reduction compared to my previous theme
  • Reduced home page total size from about 1MB to about 300KB
  • Used SVG icon system from Icomoon with deferred JavaScript polyfill instead of icon font
  • Animated SVG logo:
  • Subtle nav menu CSS animation for dropdowns at larger screen resolutions
  • Subtle nav menu button icon CSS animation at smaller screen resolutions
  • SVG “gooey” effect for tag cloud (because I just kinda like tag clouds; works best in WebKit/Blink):
  • Dedicated Social Links menu for WordPress that automatically inserts the appropriate SVG icon for supported sites
  • Latest WordPress features since my last theme, including site icon, title tag, and selective refresh.
  • WordPress Customizer settings, including settings for the copyright/credits text in the footer
  • Removed JetPack and created a custom plugin to replace the couple of features I was actually using

In addition to those code changes, I upgraded my hosting to PHP 7 and switched to using a LetsEncrypt SSL certificate instead of a paid one. I’ve been using a CDN for serving assets for a while, so I think my website is performing better than ever. I may tweak some of the caching settings for WordPress, but otherwise I’m very happy with the performance improvements.