Website Best Practices

Boards & Commissions

Pages that house information on boards, commissions, and committees should be formatted consistently and include similar types of information:

• Meeting times and locations - Citizens should know exactly when and where they may attend a meeting.
• Agendas and minutes - Citizens should be able to easily access the most recent agenda and archived minutes housed in our Agenda Center.
• Members - Citizens should be able to access a list of members, titles, and term expiration.
• Responsibilities - Citizens should be able to know why the entity exists and easily access any other general / pertinent information.

View an example boards and commissions page for more details.

Source: Research-Based Web Design and Usability Guidelines, Chapter 1:3

(Back to top)

Contact Information

Any page that has contact information should utilize the Info Advanced module to display a contact box in the feature column. Using this module helps users find contact information in a consistent place on all your pages. View the contact boxes page for a more detailed example of what this area should look like and information it should include.

Source: Research-Based Web Design and Usability Guidelines, Chapter 2:3

(Back to top)

Dynamic Subpages

The Dynamic Subpages layout creates pathway pages for your users that increase the usability your website. While not the best choice for main department pages where users are expecting information, main navigation pages and those with many subpages benefit from this type of page.

• Subpages - Subpages are listed out as links, along with their page descriptions. This will give citizens a general overview of the section, and allow them to get a brief, one-sentence description of what is on a page before viewing it.
• Maintenance - Dynamic Subpages are also low-maintenance; titles and page descriptions update automatically as you make changes to the subpages, without the need to manually re-enter information.

For an example of a Dynamic Subpage, view the Your Project Guide page.

Source: Research-Based Web Design and Usability Guidelines, Chapter 7

(Back to top)

Formatting

Making your content easy to find and laying out information in a way that is easy to read or scan is a great way to ensure return visits from your citizens. Here are a few tips on how to format information to make it web-friendly:

• Use subheads to break up content and make scanning through the page easier for users. If you are switching topics or ideas, use subheads to show this and make your page easier to scan. To optimize reading comprehension, minimize the number of words in sentences, and the number of sentences in paragraphs.
• Use bulleted or numbered lists and tables to make reading information simpler for your users. Bulleted lists are useful for lists of "things" (people, duties, amenities, etc.). When possible, alphabetizing the bulleted list makes it easier to scan quickly through the list. Numbered lists should be used for step-by-step processes such as giving directions. Tables are useful when you have a list of information that is directly related to other information, such as fees or class times.
• Format all your pages consistently. Make it easier on your users by putting the same type of information in the same place throughout your website. Always put your contact information in the same place. Consistently use your modules to house supporting information (such as frequently asked questions). Use the same format for phone numbers, operating hours, addresses, job titles, photos, etc. throughout the website so that your website maintains its professionalism.

For a more in-depth look at formatting pages, view your Site Standards page and our blog about 4 Steps to Better Government Website Content.

Source: Research-Based Web Design and Usability Guidelines, Chapter 9

(Back to top)

Forms

Online fillable forms are typically recreated in the Forms Center module. Online PDF forms can be left as-is or recreated. A PDF form is recommended if the information needs to have a signature or if the form includes confidential information like a Social Security number.

An online form created in the Forms Center module can be submitted to specific email addresses and users can receive a copy of what they submitted.

If you have an online form on your previous website that can be transferred over to your new website without losing functionality, it is a good idea to do so. However, if the form was previously a fillable PDF and the functionality would be reduced, it can be left as is and transferred over to the new website.

Source: Research-Based Web Design and Usability Guidelines, Chapter 3:2

(Back to top)

Images & Clip Art

Images should be used to enhance the content on your page. Stay consistent with the CivicPlus Image Guidelines that we use to keep your site looking professional.

If you have multiple photos that you would like to include on a page, we recommend either using a slide show or a photo album.

• Slideshow - Creating a slideshow allows for multiple images to share the same space on a page. Images should be the same orientation and size when embedding a slideshow on the page to avoid images that look like they are "jumping" when the slides change. Please keep in mind that the more images you have on a page, the longer the page will take to load. If you have more than 3-5 images, CivicPlus recommends using the Photo Gallery module instead.
• Photo Album - The Photo Gallery module allows you to showcase photos from in and around your organization. You can also turn on the ability for website visitors to upload their own photos (pending confirmation). The Photo Gallery module is similar to Flickr in that you have a slide show of the photos in your album and users can vote on their favorite pictures.

