Site Launch Checklist

[derekeder]

From the DataMade Site Launch Checklist

Load Testing and Website Optimization

Deployment and DNS

• [x] Create a production deployment
• [x] Double check that production-level resources have been provisioned
• [x] Purchase your domain and create the DNS record to point it at your production deployment
• [x] Set up SSL

Web Search Indexing

• [x] Allow indexing of your production site
• [x] Redirect the www subdomain to your root domain
• [x] Set a canonical URL to prevent duplicate search results

Google Analytics

• [x] Create a Google Analytics account
• [x] Add the Google Analytics script to your site
• [x] Set up Google Webmaster Tools and verify site
• [x] Link Webmaster Tools to Google Analytics

Accessibility

• [x] Overview - test all pages with a tool like Axe DevTools or Google Lighthouse
• [x] Keyboard - confirm all functionality works with a keyboard only. This includes logical focus order (typically left-right top-down) and no focus traps (except modals)
• [x] Screen Reader - test pages with a screen reader like NVDA on Windows or VoiceOver on Mac, confirming that all content is clear, including:
  • [x] Confirm no repeat or unclear button titles (e.g. "Click here" or "View more")
  • [x] Confirm images have proper alt tags for their context (including alt="" for decorative images)
• [x] Structure - Using Accessibility Insights for Web or another tool, confirm all pages have clear and sufficient heading levels. Keep in mind it should act like a table of contents, you want to have enough headings to be useful but not one for every paragraph.
• [x] Color Blindness - make sure no information is conveyed via color only, potentially by testing using grayscale mode in Accessibility Insights for Web

Sharing & Rich Snippets

• [x] Create a share card using Canva or a similar tool
• [x] Set up general meta tags

  <meta name="description" content="${SITE_NAME}" />
  <meta name="author" content="${SITE_AUTHOR}" />

• [x] Set up Facebook meta tags & validate here

  <meta property="og:type" content="website">
  <meta property="og:site_name" content="${SITE_NAME}">
  <meta property="og:description" content="${SITE_DESCRIPTION}">
  <meta property="og:image" content="${SHARE_CARD_URL}">
  <meta property="og:title" content="${PAGE_TITLE}">
  <meta property="og:url" content="${PAGE_URL}">

• [x] Set up Twitter meta tags & validate here

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="${SITE_NAME}">
  <meta name="twitter:creator" content="${SITE_AUTHOR}">
  <meta name="twitter:description" content="${SITE_DESCRIPTION}">
  <meta name="twitter:image" content="${SHARE_CARD_URL}">
  <meta name="twitter:title" content="${PAGE_TITLE}">
  <meta name="twitter:url" content="${PAGE_URL}">

Miscellaneous Polish

• [ ] Add favicons and Apple touch icons (http://www.favicomatic.com/)
• [x] Add custom 404 & 500 error pages

Browser and mobile compatibility

• [x] Use BrowserStack to confirm that your site is compatible with the browsers you wish to support

Using BrowserStack's mobile device emulators and/or your own mobile device, confirm that:

• [x] Scrolling is easy
• [x] Nav bar works
• [x] Hoverable things are tappable
• [x] Charts and maps look ok

Printer Friendliness

Dynamic sizing, dark backgrounds, and interactivity don't play well with printers.

Pick one:

• [ ] Make a print stylesheet using a @media print {} media query, then add it to your site with <link rel="stylesheet" type="text/css" href="css/print.css" media="print">

• or -

• [ ] Use your browser's dev tools to remove offending elements (like sticky footers), alter colors where needed, and screenshot the entire page.

• [ ] Add a link to the printer-friendly version to your website.

GitHub README

If the site is open source, make sure the README.md is complete and accurate.

Here's a few good examples:

• LA Metro Councilmatic
• Illinois Sunshine

The README should generally contain information on the following:

• [x] Project overview
• [x] System-level dependencies
• [x] Running locally
• [ ] Bug reports and contributing
• [x] Copyright and license

[hkier]

Derek,

Does your checklist need an item to assure website meets disability access requirements?

[derekeder]

@hkier yes it should! @vkoves this is your area of expertise - what steps should be added to ensure accessibility ahead of launch?

[hkier]

@derekeder since I know you grabbed this list from a source list, I wonder if your source list also needs to be updated to include an accessibility item/task?

[derekeder]

@hkier yes I was thinking the same thing. Lets update the list here with the accessibility items, and then I can add them back to the source list. It would be a great addition!

[vkoves]

Just did a quick scan in grayscale and everything looks solid - our colors have clear darkness values and are differentiable even without color:

[vkoves]

Also confirmed headings are good on the homepage and the state details page:

[vkoves]

@derekeder - only found one last issue:

I've done some testing with a screen reader and the only last issue is the graphs are not accessible in any way, but I don't think there's a clean fix for that.

I wonder if there's a way we could show the data in a table as an alternate means of access, which is how I handled this at my work.

[derekeder]

last issue with accessibility resolved in #116