Skip to content

Latest commit

 

History

History
205 lines (156 loc) · 12.1 KB

CHECKLIST.md

File metadata and controls

205 lines (156 loc) · 12.1 KB
Raw

Web standards checklist

Favicon standards

A standard favicon has been established for all asu.edu websites. The favicon is the color ASU logo on a white background. This icon, also known as a favorite icon, can be seen in the browser address bar, your favorites list, and will display in tabs on certain browsers.

Global ASU header

  1. Background

    1. The background is displayed on a white background (#FFFFFF)

  2. ASU logo

    1. Color: maroon and gold
    2. Dimensions: 203px wide x 32px tall
    3. Location: in the upper left hand corner of page, aligned with navigation and site title
    4. Links to www.asu.edu without launching a new tab or browser window
    5. Note: The university standard allows placement of the university logo in the ASU header and an endorsed logo in the super footer. No logos should be displayed anywhere else on the page.

  3. SEO and mobile optimized title

    1. Primary unit (eg. college or school name)
    2. Font color: black ( #000000)
    3. Size: 24px with a minimum of 21px font size (If the name is too large, the font size may be adjusted to a minimum size of 21px. To provide for the need for a second level of display, the title may be adjusted to include a pipe ( | ) to separate the two entities.
    4. The second entity will be colored using #4F5557 for consistency and to distinguish between the first entity)
    5. Weight: The font-weight should be Bold
    6. Spacing: The letter spacing should be -.5px
    7. “Title Casing” of the unit name
    8. The name should not link back to the unit, the home icon should be used to link back to the unit homepage.

  4. Global ASU links

    1. ASU Homepage with drop down (www.asu.edu)
    2. My ASU (my.asu.edu)
    3. Colleges & schools dropdown and link to college and school landing page (www.asu.edu/colleges/)
    4. Map & locations dropdown and link to Campus Bird Maps (www.asu.edu/map/interactive/)
    5. Directory (isearch.asu.edu)
    6. Sign in (weblogin.asu.edu)
    7. Constituent name displayed with authentication to ASURITE

  5. Dynamic search box

    1. A single search field that returns results for the website you are visiting, but also provides a tabbed view to search all of ASU results as well. The scoped search option will be removed from the header.

Global navigation bar

  1. Home icon (should be the first item in all navigation bars)

    1. It should be presented using the following guidelines:
    2. Icon: fa-home [ ]
    3. Font: FontAwesome
    4. Font size: 16px
    5. Color: #EDEDED
    6. When on the homepage or hovering, the home icon should be gold  (#FFB204). When it is not on the homepage and not hovering, it should be white.
    7. Font style: normal
    8. Font weight: normal
    9. Line height: 1

  2. Menu height: 57px

  3. Width: The bar should display at full width of the screen.

  4. Links: menu item background color is #353535, font color is #EDEDED, caret color is #EDEDED

    1. Hover top-level links: menu item background color is #000000, font is #FFB130, down caret color is #FFB130
    2. Hover sub-menu links: menu item background color is #000000, font is #EDEDED, right caret color is #EDEDED 
    3. Active top-level links: menu item background color is #1F1F1F, font is #FFB130, down caret color is #FFB130
    4. Active sub-menu links: menu item background color is #1F1F1F, font is #EDEDED, right caret color is #EDEDED 

  5. Font size: 16px

  6. Font: Roboto

  7. Font weight: Bold

  8. Casing: “Title Casing” with each initial letter capped. No all lower casing, no all cap casing.

  9. *Degree programs (required top level navigation item, placed in the first position, with this exact wording)

    1. Undergraduate
    2. Graduate
    3. Additional type

  10. *About (required top level navigation item for colleges, recommended for most sites. If present, it should be placed in the last position). Can include items such as:

    1. Why choose <<college name or unit)
    2. News and events
    3. Faculty and staff
    4. Leadership
    5. *Contact us (this must be in the about link, in the last position)

*These items must be in your college, school or academic unit navigation

Super footer and universal ASU footer

Super footer

  1. The super footer is placed above the universal ASU footer

  2. The super footer should be styled as the following:

    1. Background color: #1E1E1E
    2. Font color: #FFFFFF
    3. Link color: #CCCCCC
    4. Link border-bottom 1px dotted #CCCCCC
    5. Link and border-bottom hover color: #FFFFFF
    6. Paragraph font-size: 16px
    7. h2 font-size: 21px

  3. Content in the super footer left column can be flexible & can include the following:

    1. Name of the college or endorsed logo. Do not include both an endorsed logo and a replicated name. Make sure an alt tag is in place for the endorsed logo. Endorsed logo should be no larger than 100px high and 350px wide, logo must be all white (no modified or full color logos). It should be aligned to the left.

    2. Short summary of department or description may be added.

    3. Link to parent organization (e.g., A unit of the The Julie Ann Wrigley Global Institute of Sustainability)

    4. ‘Contact us’ link*

    5. Social media links

      1. Icons in the footer, such as social links, are gray (#A9A9A9) and should have a hover white (#FFFFFF) and include hover alt tags.

    6. ‘Contribute’ button

Universal ASU footer

  1. The universal footer should be the bottom-most item of all pages and may not be altered. The universal footer links will be to the following locations:

    1. Copyright & trademark (https://www.asu.edu/copyright/)
    2. Accessibility (https://www.asu.edu/accessibility/)
    3. Privacy (https://www.asu.edu/privacy/)
    4. Jobs (https://cfo.asu.edu/applicant))
    5. Emergency (https://cfo.asu.edu/emergency)
    6. Contact ASU (https://contact.asu.edu)

  2. The universal footer should be styled as the following:

    1. Gray bar height: 59px
    2. Background color: #E5E5E5
    3. Font size: 16px
    4. Font weight: 200
    5. Link color: #333333
    6. Link color (hover): #333333 (no change)
    7. Text align: left
    8. Gold bar height: 56px
    9. Includes U.S. News and World Report current badge and messaging

Font type

  1. The chosen Web font for ASU websites is Roboto.
    1. Helvetica Neue, Helvetica, Arial, or Sans-serif will be used as a fallback font stack incase Roboto web font cannot load. It should not be the primary font.
    2. No alternative fonts should be introduced including serif and script fonts used for decoration.

Buttons

  1. Button format and casing should follow the established standard. Including color, fonts and casing. No drop shadows, design elements or alternative formatting should be introduced.
  2. Blue buttons are reserved for degree programs only.
  3. Buttons follow “Sentence casing”

Links

Links should follow the established format and functionality.

Casing styles for headings and sections

Titles of headings and sections should be “Sentenced  cased”, with an initial cap. No "ALL CAPS”, no “Title  Case”, no “all lower case”.

Iconography

  1. Font Awesome is the icon set to be used in Web development.
  2. Icons are generally used in conjunction with text in UI elements such as buttons. In this case, the icon must be the same color, hover color, transition color and active color as the text in the UI element.
  3. Icons used in content should follow the same guidelines as in General Usage, and should use ASU maroon when used as links.

Photo & video

  1. The standard employs widescreen (16:9) aspect ratio (does not apply to hero images, profile pictures, or advertisements)

  2. Photos

    1. News & articles
    2. Resolution: 1920x1080 pixels at 72dpi
    3. Format: jpg or png

  3. Videos

    1. 1920x1080 pixels (1080p HD)
    2. Must be hosted on Vimeo or YouTube

ADA compliant

  1. When testing, you may check each page on http://wave.webaim.org to verify compliance with the Web Content Accessbility Guidelines (WCAG) 2.0 levels A and AA.

Security

  1. All sites should force HTTPS (SSL encryption of traffic).

  2. All sites should perform a security vulnerability scan and fix all medium and high vulnerabilities that are found. (https://getprotected.asu.edu/services/vulnerability-management)

  3. Any site with a login (for users or admins) should use CAS, i.e. no local account login. Drupal sites should redirect local login to CAS.

  4. Sites should avoid creating local accounts. Any site that must create local accounts or authorizations should have a means of cleaning those up as people leave the university or their site role ends.

  5. Any site handling sensitive data should: (see https://getprotected.asu.edu/policy/security-standards)

    1. Store sensitive data encrypted at rest.
    2. Pass a security review (https://getprotected.asu.edu/content/securityreview).

  6. No ASU site should directly accept credit card information.

  7. Any site working with a 3rd party credit card payment processor should be in compliance with PCI 3.0 standards and pass a security review.

  8. Address specific issues OWASP identifies as problems especially the “Top 10.” (https://www.owasp.org/index.php/Main_Page)

  9. The website hosting environment (operating system and applications software) should be secure (and verified by ASU ISO) and regularly updated to address known security issues.

Mobile responsive

Mobile is king in today's world. A more mobile world means a responsive design is imperative. Put content first, and remove navigational barriers to information to help improve conversions. Make content glanceable and primary content primary. You must continue to ask how you can engage the user through mobile experiences. You must find more beneficial way to display specific content for mobile.

  1. When testing, you may check each page on https://search.google.com/search-console/mobile-friendly to verify mobile friendly design.

Google Analytics

Google Analytics Premium is the enterprise analytics solution for ASU. GA will be implemented upon conversion to the ASU standard header. Additional customization can be requested by the Enterprise Marketing Hub. All ASU wesites will be required to be in the GA Enterprise Roll Up account, as well as an individual report suite for the unit.

RFI on degree detail pages on college/academic unit websites - stepped format

  1. Every degree detail page should have an RFI form at the bottom of the page.
  2. A button may be used on the top 1/3 of the page that links to the form below.
  3. Default selection in “My Programs” field in the RFI should match the degree detail page.
  4. Upon completion of the form, users should get a confirmation message. A unit can customize that confirmation message to be specific to that unit.

Quality of content evaluation

  1. All content on homepage is accurate, timely and free of error.
  2. Editing and styling is consistent including casing on titles.
  3. All links work and are error free.
  4. Information on the homepage and high circulation pages such as about sections, faculty and home sections communicate quality statements such as rankings, faculty accomplishments, and points of pride.
  5. Photography and videography selections are brand aligned and project a positive image of the university.