Website Designing
Layouts built to convert.
Read moreWebsite Design · Delhi NCR & remote
Responsive is not shrinking. It is deciding again.
Most “mobile friendly” sites are a desktop design that survived being squeezed. Genuinely responsive design asks a different question on a phone: with one thumb and a fifth of the space, what still matters?
Short answer
Responsive website design means the layout adapts to the device rather than being scaled down. In practice, for Indian traffic, it means designing the 360px phone layout first — deciding what appears, what collapses and what is dropped — then expanding to desktop. A shrunk desktop design passes automated mobile tests and still loses visitors.
Drawn at 360px first
44px tap targets
Tested on real networks
No sideways scroll, anywhere
Free mobile review
Get a free quote
Four details. A real reply the same day, from me.
Site awkward on a phone?
Get a Free Quote
WhatsApp
01 The premise
Passing the test is not the same as working.
Google’s mobile-friendly check asks a narrow question: does the content fit the viewport and is the text legible. A site can pass it comfortably and still be unpleasant to use — a phone number that is an image, a form with six fields above a keyboard, a menu that needs two taps and a pinch, a table that scrolls the entire page sideways.
Designing mobile first is a genuinely different exercise from designing desktop first. It forces the ranking of content early, because there is only one column and everything is a decision about what comes next. That constraint is why mobile-first designs usually turn out better on desktop too: the priorities were settled when they could not be avoided.
And there is a specifically Indian dimension. A meaningful share of traffic arrives on mid-range Android handsets over a congested mobile network, not on a recent iPhone over office wi-fi. A design that assumes the second one is a design that quietly fails a large part of your audience.
02 The checklist
What is decided on the phone layout.
These are design decisions, not development details — they belong in the drawing, not in a later fix.
The mobile checklist
- Reading order. One column means one order. Deciding it is the core of mobile design, and desktop inherits the answer.
- Tap targets. At least 44px, with space between them. Adjacent small links are the most common source of mis-taps.
- Thumb reach. Primary actions in the lower half of the screen, where a thumb naturally lands, not stranded in a top corner.
- Form length. Every field is visible work above a keyboard. Four fields is a form; ten is an abandonment.
- Tables and wide content. They scroll inside their own container. The page itself must never move sideways.
- Fixed elements. Sticky bars and chat bubbles consume the small screen and collide with each other. Their behaviour is designed, not left to chance.
- Real-network weight. Images sized and served in modern formats, fonts subset, scripts kept minimal. Speed is a design constraint on mobile.
03 Breakpoints
Where the layout actually changes.
Breakpoints chosen from where the content breaks, not from device model names.
| Width | What the design does |
|---|---|
| 320–419px | Small and older Android handsets. Single column, largest tap targets, most aggressive trimming. If it works here it works everywhere. |
| 420–719px | Mainstream phones. Still one column, but headings, images and spacing can breathe. |
| 720–979px | Tablets and small laptops. Two columns appear where content genuinely pairs — not everywhere at once. |
| 980–1279px | Laptops. Full navigation replaces the drawer, sidebars and multi-column grids become useful. |
| 1280px and above | Large screens. Line length is capped so text stays readable — letting paragraphs stretch to 1900px is a real, common flaw. |
Free mobile review
What does your site do on a real phone?
Send me the URL. I will open it on a mid-range Android on mobile data and tell you what breaks, what is unreachable by thumb and what is quietly costing you enquiries.
- Tested on a real handset, not an emulator
- You keep the findings either way
- Fixed price agreed before work starts
- Same-day reply, all 7 days
Free mobile check
Get a free quote
Four details, and a real reply today.
04 Testing
How it gets tested.
Emulators are a starting point, not a verdict.
- Real devices
- A mid-range Android and an iPhone, held in a hand. Some faults — thumb reach, contrast in daylight, keyboard collisions — only appear this way.
- Every width, not five
- The layout is checked continuously from 320px upwards rather than at a handful of preset sizes, because breakage usually happens between the presets.
- Throttled network
- Loaded on a deliberately slow connection to see what a visitor on mobile data actually experiences.
- Landscape and large text
- Rotated, and with the system font size increased. Users who need bigger text are exactly the users a broken layout excludes.
- Core Web Vitals
- Measured on mobile, which is the score Google actually reports on. Desktop figures flatter almost every site.
— Website Design
Related services.
These sit next to responsive design and are usually bought with it. Same person doing the work in each case.
Business Website Design
For companies that sell offline.
Read moreCorporate Website Design
Scale, governance, many stakeholders.
Read moreLanding Page Design
One page, one action.
Read moreCustom Website Design
No themes, no templates.
Read moreWebsite Redesign
Fix what is losing you enquiries.
Read more— Questions
responsive design — your questions.
Straight answers, including the ones that cost me work. If yours is not here, ask it — I reply the same day.
That test checks whether content fits and text is legible. It does not check whether your form is completable one-handed, whether your buttons are reachable by thumb, or whether the page loads on mobile data. Plenty of sites pass and still lose most of their mobile visitors.
No. Separate m-dot sites were a workaround from a decade ago and they bring duplicate content, split rankings and double maintenance. One responsive site serving every screen is the current standard and the simpler thing to own.
Designing the smallest screen before the largest, rather than adapting downwards. It forces content priorities to be decided when there is no room to avoid them, which is why mobile-first designs usually end up cleaner on desktop as well.
If it is built with fluid layouts rather than fixed device breakpoints, yes — those sizes are just more widths. Sites built around specific device dimensions are the ones that break when a new form factor appears.
Nothing, because it is not an extra. Any site I build is responsive by definition. Retrofitting responsiveness onto an old fixed-width site does cost money, and in most cases rebuilding is cheaper than patching.
Indirectly and significantly. Google indexes the mobile version of your site and measures Core Web Vitals on mobile. A site that is slow or awkward on a phone is being judged on exactly that experience, whatever the desktop version looks like.
Free consultation · No obligation
See what your site does in a real hand.
Send me the URL. I will open it on a mid-range Android over mobile data and tell you exactly what a phone visitor runs into — before you spend anything.
- Tested on real handsets, not emulators
- Drawn at 360px before desktop
- Core Web Vitals measured on mobile
- Fixed price agreed before work starts
Start here
Send your enquiry
Name, number, email, what you need.