Responsive design
A design approach where layouts adapt fluidly across screen sizes—mobile, tablet, and desktop—using a single codebase.
How responsive design works
Rather than building separate mobile sites (m.example.com), responsive design uses flexible grids, scalable images, and CSS media queries to reflow content appropriately for each viewport. One codebase adapts to every screen size.
This approach simplifies maintenance—update content once, and it reflects everywhere. It also improves SEO—one URL per page rather than duplicate mobile/desktop versions that split authority.
Mobile-first responsive design
True responsive design starts mobile-first: design for the smallest screen first, then progressively enhance for larger viewports. This forces prioritisation—what's truly essential? What can wait for wider screens?
Starting desktop-first often results in squashing complex layouts into phones—compromised experiences that feel cramped. Mobile-first ensures the mobile experience is intentional, not an afterthought.
This matters for mobile-first indexing. Google primarily evaluates mobile versions. Sites with weak mobile experiences suffer regardless of desktop quality.
Common breakpoints
Most responsive designs use 3-4 breakpoints: mobile (320-767px), tablet (768-1023px), desktop (1024-1439px), and wide desktop (1440px+). These align with common device sizes.
But don't design for devices—design for content. Place breakpoints where content starts feeling awkward, not at arbitrary pixel values. A layout that works from 320px to 900px doesn't need a tablet breakpoint.
Responsive images and performance
Image optimisation becomes critical in responsive design. Don't serve 2000px images to 375px phones. Use srcset and sizes attributes to deliver appropriate image sizes for each viewport.
Responsive design itself doesn't guarantee fast load times. Hidden mobile content still downloads. Responsive images must be implemented thoughtfully to avoid shipping desktop-sized assets to phones.
Testing responsive design
Test on actual devices, not just browser emulators. Real phones reveal touch target sizes, font legibility, and performance issues that desktop DevTools miss. Test across iOS and Android—rendering differences exist.
Every Fernside site uses responsive design, built mobile-first. We test across devices during development, ensuring experiences feel intentional—not compromised—on every screen size.
Related terms
Why it matters
Understanding “Responsive design” helps you speak the same language as our design and development team. If you need help applying it to your project, book a Fernside call.