Term · Web & development
Responsive design
Responsive design is an approach in which a single website adapts its layout to the screen it is viewed on. Columns stack on phones, images resize, navigation becomes a menu button, and text remains readable without zooming — all from the same pages and the same address.
[ 01 ]
Explained
How it works
Layouts use flexible grids, relative sizes and CSS rules that change the arrangement at different widths. Images are served in sizes appropriate to the screen. The content stays the same; its presentation adapts.
Why it matters
- In Azerbaijan, about half of web traffic came from mobile devices in August 2026 (StatCounter), and far more for many consumer businesses.
- Google primarily uses the mobile version of pages for indexing and ranking.
- One responsive site is easier to maintain than separate mobile and desktop sites.
Responsive vs mobile-first
Responsive describes the result: the site works on all screens. Mobile-first describes a design approach: start with the smallest screen and expand. They are complementary. See mobile-first design.
Common problems
- Tap targets too small or too close together.
- Tables and wide content overflowing on phones.
- Heavy images and scripts loaded on mobile networks.
- Menus that are hard to use with one hand.
[ 02 ]
FAQ
Frequently asked questions
Is a separate mobile site better?
No. Separate mobile sites on different URLs are harder to maintain and to optimise for search. Responsive design is the standard.
Does responsive design make a site fast?
Not automatically. Speed depends on images, scripts and server performance. See Core Web Vitals.