Rant / tips to improve the web
------------------------------

Below are some tips to make your site more pleasant to use, it covers only
common issues with the "front-end" of sites such as:

- Accessibility
- Speed / bandwidth use.
- Privacy
- Security


Webdesign:
- Contrast:
  - Use good contrast on your site.
    (Light) Grey text on a white background IS NOT COOL! Most people don't have
    100% correct calibrated monitors or 20/20 vision.
  - Fonts:
    - Don't use tiny or weird fonts, make sure to atleast specify default
      fallback fonts, don't force people to use your fonts!
    - Don't use external custom fonts.
    - Preferably don't use icon fonts, if you do don't overdo it and also add a
      text description if possible.
  - Don't overuse pagination on your site especially if you have not much content.
  - Make sure your navigation links are easy to find, as a good test use lynx(1)
    and try to navigate your site using the keyboard only.

To check accessibility errors the useful site http://wave.webaim.org/ can be used.


Correctness:

Make sure all your (markup) code is correct, these tools can be used to help
check this:

HTML:
- W3 HTML validator: https://validator.w3.org/
CSS:
- W3 CSS validator: https://jigsaw.w3.org/css-validator/
Javascript:
- jslint:   http://www.jslint.com/
- uglifyjs: http://lisperator.net/uglifyjs/ check "Scope warnings" options.


Content filesize:
- Optimize your content for the web:
- Optimize your images:
  - Use a common format such as: JPEG, PNG or GIF.
  - If you use thumbnails scale them down to a visible thumbnail and link to
    the original image.
  - Strip unneccesary metadata.
  - Balance an appropriate setting between quality and filesize. For example a
    standard quality setting of 85% for JPEGs is more than good enough and
    decreases the content size alot!
  - Choose the appropriate format depending on the kind of image, as a general
    rule: JPEG for photos, PNG: for sprites. 8-bit PNG/gif for simple pattern
    images.
- Try to combine CSS and Javascript in a single file: 1 CSS file, 1 Javascript
  file. This reduces the amount of requests and speeds up your page.
- Try to reduce the size of your CSS and Javascript files: don't depend on
  jQuery or other bloated frameworks.
- Don't obscure / minify your Javascript or CSS content, GZIPping text content
  is fine though. Parsing speed of Javascript and CSS is reduced by simplifying
  the content, not be minifying it!


Javascript use:
- Make sure your site is visible without Javascript, if you serve simple static
  content site there is generally NO reason to use Javascript. As a good test
  make sure it is usable in for example lynx(1).
- Use as little Javascript as possible, preferably none.
- If Javascript is absolutely needed notify the user using the <noscript> tag.
- Don't use animations, at the very least not in Javascript (difficult to block),
  use CSS animations, gif or webm if you must.
- Don't use jQuery or frameworks, there is no need to support IE6 (anymore).
- Make sure links to your content work without Javascript enabled.
- Don't use "toggle" menu's, make sure all content is visible without having to
  uncollapse it.
- Avoid custom popups or dialogs using Javascript, especially modal dialogs.


Mobile:
- Don't scale your site according to resolution, for example using CSS
  selectors. This can break your site for users with smaller screens or who view
  your site in a smaller window. A better way is to serve a specific
  mobile-friendly site via a separate space for example a subdomain such as
  m.yourdomain or mobile.yourdomain.


CSS:
- Don't overuse animations.
- Don't use the Bootstrap or standard bloated CSS templates.


Video / audio:
- Preferably use open formats such as webm, oggv.
- Don't use DRM.
- Do not autoplay video and audio, this includes background video/audio:
  extremely invasive to the user.


Flash or other proprietary plugins:
- DON'T USE THEM!


Websockets:
- DON'T USE THEM!


Cookies / localStorage:
- Try to reduce the amount of cookies, for static content there is no need to
  use them. For logins standard HTTP authentication can be used.
- Don't use Javascript localStorage.


Sensitive data:
- If you serve sensitive data of users make sure your site support HTTPS and
  your httpd is properly configured, there are good tools such as the SSLLabs
  site to check this. A gratis certificate can be requested from letsencrypt.

  SSLLabs:     https://www.ssllabs.com/
  Letsencrypt: https://letsencrypt.org/


Advertisements:
- Preferably don't use advertisements, at the very least don't serve it from an
  external ad-network. Serve the ads from an url that the user can be able to
  block such as: http://yourdomain/ads/*.
- If the user blocks your advertisements don't show a nagscreen notification.
- Don't track user behaviour, at the very least not if he has set the "DNT"
  HTTP header.


Use of content-delivery networks (CDNs):
- Don't use CDN's such as cloudfront, at the very least don't serve Javascript
  from them.
