Web Standards YSU

Overview

Websites created by academic and administrative departments must comply with YSU's website brand standards to provide a consistent and recognizable user experience that represents the University's brand accurately.
Additionally, all university websites should adhere to W3C Web standards, including the consistent use of semantic HTML, ADA section 503c accessibility compliance, and adherence to best practices for usability, such as responsive design for portable devices.

 

University Web Themes

Although custom websites can be created, they must adhere to YSU's basic Web standards. It's recommended that departments use one of the approved University web themes as a foundation, which can be extended with custom elements when necessary. Web Team can provide guidance on adding custom elements.

 

YSU's Brand Standards for Websites

University Header

Each page of the website must have the official YSU logo in the header element at the top. The header should not be altered, resized, or include any additional elements, and it must have proper margins and spacing. The University seal and signature should not have any other marks above, next to, or on the same horizontal plane as them.

Site Logos

Coming soon

Fonts and their Seizes

Coming soon

Official Colors

Coming soon

Official Footer

A footer element should be present on every page, which can be kept simple or include links to various resources, such as forms, popular resources, social media, and other destinations.

Typography

It's crucial to pay attention to typography to maintain professionalism and credibility in your online communications.

  1. Proper Contrast
    The contrast and readability are affected by both color and size, and there are various tools available to help ensure your site adheres to ADA guidelines.

  2. Reversed text
    Avoid using a lot of reversed text, where light-colored text is presented on a dark background, as it can be challenging to read. However, using small amounts of reversed text to draw attention to specific information is acceptable.

  3. Multiple color for Text
    Color conveys meaning on the web, and alternate font colors are commonly used to indicate links. To prevent confusion, it's best not to use alternative colors to emphasize specific text phrases. Additionally, underlining text to indicate links should also be avoided.

  4. Links in header text
    Embedding links in header text (H1-H5) negatively affects usability, as it disrupts the visual queue for scanning content. The embedded link color interferes with the scannability of the page. It is ideal to place embedded links in paragraph or list text following the header.

  5. Layers of Headers
    Headers define the hierarchy of the page structure. Visitors tend to scan content quickly on the web, making it challenging to follow too many levels of hierarchy. Limit most pages to two levels of subheads (H2 & H3) to make it easier for visitors to read.

 

Images

  1. Avoid using images to display text.
    Alt tags should only contain short descriptions or captions for images, and should not be used to embed text content. Doing so can result in several issues:

    • Including lack of accessibility and ADA compliance
    • Difficulty scaling to mobile devices
    • Reduction in the overall usability, professionalism, and quality of the user experience.

  2. Add sufficient margins around inline images to ensure comfortable reading experience.
    Leave enough space around images embedded in the page body to avoid them being too close to text or other elements.

  3. Optimize images for web display.
    There are numerous online resources available on how to optimize images. If images are too big, they can slow down page loading and potentially impact your search engine rankings. Conversely, if images are too small, they may not display properly on the screen.

  4. Make sure to crop and resize images properly.
    Proper resizing and cropping of images is crucial for their effectiveness on the Web. High-resolution photos should be avoided due to slow loading times and potential negative impact on search engine rankings. Busy backgrounds and patterns on clothing can also reduce image clarity and impact.

  5. Consider the image's placement in relation to other elements on the page.
    Images should be integrated with other page elements and should complement the intended page layout and overall graphic theme.