saltar navegación

PCSD Website Style Guide

This style guide is a resource for internal content creators and administration throughout PCSD. The intent of this guide is to create clear guidelines and expectations for all content on our websites.

This style guide does not cover logos, fonts, and colors. These elements are fixed entities within PCSD website templates and designs, determined by the web team and communications department. The choices are based on specific criteria, ensuring a consistent and professional look across all PCSD websites. Colors, fonts and logo choices are based on the following criteria:

  • Web Content Accessibility Guidelines (WCAG), version 2.1, level AA
  • PCSD Style Guide
  • School and District Administration Preferences and Feedback

Table of Contents

Propósito

Our PCSD websites provide up-to-date information for all stakeholders, including guardians, students, community members, and partners. Our PCSD websites are:

  • A resource to understanding PCSD and schools
  • A resource for guardians to be involved in the education of their children
  • A resource for students to get involved and know what is happening at their school
  • A promotional tool to advocate for schools, teachers, and students
  • A mechanism for combating misinformation

Goal

PCSD websites support the district’s strategic plan by providing accurate and up-to-date information to all stakeholders and promoting positive accomplishments and outcomes.

Brand Voice

Welcome, Educate, Inspire

The Provo City School District is a vibrant learning environment where all students are inspired to become lifelong learners and engaged community members.

We strive in all our communication to emulate the core values from our strategic plan:

  • Belonging 
  • Creativity 
  • Empowerment 
  • Growth 
  • Community

The PCSD voice:

  • Empowers your audience: Project positive energy that inspires readers to engage in learning and feel empowered to assist their children and students in learning.
  • Is friendly. Embrace your audience and treat them as who they are — a vital part of our student’s education; they’re not just a part of the Provo family; they are the reason for our educational success.
  • Represents the brand: Keep your school/PCSD at the forefront of all communication and messaging.
  • Is authentic: Appeal to your audience with honest and genuine communication.

When you use these principles in your communication, your messaging represents PCSD’s voice. You don’t have to use all four in every message —consider your audience and objectives and select the most relevant principles.

Accuracy and Update Frequency

PCSD websites are expected to provide accurate and up-to-date information to stakeholders. To meet this expectation:

  • Posts are created at least twice weekly during the school year
  • Calendars are inclusive of all school events that are relevant to your community, and they are updated frequently
  • Websites are monitored daily by content managers to ensure announcement sliders are current and relevant and calendars are up to date
  • Websites are checked weekly by a school administrator to ensure:
    • Announcement sliders are current and relevant
    • Posts are frequently created
    • Calendars are updated
    • Directories are updated with new personnel information
    • Accessibility standards are met
  • An audit is performed before each school year to ensure:
    • Teacher and Staff Directories are updated
    • School Information is accurate
    • Policies and Forms are updated
    • Community Council Information is updated
    • All pages are relevant and up-to-date
    • All resources are relevant and up-to-date
    • Accessibility standards are met
  • Additional audits throughout the school year are encouraged
  • The Communication Department will do periodic checks on all websites to provide additional training and assistance as needed
  • The web team checks post content weekly for accessibility standards

Accessibility

PCSD websites strive to be accessible to all, including language and accessibility to those with disabilities.

Language Accessibility

PCSD websites use a language plugin. Content creators do not need to do anything to have content translated into all identified languages. With these important caveats:

  • Images with text cannot be translated
  • PDFs cannot be translated
  • Adding manual language translations to posts and pages without using the built in translation software will cause the post or page to fail compliance standards. If a manual language translation is found without using the built in translation software, it will be deleted.
  • Language translations are manually editable through the built in translation software. This requires additional training. Please reach out to the Communications Department

Disabilities Accessibility

The Americans with Disabilities Act (ADA) is a federal civil rights law that prohibits discrimination against people with disabilities in everyday activities. Section 508 of the Rehabilitation Act, as amended in 1998, requires equal access to digital content. Our school district complies with Web Content Accessibility Guidelines (WCAG), version 2.1, level AA standard.

