Content-first web design: plan content before layout

1. What content-first web design means in practice

Content-first means understanding the essential content and its conditions before fixing the page structure in the visual design. This includes more than paragraphs of copy. Product dimensions, service exclusions, image crops, form guidance, variants and the meaning of a next step are also content. The team needs to understand which pieces belong together and where they enable a decision.

A dependable starting point rather than a rigid sequence

The approach does not require every word to have final approval before the first sketch. Editorial work, subject expertise and design can develop in parallel and be reviewed repeatedly. What matters is a visible distinction between confirmed facts, suitable working drafts and unresolved assumptions. Draft copy can support a realistic layout test; an invented promise must not quietly become part of the offer.

Early sketches remain useful. They can expose gaps, such as a comparison table for which comparable data does not yet exist. The sketch is then a working aid rather than an early acceptance decision. Content-first changes the checkpoint: before committing to a presentation, the team needs to understand its information requirements. The design is therefore tied to an identifiable state of content readiness.

2. Start with the visitor’s task

The first question is not which sections a modern website is expected to contain. Ask what the intended person wants to decide or accomplish. A prospective customer may need to check whether a service suits their property. A buyer may want to choose a format. A job applicant needs different information from a procurement team preparing a request for a proposal.

Connect the task, information and action

The GOV.UK guidance on user needs connects content with practical tasks and acceptance criteria. A useful working question for a business website is: which answer does this visitor need before the next step becomes possible? This is an application of a planning method; UK government guidance is not a rule imposed on German businesses.

Write the task in everyday language and describe an observable outcome. “Learn more about quality” leaves the goal unclear. “Identify which material is offered for the intended use” gives writers and designers a clearer direction. The guide to creating a content brief explores the production assignment for one target page. The inventory developed here adds the actual materials available and their implications for presentation.

3. Record the complete material inventory

Do not collect files alone. An image with unresolved usage rights or a data sheet whose connection to a product has not been confirmed is not ready-to-use content. For each item, record its task, required copy, suitable image or medium, relevant properties, source and owner. A stable reference to the intended page helps with later changes and prevents similar copies accumulating without clear responsibility.

An inventory needs to expose unfinished work

The rows describe types of information needed, rather than a finished website. In practical use, add a working status, storage location and agreed review date. A photo may exist technically while its suitability remains uncertain. Copy may have been edited even though the underlying service has not been confirmed. Those distinctions need to remain visible.

Start with a representative page and the items essential to its purpose. An endless list of historical files offers little help when the current selection decision remains unresolved. Inventory work can therefore be prioritised. What matters is being able to connect each later layout requirement with the intended content and an accountable role.

4. Check claims before turning them into design features

A prominently displayed sentence reads as a statement the business stands behind. Claims about availability, properties, scope or experience therefore need checking before they become major visual elements. The editorial team should be able to identify the internal information supporting the sentence, its currency and any relevant limitation. Attractive wording cannot provide that foundation.

Do not make evidence appear stronger than it is

A project photograph initially shows a visible situation. It does not automatically establish that the business carried out every part of the work. One customer comment cannot justify a general success rate. A self-selected quality description must not appear to be an independent certification. Where evidence is missing, narrow the claim, return it for review or remove it. Design should not pre-empt that decision by creating an appearance of authority.

Google’s guidance on helpful and reliable content emphasises useful, trustworthy information and explicitly rejects a preferred word count. This does not produce an SEO formula for planning. An important condition deserves space because it changes the decision. An extra paragraph still needs a purpose even when the design has an empty area to fill.

5. Describe content as reusable data

Pages often contain recurring information types: a service, product variant, use case, measurement or contact method. If everything lives inside one long text field, consistent comparison and updates become harder. A simple content model therefore defines the necessary fields, their meaning and the relationships between records. CMS selection follows those needs rather than a preference for a particular editor.

Maintain properties separately and present them together

The Shopify documentation on metafields explains how custom data can extend existing models, with dimensions and size charts among its examples. Defining a field does not automatically produce a finished display. The chosen theme or implementation also needs to present the information appropriately. That dependency belongs in the early discussion.

First establish which properties are actually needed. Measurements require an unambiguous unit and a clear connection to a product or variant. A service may require an operating area and exclusions. The same fact should not have to be maintained independently in several places. Before layout decisions are fixed, the team can establish which elements appear together and which are drawn from a dependable source.

6. Prepare copy according to its function

A page title provides orientation, a service description defines scope, and guidance above a form explains an action. These texts serve different purposes and need different lengths and levels of precision. Start with a usable draft for the actual context. Uniform sample copy conceals differences that the design will eventually have to handle.

Shorten without removing decision-critical information

The W3C writing tips for accessibility recommend meaningful headings, descriptive link text and clear language. Turn this into a practical check: does the heading describe what follows, and does the link identify its destination? Also check whether a technical term can reasonably be assumed familiar or needs an explanation.

Shortening helps when it removes repetition or unnecessary introductions. It becomes a problem when a condition disappears simply to make three cards the same height. Preserve the complete decision-relevant statement first. Writers and designers can then find a better presentation together, such as a brief explanation leading to accessible detail. The length of placeholder copy is not a binding specification.

