Currently accepting new projects
How to Create a Responsive Website That Works on Every Phone
People search "how to create a website responsive" when their site looks fine on a laptop and falls apart on a phone. A responsive website adapts its layout, images and text to any screen, from a small Android phone to a wide desktop monitor. Here is how it works, what usually breaks, and how to test it properly before your customers find the problems.
What a responsive website actually is
The short answer: To create a responsive website, design for the smallest phone screen first, use flexible layouts (CSS Grid and Flexbox with percentage or fluid widths instead of fixed pixels), add the viewport meta tag, serve resized WebP images, and use media queries to adjust the layout where the content needs it. Then test on real Android phones and iPhones, not only in a desktop browser, because that is where most layout problems show up.
A responsive website is one set of pages that rearranges itself for the screen it is shown on. There is no separate "mobile version". The same HTML is styled so that columns stack, images shrink and menus collapse when the screen gets narrow.
Fluid layout
Widths are set in percentages or flexible units, so sections stretch and shrink instead of spilling off the screen.
Flexible images
Images scale to their container and the browser downloads a size suited to the screen.
Breakpoints
Media queries change the layout at certain widths, for example from one column on phones to three on desktops.
Touch-friendly
Buttons and links are big enough to tap, and nothing depends on hovering with a mouse.
The same services section on three screens
The content and order stay the same. Only the arrangement changes.
Why it matters more than how the site looks on your laptop
Most of your customers will see your site on a phone first, often on mobile data and often on a mid-range Android handset. Google also uses the mobile version of your pages for indexing and ranking, so a broken mobile layout hurts both enquiries and search visibility.
Before I started building sites for others, I paid a hefty amount for a template-based website for one of my own businesses. On the developer's laptop it looked fine. On Android and iPhone the layout broke, the images were not converted to WebP, and the pages were padded with filler content. That is why I now test every build on real phones before it goes live.
Nitish, founder of Biz HoistA responsive layout is not the same as a good mobile experience, though. A page can technically fit the screen and still be slow, hard to read and hard to tap. The steps below cover both.
How to create a responsive website, step by step
- Add the viewport tag
Every page needs
<meta name="viewport" content="width=device-width, initial-scale=1">in the head. Without it, phones render the page at desktop width and shrink it, so everything looks tiny. - Design mobile-first
Write the base styles for a narrow phone screen, then add media queries that enhance the layout as the screen gets wider. Starting small forces you to decide what matters most.
- Use flexible layouts
Build sections with CSS Grid and Flexbox, use
max-widthinstead of fixed widths, and let content wrap. Fixed pixel widths are the most common reason pages scroll sideways on phones. - Set breakpoints where the content needs them
Do not design for specific phone models. Widen the browser slowly and add a breakpoint wherever the layout starts to look wrong.
- Serve the right images
Convert photos to WebP, resize them, and use
srcsetso phones download a smaller file than desktops. Add width and height so the page does not jump while loading. - Make text readable and buttons tappable
Keep body text around 16px, line length comfortable, and give buttons enough size and spacing that a thumb hits the right one.
- Handle tables, forms and menus
Let wide tables scroll inside their own box, use the right input types so phones show a number or email keyboard, and keep the menu simple.
If you use WordPress, choose a lightweight theme that is responsive out of the box and check each plugin's output on a phone. Our guide to what WordPress is explains why heavy themes and page builders often cause mobile problems.
What usually breaks on phones
Common causes of a broken mobile layout
Illustrative ranking based on the sites we review, not a measured study.
- The page scrolls sideways or you have to pinch to zoom
- The menu button does nothing or covers the content
- Text overlaps images or runs off the edge
- The call or WhatsApp button is hard to find or tap
- The page jumps around while images load
Responsive site or a separate mobile site?
Some older sites run a separate mobile version on an address like m.example.com. Today a single responsive site is the better choice for almost every small business.
How to test it properly
Browser developer tools let you preview phone sizes on a laptop, and they are useful while building. They do not show how a real phone handles fonts, touch, slow networks or the on-screen keyboard. Work through this list before launch, and again after any redesign.
Responsive testing checklist (tick as you go)
All done. Your site is ready for phones.
How fast is your site right now?Run our free speed test for mobile and desktop scores from Google PageSpeed, plus what is slowing it down.
Test my siteFix or rebuild?
If the problems are a few fixed widths, oversized images and a clumsy menu, a developer can usually fix the existing site. If the theme itself was never built for phones, or every page needs rework, a rebuild is often cleaner and faster to maintain.
Planning a redesign anyway? Our website design ideas show layouts that work well on phones, and website design cost in India explains what changes the budget.
If you are starting from scratch rather than fixing a site, our step-by-step plan for building a small business website covers the whole project, from domain to launch.
Frequently asked questions
How do I make my existing website responsive?
Add the viewport meta tag, replace fixed widths with flexible ones, convert and resize images, and add media queries where the layout breaks. If the site is built on an old theme that was never designed for phones, rebuilding on a responsive base is often simpler.
How to create a website responsive without coding?
Most modern website builders and WordPress themes are responsive by default. You still need to check every page on real phones, keep images light, and avoid adding wide elements or pop-ups that break the mobile layout.
What are the common breakpoints for a responsive website?
Many sites use breakpoints around 600px, 900px and 1200px, but the better approach is to add breakpoints wherever your own content starts to look wrong, rather than targeting specific devices.
Is a responsive website the same as a mobile-friendly website?
Not quite. Responsive describes how the layout adapts to the screen. Mobile-friendly also covers speed, readable text, tappable buttons and forms that work with a phone keyboard. A good site needs both.
Does a responsive website help SEO?
Yes. Google mainly uses the mobile version of your pages for indexing and ranking, so a site that works well on phones is better placed in search. Speed and usability on mobile matter too.
How can I check if my website is responsive?
Open it on a real Android phone and an iPhone, rotate the screen, swipe sideways to check nothing scrolls, and fill in the forms. Browser developer tools help during building, and a speed test shows how fast it loads on mobile.
Does your site break on phones?
Send us your site and we will check it on real Android phones and iPhones, tell you honestly whether it needs fixing or rebuilding, and give you a fixed quote within one business day. See how we build on our website development page.
Get a fixed quoteWebsite development
Only to see which pages help and which don’t. Nothing is sold, nothing is used for advertising, and declining changes nothing about how the site works. More in our privacy policy.