Designing for editors #

This page is for theme designers whose themes will be filled by editors. After launch, the people who decide what a page contains are the editors, not you. A design that only works with the content you chose will look broken within weeks. This page lists the rules that make a design editor-proof, and how to tell editors what the design expects.

Contents #

1. Who fills the design
2. Rule 1: every text grows
3. Rule 2: every optional field has an empty design
4. Rule 3: images come in any shape
5. Rule 4: rich text is a design surface
6. Rule 5: lists have any number of items
7. Rule 6: no design depends on editors remembering it
8. Telling editors what the design expects

Who fills the design #

Editors write in the administration or the editor interface, preview a draft, and publish (Editing content, Publishing and versions). On sites with layouts they also arrange blocks (The layouts editor). They are not designers, they work under time pressure, and they work in several languages. Design for that.

Rule 1: every text grows #

• Headlines wrap; decide the maximum number of lines and what happens after (usually nothing: let it wrap).
• Buttons and labels hold translated text, often a third longer than English.
• Never fit text into a fixed-height box. Use min-height if a minimum is needed.
• Truncation (text-overflow: ellipsis or a line clamp) is a design decision for lists and cards only, never for the full view, and the full text must stay reachable.

Rule 2: every optional field has an empty design #

For each optional field in your mapping sheet, draw the layout without it. Typical answers:

The template then wraps each optional element in a condition, so empty wrappers never reach the page (If and conditions).

Rule 3: images come in any shape #

Editors upload portraits, panoramas, screenshots and logos. Image aliases scale an image down to fit a box; decide per slot whether the image is shown whole (letterboxed in its slot) or cut to a fixed ratio with object-fit: cover in the stylesheet, and accept that cutting may lose faces or text. See Designing image crops and art direction.

Rule 4: rich text is a design surface #

Rich text fields let editors use headings, lists, tables, quotes, links, embedded objects and custom tags. Each needs a style, and each must work next to the others. Design a "kitchen sink" article with every element and keep it in your stress set (Designing with real content). Templates for custom tags and embeds: Rich text templates, Custom tags templates, Embed view.

Rule 5: lists have any number of items #

A three-column grid with two items, a slider with one slide, a list of 400 news items: design for zero, one, a few and many. Long lists need pagination (Pagination); empty lists need an empty state (Designing empty and error states).

Rule 6: no design depends on editors remembering it #

If an element only looks right when the editor uploads a 1600 by 900 image, writes exactly two lines, or picks the right color class, it will look wrong. Prefer designs where the template enforces the rule (an alias, a ratio, a fixed set of block view types) over rules editors must remember.

Telling editors what the design expects #

Where guidance helps, put it where editors see it:

• Field descriptions. A content class can carry a description per field, shown next to the field in the edit form. Ask the developer to add short guidance there: "Shown on cards; 60 characters or fewer reads best." The admin edit template prints it from the class attribute's description.
• Block view types. In layouts, a view type with a clear name ("Cards, three columns") is guidance in itself (Designing layout blocks).
• A style guide page on the site that shows each component with real content (Building a style guide page).
• Training. The editor courses are in Editors 101.

Related pages #

• Designing with real content
• Accessibility basics for themes
• Common template mistakes
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.