Responsive design: what it means for your site
Every designer says their sites are responsive. Here is responsive web design explained in plain terms, so you can check for yourself whether the word is true of your site.
What does responsive mean?
It means one site that rearranges itself to suit the screen it is opened on. Not a separate phone version, and not the desktop page shrunk until the text is unreadable. The same content flows into a single column on a phone, two on a tablet, and a wider layout on a desktop. The visitor should never have to zoom or scroll sideways to read.
What actually changes on a small screen?
Columns stack on top of one another. The menu folds into a button. Text is sized to be read at a comfortable distance, and images scale to the width of the screen. Some things may be reordered so that the most important one comes first. Good responsive work also decides what a phone visitor needs most, such as a call button, and puts it within reach of a thumb.
Why does the phone matter so much?
Because many of your visitors will meet your site there first, often from a link in a chat or a social post, standing somewhere with one hand free. If the page is slow, cramped or hard to tap, they leave before reading anything. In many markets the phone view is simply the site; the desktop view is what the owner looks at in the office.
What should I test myself?
Open the site on your own phone, not in a preview on a computer. Read a full page. Tap every item in the menu. Fill in the contact form with the phone keyboard. Open a product or a project and go back. Try it on a phone that belongs to someone else as well, ideally a different size and brand. Whatever irritates you in a couple of minutes is irritating your visitors daily.
What goes wrong most often?
Text laid over a photo that becomes unreadable when the photo is cropped. Buttons too small or too close together to tap accurately. Tables and wide images that push the page sideways. Pop-ups that cover the whole screen and cannot be closed. Headings sized for a desktop that fill the entire phone screen. And in Arabic sites, elements that stay aligned for left-to-right when the page flips.
What should I ask my designer?
Ask to see the phone design, not just hear that there will be one. A real answer is a phone layout drawn for each key page, which you can look at before anything is built. Ask which screen sizes are tested, and on real devices or only in a simulator. And ask whether the parts you will edit yourself later will stay responsive when you change the text.
How I handle it
In my Figma file the phone layout is drawn next to the desktop one, and you approve both before the build, which then follows both. If, after launch, something displays differently from the approved design on a device, fixing it falls under the 180 days of support. Tell me about your project and where most of your visitors come from, and I will show you how the phone view would be handled.
New articles every day on our Facebook page: Learn with MK
Have a project in mind?
Tell me what you are building and I reply within 24 hours.
