Git Product home page Git Product logo

site-launch-checklist's Introduction

๐Ÿš€ DataMade Site Launch Checklist

A checklist of tasks to do before launching a public website.

Usage

Launch preparation generally takes a day or more. You should also reserve a day for bugfixing after you have wrapped the last feature. Be sure to plan accordingly!

Once you're ready, make a new GitHub issue in your project called "Launch Checklist" and copy/paste the following:

From the [DataMade Site Launch Checklist](https://github.com/datamade/site-launch-checklist)

## Load Testing and Website Optimization

If your site relies on a database or server-side code, you should load test and optimize the site for the level of traffic you anticipate. If you're launching a static site, you can skip this section.

* [ ] Set up [caching](https://docs.djangoproject.com/en/stable/topics/cache/)
* [ ] Run the site through Google's [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)
* [ ] Write a script to load test your site
    - We like [Locust](https://docs.locust.io/en/stable/) for this. See [LA Metro Councilmatic](https://github.com/datamade/la-metro-councilmatic#load-testing) for a basic example.

If you're writing a Django application, [Django Debug Toolbar](https://django-debug-toolbar.readthedocs.io/en/latest/) is a great tool for identifying duplicated and/or sluggish queries.

## Deployment and DNS

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

## Web Search Indexing

* [ ] Create a [robots.txt](https://developer.mozilla.org/en-US/docs/Glossary/Robots.txt) file that disallows indexing of your staging site and allow indexing of your production site
* [ ] Create a [sitemap.xml](https://en.wikipedia.org/wiki/Sitemaps) that lists all pages on your site that you want indexed
* [ ] Redirect the www subdomain to your root domain
* [ ] Set up [Google Search Console](https://search.google.com/search-console) and verify the site

## Tracking Site Traffic and Analytics

* [ ] Create a [Matomo](https://matomo.org/) account
* [ ] [Add the Matomo script to your site](https://developer.matomo.org/guides/tracking-javascript-guide)

## Accessibility

* [ ] Overview - test all pages with a tool like [Axe DevTools](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) or [Google Lighthouse](https://developers.google.com/web/tools/lighthouse/)
* [ ] 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)
* [ ] Screen Reader - test pages with a screen reader like [NVDA](https://www.nvaccess.org/download/) on Windows or [VoiceOver on Mac](https://support.apple.com/guide/voiceover/turn-voiceover-on-or-off-vo2682/mac), confirming that all content is clear, including:
  * [ ] Confirm no repeat or unclear button titles (e.g. "Click here" or "View more")
  * [ ] Confirm images have proper alt tags for their context (including `alt=""` for decorative images)
* [ ] Structure - Using [Accessibility Insights for Web](https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni) 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.
* [ ] Color Blindness - make sure no information is conveyed via color only, potentially by testing using grayscale mode in [Accessibility Insights for Web](https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni)

## Sharing & Rich Snippets

* [ ] Create a share card using [Canva](http://canva.com/) or a similar tool
* [ ] Set up general meta tags
    ```html
    <meta name="description" content="${SITE_NAME}" />
    <meta name="author" content="${SITE_AUTHOR}" />
    ```
* [ ] Set up Facebook meta tags & validate [here](https://developers.facebook.com/tools/debug/)
    ```html
    <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}">
    ```
* [ ] Set up Twitter meta tags & validate [here](https://cards-dev.twitter.com/validator)
    ```html
    <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}">
    ```

Confirm your meta tags work by checking on https://metatags.io

## Miscellaneous Polish

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

## Browser and mobile compatibility

* [ ] 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:

* [ ] Scrolling is easy
* [ ] Nav bar works
* [ ] Hoverable things are tappable
* [ ] 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](https://stackoverflow.com/a/14830242).
* [ ] 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](https://github.com/datamade/la-metro-councilmatic)
- [Illinois Sunshine](https://github.com/datamade/illinois-sunshine/blob/master/README.md)

The README should generally contain information on the following:

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

Suggestions?

We'd love to hear 'em. Open an issue, or fork this repo and make it your own!

Copyright and Attribution

Copyright (c) 2021 DataMade. Released under MIT License.

site-launch-checklist's People

Contributors

akilism avatar cathydeng avatar derekeder avatar ernieatlyd avatar fgregg avatar hancush avatar jmithani avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

site-launch-checklist's Issues

https

Should add setting up HTTPS to this using letsencrypt or some other means.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.