Brand Execution Guidelines banner image
Brand execution guidelines

Web standards checklist

One of the many ways Arizona State University advances the university mission is through the construction of a best-in-class, cohesive and intuitive web experience for the diverse audiences ASU serves.

Through the implementation of data-driven web standards and guidelines, the university deploys highly effective strategies for information architecture, design, web analytics, content, search engine optimization and security.

Reviewing this checklist before beginning the design and development of a new site, as the site is being created and as a final QA check before launching will help ensure your new (or updated) site aligns with the standards and guidelines set for asu.edu.

The list includes source links and process recommendations. If you have questions that you’re unable to resolve using the included reference links, ask your questions in the ASU web community Slack channel.

Note: The launch of your site will be delayed if the site does not meet standards. Printing this list to work through may be helpful to ensure your site meets standards.

 

New standards for asu.edu were set as part of the Web Standards 2.0 project in FY21. All new sites must adhere to these standards.

 

asu.edu URLs

  • asu.edu subdomain URL follows the guidelines and standards set for asu.edu
    • All asu.edu subdomains are granted on a case-by-case basis.
    • All ASU websites using a top-level “asu.edu” subdomain (example: engineering.asu.edu) must be hosted on ASU approved hosting.
  • The intended URL has been approved by the ASU Web Standards Governance Board prior to inclusion in any communications or marketing materials. Request an asu.edu subdomain.
    • All asu.edu sites will be reviewed by the ASU Web Standards Governance Board prior to launch.
    • The launch of sites that do not meet the standards listed in this checklist will be delayed pending discussions regarding standards alignment with requestors.
  • Website URL and contact details have been added to ASU’s official website inventory.

Site settings

  • Set the favicon to the asu.edu standard. The favicon, 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. The standard for asu.edu is the full color ASU logo on a white background. No pitchfork or other favicon may be used. Link to use for the asu.edu favicon: https://www.asu.edu/themes/asu_edu/favicon.ico
    The referenced media source is missing and needs to be re-embedded.
    Image removed.
    Image removed.

 

Design

UI kit

  • Utilizes the UI kit for asu.edu
    • Components included in the UI kit should not be altered.
    • Components used that are not currently in the UI kit must follow the base design standards of the UI kit — spacing, fonts and typography, links, color palette, backgrounds, etc.
    • Specs for each component are followed, as listed in the notes column of each page of the UI kit.

Fonts and typography

  • Arial is the only font in use (see details)
    • The font stack in case Arial cannot load: Arial, Helvetica, “Nimbus Sans L”, “Liberation Sans”, FreeSans, sans-serif
    • No alternative fonts should be introduced including serif and script fonts used for decoration in images, video or otherwise.
  • All text is left aligned for improved readability by all sighted users.
  • Text, in any use, does not extend beyond 700px wide to meet accessibility standards for all readers.
  • Body copy is 16px or 1em/rem (see details)
  • Does not use italics, which are not part of ASU writing style (see details)
  • Does not use underlines for non-linked text. Underlined text indicates a link on the web.
  • Maroon text is only used to indicate a link.

Spacing and layout

Color and backgrounds

  • Only uses colors in the asu.edu color palette (see details)
  • Follows the allowed text and background color combinations (see details)

Icons

  • Icons are Font Awesome (see details)
  • Icons are approved color options
  • Icons used in content should be ASU maroon when used as links.
  • Icons can be used in buttons and must follow the same button color standards as text buttons.

Links, buttons and focus states

  • External link indicator icons are not used for any link to an asu.edu page.
    • Visitors see asu.edu as one website and find this confusing.
  • Links to not open in a new tab or browser.
    • This is disorienting for users — they are most likely to use the browser back button to return to a previous page.
  • All links are underlined AND a different color than the surrounding text per the standard background color and link color combinations.
    • Menus do not use underlined links. When grouping together similarly formatted links in a menu, users understand the menu text as links and do not require an underline.

 

Writing style

The following are based on ASU writing style, which is AP style with a few university-specific variances. 

  • Follows ASU writing style (see details)
  • Does not use serial commas — apples, oranges and bananas NOT apples, oranges, and bananas (see details)
  • All headings and titles are Sentence case, with only the first letter of the first word capitalized in addition to any proper nouns (see details)
  • Does not use +, @, & or / unless part of an official name (see details)
  • Do not use ALL CAPS unless part of an official name (see details)
  • Single spaces after periods between sentences (see details)

 

Navigation

Global header

Appears on every asu.edu page and subdomain. See the Unity Design System component specs in the UI kit.

ASU logo

  • Located in the upper left-hand corner of the page
  • The logo may not use a hover state
  • Uses a tooltip via a link title that says exactly “ASU home” to indicate to users that the ASU logo links to asu.edu (see tooltip details)
  • Links to https://www.asu.edu without launching a new tab or browser window

Note: The university standard allows placement of the university logo in the ASU header and an endorsed logo in the footer. No additional logos should be displayed anywhere else on the page.

