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.
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.
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/custom/asu_edu/favicon.ico
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.
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.
Uses a tooltip via a link title that says exactly “ASU home” to indicate to users that the ASU logo links to asu.edu.
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
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:
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 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.
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.
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).
Ensure your site content is ready to “Go Live” before submitting yourlaunch 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.
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).
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.
