Making Websites

A sample post with everything in it

Some random stuff about my blog design and Craft CMS, in a post originally intended to demonstrate how all the design elements work together

2 Jul 2017 /

2 Jul 2017 /

One of my main objectives in this blog design is to have an interesting and varied page layout, with different sizes of image running inside and alongside the main text — interacting with the text, and adding extra meaning to it, from the images themselves, and from the captions below them.

This objective quickly becomes quite complicated, as the responsive layout must adapt to a wide range of screen sizes, all the way from an iPhone up to a 27 inch monitor. A good example is at the top right of this page, where, at desktop screen sizes, the code has to calculate if there is enough room to display ‘Related posts’ alongside either an image, or a long column of text. If the space is too near the top of the page, too narrow, or too short, these posts get pushed down to the bottom of the page.

Also on this sample page, I’ve included a few different styles of layout on one page. This makes everything a bit messy, but it’s useful to see how all the elements work together, especially when they shift around the page whenever the browser’s width is changed on a PC, or when the screen is rotated on a phone or a tablet.

Es Camp de Mar

Es Camp de Mar / Enlarge

I’ve had a huge amount of fun and frustration, learning to design and code for all this. I’ve got a large iMac screen, and I now constantly (and obsessively) adjust the width of my browser’s window, to see how each page looks at different sizes. In real life, actual users almost never do this!

And now, as I begin to populate this blog with real posts, I need to refine and finalise the typography and layout styles…

«  /  »
This is an h5 heading

This is an h2 heading

Alongside the h2 heading (or above it, depending on your window size) is an h5 heading. Many years ago, I used to call this a ‘hanging indent’ (memories of Microsoft Word 5.1 for Mac), and I used it a lot in business letters to help narrow down the main text column width on A4 paper.

Next up, here is the block quote styling:

With so many different elements crammed in together, this page will probably look a bit of a mess. But I won’t properly find out how well these styles work together, until I actually start to use them for real posts.

Bob Dylan, Home

This little paragraph has been added just to separate the (bold) quote above from the (bold) h3 heading below. Writing copy solely to improve the layout is a surprising concept, but in fact that’s exactly what copy editors spend their days doing.

An h3 heading (and a digression about Craft’s control panel)

All the elements on this page are input using a simple text field, radio button, and tick-box style interface, in Craft’s wonderful ‘Matrix field’ control panel. All the images and their captions can be instantly resized and moved to a new position, and everything can be re-ordered using drag-and-drop. In fact, the Matrix field was a key reason I chose Craft CMS for my blog.

With so many different elements crammed in together, this page will probably look a bit of a mess. But I won’t properly find out until I actually start to use them for real posts
Bob Dylan, Home

But it’s not perfect. It’s great at laying out pages with precise control, but it’s surprisingly cumbersome to use for heavy editing. The control panel’s layout is shamefully wasteful in vertical space, meaning there’s far too much scrolling, and there are too many clicks needed to expand and collapse Matrix boxes. Radio buttons are vertically aligned, not horizontal, and there’s a huge menu bar on every Redactor text box.

And Redactor text editing is still buggy. It injects random non-breaking-spaces into text, needing a Twig filter to remove them. Cutting and pasting between text boxes is especially fiddly, quite buggy too, and it would be so much nicer if you could just split the text box.

But, I’d better stop here, and write this again somewhere else as some polite feedback. Because Craft’s control panel is still better, and more powerful, than anything else I’ve seen. And, maybe it’s just me? I might be the only person who actually writes copy directly into Craft?

«  /  »
This is another h5 heading

Another h2 heading

The little arrows on the right, just above this paragraph, can be used as post navigation in much longer posts to move quickly up and down between h5 headings. The anchor id, and the two link arrows, are added with just one click in the Craft control panel. (The final link arrow on the page is inactive, but I couldn’t think of a way to grey it out.)

Lorem ipsum…

The Latin gibberish used to prototype web pages

This is some placeholder text to fill out this sample post. For some reason I dislike ‘Lorem Ipsum’ text, and I prefer something I’ve actually written. Like this. But it’s tedious writing this stuff, and it’s tempting to waste time writing, correcting grammar, and generally fiddling with it.

Probably it would be better just to copy a chunk of something interesting from the web. But then my mind goes blank, as I try to think of something that would be appropriate, and not confusing or distracting. So I start with Lorem Ipsum, and I gradually replace it as the project evolves.

The h4 heading has a fine line below it

My workshop with work in progress

My workshop

  1. This is a small ordered list
  2. The h4 heading has a fine line below it, so this list is visually associated with the image alongside it
  3. This is a really nice pattern for specifications, or a review, or instructions, or whatever…

This paragraph, immediately after the list, has a hidden spacer inserted above it to push it (always) below the image. This ensures that lists are more visually linked to the images alongside them. It’s also possible to insert another line below the list, instead.

An h6 heading

With the text following tightly spaced to it. Italic + bold creates a highlighted word in the heading.

Another h6 heading

With some more text to follow on tightly.

Splitting long runs of copy into separate chunks before inserting images, horizontal lines, and pull-quotes — is really, really tedious. I’m going to build some grouped components to simplify this, using Craft’s standard Matrix block fields, but even when this is done, it’ll still be a fiddly drawn-out process. I remember just how easy it was to split a run of text into two blocks in Squarespace…

My workshop with work in progress

This is a two image row / Enlarge

My yellow drawer unit

Immediately above a three image row… / Enlarge

My workshop

