Responsive design — Responsive web design

Building websites that automatically adapt to any screen size — phone, tablet or desktop.

What it means

Responsive design means building a website so that it automatically adjusts to fit any screen, whether it is a small phone, a tablet or a large desktop monitor. Without responsive design, a visitor on a phone might have to pinch, zoom and scroll sideways just to read a menu.

How it works

A responsive website uses flexible layouts that change with screen width:

Columns stack: three side-by-side boxes on desktop become one column on a phone.
Menus change: a full menu bar on desktop becomes a tap-to-open menu icon on mobile.
Text and buttons adjust: so they stay readable and easy to tap with a thumb.

Many designers now follow a mobile-first approach. They design for the phone screen first, then add more for larger screens. This makes sense because Google uses mobile-first indexing, which means it mainly looks at the mobile version of your site when deciding how to rank it.

A simple example

A café in Pune has a website with its menu, location and a "Reserve a table" button. On a laptop, the menu shows in three columns with large food photos.

When someone opens the same site on their phone while standing outside, the menu turns into a single scrolling list, the photos shrink, and the "Reserve a table" and "Call now" buttons become big and easy to tap. The visitor books a table in seconds instead of giving up.

Why it matters

In India, most people browse the internet on their phones. If your site is hard to use on mobile, visitors leave quickly and you lose enquiries and sales. It also supports your SEO.

Beginner tips

Check your site on real phones, not just your laptop.
Use Chrome DevTools device mode to preview different screen sizes.
Keep buttons large and forms short on mobile.
Common mistake: hiding important information on the mobile version.