Skip to main content

Template Examples & Tips

The templates are designed to present a variety of kinds of content. You can choose the template that's most suitable for your content.

See the menu for examples of the commonly used templates, based on live pages in our current website.

Principal

Here are some tips for getting the most out of each template.

Article

When to choose this templateWhen you are going to be continuously adding stories or "what's new" type of features (this template is not meant for one-off items). Articles are dated and categorized, so the visitor can search for related content. If you want to use this template, please contact webhelp

 
  • Article title: Use a descriptive phrase for the title; put the title in sentence case  
  • Article date: Choose a date from the calendar pop-up.
  • Image: Ideally an article will have an image, but if you don't have an image you can publish an article without an image.
  • Image caption: Give the image a caption.
  • Body text: The page might be quite text heavy. Block quotes and images can effectively break up the content in this template.
  • Tags & categories: Select relevant tags and categories; this will help make the article findable in searches. [Note that tags & categories are not working correctly on our websites yet.]

  • Feature box: Use the web part at the end of the template for a brief About the author section, if desired.  
 

Basic

When to choose this template: When you are writing about one topic, and don’t need one of the specialty templates. This is the most generic page layout.  

 

  • Title: Give the page a brief, descriptive title. Use an ampersand for "and" and use title case. 
  • Image: This is an optional image (also called the "hero image") that appears at the top of the page
  • Lead paragraph: Put the first line of the content or a brief description of what the visitor will find on the page here.
  • Page content: Put the bulk of the information here.
  • Feature boxes: Pull out important information that relates to the whole page. The feature boxes ("sidebars") display below the rest of the content on tablet and mobile views. Put contact information, maps, links to related webpages, documents or external websites, photos, buttons. 

Basic Plus

When to choose this template: When you have several related topics to cover. This is a more robust template than the Basic template. It has up to three tabs that can be used to organize your content into subtopics. (If you need more than three tabs, you might need child pages; please contact webhelp.)

 

  • Title: Give the page a brief, descriptive title. Use an ampersand for "and" and use title case. 
  • Lead paragraph: Put the first line of the content or a brief description of what the visitor will find on the page here.
  • Short page content: Use this field to expand on the topic of the page if needed. 
  • Tab headings: Make these short and descriptive (one or two words each); don't let the heading go over to two lines; put the headings in sentence case.
  • Tab content: Include only content that's relevant to the subtopic. The feature boxes are visible regardless of which tab is open.
  • Feature boxes: Pull out important content that relates to the whole page. The feature boxes ("sidebars") display below the rest of the content on tablet and mobile views. Put contact information, maps, links to related webpages, documents or external websites, photos, buttons

 

Clinic

When to choose this template: When you provide a clinic or service. This template is mandatory for clinics, services or programs that see patients. It has up to three tabs that can be used to organize information that your patients need about their visit as well as customized, mandatory feature boxes and optional feature boxes. 

 

 

 

Editorial note: We have developed a detailed guide for the clinic and referral templates. If you are editing or creating a clinic page, please follow the guide: How to write for the clinic template (updated 6.16.2016).  


  • TitlePut the short name of the clinic or service using everyday vocabulary. Use an ampersand for "and" and use title case.
  • Summary line: Briefly and clearly state what patient service the clinic provides, using the active voice, for example: "We provide . . ."; "We treat . . .".
  • Mandatory feature boxes: The ReferralsFinding us and Quick links feature boxes appear on the clinic template and cannot be changed. Please see the guide for how to edit these boxes.  
  • Optional feature boxes: Use these boxes for discrete information that relates to the clinic or service, such as clinic introduction brochures, patient handouts, lab test instructions, etc.  

Event

When to use this template: When you have an event you want to publicize. It has space for a photo and description of your event as well as feature boxes on the right for the date, time, location and contact details. If you want to use this template, please contact webhelp

 

 

  • Title: Use the actual event title for the page title. Use title case. 
  • Page image: This is an optional image for the page. 
  • Image caption: If you use an image, give the image a caption.
  • Page content: Provide a brief description of the event, including the purpose of the event. 
  • Mandatory feature boxes: The Date & Time and Location & Contact Info feature boxes appear in the template and cannot be changed. Please fill them out completely.  
  • Optional URL feature box: This feature box will automatically create a Register button that you can use to lead people to a service that will allow them to register for the event. To create the button:
    • Type the web address: Give the full url of the registration website
    • Type a description: Use the word "Register"

Editorial note: There is no need to repeat information. For example, you don't need to put the date and time in the body content as well as in the Date & Time feature box.  

 

Gallery

When to choose this template: When you have a collection of media (photos or videos) that is related and needs to be displayed visually. The items in the gallery can be filtered by categories at the top of the page. This template is especially good for displaying a series, for example, a sequence of images about handwashing. If you want to use this template, please contact webhelp

 
 


Once the template is in place on your site, you will need to edit the list that populates it. Please follow the guide: Managing gallery lists.

  • Each item in the list should have a photo and headling. It can also have a blurb and internal link to more information.

