Website Number 9

Friday 19th June 2015

Today I launch my new fully-responsive website. Several weeks in the making, launching this site represents a new path for me as I set out on a new venture.

Purpose

My previous site was built in 2011 and while it served me well, it suffered from many problems:

It was not responsive, so it only looked good on large screens and wasn’t very usable on smartphones.
The original design was only for a portfolio because I wasn’t considering blogging, so when I came to adding a blog, the design was inconsistent and looked messy.
I left it languishing and over time it came to be a bad advert for me, rather than a good one.

For this new version of my site, the main focus is writing. I’ve started to write creatively with a view to try and get published in the future. I’m sure it’ll be pretty awful to begin with, but I’m not worried about that, it’s all part of the process. Perhaps it’s a mistake to write in public as a newbie—the criticism might be awful—but I can always remove it if the trolls get too loud.

Clean & Simple

I wanted a very clean design that first and foremost would be a place for me to write. I had previously kept different blogs over the years at different sites (you may remember Resonant Edge, Palemovie, or Frisk Design.) But I’d never had a focus on any of these blogs, writing sporadically about a broad range of subjects. Unsurprisingly my interest had waned and the blogs died.

The new design is very lightweight and focuses on text. I kept a simple palette and chose to use a serif typeface for a more traditional reading experience. On large screens, Charter will be loaded as a webfont, while on smaller screens a system serif will be chosen by your browser. This helps keep the mobile experience very fast.

The site is fully responsive and should work well across all screen sizes. It was important to have a good reading experience on all devices, so the text size has been optimised for a number of device breakpoints.

Design and Build

I built the site over several weeks, updating some of my workflow in the process. Initial large-screen designs were put together in PhotoShop and once I had an art direction that I liked, I wrote the HTML templates mobile first.

I didn’t use any frameworks (I don’t use them at all if I can help it - they are usually too opinionated for the way I work), but I did use the Susy flexible grids tool to handle the responsive layouts. There was a fair bit to learn there and I’m not completely happy with how it turned out, but it does work pretty well.

I chose to use Craft CMS for the back-end of the site. I did briefly consider a flat-file system but they have so many limitations that I knew I’d be restricting the future flexibility of the site. In addition, I wanted a GUI for writing my articles, one that would work on a smartphone or tablet, and flat-file systems are utterly awful on that front.

Once I had all the HTML templates built, I started to integrate them into Craft. I’d not used Craft before, so there was a learning curve to get over, but it was fairly painless. Craft has a great templating system which is pretty easy to grasp. The initial build took about 4 days, but I ended up re-factoring several times as I learned more about Craft.

The Craft build probably took about 2 weeks altogether, which seems a long time when you look at the apparent simplicity of the site. The big time sink was something I’d not really considered: designing in the browser. As I’d not designed all my templates up-front, I spent far too long experimenting with different layouts and re-did a lot of work many times. This is the dangerous black hole of unlimited experimentation possibilities, something I need to avoid on future projects.

Optimisation

The site is pretty well optimised right now, although further improvements can be made. For now I’m happy with the overall speed: most pages weigh in well under 150Kb / 15 requests. I managed that by avoiding nearly all JavaScript and limiting image use. Only the Portfolio and Reading pages come in higher. I did choose to use a web-font for larger screens: Charter is much more readable than many of the serifs available on devices.

I chose to use Gulp to minify/concat all my files, but getting it to work exactly how I wanted took far longer than I expected and even now I’m unsure if it was the right choice. It adds significant complexity and dependencies to what should be a pretty simple workflow. Whether it’s actually saved me any time is questionable.

Onwards

Now that I have a new site that actually works the way I want, I am keen to get started on using it. I’ll be posting links on Twitter when I publish anything new, but If you’re interested in keeping up-to-date automatically, you can subscribe to the RSS Feed.