We recommend using the columns block to lay out process shots for instructions.
Galleries
We do not recommend galleries because they're not well developed and have undergone a couple changes - and we expect more to come.
Issues we see are:
- how alt text is set
- their use of captions
- spacing
- thumbnail size selection
Collages
Collages are an option. When using a collage:
- make sure to export as JPG (not the default in Canva)
- use a maximum of 4 images per collage, in a 2x2 grid
- if there's more than 1 collage (eg. steps 5-8), make sure the numbered list starts at the correct step (eg. 5)
- Note: we haven't tested whether screen readers read the number in numbered lists starting at a number other than 1, or whether they're treated as normal lists
Any posts created using collages can be left as-is, as they're totally usable.
Our opinion at Feast is that collages are an inferior solution to columns because:
- they require creating a new collage image
- most people design collages for desktop view rather than mobile
- the alt text is not as descriptive as you'd get from individual images
- there's missing SEO opportunity for better naming of images
- numbers/labels are needed on each image in the collage to properly associated it with the instruction step
- the instruction steps are are further spaced away from the image they're related to
- more scrolling is required between the image and instructions
With columns, each image is directly connected to the associated instruction, making numbering unnecessary, although still an option.
Columns
We recommend using the columns block for process shots because it uses the core image and paragraph blocks which are the easiest to manage for accessibility and SEO.
These are relatively stable blocks and unlikely to go through any major changes.
Rules for using columns:
- Use one column block per row
- there should only be one picture + paragraph per column
- Upload images at full width to the media library, but insert them at 360px width thumbnail
- Note: for re-use purposes and long-term maintenance, we would still recommend uploading the process shots at 1200px
- Use proper naming conventions for images (eg. recipe-modifier.jpg) for the images
We recommend allowing the columns to stack on mobile, which is the default setting. We've found that ½ width display on mobile is too narrow for text to be easily readable.
Adding columns
It's important to only use 50/50 column layout and one image + paragraph per column.
Adding another "columns block" for further instruction steps is simple:
Numbering the steps
While galleries and collages require numbering the steps (so that images and instructions can be correlated), columns don't require numbering.
On the one hand, the number doesn't provide much context to readers (step 4... of 8? or 62?)
On the other hand, it can be useful for screen readers and people making a recipe together, to reference specific steps (eg. "did you forget the salt in step 3?").
Numbering images can create a problem down the road if the recipe needs to be altered based on visitor questions - requiring a step to be added to the recipe for example.
We haven't received enough feedback to recommend or not recommend numbered steps.
Leave a Reply