Clip Art

Clip art and stock images should not be used due to their generic nature - it's been shown in eye-tracking studies that users actually ignore images that they perceive as stock images. CivicPlus does not recommend the use of clip art or stock images and it is our best practice to not use these your website.

Source: Research-Based Web Design and Usability Guidelines, Chapter 14:9

(Back to top)

Modules

Use modules to organize information on your site whenever possible. Modules help both you and your users:

• Consistency - Modules put information in a consistent format and location no matter where a user is on your site.
• Maintenance - Updating information in modules is much easier than updating the same information on multiple pages on your site.

For more information on modules, including what modules we work on when developing your site, see the Module Listing page.

(Back to top)

Page Length

In general, shorter pages are best for home pages, navigation pages, and pages that need to be quickly browsed and/or read online.

A “page” is roughly defined as the amount of information that can visibly fit on one screen without scrolling. Character counts may vary depending on the content of that page (images, tables, etc.); however, a maximum of 2,500 characters is a good rule of thumb to use for a text-heavy page. This allows for easier viewing and less scrolling to obtain information.

Source: Research-Based Web Design and Usability Guidelines, Chapter 6:10

(Back to top)

PDFs

PDFs are best for portable information. Tips, checklists, definitions, policies, etc. are best placed in PDFs and linked to throughout a website. This allows citizens to save, email, print, and access the information more easily offline. PDF documents are preferred over Word or Excel files because the software to open them, Adobe Reader, is a free download. Reader allows users to type directly into form fields in a digital document without altering the rest of the text, while Microsoft Office is not free and could allow citizens to accidentally alter or save over other parts of the document.

CivicPlus will turn pages into PDFs for the following reasons:

• If you have content that does not change often or at all, you should place it into a PDF to help you with the upkeep of your website.
• If the content is something that your citizens might want to print off and write on, you should turn that into a PDF.
• When the information is long and needs to stay together, you should turn the page into a PDF so that users do not have to do a lot of scrolling to find the information they are looking for.
• Lengthy sections of text such as histories or instructions are better suited in a PDF.

Learn what becomes a PDF and why (PDF).

Source: Research-Based Web Design and Usability Guidelines, Chapters 2:9, 2:15

(Back to top)

Style Guide

On websites with many pages and several different authors, it's important to try to keep writing consistent for your users. This helps them view your website as a trusted resource and also helps users find information more quickly. View your site standards.

CivicPlus utilizes a modified version of the Associated Press (AP) Stylebook as the basic guideline for all of our writing. Online and print versions of the AP Stylebook are available for purchase.

Source: Research-Based Web Design and Usability Guidelines, Chapter 11:2

(Back to top)

Subpages

When creating a linked subpage on the website, make sure to name it intuitively. For example, if the link opens a PDF application to participate in a program, title the linked page "Program Application" so that users will expect to find a document after clicking on the left-hand link.

Source: Research-Based Web Design and Usability Guidelines, Chapters 10:3, 10:12

(Back to top)

Tables

Tables are utilized for large amounts of corresponding information. If you have any information that is repeated over and over with slight variations (for example, a list of garbage pickup fees that vary based on the size of the container), it may be best suited for a table. For specific guidelines, view the Site Standards Tables page.

Source: Research-Based Web Design and Usability Guidelines, Chapters 9:10, 16:6

(Back to top)

Third-Party Resources

You are a trusted source of information in your community. Citizens will look to you for information pertaining to local issues, programs, crises, outbreaks, etc. Linking to third-party resources that are relevant to these topics is a great way to help your users get additional information.

This enables you to provide users with expert information on specific topics without having to create and update the content yourself. A good example of this would be linking to disaster preparedness information from FEMA if you are in an area that often has to deal with hurricanes.

Source: Research-Based Web Design and Usability Guidelines, Chapter 2:2

(Back to top)

Time-Sensitive Information

There are a number of modules you'll be utilizing for time-sensitive information. For a complete listing of the modules you will work with, please view Module Work You Do.

(Back to top)