Technote

Development workflow Practical

Series From design file to WordPress — the handoff Part 4 of 8

Design with real content, not filler

Filler text of uniform length hides every layout problem you have. Real sentences vary wildly, and that variance is exactly where a layout falls apart.

The text in a composition is usually all the same length. Every title fits one line, every summary runs to two, every button label is one short word. In that state any layout looks like it works. The problem is that this uniformity does not exist on the real site.

What uniform length hides

Drop real content in and three things surface at once.

The same layout becomes a different screen once real, irregular content arrives

First, irregular height. When card titles swing between one and three lines, the button at the bottom of each card sits at a different height in every row. That never shows up in a filler composition.

Second, overflow. A button sized around “Save” meets “Save all changes” and either grows, clips the text, or shoves its neighbour aside. Which of the three happens was not decided in the design, so it gets decided in the build.

Third, underflow — the opposite case, and just as common. A card built for a three-line summary receives a one-line one, and the space underneath reads as an accident rather than an intention.

What to go and fetch

You do not need all the real content. Both extremes and the middle is enough.

Content samples for a composition — without the extremes the layout is never tested

On a brand-new site with no content yet, use the closest existing material: sentences from the company brochure, product names from an old catalogue, an email the client actually wrote. It always beats invented copy, because invented copy is invented at the length you wanted.

Two languages behave differently in the same box

Building a multilingual site adds a layer. The same sentence differs in length between languages, and the line-breaking rules differ too. Some scripts break between words; others have no spaces at all and are treated as one unbroken run unless you tell the browser where breaking is allowed.

So a multilingual design is safer when the same screen is built once per language. That matters most for fixed-width furniture: buttons, tabs and navigation.

How real content shapes layout is covered further in the development workflow archive, and the procedure for finding these problems on already-released screens is set out on our process page.

Next part

Once real content is in the design, the next question follows: who is allowed to change it? The next part is about deciding the editable regions up front.

More on this topic

All technotes

Development workflow Practical

Turning taste arguments into rule checks

"It feels a bit cramped" can be neither argued with nor fixed. Spacing off the scale, colour off the palette, contrast below threshold, missing states — four rules…

Designers 9 min read

Development workflow Practical

Do not swap everything at once

A full swap makes every problem appear at the same moment — which means none of them can be attributed. So you switch one template at a time.

Designers 6 min read

Development workflow Practical

Adding an SCSS build, and whether to commit the output

WordPress themes are expected to deploy without a build step, which leads to the opposite conclusion from ordinary application code — and to its own costs.

Developers 7 min read

₩270,000 · Join the program