Following these guidelines will make content more accessible to a broader range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodations for learning disabilities and cognitive limitations.

To ensure these standards are met, all website content creators are required to complete a yearly Digital Access for Disabled SafeSchool training.

Calendarios

PCSD website calendars use Google Calendars. All content managers, principals, and any assigned school administrators are granted access to their school’s website calendar. The Communication Department provides training on calendar access as needed.

Adding content to a website calendar is the same as adding it to a Google Calendar. Please note that new calendar items may take a few minutes to appear on the website.

Here are the expectations for each website calendar:

  • Calendar items must provide all relevant information, including the event’s name, what appears to be happening at the event, who the event is for, the date, time, and location and any other pertinent information.
  • Calendars must be inclusionary and equally represent all school happenings. This inclusivity is critical to making everyone feel valued and part of the school community. Sports, clubs, fine arts, specialties, etc., should all be equally represented.
  • You must update your calendars regularly to reflect all public events accurately.

To access to the your Google school website calendar, please reach out to the Communication Department.

Announcement Sliders

PCSD website templates include announcement sliders on each home page. Sliders are used to convey timely and important information to your community. It is important that these sliders:

  • Are updated regularly and do not contain outdated information
  • Include an announcement title and text
  • Use link label and link when further information is needed
  • The image used does NOT contain words
  • The image is 1000 pixels wide by 500 pixels high
  • Clipart is not used for image

Staff Directory

PCSD websites use a directory plugin centrally housed on the main district website and then added to appropriate locations. To update the teacher and staff directories on your website, you will need to work with the web team and/or communication department.

Directories are not automatically updated. Content managers and school administrators should regularly review their directories to ensure that they are up-to-date.

To update your directory, please submit a work order that includes the full name, position, email, and phone number (if applicable) of the person you would like added to the directory. If you need someone removed from your directory, please provide their full name and previous position.

Please note: The web/communication team has access only to badge images. If you have staff who would like updated pictures, you must include that image in your work order.

Formatting Content

How website content is formatted will make a big difference for end users. Content that is formatted poorly can leave the user feeling overwhelmed, while content that is formatted correctly can transform an insurmountable wall of text into approachable web content.

PCSD websites are WordPress websites, and all content formatting must be done within WordPress. Formatting can not be copied from a document and placed into WordPress.

In the Visual tab of the WordPress post editor, you have formatting options similar to those of Microsoft Word. Here, you can add header text, bullet points, bold and italics, and more. You must format your work in WordPress and not in Word or another external document editor.

Create Visually Scannable Content

PCSD online content is created in a way that is easily scannable. Readers expect to easily gather the information needed from the page with a quick scan. To create content that is easier to scan:

  • Use headings and subheadings to separate each topic covered
  • Create clear and concise headings
  • Limit to 3-4 paragraphs before breaking up the content with a subheading, list or visual
  • Use bullet points when creating lists

Use Page Hierarchy and Headings

Hierarchy helps to create a visual order and guides the viewer’s eye through the content. You can achieve hierarchy through the use of headings within your content. The hierarchy should be created to divide the content into separate subtopics within your post or page.

The title of a page should be an overview of all the content within the entire page. Create additional headings within your content to break it into different subtopics. PCSD websites are templated to use Heading 1 (H1) as a page title. Subcategories within your page should start with H2 and move down to H3, and so on. Here are some general guidelines:

  • Break up content into subcategories when possible
  • Create a title for the subcategories and format them as a heading
  • Always order your headings, starting at H2. Subheadings below each H2 heading would descend to H3 (Remember your title will automatically use H1)
  • Do not use a heading to highlight or bold something meaningful within a paragraph

Use Concise Page Titles

