Media

Composing engaging content within wpmu.org style guidelines

Prior to reading this article properly, please give it a brief scan. Notice the images / screenshots used, and their captions. Feel the overall flow of the article.

Would you agree that it’s quite a nice reading experience? I sure hope so, the system behind all of this took a lot of trial & error to arrive at. Please read on.

This video is embedded at 647px width

With new design, wpmu.org has inherited a set of rules that one is to follow when writing articles. Whilst seemingly restrictive, those rules are designed to help you produce articles that visually engage your audience, whilst maintaining a great reading experience. To achieve this, all of the content for wpmu.org articles is strictly adherent to the grid. I won’t go into grids, but here’s a good intro to grid systems if you are interested. In order to achieve a balanced grid-based layout we have re-thought the image uploading process, providing you with a variety of options, read on to learn to use them to your advantage.

Supersize

Supersize is the largest image variations that goes outside of the article content creating an interesting dynamic. The screenshot below showing the wpmu.org media uploader panel is Supersize.

wpmu.org image uploader panel showing a variety of image / caption layouts that are available for you to use. All of those variations are based on a grid system that forms the foundation of wpmu.org post content
wpmu.org image uploader panel showing a variety of image / caption layouts that are available for you to use. All of those variations are based on a grid system that forms the foundation of wpmu.org post content

A supersize image should only be used once per article, and is the 1st image to be used as well as the Featured image.

Large

Next up we have a Large image variation. This one also goes outside of the post content, however by 100px less than the Supersize one. Enough to create an interesting layout, but without overwhelming the reader.

this image shows the relationship of supersized image (top) to a paragraph of text & a large format image (bottom) as well as how they work with the grid

You are encouraged to use large format for images that have a solid aesthetic appeal to them. Showcasing an aspect of a good website, or a great UI. Whilst there is no height limit, please try and keep those images in widescreen format. Large format images split the content, and thus tall large format images should be avoided where possible. The image above is 400px high, and that is as tall as we want to go (unless necessary). Banner / hero type images also work well with this format.

Ratios

Here’s where the real fun begins. In addition to the large & supersize image formats, you are also presented with 4 image:text ratio options that you can either align to the left or right side of the content.

1to4-ratio

Those ratios can assist you in creating a pleasant flow of content, that is both visually appealing and is a great reading experience.

A good way to create an interesting, dynamic layout is to insert images with captions in a ‘Z’ pattern, so image left – text right, then text left – image right and so on. The image to the left of this content has no caption and is set at a 1:4 image – text ratio, aligned to the left. Because it doesn’t have a caption to the right, the main body of text wraps around it. This would also be the case if the image had a bottom caption. It illustrates what is meant by the ‘Z’ pattern mentioned before.

It is important to avoid layouts where there is no body copy separating the images. Images should never appear stacked, and should always have some text between them. Images should be used in moderation, as a means of embellishing your content. Image captions should eloquently describe the image and should be used as much as possible as they are usually read when a user simply scans the content to decide whether or not to invest time into reading the article properly.

Image composition / direction

Using the correct images sizes for the ratios will help you achieve a good quality image that isn’t re-sized by the browser, and is thus crisp. Additionally image quality is improved by focusing on the core elements you are trying to show.

Whilst it's tempting to take a screenshot of the whole WordPress Admin area, it is more beneficial to use a crop and focus on the feature / area that is new. That way use doesn't need to scan, and you don't need to use ugly arrows to point to feature :)
Whilst it’s tempting to take a screenshot of the whole WordPress Admin area, it is more beneficial to use a crop and focus on the feature / area that is new. That way use doesn’t need to scan, and you don’t need to use ugly arrows to point to feature :)

The image above – by the way – is 4:1 ratio, with image to the left, caption to the right.
The 4:1 ratio requires a caption to work. The reason for that is you can see the caption copy goes outside of the body paragraph width. If you were to try and omit the caption, the paragraph text would be forced to wrap around the image, but in a very narrow column, which would not look great.

By adding a hover state & hand cursor, it is instantly obvious that this screenshot is focusing on the ‘Feedback’ link.

Sometimes adding an element of interaction to a screenshot can make it feel more real. If for example I’m directing user to the feedback panel, it makes sense to capture the hover state of that panel & position the hand cursor over it (if it isn’t already there, which depends on how you take screenshots / OS). The image to the left is of 2:3 image:text ratio with the caption positioned below the image.

– follow image ratio recommended sizes
– create interesting image content
– show interaction
– focus on the details

You will notice how the this bit of copy will wrap around the image & the caption. Nice! To be honest, at this point I’m running out of ideas of potential copy that can occupy more space so that I can successfully demonstrate the remaining ratio in use, and lorem ipsum just doesn’t cut it, so I must persevere. You will notice that I am using the ‘Z’ pattern here for my images, it’s actually a very common layout pattern on the web. A good number of landing pages / homepages use the same idea.

this image is 3:2 ratio, with caption under the image.

Conclusion I guess…

Hopefully I have managed to demonstrate a nice variety of layouts that are possible to achieve with our image uploader. On a tablet in portrait mode, the layout remains the same and the sidebars are removed focusing on the article content. If you have a tablet handy, check it out. On a mobile device however, we run all images inside the content columns with captions being below the image. Please try to be creative with your media, happy writing!