Modern responsive web design for the Indian mobile-first web — fluid typography, Grid and Flexbox, container queries, responsive images, and testing on the devices your users actually have.
In India, if your website doesn't work beautifully on a mid-range Android phone, it doesn't work — the overwhelming majority of traffic is mobile. Responsive design is no longer "also make it work on mobile"; it's "design for mobile first, then scale up". Modern CSS makes truly fluid, device-agnostic design easier than ever. Here's how to approach it in 2026.
Mobile-first is the only sensible default in India
Design and build for the small screen first, then progressively enhance for tablets and desktops. This forces you to prioritise content and keeps pages light — which matters enormously on variable Indian networks and cheaper devices.
Modern responsive techniques
Fluid typography with clamp() Instead of fixed font sizes at a few breakpoints, clamp() scales text smoothly between a minimum and maximum across all screen sizes — fewer breakpoints, better reading on every device.
CSS Grid and Flexbox Modern layout tools adapt naturally to available space, so layouts reflow gracefully instead of breaking. See our [modern CSS guide](/blog/modern-css-techniques) for the full toolkit.
Container queries The big shift: style a component based on its container's size, not just the viewport. This makes genuinely reusable components that look right wherever they're placed.
Responsive images Serve appropriately sized images per device (srcset, modern formats like WebP/AVIF) so mobile users don't download desktop-sized files. This alone hugely improves load time on Indian networks.
Testing that reflects reality
- Test on real, mid-range Android devices, not just a fast desktop in a resized browser window.
- Use DevTools device emulation for quick checks, but confirm on actual hardware.
- Consider touch targets and interactions, not just layout.
- Test with real content — long product names, Hindi text — not lorem ipsum.
- Verify performance on a throttled connection, not just office Wi-Fi.
Frequently asked questions
What does mobile-first design mean? Designing and coding for the smallest screen first, then enhancing for larger ones. It keeps pages lean and prioritises what matters — essential for India's mobile-majority web.
Are media queries still needed with container queries? Both have their place: media queries for page-level layout, container queries for reusable component behaviour. Modern responsive design uses both.
Why test on real devices? Emulators miss real-world performance, touch behaviour, and font rendering. On India's device and network diversity, real-device testing catches issues emulation hides.
Need a site that's fast and flawless on every device your customers use? Talk to us about your web project.