Responsive web design: a complete guide

A responsive website adapts itself to the size of the screen: the same site rearranges menus, text, images and buttons to look and work well on a phone, a tablet or a computer. Today it's not an extra. Most visits to a Costa Rican business come from a phone, and Google evaluates your site by looking at the mobile version first.

This guide explains what that means for your business, what makes a site really work on a phone (not just "look fine") and how to check it yourself.

Why the phone decides

• Your customers search for you on their phones, often on mobile data with one hand busy: on the bus, in a line, at work. Tourists do the same, on patchy hotel wifi.
• Google indexes the mobile version. With mobile-first indexing, Google uses what a phone sees to decide how to rank your site. If the mobile version hides content or loads slowly, that's what counts (Google's documentation).
• Patience is short. If the page is slow, or you have to zoom in to read, the person goes back to the results and chooses the competition.

Responsive isn't just "looks fine"

A site that's truly optimized for phones does four things:

1. It adapts to any screen

• Flexible columns that stack on small screens.
• Images that scale without distorting or spilling off the screen.
• No horizontal scrolling: it's the clearest sign of a badly adapted site.

2. It loads fast on mobile data

• Images in light formats (WebP or AVIF) and at the size they're actually shown.
• Lazy loading for images further down the page.
• Few fonts, few third-party scripts and no heavy sliders on the home page.

Google measures the experience with the Core Web Vitals: LCP (how long the main content takes to appear, ideally under 2.5 seconds), INP (how quickly it responds to a tap) and CLS (nothing "jumping" while it loads). web.dev explains all three.

3. It's used with a finger

• Big buttons and links (about 44 × 44 pixels), well spaced, so people don't tap the wrong one.
• The important things within thumb reach: call, message on WhatsApp, book, buy.
• Short, clear menus; if the phone menu has 15 options, 10 are too many.

4. It's understood at a glance

• What people look for first, at the top: what you do, for whom and how to contact you.
• Text of at least 16 pixels, short paragraphs and good contrast (which also helps people reading in the sun).
• Forms with few fields and the right keyboard for each (numbers for the phone, @ for email).

Designing for phones first

The mobile-first approach means designing the smallest screen's version first and then expanding it for tablet and desktop. It forces you to decide what's essential, and the result is usually a lighter, clearer site at every size. The opposite mistake, designing for desktop and "hiding" parts on phones, leaves heavy code that's downloaded anyway, and content Google might not take into account.

How to check your site in 15 minutes

1. Open it on your own phone, on mobile data, not wifi. How long until something useful appears? Can you call or message in one tap?
2. Test it in PageSpeed Insights (pagespeed.web.dev). Look at the "Mobile" tab and the real-user data, if it appears.
3. Check Search Console. The Core Web Vitals report shows which pages are slow on phones according to real users. (The old "Mobile-Friendly Test" and "Mobile Usability" report no longer exist; Google retired them in 2023.)
4. Use Chrome's device mode (right-click > Inspect > phone icon) to see the site at different sizes.
5. Complete your own form or purchase on a phone. If it's hard for you, it's hard for your customers.

Signs you need a redesign

• You have to zoom in to read, or text runs off the screen.
• Buttons are crammed together or hard to tap.
• The page takes more than 3 or 4 seconds to show anything on mobile data.
• The menu doesn't work well on phones or covers the content.
• Your form or cart has many steps on a phone.

How we do it at WEB.CR

With more than 25 years of experience in web development and digital marketing, we've seen 800-pixel screens, the first phones with internet and today's phones come and go. That's why we design every site phone first, with optimized images, contact buttons always at hand and short forms, and we measure the Core Web Vitals before handover. This very site is built that way. If your current site has several of the symptoms above, the pricing calculator gives you an estimate for a new one in seconds, and our speed optimization service can help if a rebuild isn't needed.

To go further:

• Accessible web design: much of mobile accessibility (contrast, button size, forms) is the same.
• SEO in Costa Rica: how speed and the mobile version affect your Google position.
• How visual design transforms a website.

Frequently asked questions

Why does my site look good on a computer but bad on a phone?

Because it was built with fixed measurements meant for a large screen. A responsive site uses flexible measurements that rearrange according to the screen's width.

Can my current site be fixed, or does it need rebuilding?

It depends on how it's built. If it uses a modern template, design and speed adjustments are sometimes enough. If it's an old site with fixed measurements, rebuilding is usually cheaper and faster than patching it.

Does an app replace a responsive site?

For the vast majority of businesses, no. A responsive site works on any phone without installing anything, and it's what Google finds. An app makes sense when customers use it very often (banking, recurring bookings).

Want us to check how your site works on phones? Book a free call.