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.
- Don't use "hamburger" menus.


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


Video / audio:
- Preferably use open (container) 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, cloudflare, at the very least don't serve
  Javascript from them. Cloudflare is also known to block Tor traffic. Tor is
  obviously very useful for many things.
