Skip to main content

Pages

A page is an individual standard template chosen to present content on a particular topic. 

This page covers how write page titles and reduce page length, how to lay out a page and add child pages, and essential tips and common mistake made in page layout.

Title & length

This section covers: 

  • how write page titles
  • ways to compress pages to reduce page length

War​​​n​ing

A complex technical issue has arisen around adding pages. Although creating (adding) a page is part of the training, we ask that you do not try to add a page at this time. If you need to add a page, please contact Webhelp. For a description of how this issue can impact your editing, please see Troubleshooting at the end of How-Tos: Pages.


Page t​​​itles

When you add a page, think about where in the website it should go.
You can add a page to most channels in the website. If you need to add a page to a channel in which you do not already have a page, you will need to get permission to access that channel. See Training & Permissions.

Give a page a short, descriptive title. Don't repeat words that appear in the channel or section for the page because this will result in an unnecessarily long url. 

You can give two pages that are on the same topic the same title, if they are going to go into different channels. 


For example, there are two pages called Harm Reduction on the BC Centre for Disease Control site, but the urls and breadcrumb trails clearly helps the visitor decide which page to go to:


  • http://www.bccdc.ca/health-professionals/clinical-resources/harm-reduction is in Health Professionals > Clinical Resources > Harm Reduction
  • www.bccdc.ca/our-services/programs/harm-reduction is in Our Services > Programs > Harm Reduction


 

Never call a page About or something similarly vague. A visitor seeing this page listed in a search result will have no idea what the content topic is.

Don’t change the page title of a page that already exists; if you do so, you will create an inconsistency between the page title and its url and breadcrumb trail.


Consistent:

Existing page title: Harm Reduction

URL: www.bccdc.phsa.ca/health-professionals/clinical-resources/harm-reduction

Breadcrumb trail: Health Professionals > Clinical Resources > Harm Reduction


If you change the page title, there will be an inconsistency: 

Changed existing page title: Reducing Harm 

URL: http://www.bccdc.ca/health-professionals/clinical-resources/harm-reduction

Breadcrumb trail: Health Professionals > Clinical Resources > Harm Reduction


If you do need to fix an error in a page title, however, contact Webhelp. They will change the breadcrumb trail and URL to match your revised page title.


 


Page length

In many of the older sites that were moved into these new templates, the site structures were overly complicated, probably due to technical constraints at the time.

The new templates have three main tools built in to help compress pages and reduce the depth of the site:

  • tabs (see Tabs page) 
  • accordions (see Accordions page)
  • headings & dividers (see next subsection)

Drawings of how pages can be compressed

Headings & dividers

If the content you are combining is of a reasonable length, you need use neither of the methods of hiding and showing information. You can simply divide the sub-topics with headings, and horizontal separator lines if desired:

  • a reasonable amount of content for a single page is about 700 to 1,000 words, including a few photos.
  • use accordions within sub-topics to fit more content
headings-dividers.JPG


Layout

This section covers:

  • layout of a well-designed basic page
  • adding child pages to accomodate longer content

The basics of page layout
Much of the information on the website will live in a basic page template. This template has the most freedom to accomodate variables in content. 

This is a general example of how to use some of the following tools to create a well-designed page.
layout-anatomy-of-a-well-designed-basic-page-example.png

The anatomy of a well-designed basic page

Child pages

If you have more content on a topic than you can cover in a basic or basic plus page, you might want to add "child" pages to your page. You can add child pages to a basic, basic plus or clinic template.

Child pages appear in a menu called In this section in the right margin of your page.


If you want child pages, you will need to request an In this section menu with a "starter" page from Webhelp@phsa.ca. Once you have a starter page, you can add child pages as you want. Pages are added at the top of the starter page. You can then delete the starter page when you are finished.


Best practice

Plan your child pages carefully. 


The page titles should be short and descriptive, and make sense on their own. Remember that a visitor might find a child page through searching and will need to be able to understand the page in context. So title the child page accordingly. 


Don't repeat words from your main page title (unless needed for clarity); this makes the breadcrumb trail and url very long. 

 

The order of the pages in the menu should make sense to the visitor. The order could be alphabetical, or chronological, or in a sequence. Whichever order you choose, make sure it is helpful to the visitor.

 

Don't add a lot of child pages; this will make the menu long and will push your feature boxes (your links and downloads) too low on the page. 


If you need to change the page titles or order of the child pages in the menu after you have edited the pages, please contact Webhelp. 

 
Tips & mistakes

This section covers:

  • essential tips in page design
  • common mistake made in page design


Essential tips

Here are tips about some of the questions we've been asked most often.

Use accordions and tabs to combine pages and reduce site depth. See Accordions and Tabs

Content

 

Making a well-designed page is about balancing long portions of text with elements that create visual interest such as photos, block quotes and accordions. Be careful not to overuse these tools – the information is still the important part! See the Layout tab and the Common mistakes section on this page. 

 

Links lists are a great tool, they can contain links to other sites, or downloads containing more information. See Feature Boxes

 

Sidebars are a great place to put related information, there are a few ways you can style them to look great. See Feature Boxes


 

Good quality images go a long way to making the content look great. Check out our tips for choosing great images.


 

Testing is the best way to make sure your content looks good on all devices. No need to have a pile of phones and tablets though, simply grab the bottom right corner of your browser and resize the window to see what the site looks like on a smaller screen.


 

Common mistakes

Avoid these common mistakes:

  • too much styling
  • unorganized sidebars

Too much styling

Styling a page is about balancing paragraphs of text with styled elements. Having too many styles right next to one another can make the pages look crowded and confusing. Don't put too many styles near each other.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Author's name

good-cropping-example.jpg 

Apply now  
Donate


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

"This is a quote, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 
Author's name 

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

"This is a quote, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." 
Author's name

 
 

 

Unorganized sidebars

The information in the sidebars should be relevant and well-organized. Avoid sidebars that have large amounts of descriptions and links interspersed.

unorganized-sidebars-example.png

 

Tab Heading
SOURCE: Pages ( )
Page printed: . Unofficial document if printed. Please refer to SOURCE for latest information.

Copyright © Provincial Health Services Authority. All Rights Reserved.

    Copyright © 2017 Provincial Health Services Authority.