7. Select images for the information they provide

Give an image a task before choosing it. Should it show a material surface, distinguish a variant or explain size in a room? An atmospheric photograph can support a brand without replacing a necessary detail shot. Describe what must remain visible and which elements need to survive cropping.

Plan the purpose, crop and alternative together

The W3C images tutorial distinguishes informative and decorative purposes and the different text alternatives they require. For the inventory, begin with a clear statement of function. Alternative text can then be written for the actual image in its context. It is not a container for search terms and should not claim properties the image cannot show.

Review capture, usage and editing separately. An existing photograph may work as a small crop but lose important detail in a wide introduction. Record the source, approved uses and any necessary permissions. An appealing design image with unresolved usage remains an open task. It should not first become a problem immediately before launch after being treated as a finished component.

8. Clarify sizing information before designing the selection interface

For visual products, the image itself is not the only consideration. Buyers also need to understand which format suits the intended space. The public CetArt sizing guide groups horizontal, square and vertical canvases as well as multi-panel formats. This illustrates an information need for which images, labels and size relationships must be prepared together.

Turn a customer question into a material requirement

Your project does not need to copy that structure. Instead, identify the questions raised by your own range: overall dimensions or individual panels, orientation, spacing, relative size or variant selection. The answers determine whether a simple table is sufficient or whether another illustration is needed. Without that work, a comparison area in a design remains an empty shape.

The public page allows its information types to be considered. It does not establish internal product data or a sales effect. Your website therefore needs its own verified facts. A room visual should explain what it shows and must not present an uncertain scale as an exact sizing aid. What matters is the statement that the material can reliably support.

9. Plan video together with its supporting materials

A video becomes usable when its role and accompanying information are clear. Will it explain a process, demonstrate a product or communicate a person’s statement? The answer affects the script, sound, shots, length and placement. An existing clip does not automatically answer the question the page is meant to resolve.

Do not make understanding depend on sound alone

The W3C guidance on captions describes the representation of speech and important non-speech audio information. Include that work in production where it is needed for understanding. Automatically generated text requires a meaning and accuracy check. A preview image should also communicate the video’s real purpose without promising a different outcome.

Record which version has approval, which languages exist and which supporting explanations are missing. A core step that can be explained clearly in writing does not necessarily require another video. Media selection follows the task and available resources. The layout then receives a reasoned decision instead of reserving an arbitrary video area that will later be filled with unsuitable footage.

10. Treat forms and responses as content

A form is more than a set of fields. People need to understand why information is requested, which format is expected and what happens after submission. Those explanations affect the page’s scope and the design of each step. If the business has not decided how enquiries will be handled, a writer cannot invent a dependable response time.

Consider the journey after submission

The W3C tutorial on form instructions covers required and optional inputs, relevant formats and explanations. Write these before fixing the form layout. Prepare labels, guidance, error messages and confirmation copy separately. A temporary placeholder inside a field cannot replace a persistent, understandable label.

Test the wording with an appropriate example scenario. Does the person understand which information they can provide now and which details can be clarified later? After an error, is the required correction clear? Does the final message confirm receipt or already promise a service? The answers need to match actual operations. Content-first therefore also exposes an organisational dependency.

11. Treat language versions as real layout requirements

A website serving Germany may have several languages conveying the same confirmed facts while requiring different lengths of wording. Navigation, service names, units and guidance should not be translated only after a design has passed acceptance. Choose early examples from every planned language that cover typical and difficult cases.

Shared facts with independent wording

The W3C explanation of text size in translation describes differences in length and recommends flexibility. It does not establish a fixed expansion percentage for every language. Test actual translations rather than assuming a universal amount of extra space. A few additional words can substantially change the wrapping of a short control label.

Maintain shared facts unambiguously and build language adaptations around them. Translation must not introduce a new delivery promise or change a service boundary. Links and form messages also belong in language review. If a destination has not been confirmed in the appropriate language, adjust the journey accordingly. Fluent wording does not demonstrate that the complete user path works.

12. Test early with a content prototype

A content prototype shows a realistic sequence and usable sample materials without fixing every visual detail. It can be simple: sections, headings, copy, images and the intended next step. This makes it possible to check whether the explanation is understandable and whether important conditions appear in time. Its form supports the review rather than creating a misleading impression of finality.

Set one question for each review round

The GOV.UK guide to prototypes describes testing ideas before committing to implementation. For a business page, a round might investigate whether people can distinguish two variants or identify the requirements for an enquiry. Observe actual use and record problems separately from proposed solutions. One person’s opinion is not a universally valid assessment.

Clearly identify provisional material internally. Invented values in a comparison must not accidentally appear to be genuine product data. Where a test needs assumptions, keep them confined to that test. A positive response to a prototype also does not establish technical readiness for production. The eventual website needs its own functional and presentation checks.

13. Derive the mobile reading order from the content

On a small screen, information often appears sequentially that sits side by side in a larger design. Establish which statement is needed first and which condition belongs immediately beside it. Elements that look adjacent on a desktop can end up far apart on a phone. An important qualification must not become separated from the statement it limits.

