Start with mobile-first base styles where elements stack vertically and use full width by default. Set your container to max-width: 1200px with width: 100% and padding: 0 20px so it scales down gracefully. Make images flexible with max-width: 100% and height: auto to prevent overflow on small screens. Use CSS Grid or Flexbox for layouts instead of fixed pixel widths. A typical grid setup is display: grid with grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) which automatically wraps columns based on available space without media queries. For navigation, flex-direction: column on mobile switches to row at larger breakpoints. Media queries trigger layout changes at specific widths. The standard breakpoints are 768px for tablets, 1024px for small desktops, and 1200px for large screens. Write these as min-width queries so you add complexity as screens grow: @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }. Avoid max-width queries unless you need to override something specific. Use relative units everywhere. Rem for font sizes (1rem = 16px by default), percentages or viewport units (vw/vh) for widths, and em for spacing that should scale with text. Never set fixed pixel heights on content containers. At Ottawa SEO we test every build on actual devices, not just browser resizing. Chrome DevTools shows how your site renders on iPhone and Samsung devices, but physical testing catches issues with touch targets and real-world performance. The viewport meta tag is non-negotiable: <meta name="viewport" content="width=device-width, initial-scale=1">. Common mistakes are too many breakpoints (stick to three or four), forgetting touch target sizes (minimum 44px), and using px for everything. Responsive design isn't about making things smaller, it's about rethinking hierarchy and interaction patterns for each context. A card grid might show four columns on desktop but one on mobile with larger tap areas and simplified content.