Web Services

Man coding on computer

The NPC website is often the first interaction prospective students have with the College. It is our primary communication channel to the community. Our web team stays current with the latest digital technologies. While continuing to develop the NPC website, we will work with you to find new ways of reaching your department's audience through the very latest in online and social media strategies.

OUCampus Training

Our web services office offers specialized training in social media, OUCampus content management, and a variety of other topics. Our Website CMS Training page includes links to tutorials and other helpful info for learning to work with NPC's content management system.

Website Requests

The primary focus of the web services office is the day-to-day maintenance of the NPC website and to facilitate an easy method for faculty and staff to maintain the content on their respective pages. We also offer assistance with the design, layout, and format of your pages. Time to complete your project is dependent upon the scope of the project. Please plan ahead as much as possible.

Submit a website request

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
    • Grandchild – H4
  • Child – H3
  • 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.

Writing for the Web

People read differently online, so we have to write differently.

Be Brief

Omit needless words. People don’t read deeply online – they scan.

Read more about users reading habits from Jakob Nielsen's, How Users Read on the Web.

Create scanability

People scan when they are looking for something to read. Once they locate the right content, they often read more deeply.

Help your readers by using microcontent (40-60 characters) like headings, lists, and tables to make your pages easier to scan. Readers look for

  • Relevance
  • What’s at the top
  • Headlines and Titles
  • Links
  • Images
  • Lists

Use microcontent

Microcontent is important for ADA compliance because screen readers often read it. It is important for search engine optimization (SEO) because it is scanned by search engines to help others find our pages. It sometimes appears out of context, especially when that content is the title of a page or post. Page titles that make sense on a web page often stop making sense when they appear on Google, Facebook, a homepage, or even in a browser tab. Important examples of microcontent include:

  • Page Titles
  • Alternate Text for images (read by screen readers)
  • Section Headings
  • Hyperlinks
  • Keywords

Read more about microcontent from Jakob Neilsen’s, Microcontent: How to Write Headlines, Page Titles, and Subject Lines.

Do it fast

Readers make up their mind about you in about three seconds. Shoot the sheriff on the first page! Put what your reader most needs and wants to know first. If you don’t get your main idea across in the first few lines, you will have readers who do not stick around or who miss what the page has to offer.

Keep it real

Authenticity is rare. Stand out from your peers by tossing out the bologne. Readers do not tolerate it well. Use stories readers can relate to and that help them feel connected.

Know your audience

Know who they are and what they want. Web readers are very goal directed. They do not typically come to your site to “surf.” They want to get something done and get out.

  • Do they want to know your tuition?
  • Do they want to know when that band they like is coming to campus?
  • Do they want to knowhow to contact you?

If your web writing gets in the way of a reader completing their goals—they will skip it, or leave your page and move on to someone else.

Speak in plain English

Ditch the academic speak and move to a more conversational style. Readability scores put your writing through a formula that gives a score for how easy it is to read. These formulas typically look at the number of syllables per word and number of words per sentence. Test your writing with the online readability service, www.read-able.com. Also reference federal plain language law at, http://www.plainlanguage.gov/.

The right readability level for prospective college students in 11th and 12th grade should aim below 11th grade. Depending on the reading and writing abilities of your incoming freshmen, you might choose to go even lower.

Note: Microsoft Word has convenient readability scores built in. Unfortunately, Word caps the grade level it reports at 12. To access these tools go to File -> Word Options  -> Proofing – > Show Readability Statistics.

Then, go to the Review tab, click on “Spelling & Grammar” and complete the spell check process. Once completed, a window will appear with your readability statistics.