Development requirements

1. Images

  • Load optimized sizes, example here
  • No text on images
  • Only HTML splashes allowed (overlay on images)

2. Typography

  • VELUX fonts 
  • Minimum 16px
  • Normal weight for texts

3. Icons & logos

  • SVG or Fontawsome or Base64
  • Min size for icon 16 x 16 px 
  • No sprite

4. Development 

  • Universal CSS/HTML (use W3C validators)
  • Vanilla JS (or approved by us frameworks, plugins)
  • Mobile first
  • Smallest screen width: 320px
  • Images should be responsive 
  • Reuse breakpoints from base site
  • CSS/JS files delivered in separate files 
  • CSS/JS should be delivered two version: plain and minified 
  • CSS/JS compatible with current site CSS/JS (develop on top of base site) 
  • Use BEM like CSS

5. Testing

  • Actual device testing environment
  • Live testing when developing
  • Set up pre-project 
  • Mid-tier device testing 
  • 25% CPU + 3G testing 

6. Devices & browsers 

  • Compatibility > 95% of our user base (live GA data)
  • Basic support for old browsers

7. Performance

  • Load time < 2.4 sec
  • Set performance budget xxx Kb
  • Request count < 10 (Excluding main images)
  • Lighthouse test score >= 80

8. Design principles 

  • Resolution: 320 x 480 px
  • Grid: 1 or 2 columns
  • Table horizontal scrolling
  • Collapse at > x lines
  • Prioritise elements loading
  • Prioritise visible

Final checklist