Websites need a clear focus

Earlier this year I re-launched my website as a mix of business card, portfolio and personal journal. It was a mess and I realized I’d made a big mistake.

I’d tried to combine my web design business, my book-cover design service and my personal journal into one site. I’d reasoned that as I’m selling myself, combining everything was the best way to embrace my online “brand”.

It was a stupid decision.

Visitors thought it was confusing. Those who came for my web-design work were confused by the book covers, and vice-versa. And the journal was full of personal random thoughts, when I should have been writing about my work.

I’ve no idea how I failed to spot the problems with this combined website. I was probably too close to it and hadn’t sought out any second opinions. Regardless of the reason, I needed to do something about it, and fast!

Separation of concerns

Obviously I needed separate websites for the web-design and book-design services, to market them to different audiences.

I also wanted to share insights about web-design and book-design, without that getting lost in personal blogs or film reviews.

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

So this means I’d need three different websites:

• Web Design Service
• Book Cover Design Service
• Personal journal

Phew. That’s a lot of work. I must be quite mad.

The first step was to remove all the personal writing and put that on its own site.

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…

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!