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 choose to attend National Park College.

Setting up a new page

If a page needs to be created or moved, contact the web team via the online service desk. 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 web pages include many different components, include editable and uneditable regions of the page. The banner image is a static region at the top of each page that departments can personalize to reflect their page content. When selecting a banner image, it should be owned by the College, of appropriate size, and correspond to the content of the page. The web services team can assist with selecting banner images. 

The side navigation is a static region positioned on the right side of each page. This area must be edited by the web services team. Side navigation consists of the directory title and any subdirectories underneath. In rare circumstances, navigation may include a third level for very important pages of the subdirectories.

The main content consists of four parts for most of our pages. They are labeled Top, Middle-Left, Middle-Right, and Bottom content.

Content

Styling (Fonts, Bold, Spacing)

For the most part, the content added to the page will be plain text in paragraph form. 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)

Headings are used to create page hierarchy and optimize page content for search engines. Heading level 1 is used as the main page 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. There can be multiple Heading 2 headings, 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 Advancement.

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 College's style on the website. Tables need to have table headers along with the scope of the headers. Check out the accordion in the Transfer Opportunities 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. Visit the ResLife FAQs to see an example of an accordion FAQ.

Calendar Feed

If you have entries for the campus calendar or need certain items, including 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.