Deliberately include difficult content in testing

The W3C explanation of reflow addresses presentation without losing information or functionality under the relevant conditions. Turn that into concrete preparation cases: a longer heading, a multi-line choice, a readable table and a necessary instruction. A wide table may need its own scrollable presentation. That exception does not justify making the entire page scroll sideways.

Retain the full information in compact views. If details are collapsed, people need to recognise and reach them. In the eventual system, check text enlargement, logical order and the relationship between labels and content. A desktop screenshot cannot resolve those questions. Preparing the materials provides realistic cases for those checks.

14. Record readiness and blockers separately

Content does not all need to become ready at the same time. A suitable draft may support a structure test, while publication requires confirmed facts and approved materials. Establish which state is sufficient for each next step. This prevents a general label such as “done” from meaning different things to writers, designers and the client.

An unresolved assumption is not approved content

Whether an item blocks progress depends on its task. An unconfirmed service boundary may affect the whole enquiry journey. A missing supplementary atmospheric image need not prevent every structure test. Record the reason for the decision and assign responsibility. Status alone does not determine whether work can continue; the specific dependency does.

The example contains twelve fictional items: eight approved, two drafts and two missing. It does not produce a general quality score. One critical missing item can be enough to prevent publication. The number of finished files says equally little about whether important information is accurate, understandable and visible in the right context.

15. Accept the handover to design and implementation

The handover includes the content model, approved materials, open issues and their consequences. Design also needs examples of typical and unusual lengths, variants, crops and languages. Development needs to know which facts are maintained centrally and how missing values should be handled. A collection of files without those relationships leaves essential decisions unresolved.

Connect each responsibility with a testable result

The DfE guidance on content strategies addresses factual accuracy, approval, ownership and maintenance. For your project, establish which role confirms each decision. One person may hold several roles in a small business. It should still be clear whether they are currently checking the facts, wording or technical implementation.

Open issues need a named next action and an agreed date. A general promise to “provide it later” is insufficient when it affects the layout or launch. Review changes after approval for their consequences. Another variant can involve more than an extra line of text: it may change selection, comparison, translation and maintenance.

16. Maintain the materials after launch

Content-first does not end with initial publication. Products, contacts, service scope and images can change. Record where each fact is maintained and which presentations depend on it. Updating a data sheet is not enough if the old property still appears inside a graphic or in another language version.

Include maintenance in the production assignment

The W3C guidance on planning and managing accessibility covers the whole production process and ongoing review. Applied to the material inventory, this means responsibilities and checks continue after launch. A newly uploaded image or video also needs an appropriate purpose and context, rather than simply an empty position in the CMS.

The guide to content production explains the preparation, formats and handover of different materials. For website maintenance, retain the specific connection: which page uses a file, which version is authoritative and when should it be reviewed again? A simple change note can help the team update affected presentations and languages deliberately.

17. Common questions about content-first web design

FAQ

Must all copy be final before the first design?

No. Dependable drafts can support early tests. The structure, typical length and central facts need to be realistic. Unconfirmed statements remain visibly provisional. Before publication, obtain the approvals agreed for that stage.

Can we still use an off-the-shelf theme?

Yes, provided it can present the required content appropriately. Test real titles, variants, guidance and languages in it. If a necessary presentation is missing, adapt the structure or choose another solution; do not remove information simply because it does not fit.

What belongs in a content inventory?

The task, copy requirements, images or other media, relevant properties, source and accountable role form the foundation. Add storage, status and unresolved dependencies. The inventory shows what is usable for a particular page and what is still missing.

What if the business has almost no images?

Establish the actual image requirements first. Some questions are better answered in text or structured data. For necessary photographs, plan the subject, detail, crop and use. Unsuitable stock photography is not an equivalent substitute for required product evidence.

Can AI supply the missing content?

It can organise questions, suggest wording and flag contradictions. It must not invent company facts, product properties, experience or usage rights. An accountable person needs to confirm factual claims and resolve open questions.

How should DE, EN, RU and UK be prepared?

Maintain shared facts clearly and give each language natural wording, checked links and appropriate guidance. Use early language samples in the design. Identical character lengths are not a useful goal when they damage meaning or clarity.

Does the approach guarantee time or budget savings?

No such guarantee follows from it. Visible dependencies can support planning and coordination. Actual effort still depends on materials, specialist review, decisions and changes. Assess the project using documented causes rather than blanket promises.

When is content ready to publish?

When critical facts and materials have approval, the presentation and language journeys have been checked, and critical open issues are resolved. A fully populated layout is insufficient by itself. Acceptance also covers behaviour in the actual system.

18. Use the material status to decide the next step

Start with an important page, a clear visitor task and a manageable inventory. Check the content without which the next decision cannot be made. It creates requirements for copy, media, data and presentation. Design can refine that foundation and expose further questions instead of concealing missing substance with placeholders.

Salestudia supports businesses in Germany with the preparation and production of connected content. A specific assignment can be discussed using existing copy, images, product information and pending approvals. The agreed scope should identify which materials will be produced, which facts the business supplies and who reviews the result.