Responsive design is a way of building a website where the same content adapts automatically to every screen width, from a phone to a large monitor. Since 2019 Google has ranked by the mobile version of a page, which means the phone version is the one that decides your position.
Instead of fixed widths, elements sit in a grid that contracts and expands. Rules in the stylesheet define at which widths the layout changes - when three columns stack into one, when the menu collapses into a button.
Images scale so they never exceed the width of their container. Without that, one wide image causes the whole page to scroll sideways, which is the most visible failing on badly adapted sites.
The "mobile first" approach means building the phone version first and expanding towards desktop. That is the standard today, because adding space is easier than taking it away.
Most visits in Bosnia come from a phone, and in some industries - hospitality, rentals, services - the share is considerably higher.
Google indexes and evaluates the mobile version. If you show less content on a phone than on desktop, that hidden content does not count. It is a common problem on older sites with a separate, abbreviated mobile version.
Speed is also measured on a mobile connection, which is slower. A page loading in one second on desktop can take five on a phone, so the Core Web Vitals score differs drastically.
Tables. A wide table on a phone either overflows the screen or compresses to the point of being unusable. The fix is to give the table its own horizontal scroll.
Buttons and links too close together. A finger is not as precise as a mouse, so spacing has to be larger than it looks necessary on desktop.
Forms with many fields. What looks tidy on desktop becomes long scrolling on a phone that people abandon. On the mobile version every field is worth questioning.
Text too large or too small. Body text under 16 pixels on a phone forces the user to zoom, which is a sign of poor adaptation.
The most reliable method is opening the page on a real phone, on a mobile network, not on the office wi-fi. A browser simulator shows the layout but not the real speed.
Walk through the entire flow you want the user to complete - from arrival to a sent form or a placed call. If any step in that chain sticks, everything before it was wasted.
Check orientation as well. Some users turn the phone sideways, and a layout that works upright can fall apart in landscape.
For speed use PageSpeed Insights on the mobile view, because the desktop and mobile scores differ and the desktop number tends to hide the real problem.
The layout is now most often built through the stylesheet system known as a grid, where elements sit in rows and columns and the structure reflows on narrower screens. Instead of writing a separate mobile version, the same code adapts.
Breakpoints are chosen by the content, not by phone models. When text becomes too wide for comfortable reading, or three columns squeeze too tightly, that is where the break goes - regardless of the pixel number it lands on.
Forms deserve particular attention because they are the most common point of abandonment. Fields must be tall enough for a finger, the on-screen keyboard should match the data type, and the number of fields kept to a minimum.
All of this feeds into how your site is ranked by Google, since the score is based on the mobile version. A badly adapted page loses twice - with the user and in search.
Last updated: 17 August 2026
Send the address and we will tell you where you stand - no obligation.
Send an enquiry
