Launching my new writing site

Sorting out my websites: Part 1

Earlier this year I launched an “all of me” website: a confusing mix of business card, portfolio and personal journal. I was immediately unhappy about it and realised I’d made a big mistake.

Less than the sum of its parts

I had decided to build the last version of matthill.co to combine everything into one place. I needed an up-to-date web portfolio for my self-employed web design business. And I needed somewhere to start advertising about my book-cover design service. I also wanted to continue with my personal journal and writing reviews, something I’d been enjoying over the previous year.

It seemed logical to combine all these functions into one site. After all, as a self employed person, I’m basically selling myself, so having a site that reflected who I am seemed like the best way to embrace my online ‘brand’. How wrong I was.

Combining web-design and book-design into one site meant that neither got any focus. I had comments from visitors that it was confusing. Those who wanted to see my web work were thrown by the book covers, and vice-versa. It also didn’t help that my personal journal and reviews rarely talked about web-design or book design. I was using those to explore other things that interest me: I simply wasn’t writing about my work.

It was clear that combining the sites had been a mistake, and I needed to fix it.

Splitting the personal writing

I wanted the web-design and book-design services to get their own sites, so that I could individually market them to different audiences. I would design an overall brand that these two sites would share, with some changes between them for some personal identity. I also wanted to be able to write focused insights about web-design and book-design, without that getting lost in personal blogs or film reviews.

It was clear that the writing needed its own space, and I decided to focus on that as stage one. Getting the personal writing off the business site would automatically give more focus to my web and book design services.

So I’ve spent the last couple of months of spare time designing a new site for my writing. It’s a progression of the previous design: cleaner, less cluttered, and allows me to focus on my journal, my reviews and the occasional piece of creative writing. Ironically, the content on this new site is now ordered almost exactly like the site I launched two years ago. It’s funny how things go around…

Digital nuts and bolts

Design

The design is a progression from the previous version of matthill.co. It’s deliberately simple, but not so minimal as to be inexpressive.

I wanted to include good hero-imagery for the journal entries to set a tone for each piece. And I wanted the hero imagery for reviews to reflect the type of review. Previously all reviews had just used a small blurred image of whatever the thing was. For games that worked quite well, as I could blur a screenshot, but for books it failed: book cover art rarely lends itself to having a narrow strip cut out of it.

I decided to show off books in their natural state: each book is now displayed as a photo of an actual book. They all use the same template, and so when presented together on a large screen, it looks a little like a long shelf. Games, films, TV and theatre reviews were easier: I just use an image from the thing in question, cropped for best impact.

Given that the hero images would come in many colours, I needed a neutral colour scheme that would work with any image. The classic grey-and-gold was an easy choice. It’s a tweak to my original colours from matthill.co and works seamlessly with every colour image I’ve thrown at it.

I’ve updated the fonts too. Headings are now set in Geomanist, a gorgeous combination of geometric shapes with humanist proportions. Body text is set in Hanken Sans, a highly readable text face that’s easy on the eye and very clear at small sizes.

The layout is spacious and clean and should work well at all screen sizes. I’m especially pleased with the large screen design, which moves the hero image over to the side and crops it to the focal point of the image. I use the handy FocusPoint plugin in Craft to achieve this, along with the picture element for responsive images and the CSS property object-fit.

Restructuring

It was a lot of work to reorganise all the content to work for the new site. I use Craft CMS which is great in many ways, but it doesn’t have any kind of interface for changing how the data is stored. While it’s easy to change the URLs of whole sections in Craft, it’s not easy to move articles between sections.

On the old site, the writing was in one channel, but I found that hard to manage. With the new site I wanted multiple channels for the Journal, Reviews and Creative Writing. I had to manually hack the database to link all the relevant articles to their new channels. It was a lot of work to identify the articles and make sure I re-linked them correctly. I don’t enjoy this back-end work: it’s boring and error prone, but at least I didn’t have too many articles, less than 100. If I’d had thousands of entries, I’m not sure I would have bothered.

I needed to also capture all the old URLs on the old site and ensure that I redirected them correctly to the new site. In the end I wrote about fifty RedirectRules in my .htaccess to direct the old traffic from matthill.co to matthillwrites.com. Some rules match on wildcards, while others needed to be very specific, matching exact articles. I think I got everything that I wanted, but some old URLs I let die deliberately.

Finally I removed the writing section from the old site entirely. It still has the web-design and book-design sections, but the personal writing is gone and will no longer confuse visitors.

New web hosting

I also took the opportunity to move all my sites over to new hosting. I’m now hosting with Digital Ocean, with a control panel provided by Server Pilot. I also moved my DNS hosting to Cloudflare. I’m not a fan of devops work and was initially cautious of going down this route as I thought it would involve a ton of SSH work and using the terminal. But it turns out that most of the server management is all done using a simple web interface. The small amount of terminal work I needed to do had a great tutorial already available on Server Pilot (installing Image Magick).

The speed difference from my old hosting has been incredible and I’m delighted with the move. I’d been a customer of EzPz Hosting for 8 years, but my changing needs and their worsening customer support had made it an easy choice to leave.

Final thoughts

I’m really pleased with how matthillwrites.com has turned out. It’s a lovely clean design that works with the grain of the web. I love the large screen layout where I switch to text on one side and hero image on the other. I also love how I can choose the side of the screen for the image, depending on its content and focal point.

The first stage of cleaning up my sites is finished. Phase 2 — redesigning my business sites — is going to be a bit more work!