I’ve been playing with the idea of having a personal blog for quite a few years. In fact, I’ve looked at so many WordPress themes, that for a while it became an obsession.
And although I started out not knowing what sort of blog design I wanted, the more I looked, the harder it became to find one I liked. Eventually, I realised that four key features of web design had become increasingly important to me:
A well-proportioned responsive grid
I’d often noticed, especially on news websites, how blocks of text and images get shuffled around when the screen size changes — whilst keeping all those elements and column widths carefully proportioned to each other.
This was unlike many of the WordPress themes I looked at:
- Where fluid text columns get stretched far too wide on desktop screens
- Or where images become grossly oversized on tablets and phones
- Or where excessive white space is added, just to separate out these competing out-of-proportion page elements
So, before I began making this blog, I spent ages trying to understand how some of my favourite news sites were designed. I became fascinated by their complex responsive behaviour, and I challenged myself to see if I could replicate this in a simple blog layout.
If you’ve got a big monitor, you can try-out the full grid I ended up with. It’s loosely based on The Guardian website’s column dimensions, and it starts at 1300 pixels wide, with 16 x 60 pixel columns, and 20 pixel gutters. As the screen narrows, there are no less than five other variations, each with a reduced number of columns.
Keeping to a minimalist design style, that evolved as I went along, I used this complicated grid (and endless trial and error) to create all the different layouts needed for my blog’s home page, archives, and single posts.
A variable and interesting single post layout
Although originally inspired by articles like this advocating less uniform ‘art-directed’ blog posts, my aims for this feature are still relatively modest:
- To create a variable and interesting layout, using the whole page width, and not just confined to a single column — with images, image captions, and pull-quotes running inside, and either side, of the main text column
- To position all these elements in a way that continuously interacts with, and enhances, the text alongside
- To include images only if they add meaning to the text, and size them in proportion to their impact and quality. In a personal blog, I don’t need huge ‘inspirational’ shots from Unsplash, or irrelevant thumbnails, just to fill space
- Finally, to make sure that each page’s overall meaning is easily discernible — even without reading the main text — just by scanning the headings, the images, and the image captions
In other words, I wanted to create an easy way to add a tiny bit of magazine-style layout into all my blog posts. I’m not at all sure whether I’ve succeeded.
A simple control panel to create everything
When I first started to design my new blog, I looked at a couple of the new WordPress drag-and-drop page builders. And not long before that, I’d worked on a Squarespace website, which had an amazingly fluid interface for splitting and dragging text boxes around.
But, I didn’t think that either of these would give me the control and flexibility of Craft’s Matrix field. By using Craft CMS, I’ve been able to build my own blog, exactly as I want it, almost as though I was making a user-friendly website for someone else.
Every layout element on my website is created in the Craft control panel, using radio buttons and tick-boxes to select feature posts, colours, sidebars, and more.
All the content, in blog posts and pages, is created like this, too — by selecting pre-designed content blocks — and then filling, re-ordering, sizing, and positioning them using simple control panel options in Craft’s Matrix field.
A better ‘archives’ section
Blogging mostly means writing in the moment. Yet all our dated posts build up over time to become a lasting record of our ideas and thoughts.
Unfortunately, the default ‘archives’ section in many WordPress themes virtually ignores this rich and valuable history, leaving it hidden to the new reader. Individual entries get featured on the front page, and related posts are highlighted wherever they’re relevant, but nowhere is there a good overview of the whole of the blog’s content.
So, I wanted a better archives section that:
- Displays the structure and scope of my blog
- Creates a visual overview for each category and month
- Offers a quick and attractive way of finding older posts
I’ve spent a huge amount of time on this layout, trying to balance its responsive behaviour with how well it will scale, when (and if) my blog grows. It’s still a work-in-progress!
The next stage…
Implementing these ideas in Craft CMS
All this functionality is standard in Craft. But for me it represented a huge and steep learning curve:
- I had to learn to deploy a local server using MAMP and CodeKit
- I had to learn how to use SASS in Zurb’s Foundation 6 framework to set up the complicated responsive grid
- I had to learn to structure a Craft CMS site and code it using the Twig templating language
- And, probably my biggest challenge (and mistake) of all — I ended up (unintentionally, and laboriously) doing almost all the design and layout work ‘live’ in the browser
I’ll add more about all these in future Making websites posts — the things that worked well, the things that worked badly, and some of the huge mistakes I made.