Site redesign 2017

This post will take approximately 2 minute to read


Last week, I snuck out a redesign of hankchizljaw.io. Beneath the fresh new look and feel, a lot of infrastructure work has been done.

Goodbye Kirby, hello Jekyll

Kirby has served me incredibly well over the last couple of years. Along with lightening speeds, the API was lovely to work with and allowed me to focus my time on the front-end, which is where I like to be.

I decided to use Jekyll this time around for its seamless integration with GitHub pages. It’s also an absolute dream to work with. I hope that Jekyll and GitHub’s combined flexibility will allow me to add some nice features to this site with very little friction.

Building on an MVP

Like the previous major redesign, this one has been produced with flexibility in mind. This first MVP phase is a direct copy of the old site with a new skin. The only difference other than look and feel is some URL changes.

It’s also been built in a way that will allow some of the new features I have in the roadmap to be seamlessly integrated without too much new code being added.

A focus on progressive enhancement and page speed

Since I’ve been back working in a design agency, I’ve gathered a lot of pent-up frustration about bloated web pages with heavy, often unnecessary elements. Some relief has been gained by producing the most pared back design this website has ever seen.

By using system fonts and critical CSS, the website has been achieving some pretty impressive results. This is then enhanced by asynchronous, JavaScript based CSS asset loading.

Taking inspiration from Tachyons and Atomic Design, I’ve tried to abstract most of the design into tiny, reusable components where possible. Although this is just a personal site, it’s a good prototype for some of the scalable concepts that I’m currently playing with.

Since the last redesign, my component based CSS has improved a hell of a lot. I owe that to my work in a product team at WriteUpp where we developed a design system that was shared across multiple platforms.

I’m going to use this combined experience to continue moving down the component library / style guide route with my future CSS work with even more confidence.

The future

This is going to be an continuously developing project and you’ll be able to keep and eye on its GitHub repo.

I’m hoping to introduce a portfolio to this site in the near(ish) future. I never really show my work, so it’ll be a good place to share my side-projects and proudest “real” work.

I also plan to introduce some offline support with service workers. I’m up for anything that’ll make the site faster and more performant.

Lastly, I always say this: I want to do more writing. I’ve got some opinions on the future of design and development that I’d like to share. I also feel like going back to my roots by putting up some JavaScript and CSS tutorial posts too.

Keep your eyes peeled.