Style Guide

Last Updated 11/29/2023

1. This is a working document. Information may change or update, so it’s great to check in periodically.

2. This is not a training guide, and assumes the reader understands the basic interworking of current website authorship. Training videos available on the Shared Drive --> Revize Training

3. If there are any questions or concerns, please submit a ticket to IT

LOOK AND FEEL

• It is best to use the default font, size, color, and headers across the site.
  • This website has the Accessibility Wizard available on the right side of the screen for anyone who needs to enlarge or otherwise change the way they see the text.
  • All main page fonts are also required to remain as default to maintain site feel and consistency throughout.
  • To clean formatting:
    • Paste any text from other websites or word processors into the content editor by right-clicking and selecting “paste as plain text” or control+shift+v to clean formatting.
  • Headers should be used sequentially in relation to each other. Examples: (H1, H2, H3) or (H2, H2, H3) but NOT (H1, H3, H2) for accessibility purposes
• Banner photos and images should not contain any additional text because alt text cannot capture and translate all of the content within that image for screen readers.
  • Banner image dimensions: width 1728px and height 546px.
  • Incidental text in a photograph, where the text is not requisite to understanding the content is okay.
• Review pages under mobile and as many modern web browsers as possible to avoid unforeseen display or information issues arising
• When adding a news item, you will need to add the image into the content editor as well. The image you upload at the bottom which shows up in the preview on your department landing page won’t automatically be added to the news post. Be sure to add the image you want for the news article within the content editor, at the top above your text, as well as in the indicated upload box at the bottom
  • News Item Image Dimensions for preview: 348 x 380px for the image upload box at the bottom
  • Departments have the option to select “Add to homepage” for relevant news items
• If you ever add an image that is too large, open the image editor, be sure “Compress 70%” (or more if necessary) is selected, and click SELECT ALL and save

NAMES/DATES/TIMES/ADDRESSES

• Names and titles should be capitalized
  • Deciding how to format a title? Check here: https://capitalizemytitle.com/
• Dates written within a piece of writing should have the month full text, a digit day field, and a four-digit year or listed as the month full text and day with suffix. Days of the week should also be written out full text within a piece of writing.
  • Example November 29, 2023 or Monday, November 29th.
  • When creating a list of many dates for events or programs this can be shortened to the day and/or month abbreviation. For example, if listing all your departments' events for November 2023, they can be listed as Nov. 29, Nov. 30, etc. or every Wed. and Sat.
• Always avoid only digit dates because those formats can be switched depending on language/cultural norms. A correct example would be November 22, 2023 and NOT 11/22/2023.
• Times should be listed with digits showing in the hour and minutes field, followed by a.m. or p.m. accordingly. Example: 8:00 a.m. - 5:00 p.m.
• Addresses should be formatted as the following example is-- Office (if applicable), the building number, the street name, the City and State (WA), zip code
  • City Hall, 190 SE Crestview Street, Bldg. A Pullman, WA 99163
• All phone numbers listed should be linked so users can just click or tap to call
  • To do this, go to the Content Editor, highlight the phone number or email, click the link icon, and then under existing url type in tel:0000000000 (no spaces or characters). It will say it isn’t an existing URL and you just click continue.
• No plain text emails unless it is not a personal one, such as communications@pullman-wa.gov
  • Please see IT’s guide to create contact forms: https://helpdesk.pullman-wa.gov/IT/kb/faq.php?id=319
    

DEPARTMENT LANDING PAGES

• The previous is slightly changed on the left menu for the department’s landing pages. This is due to several factors, including the template set up, limited amount of space, and the fact that the address links to a map.
• Generally, titles for each box need to be: Contact Us, Hours, Follow Us
• Generally, each department landing page should have all three left side boxes populated.
  • We understand some departments, IT for example, may not need to include contact information as they are an internal department and FIRE, for example may need to indicate that the hours listed are their business hours since they are available for emergencies 24/7
• Department Image List Tiles work as department-specific quick links. Dimensions: width 529px and height 216px
• Each Department has the capability of creating their own department-specific alerts.
  • This is a good spot to announce an unexpected cancellation or other important department-specific items. It is best not to over-use this feature so that users don’t get used to seeing it all the time, as they can simply exit out of it, which could become habit if something is always there.
  • That being said, it is an excellent resource! The option to edit your department specific alert is on the bottom right corner of your department landing page. If you click EDIT ALERT and add a title and click save, it will automatically pop up. If you wish to disable it, you can click EDIT ALERT and delete the title so that field is empty and click save and it will automatically disappear.”

LINKS

• Links to internal pages should open in the same window
• Links to external pages must open in a new window
• This is set up for you as the default, but it is good to double-check

FILE MANAGER

• All images and files should be named something meaningful and useful to someone who is not in your current position
• Images and documents used on the website should be stored under the following within the file manager:
  • ­­Images OR Documents --> Services --> Select Your Department/Division and within the relevant file if applicable

• Other locations:
  • Images used for news articles will be organized under News --> Department News --> Year  --> Month

• Files and images not falling into one of these categories can be created along the same guidelines, but if there is doubt, please ask a site administrator.
• Editors are not permitted to move images or files once they exist in the structure to prevent breaking links. Any changes needing to be made in the file structure must be done by an administrator, and can be requested by submitting an IT Ticket

ACCESSIBILITY

• Images inserted with the Image Library should always have a description entered for alt text.
• Before using a PDF, consider what value is being added by making it a PDF rather than putting the text directly on the page. HTML5 (the behind-the-scenes language that makes webpages work) includes markups that improve accessibility for assistive technologies beyond what can be done with readable PDFs - headers, data tables, image alt. text, etc., and does not remove the user from the existing navigation framework. (Additionally, PDFs are just another “click” for users to navigate for the information they are looking for.)
• Frequently Asked Questions (FAQs), short policies, information that's frequently changed, should never be put in a PDF.
• Printable/fill-and-print forms are good candidates for Revize Forms or alternatively, PDF
• Very long documents (policies, contracts, etc.) of 10+ pages are good candidates for PDF
• Flyers, promotional materials, etc. which provide an "eye-catching" portrayal for sighted users of material that is also available in a text-only format for users of assistive technologies, can be good candidates for PDF
• No images with text for design and accessibility requirement standards
• Whenever possible, keep page titles to 3 words or less
• All files and PDFs uploaded to the website must be readable by screen readers.

FORMS

• Created at https://pullman.rja.revize.com/login
• Embedded v. Separate Page Guidance
  • For forms that are more seasonal or temporary in nature/forms that won’t stay up long on the website, the guidance is to do a separate page.
  • For forms that will always be up/forms that we don’t plan on removing should be embedded in its own page on the website.

CALENDAR

• Dimensions for calendar events are 500x210
• Events categorized as “highlights” populate the preview on the home page.
• Closures/holidays that occur M-F will be listed on the calendar under “highlights” and then populated to each individual calendar.
  • There is no need for each department to enter its own unless a closure or holiday will affect only your department or occurs outside of M-F
  • Used sparingly, departments can occasionally post their important or special calendar items to “highlights” as the secondary calendar.
• “Meetings” will be the primary calendar for City Council and other board, commission, and committee meetings; there is an option to post to a secondary calendar. For example, a Cemetery Committee meeting would be listed under the primary calendar “meetings” and the secondary calendar “parks and recreation”
• _­Make sure all Council Meetings and meetings featuring a public hearing are listed under “highlights” as the secondary calendar so as to populate a preview on the home page­­­­