This is an image row, with a longer caption on this image…

Our geese in winter

With three images…

My workshop with work in progress

All in a line

Above here are two image rows. These can jump a bit in size when the screen size changes, but it’s more important to preserve the balance and consistency of image sizes on the page, or else everything starts to look jumbled, and becomes harder for the reader to follow.

I’ve spent a huge amount of time fiddling with all the different image and row sizes I’ve created, in all the different viewport sizes. Everything is a compromise, but my key objective has been to get a pleasing and balanced layout for every device size.

Like the rest of this page, there are too many variations next to each other. But hopefully, if they don’t look too bad like this, they’ll be fine when used more carefully.

Our Bromptons on a beach

This is another image row, with a caption that could break the grid…

My yellow drawer unit

This row has four images…

The rugged North of Mallorca

They’re in a row…

My workshop with work in progress

Just like this

There are lots of different sizes and locations for images (h3)

It’s best to avoid mixing too many variations on each page. But, if they don’t look too bad like this, they should be fine when used more carefully. (text bold)

This is some placeholder text to fill out this sample post. For some reason I dislike ‘Lorem Ipsum’ text, and I prefer something I’ve actually written. Like this. But it’s tedious writing this stuff, and it’s tempting to waste time writing, correcting grammar, and generally fiddling with it. Probably it would be better just to copy a chunk of something interesting from the web. But then my mind goes blank, as I try to think of something that would be appropriate, and not confusing or distracting.

Our Bromptons on a beach

There are even a couple of left-aligned image sizes — this is leftMedium / Enlarge

This is some placeholder text to fill out this sample post. For some reason I dislike ‘Lorem Ipsum’ text, and I prefer something I’ve actually written. Like this. But it’s tedious writing this stuff, and it’s tempting to waste time writing, correcting grammar, and generally fiddling with it.

Probably it would be better just to copy a chunk of something interesting from the web. But then my mind goes blank, as I try to think of something that would be appropriate, and not confusing or distracting. So I start with Lorem Ipsum, and I gradually replace it as the project evolves.

Our geese in winter

This is a rightMedium image / Enlarge

This is some placeholder text to fill out this sample post. For some reason I dislike ‘Lorem Ipsum’ text, and I prefer something I’ve actually written. Like this. But it’s tedious writing this stuff, and it’s tempting to waste time writing, correcting grammar, and generally fiddling with it.

Probably it would be better just to copy a chunk of something interesting from the web. But then my mind goes blank, as I try to think of something that would be appropriate, and not confusing or distracting. So I start with Lorem Ipsum, and I gradually replace it as the project evolves.

The rugged North of Mallorca

This is a leftSmall image / Enlarge

This is some placeholder text to fill out this sample post. For some reason I dislike ‘Lorem Ipsum’ text, and I prefer something I’ve actually written. Like this. But it’s tedious writing this stuff, and it’s tempting to waste time writing, correcting grammar, and generally fiddling with it.

Probably it would be better just to copy a chunk of something interesting from the web. But then my mind goes blank, as I try to think of something that would be appropriate, and not confusing or distracting. So I start with Lorem Ipsum, and I gradually replace it as the project evolves.

«  /  »
Bold italic in h5 looks like this

Below are three examples of grouped Matrix blocks

I’ve added this last section as an update, after working on a much later post. This later post is very long and full of images, and probably needs some aggressive editing — but I left it that way almost as a challenge to see how well the layout could handle it.

Anyway, these ‘Group blocks’ are collections of the same Matrix element blocks used on all the other page layouts. The Group block has tick-boxes to add things like a horizontal line before and after the block, extra spacing, an image with a slightly different layout behaviour, and bolder ‘bullet-list’ text styling.

Groups of Matrix elements like this make compiling complicated posts in Craft much faster, and less tedious. But I think there’s still lots of room left for improvements to Craft’s control panel UI!



Screenshot of Ulysses

A screenshot of Ulysses / Enlarge

  • This Group block will be used to describe things like products I’m planning to review
  • Or app screenshots
  • Or lots of other stuff I’ve not thought of yet
  • In other words, I hope that it’s a nice simple layout pattern that will work for all the things I’ll encounter
  • Text styling for lists is smaller and bolder than the default styling used elsewhere
  • Screenshots can go up to 700 pixels wide, and there’s a tick-box to add a shadow
  • And there’s another tick-box to double the resolution for the ‘Enlarge’ image (I’m still trying to decide whether to then change the link to read ‘Hi-res’)

Screenshot Of  Day  One 11 08 2018 16 18 25

Another screenshot, this time it’s Day One / Hi-res

  1. This is an example of the Group block layout for a larger screenshot
  2. All these ordered list items stay alongside the screenshot on desktop screens (and some stay there even on phones), making maximum use of the available width — whilst still conforming to the text column grid
  3. This much better than a single column layout, with the text always below the image, that’s more common on many websites


Ulysses Mac 1024

Group blocks don’t have to have bullet lists. They can use any of the default text styles, like this.

But, images in Group blocks have a slightly different layout behaviour, that pushes them further into the text column, to reduce its width and allow for the smaller font size in lists.

And it still looks OK with this default text styling.

Finally, here is my daughter’s favourite thing on my website, so far — the little star that automatically pops onto the end of the very last paragraph of every post.

Related links

  1. This one-minute video about Craft’s Matrix field shows how easy it is to add (and position) an image, or an image row, or a pull-quote
CommentsShowHide

so far / The default text after the comment count can be replaced in each post, like this