Responsive web design adapts your site's layout to different screen sizes using three core techniques: fluid grids, flexible media, and CSS media queries. Start with a mobile-first approach where you design for small screens first, then progressively enhance for larger viewports. This forces you to prioritize content and typically results in cleaner code. Fluid grids use relative units like percentages or viewport units (vw, vh) instead of fixed pixels. A container might be 90% width on mobile, 80% on tablet, and max out at 1200px on desktop. Flexible images and videos use max-width: 100% and height: auto so they scale within their containers without breaking layouts or causing horizontal scroll. Media queries are CSS rules that apply styles based on screen characteristics. Common breakpoints are 768px for tablets and 1024px for small desktops, but choose breakpoints based on where your design breaks, not arbitrary device categories. Modern frameworks like Tailwind CSS provide utility classes that make responsive adjustments faster to implement. Key techniques we use at Ottawa SEO: - CSS Grid and Flexbox for layout instead of floats or positioning hacks - Mobile-first media queries using min-width rather than max-width - Touch-friendly tap targets of at least 44x44px on mobile - Viewport meta tag in HTML to prevent mobile browsers from zooming out - Testing on actual devices, not just Chrome DevTools, because emulators miss real-world rendering quirks Performance matters more on mobile networks. Serve appropriately sized images using srcset or picture elements so mobile users don't download 4K hero images over LTE. Lazy-load images below the fold. We've seen clients lose 40-60% of mobile visitors when pages take over 4 seconds to load. Avoid fixed-width tables, horizontal scrolling content, or hover-dependent navigation that breaks on touch screens. Every interactive element should work with touch, keyboard, and mouse. Test your site at viewport widths of 320px, 768px, 1024px, and 1920px as a baseline.