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
Use the recommended colors Check specifications about the grid (margins, height, width, etc.) Consider in your design unusual scenarios (ex.: too long text) Align with Web Analytics Department regarding tracking