Web standards checklist

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)

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 gray (#E8E8E8)
•  Text is dark gray (#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
  • Gray 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.

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.

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

•  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.

•  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.

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.

•  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
  • Google Tag Manager is the tag management solution for ASU.
  • Google Analytics 360 is the enterprise analytics solution for ASU
  • Follows ASU’s data and analytics standards.

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

•  Site has been evaluated for accessibility. 
  • Familiarize yourself with Web Content Accessibility Guidelines (WCAG) and evaluate your site utilizing the Web Accessibility Evaluation Tool (WAVE).
  • Because automated tests identify less than 25% of issues, evaluate the accessibility of web pages and applications using a tool such as the ASU DIY Accessibility Audit, a step-by-step guide to performing an accessibility evaluation (no knowledge of coding required). 
  • The Americans with Disabilities Act and Section 508 of the Rehabiliation Act of 1973 require that all U.S. web sites and web-based applications comply with the W3C's Web Content Accessibility Guidelines (WCAG) 2.1, level AA. The ASU IT Accessibility Standard provides specifics for ASU compliance with these federal laws. For assistance with understanding WCAG, see the ASU Accessibility web site.
•  Site uses the prescribed, accessible background and text color combinations. (see color palette details | see link and background color combinations)

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.

•  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.