Responsive website: make your site work on mobile

What exactly is a responsive website?

Responsive web design is a way of building where one website adapts to the width of the screen. So there's no separate mobile site. The layout, the size of text and images and the position of menus all shift along.

In the past some businesses had a separate mobile version, for example on a different address. That meant double the maintenance and often a stripped-down version for mobile visitors. With responsive design you have one site, one place to manage it and the same content for everyone.

Why a mobile-friendly website matters

There are three good reasons to take mobile seriously:

• Your visitors. People often look up a business, opening hours or a phone number while on the go. Then it has to work straight away.
• Google. Google mainly looks at the mobile version of your site to decide how good it is. This is called mobile-first indexing.
• Enquiries. A form that's awkward to fill in on mobile brings in fewer enquiries, even if it works fine on a computer.

So a site that doesn't work well on mobile costs you customers and visibility. Often without the owner noticing, because they mostly look at it on their laptop.

How to test whether your website is responsive

You don't need to be technical to do a first check. Grab your own phone and go through this list:

• Can you read everything without zooming in?
• Can you see text and images without scrolling sideways?
• Are buttons and links big enough to hit with your thumb, without accidentally tapping something else?
• Does the menu work well and can you quickly find what you're looking for?
• Can you easily fill in the contact form? Does the right keypad appear for a phone number?
• Can you call or email with a single tap?
• Does the page load quickly, even on mobile data?

Test on a tablet as well, and try turning your phone sideways. In a browser on your computer you can make the window narrower to see how the site adjusts. Most browsers also have a developer mode where you can simulate different screen sizes.

Common problems on mobile

On the sites we review, we often come across the same problems:

• Text that's too small, so visitors have to zoom in.
• Pop-ups that fill the whole screen on mobile and are hard to close.
• Tables or images that spill off the screen.
• Heavy photos that take a long time to load on mobile.
• A menu with too many items, so visitors get lost.
• Forms with too many fields, or fields that don't work well with the mobile keyboard.
• Important information, such as price or contact details, sitting right at the bottom.

Speed and mobile go hand in hand. If you want to dig deeper, read making your website faster and our article on the Core Web Vitals, the measurements Google uses for user experience.

Making your website mobile-friendly: where to start?

If your site isn't properly responsive, there are two routes. For small problems you can adjust the existing theme or styling. Think larger text, better buttons and lighter images.

Is the site older and not built responsive from the start? Then patching it up often becomes a botch job. A new site designed for mobile from day one is usually the better and, in the end, cheaper choice. This is also called mobile first: you design for the small screen first and then expand to larger screens.

Mobile first forces you to make choices. What really matters to your visitor? That goes at the top. It often makes the site calmer and clearer on a laptop too.

Not sure which route fits? Ask yourself these questions:

• Is the site less than a few years old and are these minor cosmetic issues? Then adjusting it is often enough.
• Do you have to fix the mobile view separately for every page? Then it turns into patchwork.
• Is the site also slow, hard to manage or out of date? Then a rebuild is usually smarter.
• Do you want new features anyway, such as online booking? Then combine that with a new, responsive foundation.

Read more about that trade-off in our article on redesigning your website.

Tips for a good responsive website

• Put the most important action, such as calling, booking or requesting a quote, clearly visible at the top.
• Keep sentences and paragraphs short. On a small screen a wall of text is heavy going.
• Use images in the right size for each screen, so mobile visitors don't load large files.
• Keep forms short. Only ask for what you really need.
• Test every new page on your phone before you publish it.
• Pay attention to accessibility as well, such as enough contrast and clear buttons. That helps everyone.

Getting a responsive website built by Violexa

Every website Violexa builds is responsive. A design that works on every screen is included in the price as standard. We test on phones, tablets and desktops before the site goes live.

See projects in our work.

A custom website or web application starts from €1,799 excl. VAT (€2,177 incl. VAT) per project, including design, build, SEO basics, Google Analytics, CMS connection and a walkthrough. You'll find more information under websites and apps.

Curious how your site performs on mobile? Book a free quickscan. In 30 minutes, online or on site, we look at your site together. Afterwards you get short written advice with a price indication, with no obligations.

Frequently asked questions