Universal asu.edu links

  • Appears on every page 
  • The background color is grey (#E8E8E8)
  • Text is dark grey (#484848)
  • The order, text and capitalization is exactly:
    • ASU Home (links to: htttps://www.asu.edu)
    • My ASU (links to: https://my.asu.edu)
    • Colleges and Schools (links to: https://asu.edu/academics/colleges-schools)
    • Sign In (links to: https://weblogin.asu.edu)
      • Once signed in, constituent name is displayed with authentication to ASURITE 
    • Font Awesome magnifying glass for search
      • Search is a single search field that returns results for all of ASU (https://gcse.asu.edu)

Primary subdomain navigation

See the Unity Design System component in the UI kit.

  • Text is black (#191919)
  • The background color is white (#FFFFFF)
  • Links do not wrap to a second line.
  • All menu links are Title Case with the first letter of each word capitalized.
    • Do not use all lower case, all capital letters or sentence case.
  • Does not use external link indicators
  • Don't include links to non-asu.edu sites sites (user expectation is that primary navigation helps them navigate the current site)
  • Does not contain additional artwork or icons.
    • The home icon, chevron for drop down menus and magnifying glass icon for search are the only icons or imagery permitted in the navigation. 
  • Links do not have underlines as the default state (they appear on hover)
  • The home icon always leads the user to the home page of the unit named in the header.
  • Home icon uses a link title tag to display the name of the subdomain or subsite unit on hover. Example: “ASU Library home” (see details)
  • Site title is the unit name (eg. college or school name), if a subsite, uses the parent/child header (see details)
  • Text is not bold text
  • Text is not italic
  • Unit name, as a proper noun, is Title Case (first letter of each word capitalized)
  • The site title links back to the unit homepage and has a black underline on hover
  • The parent unit name, if present, links to the parent unit homepage and has a black underline on hover
  • Site title does not use +, @, & or / unless part of an official name, per ASU writing style. (see details)
  • Menu links with drop down menus are click-to-open and do not link to anywhere.
  • College, school or academic unit primary navigation must follow these requirements:
    • Degree Programs
      • Must be in your college, school or academic unit navigation
      • Placed in the first position to the right of the home icon, with this exact wording:
      • Undergraduate
      • Graduate
      • Additional Type (online, hybrid, etc.)
    • About 
      • Required top-level navigation in college, school or academic unit navigation (recommended for most sites)
      • Should be placed in the last position — the last link on the right, before any CTAs
      • Must include:
        • Contact us 
        • Must be in the last link in the about drop down menu 
      • Can include items such as:
        • Why choose (college name or unit)
        • News and events
        • Faculty and staff
        • Leadership

Global footer

See the Unity Design System for specs.

Universal asu.edu footer

  • The universal footer is always the last item on all pages and may not be altered. 
  • The universal footer links are as follows, in this order:
    • Gold bar:
      • Locations and and Maps (links to: https://asu.edu/about/locations-maps)
      • Jobs (links to: https://cfo.asu.edu/applicant)
      • Directory (links to: https://isearch.asu.edu/asu-people/)
      • Contact ASU (links to: asu.edu/about/contact)
      • My ASU (links to: https://my.asu.edu/)
      • Includes current U.S. News and World Report messaging
    • Grey bar:
      • Copyright and Trademark (https://www.asu.edu/about/copyright-trademark/)
      • Accessibility (https://www.asu.edu/accessibility/)
      • Privacy (https://www.asu.edu/about/privacy/)
      • Terms of Use (https://www.asu.edu//about/terms-of-use/)
      • Emergency (https://cfo.asu.edu/emergency)

Subdomain footer

  • The subdomain footer is placed above the universal asu.edu footer.
  • Includes the name of the college or unit logo. Do not include both a unit logo and replicate the name in text.
    • If the unit has an approved logo, its use is required. (details)
    • Make sure an alt tag is in place for the endorsed logo. It should be the full name of the unit plus the word logo. Example: Herberger Institute for Design and the Arts logo
    • If the unit does not have an endorsed logo, use the name of the unit. Follow ASU writing style.
    • The logo must be all white (no modified or full-color logos).
    • The endorsed logo alignment is to the left.
    • If the site is representing multiple ASU units, use the ASU logo and list the names of each unit in text. Multiple ASU unit logos may not be used together.
  • Social media links, if included, follow these standards:
    • Social icons are Font Awesome. (see details)
    • Social icons are gray (#BFBFBF).
    • Hover for social links should have a hovering white (#FFFFFF).
    • Hover for social icons must include hovering alt tags, recommendation: Platform account name — ex: Facebook arizonastateuniversity.
  • Short summary or description may be added below the logo.
  • Includes a Contact us link below the unit logo and text description (if included).
  • Gold “Support ASU” button is required.

 

Buttons

See the Unity Design System UI kit for specs.

  • No drop shadows, design elements or alternative formatting should be introduced.
  • Button hover state is that the button grows 5% in scale — text color does not change and text is not underlined.
  • Buttons use sentence case — the first letter of the first word is capitalized.
  • Button text is left aligned.
  • Gold buttons should be reserved for the most important call to action on each page.

 

Photo and video

See the Unity Design System UI kit for specs.

Photos

  • Images should be jpg or png files
  • Images should be compressed to optimize page load speeds
  • All images require the use of alt text for both accessibility and search engine optimization. Text should contain descriptive/meaningful of what’s displayed in the image for both screen readers and search engines. 
  • Image file names should be meaningful and can include keywords to benefit SEO.
  • Static images do not contain text (accessibility violation)

Videos 

See ASU's video standards

  • Videos embedded on asu.edu must be hosted on YouTube (details)
  • All videos have captions available

 

Search engine optimization (SEO)

  • Customize robots.txt for search engine optimization. 
    • Robots.txt is a file in the root of your Drupal install that tells search engine crawlers what to index on your site. By default, crawling is disabled on Dev and Test and enabled on Live. If you’re doing a soft launch and don’t want the live environment to be indexed you will need to customize your robots.txt on Dev and pull it to Test and then pull it to Live.
  • Once launched, submit your sitemap to Google via Google Search Console. Learn how
    • Each site should have a sitemap that only lists the crawlable pages.
  • Ensure your URLs are readable and meaningful for the content of the page and do not include nondescript terms like ‘node’
  • Each page has a unique title tag and meta description specific to the page.
  • Each page should have a canonical URL to itself OR to the page that originally had the content.
  • Each section on a page has a header, and pages should have the proper H1, H2, H3 structures within each section.
  • Images have short descriptive names and alt text.

 

Quality of content evaluation

  • All content is accurate, timely and free of error.
  • Editing and styling are consistent including the case for titles (see ASU writing style).
  • All links work and are error-free.
  • 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.
  • Photography and videography selections are brand-aligned and project a positive image of the university.

 

Mobile optimization

All Unity Design System components are responsive and have a mobile-specific version.

  • 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 a more beneficial way to display specific content for mobile.
  • When testing, check each page with Google's Mobile Friendly Test to verify a mobile-friendly design.

 

Google Analytics and Tag Manager

  • Site is either Webspark or uses the Unity header component, which includes ASU’s deployment of Google Tag Manager and Google Analytics Premium. Review the ASU header guide

 

Accessibility

Note: All Unity Design System components have been optimized for accessibility. See accessibility.asu.edu for more information on digital accessibility.

 

RFI on degree detail pages 

For college/academic unit websites:

  • Every degree detail page has a request for information form (RFI) at the bottom of the page.
    • Use the stepped format form.
    • A button may be used on the top 1/3 of the page that links to the form below.
  • Default selection in My programs field in the RFI matches the subject of the degree detail page.
  • Upon completion of the form, users will receive a confirmation message. 
    • A unit can customize that confirmation message to be specific to that unit.

 

Development and hosting

  • Review Pantheon workflow and create test and live guides.
  • When adding custom code or upgrading a module, be sure to:
    • Make changes in the Dev environment first.
    • Deploy code from Dev to Test.
    • Confirm everything is working in Test, then deploy code to Live. See more detail.
    • Keep your site connection mode in Git and apply updates promptly.
    • In Git mode, updates will appear automatically on your Pantheon dashboard.
    • Apply any updates as soon as possible.
  • Use Backups Tool (manually backup)
    • an environment every time you pull code, database, add files.
  • Ensure your site content is ready to “Go Live” before submitting your launch request form using your Live Pantheon environment.
  • Set up a 301 redirect.
    • A site redirect indicates that a page has moved. Redirects are helpful for smooth transitions, site standardization, and search engine optimization (SEO). Additionally, ASU policy requires that your site redirect HTTP traffic to https. For guides on redirect settings, use the sites/default/settings.php and under Pantheon/Domains/ under Modules and Plugins.
  • Set Drupal Performance and Caching Settings: enable automated backups.
    • With a free Dev site, you can manually create backups. With a paid plan, you can enable automated backups. Backups are not saved indefinitely and we encourage you to download backups periodically.
  • Enable caching and CSS and JS optimization for performance.
    • Configure performance settings in your Live environment so your site will be as fast as possible. In some cases, caching may break certain dynamic functionality, but we recommend first trying to enable all caching, and only disable if absolutely necessary.
  • Request vulnerability scanning.
    • Contact the ASU security scan team to coordinate an assessment of your development site. Security scan results will identify medium and high vulnerabilities that you should address prior to launch. Visit getprotected.asu.edu for information on vulnerability management.

Security

  • All sites should force HTTPS (SSL encryption of traffic).
  • 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)
  • 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.
  • 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.
  • Any site handling sensitive data should: (see https://getprotected.asu.edu/policy/security-standards)
    • Store sensitive data encrypted at rest.
    • Conduct a security review (https://getprotected.asu.edu/content/securityreview)
    • No ASU site should directly accept credit card information.
    • 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.
    • Address specific issues OWASP identifies as problems, especially the Top 10. (https://www.owasp.org/index.php/Main_Page)
    • The website hosting environment (operating system and applications software) should be secure and regularly updated to address known security issues.