Web Guidelines
UNI uses a component-based design approach to the website to enable development of websites more quickly and maintain consistency throughout the web site. UNI's Component Library contains the elements available for campus web developers and editors. Many of the components have a variety of options to choose from, creating a versatility in the design while maintaining UNI brand standards.
Below are some general guidelines on building strong web pages that are accessible and optimized for traditional and AI search.
Headings
Headings help users and search engines understand what the content on a page is about. When editing in Drupal, you’ll see different ‘levels’ of headings in the text editor — from ‘Heading 2’ (H2) to ‘Heading 6’ (H6). Heading 1 (H1) will automatically be set to the title of the page. There should only be one H1 per page.
For the main topics on your page, you should use a Heading 2 (H2). If those topics break down further, you can continue on to use a Heading 3 (H3). Heading levels should not be skipped, headings should be chronological. Having headings in order keeps the structure logical for users and machines — including screen readers and search engines.
Images
All images should have descriptive alternative text. This text is what users utilizing screen readers will hear in place of an image. The best way to approach alt text is to think how you’d briefly describe the image over the phone. A few words will usually be enough; though sometimes a full sentence is necessary. Never start with “Image of …” or “Picture of …” It’s going to be obvious to either a person or a machine when something they're accessing is alt text.
You can select high-resolution photography from the UNI photo library in UNI Photoshelter.
Links & Buttons
Do not use “Click Here” or “Read More” as link text. The link needs to be more descriptive for usability and accessibility. Screen readers can list links on a page without the context around the link, so it’s important that users can understand where a link will lead by just reading the link text.
Some best practices when creating button labels:
- Use Action Verbs
- Use Task-Specific Language
- Use Title Case
- ie : Explore a Degree in Business
Spacing
Paragraphs
Paragraphs automatically include extra spacing after to separate it from the next paragraph. You can use a line break or a soft return (shift + return) to eliminate that space and keep two lines of text together in the Paragraph Format dropdown.
Bulleted Lists
When using bulleted lists, if just a few words per bullet, do not add space between each bullet. If bullets are sentences, add space between each bullet by setting them as normal (paragraph) style. Do not center bulleted lists.