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, it was much more important to have a place to write than anything else. This year I am setting up a new business, so having a large detailed portfolio on my site was not a major priority. However, I still needed some examples of recent work for the times where I might pick up short-term contracts, so the portfolio was designed to be simple and quick to view, without getitng bogged down in fancy presentation.
I have also started to write creatively, with a view to having my work published in the future. So the main focus of my new site is writing. First there’s the Articles section where I’ll be writing about web-development, writing and personal experiences. The Fiction section is a place to practice writing creatively and share that work. It’ll be pretty awful to begin with I’m sure, but I’m not worried about that, it’s all part of the process. Lastly, the Reading section is a memory vault to record the books I read. I’m intending to write reviews on Goodreads in the future, so my reading list will also provide links to those reviews.
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. Only the Portfolio and Reading sections contain images, and even these are only small. I kept a simple palette and chose to use a serif typeface for a more classical feel. 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 at a number of 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.
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. It does work well, but whether it’s actually saved me any time is another question entirely.