Mobile-First Design Design interfaces starting with mobile as the foundation, then enhance for larger screens. Breakpoints | Name | Width | Devices | |------|-------|---------| | Mobile | 320-480px | iPhone SE, small Android | | Tablet | 481-768px | iPad mini | | Desktop | 769-1024px | iPad Pro, laptops | | Large | 1025px+ | Desktop monitors | Mobile-First CSS Touch-Friendly Design Performance Requirements | Metric | Target | |--------|--------| | First Contentful Paint | <3s on 3G | | JS bundle | <100KB gzipped | | Total page weight | <500KB | Progressive Enhancement Best Practices - Start d…