Use your homepage to introduce your reader to your organization, a special project, etc. Describe your organization's objectives, in plain language, so that a visitor can quickly get a sense of what the site is about and why it is important. Include strong visual content and a brand-related graphics to orient your readers.
Convention on Queen's websites dictates that a contact page is included as the last tab in the main navigation.
A contact page should include, at a minimum:
Office location. Link to a building name to Queen's campus map by selecting your building on the map to find custom code that shows you building highlighted (i.e. the footprint is highlighted with a red outline). For example:
- Mailing address. If you don’t know the mailing address for your Queen’s building, you can also find it on the campus map.
Faculty and staff names, title, department and contact information (usually both phone and email) – or at least a single point of contact, such as an office phone number and office email address.
Many unit/department sites also include profiles of faculty/researchers, senior administration, and staff.
Be sure to use a consistent layout: a similar size for profile photos, a similar length for bios, links out for further information, contact information, etc. Ensure the people being profiled have approved their personal content.
Where individuals have multiple profiles across Queen’s sites, it is best to consider one of the profiles the "main profile." Other sites can link to the main profile for details rather than creating another profile.
Learn about the the WebPublish people directory templates...
News and events
Ensure all your news items ('articles") and event notices are dated. Include year, month, and day details in the body of each individual news/event page.
Pay attention to which details are displaying on an article page, news feed block or aggregator page (where all items are viewed together). Similarly, for events, review how event content appears on the event page, the event feed and the event aggregator page (i.e. See upcoming events")
To avoid hosting out of date content, only include content you "own." Don’t copy/duplicate content from another site, as you will not know when that content becomes out of date. Instead, reference that content by providing a brief description of the content and link out for the rest.
When linking to document/PDF managed hosted in another website, it is best to link to the pag on that site that provides the document/PDF, if possible, rather than to the PDF directly. Documents URLs are more likely to be broken than page URLs, i.e. when a document is updated, often the file name of the upload changes, and thus the URL also changes.
Consider using RSS feeds to pull and embedded content directly into your site, such as from the Gazette, Queen’s Events Calendar, Twitter, etc.
Lists, headings, and links
Write meaningful headings for lists of links: When grouping links together in navigation, avoid non-specific headings such as "Important links" or "Useful links" or "Quick links." Instead, find a heading title that provides context for the links.
Where you have more than 8 or 10 links, group items into categories/themes, or organize them chronologically or alphabetically. Where you have a very long list of links to offer, consider using accordion containers to keep your pages clean and easy to skim.
Indicate when you are linking to an external site: When linking your reader to a page off your site, the link text can indicate the linked webpage's location, such as "Learn more about xyz on the Queen's Gazette website"
Avoid linking headings; use meaningful link text: Don't link a heading and then provide context for the link below that link. Instead, provide some introductory or "teaser" content to introduce a topic and then link the user to more information with meaningful link text
Complex Charts or Graphs
If complex charts or graphs are used, include a text summary and properly coded table of the data.
If infographics or flowcharts are used, a text equivalent should be present either below the image or on a separate page
For math equations, if the equation is simple, an image with alternative text describing the formula is used. If it is complex, the formula is present in MathML code.
For information on accessibility guidelines when using images of charts or graphs on your site, please see the complex images tutorial on the Accessibility Hub site.
Display live data on your site using free Google Charts tools
If web forms are used, ensure that:
- instructions are presented before the form
- labels are named and placed in logical order
- labels are associated with the actual form field
- labels for radio buttons or check boxes are located to the right of the options
For information on how to make your web forms accessible, please see the Web Forms tutorial on the Accessibility Hub website.
Collapsible or "Accordion" Containers
Using collapsible or "accordion" containers (see the Accordion Container Example page) as a layout tool can provide many usability benefits, but one must consider the pros of use and the cons of use and overuse based on the kind of content being displayed.
Accordion containers can contribute to a better user experience on mobile. The headings of each collapsible section, if well written/described, can provide a broad overview of page content for users without requiring a lot of scrolling.
The accordion format can be especially useful when guiding people through a few key pieces of content on a page, such as a multi-step process, where information can be shown a little at a time so as not to overwhelm the user.
However, too much content inside each collapsible section can lead to a lot of scrolling and disorient the user.
Also, too much content "hidden" inside the accordion containers can reduce a user's ability to discover it. It the user has to to a lot of clicking to open one container after another, they may quickly lose confidence that they will find the information they seek.
Having all content of a page in full display at all times, and at least the most important content, is often a better approach. Usability studies and eye tracking shows that people are willing to scroll if the information is valuable and formatted properly for scanning. But in some cases, lengthy content is better managed by hosting it across more than one page. Learn more about Writing for the Web
Do: Use accordion containers to guide users though stepped information
Do: Ensure that headings and content within each collapsible area is succinct.
Don't: Don't use collapsible menus as a crutch or a tool to cram a lot of content onto a single page. Long sections of content should be reworked and broken into smaller sections with headings for scannability.
Don't: The accordion style is often adopted for formatting FAQs, but FAQs themselves can be problematic. Learn more about FAQs
When using tables in your site, ensure that they are only used to display tabular data, and not used to position text on the page.
When using a table, be sure to include <th> table header tags to first row, so that the data is properly labelled and easy for all users and access.
Where using a table, be sure that the table format is responsive – i.e. the layout responds to the smaller screen size and is viewable on a mobile device without having to scroll right or left to view.
Learn about styling options for tables in WebPublish
See LinkedIn Learning (log in with your Queen's NetID) for courses on usability, such as: