News site design patterns: pages, accessibility and speed

A news site is an unusual kind of product. Readers arrive from many directions, most of them straight to an article, and the home page serves the regulars. Good design makes four page types work together and keeps them fast and usable for everyone. This guide describes the patterns, then gives you two external standards to test them against. They are about judgement, not decoration, and none of it needs a particular CMS. How your CMS supports them is covered in how themes work.

What page types does a news site need?

Four page types carry almost the whole site:

Plan the CMS structure first. Sections, tags and authors need to exist as data before you can design pages that list them. See organising content and our thread on section pages.

How should the home page work?

The home page is an editorial decision made visible. It answers one question: what matters now?

• One lead story. A clear top item gives the page a focus and gives editors a decision to make.
• A bounded set of secondary slots. Fixed slots, filled by editors or by rules, keep the page readable.
• Section blocks in a stable order. Regular readers learn where to look.
• Visible dates. A reader should see how fresh each item is.

Check how your CMS lets editors control the lead. Some systems pick the latest story automatically, others let editors pin stories. Featuring is an editorial function, so the control should be in the editors’ hands, not buried in a template. Avoid carousels that hide stories behind motion, because they add work for keyboard and screen reader users.

What belongs on a section front?

A section front is a list with a purpose. It needs a clear heading, a short description if the section is not obvious, and a predictable order. Each list item should show a headline, a summary, a date and, where useful, a thumbnail.

Pagination needs care, as covered in our section pages thread. Keep the list length manageable, and make “next” and “previous” real links. Subsections should be reachable from the parent page without an extra menu layer.

What does an article page need?

The article page is where the reading happens, so every element should serve it.

1. Headline, then byline and dates. Readers want to know who wrote it and when.
2. A readable body. Comfortable line length, clear headings and enough contrast.
3. Media with text alternatives. Images need descriptions, captions and credit where relevant.
4. Related reading, clearly separated. It should not interrupt the article.
5. Corrections and updates. If an article is changed, say so on the page.

Google says adding Article structured data can help it understand more about the page and show better title text, images and date information in search results. Its documentation also recommends including the author’s name and a link to a page that uniquely identifies the author. That ties the article template to the author page, which is why both need to exist in your CMS data.

Why do author pages matter?

An author page turns a name into an identity. It should show a short biography, the writer’s role and a list of their recent stories. For contributors and freelancers, it can also show the publication’s relationship to the writer. See contributor submissions for how that connects to roles and disclosure.

How does WCAG apply to a news site?

The W3C’s WCAG 2.2 covers a wide range of recommendations for making web content more accessible. It is organised around four principles, perceivable, operable, understandable and robust, and defines three conformance levels: A, AA and AAA. Three checks are especially relevant to news templates.

• Bypass blocks. Success Criterion 2.4.1 requires a mechanism to bypass blocks of content repeated across pages. On a news site that means a skip link past the header and navigation so keyboard users reach the article quickly.
• Text alternatives. Success Criterion 1.1.1 requires that non-text content has a text alternative serving an equivalent purpose, with exceptions for controls, media, tests and decorative elements. Photographs and charts need descriptions. Your CMS should make alt text a prompt, not an afterthought.
• Structure. Use real headings in order, real lists and real links, so assistive technology can navigate.

Test with a keyboard before you buy a design. If you can reach every link and button without a mouse, and the focus is always visible, you have cleared a common barrier. Accessibility also applies to the tools your staff use, which is the subject of evaluating the editor experience.

How do Core Web Vitals apply?

Core Web Vitals are three measures of real-world page experience. web.dev states the good thresholds: Largest Contentful Paint within 2.5 seconds of when the page starts loading, Interaction to Next Paint of 200 milliseconds or less, and Cumulative Layout Shift of 0.1 or less. It says they should be evaluated at the 75th percentile of page loads, segmented across mobile and desktop.

For a news article that translates into specific design habits:

• Loading. The lead image or headline is usually the largest element, so it should not wait behind scripts.
• Responsiveness. Limit third-party scripts, which compete with reader input.
• Stability. Reserve space for images, ads and embeds, so the text does not jump as they load.

Measure on real pages, not a demo. Your CMS’s templates, plugins and ad code all affect these numbers, so see how plugins work for the cost of extra code.

Which patterns should you test in a new CMS?

When you try a system with a trial install, build one page of each type and check four things: can editors control the home page, can the section page list and paginate, does the article template show author and dates, and do the pages pass a keyboard test and speed check against the thresholds above. Add the results to your feature checklist before you decide.