Thread by @darth_na

.
:: Content Design ::

The UX magic happens when content creation, design principles and application/HTML markup/CSS intersect.

But it's not as easy as it appears,
due to display variances (such as "5 lines" on Desktop isn't 5 lines on Mob!)

#SEO #Content #ContentDesign

>>>

https://twitter.com/RossHudgens/status/1580232828377104384

It starts with ... the User.

Good content design is grounded in knowing what the user wants, and how they want it.

(I know the general rule is stuff like "write for an 8th grader" or "16yo" etc. - but that doesn't work when your audience is literally brain surgeons!)

The audiences language and knowledge "levels"
defines things like whether you can include:
* abbreviations
* topic/industry terms/jargon
* sentence length
* sentences per paragraph
* distance between references
* overall length of content
etc.

After that, it's looking at what's in the content,
and when/where key parts occur.

Semantic Structure is first - Headings and paragraphs, lists, tables etc.
1 H1, then maybe some H2s, in more detailed pieces you may want H3's (under the relevant H2!).
It's rare to need H4/H5/H6.

All Headings should be clear, concise and convey information - and relation to other headings.

There should be clear visual distinction between the different types (that's what CSS is for people - you don't use H3 because it's smaller),
and from body copy.

Then we have the main copy ... and the use of bold/strong, possible italics too.
(Underlines online can be confusing due to links)

Font changes should ideally be avoided
(different typeface for headings and body is fine, and even things like pull-quotes/ed-notes etc.)

Avoid over-usage ... and heavy mixing (don't have bold, normal, bold, bold, normal etc.).

And pay attention to font-sizing.
Try not to vary "body copy" to much/often,
and keep heading sizes consistent (all H2s = same size please!).

Mind colours and contrast too!

Along with semantic markup, you should be looking at styling and visual design.

White space is important!

Gaps between sections make it visually clearer there's a break in the flow/topic.
Different sized gaps (such as between 2 paragraphs vs a paragraph and H2) can help too.

Then there's the "rules" around "breaking up text".
People tend to forget to mention that it's entirely dependent on the type of content, it's purpose and the audience.

Do you really want to pop in an image every 3 paragraphs in a biographic piece, or a kiddy piece?

And it's not just images.
You can "break the text" with visual rules (<hr/>),
or a list, a table, a chart etc.

Then we have the content of the copy/content.

There are established best practices here,
and they generally work.

Lede's are meant to contain enough value that a user can orientate themselves and identify value, fast!

Combined with Title/Inbound link text and main heading ...

... a user should be pretty darn confident of what they are about to consume, and that it will answer their need.
(Typically 15 seconds should permit most folk to identify suitability or not)

The inverted pyramid is well established

Provide the user with the scene/setting/conditions and the characters/topic/event and the time/place
(who, what, when, where, why, how) etc.

These should be presented early (per section).
Then lead them through to more info (see why it's called a "lede"? :D)

Key details can be embolded/increased in weight
(just not to many/often).

Depending on the nature of the content/audience,
you can look at each key point being it's own sentence or even paragraph.
But remember, there are design elements,
you can start
new lines
etc.

(I don't suggest abusing such things - but it can be used to help users scan/locate
key information by breaking it so it appears earlier :D)

HTML and CSS permit us to influence factors such as line-length, word-breaking/wrap etc.,
so have a look/play, see what works better.

And as we're looking at it ... letter spacing, word spacing and line spacing.

It's worth increasing these fractionally, as it tends to make things easier to read for everyone.

(As does picking clear, open font-types, with strong differences between similar characters!)

Line-length is problematic due to varying displays/devices,
but we can utilise maximums (typical suggestions range from 50-70 characters).
Fixed sizes on containing elements, max-characters on <p> and <h2> etc. can help

(you may want to look at non-breaking spaces etc.)

Placement is another one often missed.
In many cases, a "page" will consist of multiple parts (nav, content, sidebar, footer etc.)

These are fairly standardised, and principles still typically apply - spacing/slight variations in sizing of text can help users identify importance

Providing content that is:
* easily consumable,
* comprehensible,
* scannable (push key items to the top/start of each section),
* clear/uncluttered
can go a long way to increasing retention time, consumption %, return rates, leads and conversions.

Invest a little in to it!