Most visits to a business website today come from phones, and most sites are still designed on a big screen. Hence the gap between what the client sees when approving the design and what their customer sees.
Responsive design is often understood as "the page shrinks". That's the smallest part of the job.
What responsive really means
Not the same thing on a smaller screen, but a decision about what stays on the smaller screen.
At 360 pixels wide there isn't room for everything that fits at 1,400. If everything is kept and just shrunk, you get a page where everything can be read by zooming and nothing can be tapped without missing.
The real decision is: what matters most here, and what goes.
What most often breaks on phones
The menu. All the items fit in a bar on a big screen, not on a small one. If they turn into a twelve-item menu, nobody gets to the end of it.
Tables. Five columns at 360 pixels doesn't exist. Either they break into cards, or they scroll sideways inside their own frame, never so that the whole page moves left and right.
Forms. Fields too narrow for a finger, dates that don't open, a keyboard covering the field being filled in.
Oversized heading text. A heading that's striking on a big screen takes up the whole first screen on a small one.
Elements you can't hit. Links too close together. A tap target should be at least 44 pixels.
Fixed bars. The header, the cookie bar and a chat widget together eat a third of the screen.
Sideways scrolling. One element wider than the screen and the whole page slides sideways. A small thing that gives away that the phone wasn't checked.
What to remove, not shrink
This is the part that separates a good mobile site from a shrunken one:
- Decorative images that create an impression on a big screen but use up space and data on a small one.
- Secondary information that can come lower down or in a section that opens on tap.
- Several calls to action. On a phone, one.
- Animations that drain the battery and the processor.
Fewer elements on a phone isn't an impoverished site but a site that respects the conditions it's read in.
Order matters more than on a big screen
On a big screen the eye skips around. On a small one the content is read in order, top to bottom.
That's why the first screen has to say three things: what you offer, to whom, and what to do now. If people have to scroll to get there, some won't.
Speed is part of the story
A mobile visitor is more often on a weaker connection and a weaker device. The same page that opens in a second on a computer takes three on a phone.
That's why the mobile version shouldn't send the same huge images sent to a big screen. The details are in what makes a website fast.
How to check
On a real phone. Not just in browser emulation: touch, the keyboard and real speed don't show there.
On an older phone, if you have one. What's unnoticeable on a new one is visible on a three-year-old one.
Check the form all the way. Fill it in and send it from a phone. This is the step most often skipped, and the one that costs the most.
Try it in the sun. Weak contrast can't be seen outdoors.
Run it through PageSpeed Insights and look at the mobile score.
Frequently asked questions
Do I need a separate mobile site?
No. Separate mobile sites are a thing of the past and bring double maintenance and problems with addresses.
Do I need an app?
For most businesses, no. A good site on a phone does the same job without an install.
Does it work on a tablet too?
Yes, if it's done properly. The tablet is the most often neglected, and that's where two-column layouts break.
How much does it add to the cost?
Nothing, if it's done from the start. Adapting a finished site afterwards is a separate job.
How to check your site
Open it on your phone and try sending an enquiry. If anything bothers you along the way, it'll bother your customer too.
Send me the address and I'll go through where it breaks.