Mobile-First Design: Responsive Website Basics

Many of your visitors will see your website on a phone first. Google also uses the mobile version of your site for indexing. Designing for small screens first makes the site better on every screen.

1. Readable text without zooming

Use a body text size of at least 16px, enough line height, and short paragraphs. If people have to pinch-zoom to read, they leave.

2. Thumb-friendly buttons

Make tap targets big enough (around 44–48px tall) with space between them. Put your main action — Call, Message, Book — where a thumb can reach it.

3. Flexible layouts

Start with a single column, then add columns on larger screens:

.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

4. Images that fit

img { max-width: 100%; height: auto; }

Serve smaller image files to phones with srcset, so mobile visitors do not download desktop-sized photos.

5. The viewport tag

<meta name="viewport" content="width=device-width, initial-scale=1">

Without it, phones show a tiny desktop version of your page.

6. Simple forms

Ask only for what you need, use the right input types (type="email", type="tel") so phones show the right keyboard, and keep labels visible.

7. Test on real phones

Browser tools are helpful, but always check on an actual phone — including an older or cheaper model — and on a slow connection.