Referral

When to choose this templateWhen there is a related clinic or service page that requires a referral form and specific process. A referral page does not exist on its own; it is always linked to a clinic or service. It has a place for basic introductory text, an area to upload a referral form (if you have one) and space to outline a simple step-by-step-process for referrals.

 

Editorial note: We have developed a detailed guide for the clinic and referral templates. If you are editing or creating a clinic page, please follow the guide: How to write for the clinic template

  • Title: Use the exactly the same title as the related clinic or service, and add the word Referral (helps make the page findable in seaches) 
  • Lead paragraph: Briefly explain the process if needed, for example, if there is more than one form to choose from
  • Page content: Ignore unless needed for a longer explanation of the process
  • Referrals form content: Insert link to the referral form
  • Referrals process content: Set out the process step by step. You can style the steps using the Steps option in the editing ribbon. 
  • Feature box: Add a feature box called Fax number (if faxing the form is part of the process) 

Editorial note: There is no need to repeat information. For example, you don't need to put the fax number in a step and in the feature box, or link to the same form in two different places.
 

 
Specialized

These templates are available on special request. They display particular types of content in a specific way. 

Communications & IMITS consultation is required to use these template. Please email PHSA Communications at webhelp@phsa.ca to discuss. 

Some of these templates are being developed and are not yet available. 

This template is similar to the gallery template. Its features include:

  • ‎one content column that spans the entire width of the top navigation bar (so all content would stay underneath it)
  • left-expandable menu 
  • breadcrumb trail 
  • page title
  • footers displaying as normal
  • no In this section menu

This template would be useful for when you need an increased column width to display content effectively.


The Sea Surface Temperatures page on the BCCDC (BC Centre for Disease Control) website is an example of a basic full-width template. 

 

The clinical trials template is intended for helping users find information about clinical trials that interest them. There is a search feature at the top and a button to lead them offsite, if they would prefer to search the entire database outside of the organization.


This template is being developed.

clinical-trial-design.JPG


 

This template is particularly useful for organizations with many locations. The user can search for nearby locations using their postal code. Each location is listed below the map with room for their address, contact info, hours, and services available.


The Kidney Services in BC page on the BC Renal Agency website is an example of a locations template.

 

The long form document template is intended for very lengthy documents such as cancer or drug manuals.

  • The page is broken into chapters which display along the left side and are always visible
  • Each of these chapters may have sub-sections that are displayed at the top of each of these chapters
  • Each chapter can be printed

The breast cancer pages in the Cancer Management Guidelines on the BC Cancer Agency website are an example of a long-form document template.

 

This template can be used for both patient and employee stories. This template consists of element groups or panels. This page template can be assembled using different panels depending on your content. If you have a story with many images, you can choose the panel with 3 photos. Alternatively, if you want to highlight a quote, you can choose the panel with the pull out quote.

  • The top panel is mandatory with two photos and a summary of the story
  • Each of the following panels is optional and are used to add visual interest to the story
  • Optional panels include: video & quote with photo, three small photos, two photos & a quote, and a video
  • The final section of the page is a prompt to read the next story
This template is being developed.

patient-stories-design.JPG


 

The researcher profile should be used for a profile page for health professionals. It was desgned specifically for researchers, but other health professionals could take advantage of it buy ommitting some of the research-specific sections.

  • The short bio will show approx. 90 words on landing, the more button will expand the rest
  • There is a small section of tags for the researcher's areas of interest
  • Sections: recent publications, current research studies, honours + awards, and other publications
  • The sidebar contains a small profile photo and contact information
This template is being developed.

researcher-profile-design.JPG




 


Automatic

These templates are generated dynamically by the application to manage the structure and content of the website. 

IMITS/Communications will implement these where required. The document manager is used for searching through documents and will mainly be used in the health professionals section.

  • The search feature is used to find specific documents or browse categories
  • Some documents will be directly downloadable, some will go to a page with more information
The Health Professionals "search for a document" results page on the BC Centre for Disease Control website is an example of a document management template. 
 

IMITS/Communications will implement these where required. The Health Professionals template should be used for the health professionals section only. It provides navigation of the section as well as a shortcut to important documents that health professionals may be looking for.

  • A feature box with photo can redirect a certain audience to another section, for example, researchers.
The Health Professionals page on the BC Cancer Agency website is an example of a health professionals template. 
 

Section overview pages are managed by Communications, who will implement and edit them as needed. 


A section overview page should consist of:

  • the name of the section
  • a brief introductory paragraph
  • a button to redirect people to more information
  • a photo that illustrates the section

The above features do not show up in mobile view, so essential information is not included in them. 


The section overview lists the pages in that channel. The list reflects the structure of the site and cannot be changed without Communications consultation.


The Health Professionals section overview can include a document search tool, which visitors can use to search for documents in that channel. 


The Page Design page on this website is an example of a section page, as is the Our Services page on the BC Children's website.  

 

Tab Heading
SOURCE: Template Examples & Tips ( )
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.