Article Page


Users need to read a reasonable amount of text


Present the article in a consistent and structured format, and place it in the center of the page.


Use when

You are designing a News Site, Portal Site or similar site, where users come to read stuff. What users are reading are 'articles' and not longer stories that you may find in online brochure or dossier.


Every article page you may encounter will have a slightly different format but most of them share these basic elements:
  1. Header, in a large font size and preferable not spanning more than one line
  2. Publication date, in a small font size
  3. Photograph with caption, half or the column width or the entire width.
  4. Introduction text, which often serves as sort of a summary as well
  5. Body text, the real content of the article
  6. Links to related articles, either external or internal articles
Use the entire content area for placing the article so that the article in on the Center Stage. Article pages often use a 3-column layout for the page where the left column contains the site navigation, the middle contains the article and the right column displays related materials/promotions. An Article page should use Liquid Layout so that the article area grows as the browser window get larger.

After the body text, there may be a 'local' Footer Bar with a Send-a-Friend Link or link to a Printer-friendly Page. Alternatively, such a bar can also be put at the top of the article as well. In some cases, an article may span multiple pages and needs Paging. Only use it when there is special content such as a high-resolution image on the second page, otherwise it is best to keep article pages on 1 page. On some sites, it is also possible to add a page to a list of Collector so that users can easily find them back later.

In order to make the site a bit more interactive, sites with article pages also allow people to react on the article. That way a sort of small Forum will arise with the comments being displayed at the bottom of the page.


The article deserves the space and actually needs the space for readability reasons. The rest of the links above and below the article belong to the article and are in easy reach.

More Examples

This is how CNN does it:

plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below