01
Build one adaptive system, not separate screenshots
A responsive page normally serves the same HTML at the same URL and changes presentation with flexible CSS. A card grid may use one column when space is limited and add columns when the cards can remain readable. The design should respond to content, not a list of current phone models.
Set the viewport correctly and allow content to reflow without horizontal scrolling. Fixed-width containers, absolute positioning and text locked inside images are common causes of failure between the widths a designer happened to preview.
02
Choose breakpoints where the content needs them
Use modern grid and flex layouts, relative dimensions and sensible maximum line lengths. Start with the simplest layout, then add a breakpoint when navigation, text, controls or relationships need more space. Device labels such as tablet are less useful than observing where the content stops working.
Keep source and reading order logical even when visual placement changes. Do not move a secondary panel above the main heading through CSS if keyboard and screen-reader order still tells a different story.
- Use flexible tracks and containers
- Set readable minimum and maximum widths
- Add breakpoints for content pressure
- Keep DOM and visual order coherent
03
Adapt typography, media and interaction
Text should remain readable without forced zoom and should tolerate browser zoom and user font settings. Images need responsive dimensions and appropriate source sizes; video and embedded tools must fit the container without trapping horizontal space.
Screen size does not identify input method. Support touch, mouse, keyboard and assistive technology. Hover can enhance a control but cannot be the only route to information. Disable user zoom only at the cost of people who depend on magnification.
04
Test the gaps, content extremes and real journeys
Drag through the full width range and test small phones, tablets, laptops, large screens and orientation changes. Use long headings, translated strings, form errors, empty states and real content rather than tidy placeholder cards.
Check navigation, focus visibility, sticky elements, dialogs, tables, third-party widgets and print where relevant. A common mistake is approving a responsive homepage while checkout, account or booking screens still overflow.
Practical next steps
Checklist
- 01Set a correct responsive viewport
- 02Use flexible layouts and constrained line lengths
- 03Choose breakpoints from content pressure
- 04Keep reading and focus order logical
- 05Serve appropriately sized responsive images
- 06Support touch, keyboard, mouse and zoom
- 07Test every critical template between breakpoints
- 08Include long content, errors and third-party widgets
Common questions
Questions and answers
Is a mobile-friendly site automatically responsive?
Not necessarily. A separate mobile site can be mobile-friendly, while responsive design normally adapts one set of content and URLs through flexible layout rules.
How many breakpoints should a website have?
Use as many as the content and components genuinely need, and no more. There is no universal set tied to every device.
Can responsive design improve SEO?
It supports a maintainable mobile experience and Google recommends it as an implementation pattern, but it does not guarantee rankings.
Why does a site still overflow on one phone?
A fixed-width image, table, long unbroken string, embedded widget or positioned element may exceed the viewport even when the main layout is flexible.
Need a considered recommendation?
Discuss the website, not just the symptom.
AHANIX reviews each requirement manually. Technical recommendations may depend on access to the website, hosting or DNS configuration.
Continue learning