Both users and search engines read and use page titles to understand what a page is about. They are important for search engine optimization as page titles are used in rankings and vital for user experience. Here are some general guidelines:

  • Be concise: Provide a clear preview of the content that is on the page
  • Keep it brief
  • Don’t use complete sentences
  • Capitalize all words but the filler word
  • Don’t use all caps
  • Don’t use teasers or questions that lack a preview to the content

Format Lists

Lists are a great way to break up content visually, making it easier for the reader to understand your content. It is important to format your list using WordPress. When you copy and paste a list from a document, the list formatting does not translate correctly to WordPress. This issue makes it impossible for screen readers to read your list properly, and your lists become inaccessible for the disabled. Here are general guidelines when formatting your list:

  • Format your list in WordPress
  • Be consistent and make sure your capitalization and punctuation match in each bullet
  • Use ordered or unordered lists appropriately

Format Links

Links are a great way to direct your audience to more information. Formatting your links correctly is vital when creating accessible websites. When using a link, we ask that you:

  • Always use a link label and not the plain URL
    • Your link label should:
      • Be descriptive; provide accurate and meaningful link text
      • Be unique; if you have more than one link on your page, they should not read the same
      • It should be able to stand on its own. A screen reader can scan a page for links only; if you have to read the surrounding text for the context of your link, it is a poor link label
  • Whenever possible, separate your link out from the surrounding text
  • If you can separate your link from the surrounding text, bullet point your link. Our websites are designed to see that bullet as a link and add a link icon when it is bulleted

Visual Content

Visual communication is a powerful tool we embrace at PCSD. Through captivating imagery, we strive to show our audience that our employees care, that our students are engaged, and that PCSD is a thriving community.

We highly encourage using pictures and videos of the students and staff at your school. These images are the most powerful way to show your audience that students are engaged and that your staff cares. Here are some general guidelines when using images.

Whenever possible, add interest to your page by including photos, videos, and other visuals. Along with headings and lists, visuals do wonders to break up content on the page and prevent a wall of text.

Alternative (Alt) Text

Alt text is essential for making visual content accessible. When adding images, charts, icons, or other graphic elements, alt text should be added to ensure that the content will be accessible to all users.

Please note that PCSD templates do not support long alt text. If you need to explain your visual in detail, provide the context for the image in the surrounding text and mark the image as decorative.

A visual needs alt text when it’s an essential part of the page’s content and needs to be accessible to all users:

  • Informative visual
    • Images that contain information that helps users understand the page’s content
  • Linked visual
    • Images that are the only element in a link so that screen reader users can understand the link’s purpose

If you determine that the visual content is decorative, it can be marked as decorative.

Closed Captions or Transcripts

Creating closed captions for your videos is the best way to ensure your content is accessible to all audiences. We highly recommend using closed captions. Using different software programs to auto generate your closed captions makes this easier than ever, but it is essential that you manually check your captions for errors.

In the absence of close captions, please provide a transcript of your video content.

Featured & Announcement Slider Images

A featured image is required for each post and announcement. The featured and announcement images play a specific role in the design of our websites. When created incorrectly, you inadvertently create accessibility and reflow issues. Please follow these rules for feature and announcement images:

  • Images must be 1000 pixels wide by 500 pixels high
  • The image must not contain text
  • The image must not contain clipart

Documents and PDFs

Our websites support pdfs and xls. All documents added to websites must meet accessibility standards. Please consider adding your content as a post or page instead of a PDF.

Tables

Tables are occasionally used on our websites. Tables are only utilized when the information can not be easily understood in any other way. Tables must be marked up correctly to be accessible. Table headers <th> must be included on heading rows and columns. 

File Naming Standards

Make sure files and images are named correctly before uploading. You cannot rename files after uploading.

Generally, all file names must have lowercase letters and no spaces. Dashes are preferred when separating words. Most characters are not acceptable in file names because they are used for other programming purposes and may cause web browser issues.

All documents uploaded to the media library must include the appropriate extension so operating systems and web browsers know how to process the file (.pdf, .xls, .jpg, .png, .mp4).

