Web Policy and Guidelines
UND Website Policy
All UND websites must adhere to University brand and identity guidelines as set by the policy. Academic, support and affiliate website must be constructed in the approved content management system (CMS). All entities hosed on UND servers must adhere to all requirements in this policy.
Service Level Change Request
UND websites have fully-managed, standard or independent service levels. To request a service level change, please complete the form below.
SERVICE LEVEL CHANGE REQUEST FORM
Community Server
UND provides community server space for faculty, research, or other websites that are exempt from using UND templates (UND template, Centers template, Third Party template). Exemptions must requested and approved in accordance with the UND Website Policy.
Sites using community server space are independently managed and the Web Team will not provide services or support.
To request community server space, email marketing@UND.edu.
Student Organization Sites
Student Organizations are not official entities of the University and may not represent themselves as such. Student Organization are encouraged to use the Involvement student organization directory provided by the University as their official website. Student Organizations are not permitted to use UND website templates and must follow logo/brand guidelines.
If the Involvement website does not meet your Student Organization’s needs, you may create your own website and host it on a UND or external server. The site must be independently managed and the Web Team will not provide any services or support.
Student Portfolios and Web Pages
UND does not host or provide support for student portfolio or other personal web needs. It is recommended to use third-party services like Wix or Squarespace.
Accessibility Best Practices
Content editors should follow these guidelines when updating content:
- All web pages must have unique page titles (40-60 characters).
- Image alternate text should be meaningful and descriptive (keep below 53 characters).
- There is only one <h1> per page. After an <h1>, pages should have a proper hierarchy of heading tags with <h2> tags appearing below a single <h1>, <h3> appearing below an <h2>, and an <h4> appearing below an <h3>.
- Avoid using images with text. Including text as part of images presents issues not only for the visually impaired, but those using screen magnifiers as well as those who are dyslexic or have other cognitive disabilities.
- Avoid using nondescriptive link prompts like "click here," "read more" or "learn more". These links are not descriptive enough since all links are read aloud by screen readers without context.
- Avoid posting URLs as text since these URL links are read aloud by screen readers. For example, instead of saying, "Visit Admission at www.UND.edu/admission to request more information," you should link the descriptive words or phrases, e.g., "Visit Admissions to request more information."
- Tables are used for the display of tabular data only. Content in data cells is associated with headers and rows.
- Avoid ALL CAPS, bolding random words and underlining anything that isn’t a link.
- Use lists where appropriate to accurately convey structure and relationships of text or a list of items. This may be done using unordered lists (bullets) or ordered lists (1., 2., 3.).
Naming and Resizing Images for Web
When placing images on the web, it’s important to be thoughtful about the size and file name given to the photo used. The image guidelines created by the UND Web Team ensures the user experience is optimized for both desktop and mobile devices, and that organization is maintained within OmniUpdate by using straightforward naming conventions.
To get started, refer to the template guide and determine the size of photo you need and for suggested naming structures. Image sizing requirements have been listed for all image types on the Universal, College, and Landing Page templates.
OmniUpdate does not have a good photo editor; therefore, you’ll need to use your own photo editing program. There are many photo editing programs, including the most popular: Adobe Photoshop. But you can also use any image editor already on your computer, or you could try a free web-based resizer like PicResize.
How to Size Photos in Photoshop
Using Photoshop, crop the image to the desired size:
- Using the crop tool, select W x H x Resolution in the dropdown toolbar, then enter your photo size in pixels (px), drag the cropping bars to include the desired image and a resolution of 72 dpi. Press ‘Enter.’ The image is now cropped.
- Once cropped, save for web (File > Export > Save for Web). Saving for web compresses
the photo so that it will display clearly, but will load quickly on the page.
- Rename the file using the proper naming convention: Keep the original file name and add the size to the end. For example, if we size a photo for a billboard, name the file 151014-squires-hall-billboard. If the size is just a random size, we would name it 151014-squires-hall-1920x1200.
- Click ‘Save’ after naming the file.
- Photos should then be saved in the “_files” folder in OmniUpdate to help with long-term site maintenance.
Image Tips
- Photos for the UND website should not be larger than 300 kilobytes. Large image sizes impact page load time. This leads to a frustrating experience for end users and negatively impacts how the page will rank in search engines.
- Always save images to 72 dpi. This is the lowest resolution recommended.
- Images with text are not allowed, in order to meet federal accessibility standards. If images with words are required information, please consult with the Web Team to determine if the image can be used and still meet accessibility standards.
Resources
- Faculty and staff unfamiliar with Adobe Photoshop are encouraged to attend TTADA’s Photoshop course that provides hands-on learning of basic tools and concepts. If Photoshop is unavailable to you, please reach out to your department to learn about obtaining a license.
- Looking for images? The UND Photo Gallery is available for general use with a UND login, and additional archived photography can be requested by emailing marketing@UND.edu.
Proper Use of Accordion/Tabs Snippet
Misusing the Accordions/Tabs snippet can make your website challenging to navigate. While shortening page content and hiding some content can make a page seem less daunting, they are not a one-size-fits-all solution to making your site user-friendly or easily found in search engines.
When and When Not to Use Accordions
Snippet Best Practices
- Take note of heading structure on your page and set snippet Heading Level field properly.
- If you have a Heading 2 above your accordion/tab, your Heading Level should be H3. If you do not have a heading above your accordion/tab, Heading Level should be H2.
- Continue proper heading structure within the snippet content section. If your Heading Level is H3, ensure headings within content are H4-H6.
- If you have limited content within each tab/accordion, use headings instead. Users prefer to scroll down well-organized web pages (that include headers) to find useful content. Forcing users to click into a snippet to find valuable content is not recommended.
- Accordions/tabs cannot be used within within each other and will not publish.
- Use simple headings. Users scan website headers to find the content they are looking for. Search engines also use headings when ranking your pages. Using headers that include terms that your users are searching for can increase SEO performance.
Frequently Asked Questions Pages
Use the OU Analytics to ensure that your Frequently Asked Questions pages are getting web traffic. In most cases, FAQ pages are not getting viewed and are hard for users to navigate. If this is the case, it is recommended to adjust page content to be more easily digestible to readers or remove FAQ pages from your website altogether.
Follow FAQ page solutions below. Content shouldn't be duplicated on your site. If you have page content elsewhere on your site, use the FAQ page to link to existing information versus duplicating content.
FAQ Page Solution 1
Some FAQs are presented as more narrative text vs separate question/answer pairs. In these cases, observe the following practices:
- When taking content out of accordions, find opportunities for grouping like topics together under a single H2. Then break out sub-topics by utilizing H3 headings.
- Where necessary, drill content down even further by utilizing H4-H6 headings.
FAQ Page Solution 2
FAQ pages with a limited number of questions with short answers should just be presented as questions as headers with exposed text answers, rather than in accordions.
- In these cases, use H2s for the questions and answers as paragraph text. If answers necessitate being broken out further, utilize H3-H6 headings.
FAQ Page Solution 3
FAQ pages with a large number of question/answer pairs, with very long answers, or with other narrative text in addition to the FAQ content might be candidates to remain in accordions. In these cases:
- Consider grouping like questions together under one H2.
- Maintain the established hierarchy of the accordion label being the H3, and separating sections within the accordion with H4 headings.
- Where possible, shorten accordion labels so they don’t overwhelm the user.
- Include an introductory sentence or statement to the FAQ’s. FAQ’s should not be alone on the page without any context.
- Use Google Analytics event tracking to pull out any content that is heavily accessed. This should be on-page content - not in accordions. Reorder the FAQ’s to present the most frequently accessed information first.
- Go to: Behavior > Events > Pages
- Run filter: Include Page Containing /human-resources/
- Click Apply
- Click on the page you want to go further on.
- Click Accordions under Event Category
- Click the page
- You’ll get a list of accordion clicks.