rhys.wtffeeds

← Back to Coffee now

Setting up the blog (II): initial design decisions

Coffee nowOpen original ↗

Graphic of notepad on computer

In my previous post about setting up the blog, we were at the stage of having decided on, and got at least somewhere, with getting Hugo working to generate a website, but with much design still to do. And although design can be just going with your preferred template for the content, I want a little more input than that because I do just want a ‘feel’ that says ‘coffee now’ to me, like when you’re sat on the sofa with a coffee.

First, both James and I were sure the home page should just comprise recent posts, not a separate intro page; by far the most likely reader is in fact me or James, followed by friend or family - this isn’t a niche blog, there’s no effort been made on search engine optimisation (SEO) and no social-media-promoting activity, just personal musings. And I certainly don’t need me introducing to me.

At this point, it was a case of going through the Hugo themes to find one that appealed. At first we looked at tranquilpeak; however, using this came with some doubts, including on the licence (GPL vs MIT), on technical complexities and some just questioning the look. We are now using PaperMod.

Screenshot of Hugo themes

When you think about blog post home pages, although there’s some more-involved stuff you can do with areas set aside to present featured posts or scene-setting stuff, the basic decision is on the positions of the posts and the position of the navigation.

Sketch of possible layouts

The PaperMod theme uses a top navigation and has a list format for posts. My preference is for a simple list, as I feel it’s a less-cluttered look, with a far more-obvious relationship between the date of the post and where it appears on the page than with a tiled look. Sidebars are still very common on blogs, but that often seems to be because they are seen as a place to put adverts.

There are some features of the PaperMod theme that are great for our blog (for instance it has a search, which I didn’t realise was even possible for static sites), but there are some other features that we’d like which are currently missing. For example, we want to show thumbnails on the post summaries on the front page, we’d like to find an image gallery and plan to make the navbar and image handling more responsive for use on mobile.

Having surveyed several of the freely available Hugo themes, it seems apparent that while certain customisation is straightforward, if you want precise control of the look of your site then you will need to do some work to achieve this. There’s plenty of work ahead to convey ‘coffee now’ comfort.

So, back to other choices, rather than a search for a perfect theme. First colours, and what I’ve gone for, and it was me choosing here, is some darker and mid-tone teals and coral, along with some neutrals. One thing I’m keen on is making sure the tone is not too gendered. Although there are some pink websites that are very appealing (one of my favourite sticker shops, papershire, is all about the pink), there’s no doubt they do often feel feminine to me, and this isn’t my blog - it has content from James too.

website colours sqiggle

Second, fonts. Although there are many thousands of fonts, it’s really not easy to pick out the ones that work best. There are great resources out there on fonts, with Google fonts hosting about a thousand freely licenced fonts in itself. For the body text, it’s obviously best to avoid anything too stylised, and, honestly, even though I have an aversion to the ‘g’s in some fonts, looking at you Trebuchet MS, the differences are so subtle that I can’t think the reader really notices, and you begin to feel, well maybe there’s a case for just using a websafe font (one likely to be available to on all browsers, think, Arial, Verdana, Helvetica etc.; I went to the bother of styling these - did you notice?) after all. [I’ve just noted that none of these supposed websafe fonts are available on our current version of ubuntu by default, but it uses something similar.]

But then I found a company that had a post about work their designers had done showing 50 Google font pairings for real to give a idea of how the fonts truly work in action, and that helped us pick a heading font and body font to use.

There’s still work to do, but if I were to wait for perfection here, the blog would never be live. So in true ‘website under construction’ mode here’s a list of to-dos to help me keep track:

  • Privacy policy
  • Add thumbnails to summary cards
  • Sort floating images for mobile viewing
  • Change text sizes for mobile
  • Update navbar
  • Favicons
  • Privacy policy
  • Comment up css so it’s clearer
  • Add JavaScript image gallery and lightbox

[note from the future - all done!]

Extra shots

Credits

Comments (0)

Comments (0)

No comments yet.