The art of the useful headline

A grid is read like a shop window: in a few seconds, from a little distance. The photos catch the eye, and the titles decide the click. A title that says “Autumn workshop” makes people open the card to find out what it is; one that says “Learn lino printing in two evenings, tools included” tells them before they decide.

This guide is about the three texts of a card: the title, the excerpt below it and the line of meta above it.

Try it

Say where the card leads

A useful headline answers the visitor’s first question: what will I get if I click? Some habits that help:

• Put the news first. “The reading room now opens at 8 am on weekdays”, not “Changes to our opening hours”.
• Be concrete. Numbers, places and dates are what people scan for: “two evenings”, “forty metres”, “sixty seats”.
• Keep it to one or two lines at the card’s width: about six to twelve words.
• Promise only what is behind the click. A title that teases (“You won’t believe this hall”) wins a click once and trust never.

Vague	Useful
Autumn workshop	Learn lino printing in two evenings, tools included
New exhibition	Forty metres of dyed linen fill the main hall
Opening hours	The reading room now opens at 8 am on weekdays
Supper club	The autumn supper: sixty seats, one menu, book by 12 November

The title is the link

Give each card one link, and make it the title. Screen readers list a page’s links by their text, so twelve links called “Read more” tell nobody anything; twelve titles do.

In the skin editor, the title is a layer that Shows the post’s Title (Layer › Look › Content). What a click does is in Layer › Click, a list of choices: Open the post for a grid of posts, Open the lightbox to show the post’s image, video or content over the grid. The demo above is a custom grid without posts, so its titles open each story in the lightbox.

To make the photo open the post too, set it on the card: Card › Click › Clickable part (None, Media or Cover) and On click. The visitor then has a larger target.

Under Layer › Look › Advanced, HTML tag makes the title a heading, such as Heading 3 (h3), so people who move through a page by its headings find every card.

An excerpt that adds

The excerpt is the second thing people read, and the most often wasted. It should add what the title leaves out, never repeat it:

• the title says what; the excerpt says for whom, how long, what it costs, what to bring;
• one sentence is enough on a card; the rest belongs on the post’s page.

Long excerpts break a grid’s rhythm. Layer › Look › Content › Shorten to cuts a layer’s text to:

Shorten to	What it does
Full text	The whole text.
Words	That many words, then “…”.
Characters	That many characters, then “…”.
End of a sentence (words)	That many words, then on to the end of the sentence: the next word that ends with “.”, “?” or “!”.

The demo uses End of a sentence (words) with 10: each excerpt keeps its first sentence and loses the rest, without a cut in the middle of a word. That works when the first sentence carries the point, so write excerpts that way: the best sentence first.

For a post, the excerpt layer shows the post’s Excerpt field or, when that is empty, the post’s whole text, which Shorten to then has to cut. A hand-written excerpt is almost always better.

Meta in one line

Above or below the title, one line of meta says what kind of card it is and when: “Workshop · 6 and 13 November”. Keep it to one line, and only the facts that help people choose.

• A layer that Shows the post’s Date, or a list such as Cat. List (the categories).
• A list layer’s List row sets the separator between the names, the max. items and, in on click, what a click on a name does: Nothing, Open it, or Filter the grid.
• Make it quieter than the title: smaller, in the accent colour or a grey, perhaps in capitals with a little letter spacing (Style › More text options › Capitals, Letter spacing). Check a grey’s contrast: small text needs 4.5 : 1 (Contrast beyond black and white).

The demo’s meta line is one text layer with the item’s caption, the way a custom grid does it; with posts, a date layer and a category list do the same job.

Small cards: keep the title

On narrow cards (two columns on a phone, or a dense grid) there is not room for everything. Drop the excerpt before the title, never the other way round.

Layer › Look › Visibility › Hide on small items hides a layer when the card is narrower than a width: Never, 240, 320, 480, or Custom with a Width below and a Height below. It is the card’s size, not the screen’s. Under More, Hide by says whether the hidden layer keeps its space (Keep its space) or goes and lets the others move up (Remove it).

Good to know

• Write titles and excerpts where the content lives: the post’s title and excerpt for a grid of posts, each item’s own fields in a custom grid.
• A title can wrap. Check the longest one at the narrowest card: if it runs to four lines, shorten the title rather than the font (Type scales without the maths).
• Filter names follow the same rules as titles: the words visitors use (Better labels, better libraries).

Read on

• In the manual: The skin editor, Click: lightbox and Ajax content, Posts, pages and custom post types, Accessibility and reduced motion
• The guides: Better labels, better libraries, Type scales without the maths