Skip to content

Instantly share code, notes, and snippets.

@GlauberF
Last active September 10, 2018 15:58
Show Gist options
  • Save GlauberF/49e3c0b725278668c2c96c22a303794d to your computer and use it in GitHub Desktop.
Save GlauberF/49e3c0b725278668c2c96c22a303794d to your computer and use it in GitHub Desktop.
Website Checklist

To check out and include:

Website Checklist

A list of elements that needs to be defined for the website to be ready for big action.

  1. Language
  2. Metadata
    1. Opengraph
  3. Icons
  4. Roles
  5. Styles
  6. Humans
  7. Futurefriendliness
  8. Performance

1. Language

A <html> element at the top of your document should have the language specified. Remember about proper language codes: en-us, pl-pl, etc.

2. Metadata

The site needs those in the <head>:

  • title -- the page title, best if every subpage has it's own (with the order being POST -- CATEGORY -- SITE)
  • meta name="keywords" -- a list of , -separated tags that describes the content
  • meta name="description" -- a short paragraph describing the content of main site, category or a single post
  • meta name="author" -- a list of , -separated names of main people involved in the project
  • <link rel="author" href="humans.txt"> -- an url leading to the humans.txt file
  • <link rel="home" href="http://site.url"> -- a link to home root page

2.1. Opengraph

Opengraph meta elements -- mainly for facebook link sharing:

  • <meta property="og:type" content="website"> -- the type of document, for the most projects it's "website"
  • <meta property="og:site_name" content="name"> -- the name of the site
  • <meta property="og:title" content="title"> -- the same as in Metadata
  • <meta property="og:description" content="description"> -- the same as in Metadata
  • <meta property="og:url" content="http://site.url"> -- the same as in Metadata
  • <meta property="og:image" content="image-200.png"/> -- an image with dimensions at least 200x200 px

3. Icons

  • <link rel="icon" href="favicon.ico"> -- a favicon that should be placed in the root directory
  • <link rel="apple-touch-icon" href="apple-touch-icon.png"> -- an image with dimensions of 152*152 px

4. Roles

There is a long list of ARIA roles that exists as a draft. There are some crucial, some useful ones and a bunch of HTML5 tags duplicates. Use the second ones with caution, and don't use the third ones -- if you need them, it means that your markup is probably not semantic enough.

The must:

  • banner -- the main header element of the page with logo, main navigation, etc.
  • contentinfo -- the main information about the document with meta info, copyright, company name, etc.
  • complementary -- the one <aside> element that corresponds to the main content
  • main -- the main content, for example: <section class="page-content" role="main">
  • navigation -- for the main menu (in the header an footer aswell)
  • search -- the primary search form

The useful:

  • tree -- a multiple-nested list of items that can be collapsed and expanded
  • widget -- an abstract widget component, with some more-specific cases existing:
    • alert -- a flash message about some event, time-sensitive
    • progressbar -- a progress bar time-related
    • timer -- a countdown, or other time-related automatically updating element
    • tooltip -- a contextual popup with description of an element

5. Styles

There are some things in your CSS stylesheet that must be included and taken into consideration:

  • all links should have :focus state
  • the ::selection selector should be populated with project colors
  • all links should be recognizable (for text links it is best to underline)
  • test color contrast with some online tools

6. Humans

Introduction and being thankful in the humans.txt file.

7. Futurefriendliness

A README.md with the page maintenace, update and inner workings explained. Don't be very specific -- your HTML markup, SCSS styles and JavaScript scripts should be semantic and well commented instead.

8. Performance

  1. Run some overall tests:
  1. Optimize images with ImageOptim on Mac or Kraken.io Web Interface
  2. Check loading times at GPRS or EDGE speed
  3. Check accessibility at tiny screens
  4. Check links and interactive elements for fat-fingers
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment