Empowerability

  • minimise work by client, e.g. waiting, data use, battery drain, etc.

Network

  • load only what is needed when it’s needed
  • custom files just for page, e.g. style sheets, scripts, etc.
  • minimised files, compressed
  • media in resolution for device
  • only when scrolls into view, just before clicks on it, etc.

Device

  • use CSS Animations instead of JS
  • debounce JS event handlers

Responsive Design

  • use relative font-size to allow for text zoom
  • use percentage sizes to adapt to screen size

Tests

  • different devices: screen size, performance, network, light conditions, etc.
  • different user agents