Naming Documents

  1. Begin by typing the date the document was uploaded (don’t use slashes).
  2. The date format is month, day, and year with no spacing (example: 01242016). This helps the web team determine the age of documents when websites are audited without checking metadata.
  3. After the date, include the document’s title, the title you would see if you opened the document and looked at the top heading. This is important so it’s clear to our website visitors what file they have downloaded. It also helps search engines like Google understand the document’s contents.
  4. Next, indicate the function or purpose of the document. For example:
    • form
    • policy
    • infographic
    • procedure
    • faq (frequently asked questions)
    • guide
    • flow chart
    • invoice
  5. Lastly, don’t forget to add the document extension (.pdf, .xls)

Here are a few examples of adequate document names:

  • 01222016-6210-purchasing-­policy.pdf
  • 01222016-­dual­‐language­‐immersion­‐application­‐form.pdf
  • 01152016­‐3210­‐f1­‐ferpa‐opt­‐out­‐form.pdf
  • 12132015-­‐communications-­‐flow-­‐chart.pdf

Naming Images

Images are allowed in only two formats: JPG and PNG. Naming images is simpler than naming documents because they don’t require an upload date.

  1. Identifying the location of the image (What web page or news post will the image appear on?),
  2. Add the subject and/or purpose of the image. Don’t forget the extension (.jpg, .png).

Here is an example:

  • Location of image = Westridge
  • Subject and/or Purpose of Image = Stephanie Smith Teaching
  • Extension = .jpg
  • Result —> westridge­‐stephanie-smith-teaching.jpg

Common Website Problems

Below are common mistakes made on our websites.

Incorrect Link Labels

Link labels exist to inform our website visitors and help them understand what they will get when they click on a link—website addresses (URLs) used as link labels don’t inform our website visitors. Search engines can’t correctly categorize link labels that contain a URL. URL link labels obstruct disabled website visitors who use special screen readers. Sighted website visitors have difficulty parsing link labels that contain a URL.

Good examples of descriptive link labels:

  • Download the Wellness Program Flyer
  • IXL Math Website
  • Community Council

Bad examples of descriptive link labels

  • Click Here
  • Community Council Web Page
  • https://timpview.provo.edu/wpcontent/uploads/2018/05/THSFees20162017.pdf

No Alternative Text

Images might contain important information that search engines and disabled website visitors cannot see.

When images contain textual information, it’s required that the same information be provided through an alternative method in plain text.

Search engines can’t see text inside an image and, therefore, cannot correctly categorize the image.

Misused Headings

Headings are not only meant to make text larger; they’re also meant to structure web page content visually and semantically. Here are some best practices regarding heading usage:

  • A heading should always summarize the existing content below it.
  • Search engines use headings to categorize and prioritize the information on a web page.
  • Disabled Website visitors can use screen readers to skip all content and only read the headings on a web page. If headings are misused or out of order, it’s an obstruction to them.
  • H2 is always a subheading of H1. H3 is always a subheading of H2. H5 and H6 are never used on our websites

Skipped Headings

Headings are meant to outline web page content visually and semantically.

Other Common Problems

  • Use of all Caps
  • Overuse of exclamation points
  • Use of Clip Art
  • Use of QR Codes
    • QR codes are meant for printed materials. Please use links and link labels.

Problem Resolution

It is important for PCSD websites to provide up-to-date information for all stakeholders. Please check your websites frequently and keep them updated and within the website guidelines.

The web team checks posts every week for accessibility issues. They will fix minor issues that arise, but repeat issues and larger problems are referred to the Communications Department. The Communication Department will then contact the school and offer additional training and support.

New content managers and anyone creating content with access to the website must complete a Digital Access for Disabled SafeSchool training and receive website training from the Communications Department.

If you see a problem on your website, create a tech work order. Be sure to include links and all relevant information.

es_MXEspañol de México
es_MXEspañol de México en_USEnglish