Web Guidelines and Recommendations

The public web at UVU is a centralized system governed by standards to maintain our brand, our image, and our content at the highest standards. The guidelines and suggestions on this page can help guide the development of your site.

Creating Pages


Page Layout

Pages shouldn't be designed using tables. Tables are meant to display tabular data in rows and columns; they are not meant to align different pieces of content in your site. Tables don't allow for sites to adapt properly, and if used improperly, are not accessibility-friendly.

Learn how to create mobile-friendly data tables.

PDFs

PDFs can be useful for displaying content in an easily-printable format, however it is not always ideal for the web. PDFs can be large files, and may take a long time and a lot of bandwidth to download. They are also not always the best solution for search engine results. PDFs can also be tricky when it comes to providing content that meets accessibility standards. Whenever possible, try to make your content available on a web page in HTML before resorting to a PDF, and use PDFs carefully and judiciously.

Coding Basics

Though it's not required, learning the basics of HTML and CSS can make working on your department site easier, and can provide skills for advanced customization on your site. There are many tools and tutorials that make learning code basics easy, including some that have been selected by Web & Mobile Solutions. It can be especially useful to learn a bit about Bootstrap, which is used to make all of UVU's website mobile-friendly.

Page Checks

Publishing a page is the final step before your content goes live, so it is helpful to run built-in page checks in Omni CMS before publishing your pages. Just before finalizing your publish, you will have the opportunity to run checks on your page for broken links, accessibility compliance, and W3C compliance. These checks will inform you of any errors or warning that may need to be addressed before your page goes live.

JS, jQuery, etc.

While JavaScript, jQuery, and other languages are supported on uvu.edu, it is important to inform Web & Mobile Solutions of your intent to use them on your department site. WMS might already have a solution or tool to accomplish what you are trying to do, or the code you plan to implement may result in conflicts with existing code, present security concerns, or cause problems with accessibility. Be sure to contact Web and Mobile Solutions before implementing any code beyond standard HTML and CSS.

Publish Notes

Part of the publish process in Omni CMS allows for adding notes about changes that have been made to the page. Take advantage of this feature to remind yourself, or others who may be working on your site, about what changes have been made and why. This is especially helpful if the page ever needs to be reverted.

Content and Site Architecture


Audience

Be sure to remember your site's target audience as your write and edit your content. Be sure to architect your content in a way that makes sense to the audience that is using your site, and don't add content that is irrelevant to your audience.

Relevant Content

It can be helpful to think of your content in "chunks" rather than in entire pages. This can help prevent adding extraneous content simply for the sake of filling pages. Once your know your content chunks, you an organize them in a way that makes sense. Don't be afraid to edit your content and remove anything unnecessary. Your site shouldn't be treated as an archive.

Mobile Friendliness

Mobile friendliness (making content easily available to mobile devices) should be kept in mind while building sites. Generally, a site can be checked for mobile adaptability by adjusting the width of your browser and checking to make sure all content is visible and functions properly.

Be sure to take mobile visitors into consideration as your organize and build the content on your site. Important information should be near the top of your pages, and pages should be easy for mobile visitors to "digest."

Design, Styles, Logos and Colors


Colors and Fonts

Colors are a great way to add some visual interest to your pages. Be sure to use UVU-approved colors on your pages.
View the UVU-approved web color palette.

Do not underline text. Underlines should be reserved for links. Use other methods of emphasizing text, such as bold, italics, headers, etc.

Use only standard, web safe fonts. We recommend a limit of three or fewer fonts and font colors used on any page. We do not recommend or support Comic Sans MS, Cursive.

Logos

Don't modify UVU marks or logos.Follow the guidelines for UVU marks and logos.

Don't modify the logos of social media icons, etc. in an effort to match them to your site.

General Design Guidelines

Follow the current university style guides. If you need help with design elements, don't hesitate to contact University Marketing & Communications for help, or to ask questions.

Site Review Process

All UVU public websites are subject to design review by members of University Marketing & Communications and Web & Mobile Solutions to ensure that sites are meeting the design, accessibility, and code and best practice standards outlined in this document. Upon review, changes may be requested, or sites may be given further review by SWAT as necessary.

Images


Re-sizing Images

Make sure to re-size images before uploading them to your site, or use Omni CMS's image resizing tool. Don't upload "raw" images to your site, or overload a single page with images -- it takes too long to load.

Images as Content

Don't use images of text in place of content on your site. They are not search engine friendly, and they are not accessible. You may use images to supplement your text content, but not instead of text content.

Image Quality

Make sure that the images your use on your site reflect the serious and professional nature of UVU as a higher education institution. Don't use copyrighted images. Don't use images that are too small for the space you are trying to fill. Test to make sure your images look good on mobile devices.

Accessibility


Links

When including links in your content, use text that properly describes where the link will go. Using "click here," "learn more," "more," is not considered descriptive, and is ineffective for a screen reader user.

Learn more about making links accessible.

Color

Make sure that users can read text that is presented over a background.

The most common form of color deficiency is red-green color blindness, which affects approximately 8% of the population. Be sure to use other visual indicators to distinguish and organize your content, and to use a color contrast checker to make sure your text and background colors have enough contrast.

Learn more about choosing accessible colors.

Documents

When people talk about "accessible" PDF files, they usually are referring to "tagged" PDF files, even though there is more to an accessible PDF than tags. PDF tags provide a hidden structured, textual representation of the PDF content that is presented to screen readers. They exist for accessibility purposes only and have no visible effect on the PDF file.

Learn more about making documents accessible.

Images

Alt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page.

When creating slider or photo galleries assets for your website. Make sure to add a description of the image in the description field.

If an image is the only content of a link, provide alt text for images that are used as links.

Learn more about making images accessible.

Tables

Using tables for page layout adds additional verbosity to screen reader users. Whenever a screen reader encounters a table, the user is informed that there is a table with "x" number of columns and rows, which distracts from the content. Also, the content may be read in an order that does not match the visual order of the page.

Captions

Captions are text versions of the spoken word presented within multimedia. Captions allow the content of web audio and video to be accessible to those who do not have access to audio. Though captioning is primarily intended for those who cannot hear the audio, it has also been found to help those that can hear audio content, those who may not be fluent in the language in which the audio is presented, those for whom the language spoken is not their primary language, etc.

Learn more about using Kaltura to upload videos