Web Services

Style Guide

Audience

Our audience is typically current and prospective students, their families, and other visitors. Writing for this audience means writing clearly, concisely, and for all ages. If a prospective student cannot understand the page content, then they may not end up attending National Park College.

Setting up a new page

If a page needs to be created or moved contact the web team via helpdesk (link). There are a lot of factors involved in setting up a page including search engine optimization (SEO), file structure and naming, and location. Since the overall goal is to have the page viewed as much as possible the web team can add properties to help.

Page Layout

Our pages consist of several parts. Many of the parts are set to be unchangeable so we will skip those for now. The topmost part of the page that can be changed is the banner image. When selecting a banner image, it should be owned by the school, of appropriate size, and correspond to the content of the page. (link to brand management?)

The side navigation will have to be set up by the web team. It will consist of the directory title and any subdirectories underneath. It may go down one more level for very important pages of the subdirectories (though that is rare).

Next is the most important part, the main content. This consists of three parts for most of our pages. They are labelled Top, Middle-Left, Middle-Right, and Bottom content.

With a single template the page can be designed in several ways. Depending on the content of the page you would decide what would be best for you.

Content

Styling (Fonts, Bold, Spacing)

For the most part the content added to the page will be plain text in paragraph form. There are certain things to avoid for several reasons. All caps should only be used when providing an acronym (e.g. NPC). Underline should not be used at all. Italics should only be used for proper cases, like book or film titles. Bold should not be used unless the word needs emphasis, but most likely it would be a link, a header, or an anchor and would not require that styling. The use of bold will not change a header and bold styling should not be used in place of a header. Double spacing between sentences is not necessary because modern browsers automatically add extra space between sentences. Spacing should never be used for text alignment. If there are issues with alignment that cannot be solved contact the web team.

Text Alignment

In nearly all cases, text should be exclusively left-aligned. This includes both headers and body text. Some exceptions are the use of data in tables or specific elements like cards. If you are unsure about the alignment, stick to left-aligned.

Headings (levels)

Heading level 1 is not allowed. It is used as the main title and there is only one allowed per page. Your first heading on the page for the main point should always be a Heading 2 (whether it comes after some explanatory text). There can be multiple heading 2’s but they need to be of the same degree as the first. Headings should only be followed by lesser headings when lowering scope.

For example

• Father – H2
• Child – H3
• Grandchild – H4
• Mother – H2
• Child – H3

Wording and language

Writing for the web can be a tricky process.  For more information, visit the Web Writing page.

Components

Links

External links and links to documents should link to a new window/tab. All internal links should open in the same page. Internal links should also utilize the CMS dependency tags so that if a page name or location changes the link does not break. All phone number and email addresses should have tel: and mailto: links respectively. Every link should use a description rather than the URL or “click here” for the title. Example: Visit the admissions page for more information.

Cards

Cards organize repeated, similar content in a neat container.  Often used for news stories, employee information, or summer camp and ITC courses, cards can add style and organization.  See examples on the ITC page or Admissions.

Accordions

Accordions make large amounts of content on a single page more concise. They are very helpful when the content cannot or should not be split up into separate pages. Accordions can be implemented to where they can be edited easily using tables. Consult the web team if you think you need an accordion or another component on your page.  A good example for this is the Editorial Standards page for External Affairs.

Tables

Tables are simple to create but have many accessibility issues. When a table is created, a certain stylesheet must be added to the source code for it to be consistent with the Colleges style on the website. Tables need to have table headers along with the scope of the headers. Check out the accordion in the Transfer Oppurtunities page to see several table examples.

Lists

There are two types of lists: ordered and unordered. Ordered lists are numeric or alphabetical and unordered simply have bullet points (arrows in our case) separating them. Numbered, or ordered, lists need only be used when describing steps in a process or hierarchical importance.

FAQs (Frequently Asked Questions)

FAQs can be added to a page or implemented on their own page if the content is long enough. Due to inconsistent stylings on many FAQ pages, we request you give the content to the web team and submit a ticket if a FAQ page is needed. Take a look at the ResLife FAQs to see an example of an accordion FAQ.

Calendar Feed

If you have entries in the National Park Calendar or need certain items, then placing a  calendar list may be beneficial.  Any set of filters that can be made on the calendar website can be applied to a feed on any page.  An example can be seen on the Student Accounts page.

Images/Media

Images must be approved, relevant, and owned by the College. Images must have alternate text for screen reader accessibility. They should have a set size, so they do not take up too much space or take up loading time and data for the user. Video is rare and must be approved, accessible, and owned by the College.