---
title: "Mobile First and Responsive Design: Making Your Website Work on Every Screen"
url: "https://insideuxdesign.com/en/blog/mobile-first-and-responsive-design-making-your-website-work-on-every-screen"
language: "en"
description: "Mobile first and responsive design explained: prioritize content, set breakpoints, size touch targets. Learn how to make your website work on any screen."
published: "2025-06-11T09:00:00+02:00"
updated: "2026-10-15T00:38:26+02:00"
---

# Mobile First and Responsive Design: Making Your Website Work on Every Screen

What responsive design and mobile first mean, how to prioritize content for small screens, set breakpoints and size touch targets properly. A practical introduction built around one running example.

Picture a small yoga studio, as an example. Its website was designed on a big monitor: a wide hero image at the top, three columns of classes below, a sidebar with opening hours on the right, and the “Book a trial class” button all the way at the bottom. On a desk, it looks tidy.

Then someone opens the site on their phone while riding the tram. The three columns have shrunk into tiny strips, the text is so small that they have to zoom, and zooming makes the page slide sideways. The menu links sit so close together that their thumb hits “Legal notice” instead of “Classes”. And the booking button is buried somewhere at the bottom, behind a long story about the studio’s history. They give up and book with the studio two streets over.

Two ideas that belong in every UX and UI designer’s basic toolkit solve exactly this problem: **responsive design** and **mobile first**. This article explains both terms without assuming any prior knowledge. It shows you how to prioritize content for small screens, what breakpoints are, how large touch targets should be and what the so-called thumb zone is all about. The yoga studio stays with you as a running example.

## What is responsive design?

A responsive website responds to the size of the screen it is displayed on and adapts its layout accordingly. On a phone, the classes are stacked on top of each other; on a tablet, maybe two sit side by side; on a large monitor, three. It is always the same website with the same content, just arranged differently.

Web designer Ethan Marcotte coined the term in May 2010 in an article for the web design magazine A List Apart. He described three ingredients that are still the foundation today:

- **Fluid grids:** Columns and spacing are not defined in fixed pixel values but in relative units, such as percentages. When the browser window gets narrower, the columns get narrower too, instead of spilling over the edge.
- **Flexible images:** Images adapt to the width of their container. A photo that is 1,200 pixels wide on a desktop shrinks to the available width on a phone instead of forcing horizontal scrolling.
- **Media queries:** These are conditions in CSS, the code that controls how a website looks. They essentially say: “If the screen is at least this wide, arrange the content like this.” This lets you rebuild a layout at specific points.

One small technical detail is also needed, without which none of this works: the viewport meta tag. The viewport is the visible area of a website in the browser. Without the right instruction in the HTML, mobile browsers pretend the screen is as wide as a desktop and shrink the whole page. That is exactly what happens to the yoga studio. Google’s developer platform web.dev therefore states that pages optimized for different devices must include this tag in the head of the document. If you don’t write code yourself, it is enough to know it exists and to ask your team about it.

## What is mobile first?

Responsive design describes *that* a website adapts. Mobile first describes *the order* in which you approach it. The idea: you design for the smallest screen first and then expand the layout step by step for larger screens.

The approach was popularized by designer Luke Wroblewski, among other things through his book “Mobile First”, published in 2011. His central argument: the small screen forces you to focus. On a phone, there is simply no room for three columns, a sidebar and five teasers. You have to decide what really matters. Those decisions usually make the desktop version better as well.

The opposite approach is called desktop first. The large version comes first, and for smaller screens things get removed, stacked and squeezed. The underlying principle is called **graceful degradation**: the full experience is scaled back for less capable environments. Mobile first follows the opposite principle, **progressive enhancement**: a simple, robust base version works everywhere, and where there is more space and capability, more gets added.

An analogy helps: desktop first is like moving from a big house into a small apartment. You constantly have to figure out what to get rid of, and in the end there is still too much stuff. Mobile first is like moving into a small apartment and gradually bringing in only what you actually need. When you later move into a bigger house, the essentials are already there, and you can add the rest at your own pace.

Mobile first is above all a mindset, not a device policy. It doesn’t mean the desktop version is unimportant. It means you start with the strictest constraint because it forces you into clear priorities.

## Prioritizing content: what goes at the top?

The most important step of mobile first doesn’t happen in a design tool but on a sheet of paper or in a simple list. Before you draw a single rectangle, you figure out what content exists and in what order people need it.

### Step 1: Collect all content

Write down everything the page contains, without judging. For the yoga studio’s home page, that might be: hero image, welcome text, class schedule, prices, “Book a trial class” button, address and directions, opening hours, the studio’s history, teacher profiles, Instagram feed, newsletter sign-up, links to the legal notice and privacy policy.

### Step 2: Sort by tasks, not by what matters to the business

The key question is: why do people come to this page, and what do they want to get done there? For the yoga studio, there are three main tasks: finding out when which class takes place, booking a trial class and finding the way to the studio. The studio’s history may matter a lot to the owner, but for most people visiting the site it is secondary.

How do you know what people want? Ideally from real data: search terms that bring people to the site, frequent questions on the phone or short conversations with customers. For a first version, an honest assessment within the team is often enough, as long as you check it later.

### Step 3: One column, one order

On a phone, there is essentially only one column. Everything is stacked, and the order you define is the order in which people see the content. That is what makes prioritization so effective. For the yoga studio, the revised order looks like this:

- **Before (desktop, stacked):** large hero image, welcome text, studio history, three class tiles, sidebar with opening hours, Instagram feed, and only at the very bottom “Book a trial class” and the address.
- **After (mobile first):** compact header with one sentence about the offer and the “Book a trial class” button, then today’s and tomorrow’s class schedule, prices, the address with a link to the maps app, and only then teachers, history and Instagram.

Nothing has been cut. It has just been sorted. The studio’s history stays on the page; it simply isn’t in the way anymore.

### Hiding content is not a solution

A common shortcut is to simply leave content out on mobile. That sounds like prioritizing, but it is usually a mistake. People on the go don’t want to know less, they just want to see less at once. If the prices are missing on mobile, people simply can’t book.

There is also a very practical reason: Google now evaluates websites for search based on their mobile version. Google declared this so-called mobile-first indexing complete in 2023. Anything missing from the mobile version may therefore also be missing from search.

Rather than leaving things out, let people expand content when they need it. This principle is called [progressive disclosure](https://insideuxdesign.com/en/glossar/progressive-disclosure): details appear only when someone asks for them. In the yoga studio’s schedule, for example, each class shows only the time and name, and tapping it reveals the description and the teacher.

## Breakpoints: where the layout changes

A breakpoint is the screen width at which the layout of a responsive website visibly rearranges itself. Below, say, 600 pixels, the class tiles are stacked; above that, two sit side by side; from around 1,000 pixels, three. Each of these thresholds is a breakpoint.

### Let content decide, not devices

Many beginners first ask: which breakpoints are the right ones? The obvious answer would be a list of device sizes, such as a particular iPhone, a particular iPad and a typical laptop. Google’s web.dev explicitly advises against that: breakpoints shouldn’t be based on device classes, brands or operating systems. Instead, the content should determine when the layout changes.

The reason is simple. There are countless screen sizes, and new ones appear every year, from foldable phones to split-screen windows on tablets. If you optimize for three specific devices, every other size ends up somewhere in between.

In practice, the content-based approach works the way web.dev describes it: you design for the small screen first, then slowly widen the window. As soon as something stops looking good or becomes hard to read, you add a breakpoint at exactly that spot.

For the yoga studio, this happens in two places. First, at around 600 pixels the single-column class tiles get so wide that there is lots of empty space and the class descriptions run on very long lines. This is where they switch to two columns. Second, the body text on the “About us” page becomes uncomfortably long per line in wide windows. web.dev refers to the classic readability guideline of about 70 to 80 characters per line. Instead of adding another breakpoint, the text area gets a maximum width.

### What mobile first looks like in code

Even if you don’t write code yourself, a quick look at the principle is worth it because it makes conversations with developers easier. With mobile first, the CSS starts with the layout for small screens. Extensions go into media queries with a minimum width, such as `@media (min-width: 600px)`. Read aloud, that means: “From 600 pixels wide, also apply the following.” The base version doesn’t need a condition; it always applies.

Desktop first works the other way around: the large layout comes first and is scaled back for smaller screens using `max-width`. Both work technically, but with mobile first, the simplest version is also the foundation everything else builds on.

### Responsive also means accessible

A responsive layout doesn’t only help people with phones. Someone who zooms in heavily on a desktop because their eyesight isn’t what it used to be also ends up with a narrow layout in the browser. That is why the [WCAG](https://insideuxdesign.com/en/glossar/wcag), the international guidelines for accessible web content, require in success criterion 1.4.10 “Reflow” at level AA that content remains usable at a width of 320 CSS pixels without horizontal scrolling. That corresponds to a 1,280-pixel-wide window at 400 percent zoom. A well-built mobile-first website meets this almost as a side effect.

## Touch targets: big enough for real fingers

A touch target is anything you can tap: buttons, links, checkboxes, icons in a menu. With a mouse, even small targets can be hit precisely. A finger, on the other hand, is wide, covers the very spot it is trying to hit, and the person may be on the move.

How easy a target is to hit depends on its size and distance. This relationship is described by [Fitts’ Law](https://insideuxdesign.com/en/glossar/fitts-law): the larger and closer a target is, the faster and more reliably it gets hit.

### The guidelines at a glance

There are several recommendations for minimum touch target size, and they differ slightly:

- **WCAG 2.2, success criterion 2.5.8 (level AA):** Targets must be at least 24 × 24 CSS pixels. Smaller targets are only allowed if they have enough spacing from neighboring targets.
- **WCAG 2.2, success criterion 2.5.5 (level AAA):** The stricter level specifies 44 × 44 CSS pixels.
- **Apple:** The Human Interface Guidelines list 44 × 44 points as the default control size for iPhone and iPad, and 28 × 28 points as the absolute minimum.
- **Google:** For Android, Google recommends at least 48 × 48 dp (density-independent pixels). According to Google, that is roughly 9 millimeters physically, regardless of screen size.

The units sound confusing, but they basically mean the same thing: a size that is independent of the screen’s pixel density. As a rule of thumb: 24 pixels is the minimum the WCAG require at level AA, and 44 to 48 pixels is the size that is comfortable to tap. If you have the choice, go with the larger value.

### Making targets bigger without making them look bigger

A touch target doesn’t have to look as big as it is. A small icon can have an invisible, larger tap area. In code, this is done with padding. The slim icon stays visible, while the tappable area is 44 × 44 pixels.

For the yoga studio, this affects three places:

- **Menu links:** Before, the links were small words in a single row. After, they are stacked in the expanded menu, each entry a full row 48 pixels high.
- **Classes in the schedule:** Before, only the class name was a link. After, the entire class row is tappable.
- **Social media icons:** Before, there were three 16-pixel icons with no space between them. After, each gets a 44 × 44 pixel tap area and some breathing room.

### There is no hover on touch devices

On desktop, many websites show additional information when the mouse hovers over an element, such as a submenu or an image caption. Touch devices don’t have this state. Anything that only appears on mouse hover is practically invisible on a phone. Important information and functions should therefore always be visible or reachable with a tap.

## The thumb zone: how people really hold their phones

On phones, reachability matters as well as size. If someone holds the device in one hand and operates it with their thumb, not every point on the screen is equally easy to reach. The area the thumb can reach comfortably is often called the thumb zone.

### What the research shows

The best-known study on this comes from Steven Hoober, published in 2013 in the magazine UXmatters. He observed 1,333 people using their phones in everyday situations. Of the 780 people who were touching the screen, 49 percent used one hand, 36 percent cradled the phone in one hand and tapped with the other, and 15 percent used both hands. Hoober also stresses that people change their grip very often, sometimes every few seconds.

This research inspired the well-known graphics with green, yellow and red zones: easy to reach at the bottom center, hard to reach in the opposite top corner. These graphics are a helpful rule of thumb, but a simplification. In later work, including his 2021 book “Touch Design for Mobile Interfaces”, Hoober concludes that people favor the middle of the screen for both reading and tapping.

### What this means for your design

Because people hold their devices differently and switch grips all the time, there is no single perfect position. Still, the research suggests a few robust rules:

- **Place frequent actions within easy reach:** Things people do often don’t belong in the far top corners. That is why many apps put their main navigation in a bar at the bottom of the screen.
- **Put important things in the center of attention:** The main content and the primary action should be where people already look and tap.
- **Keep risky actions away from frequent ones:** “Delete account” right next to “Save” is an invitation to mis-tap.
- **Use generous targets near the edges:** Where a target is hard to reach, more area helps.

For the yoga studio, that means: the “Book a trial class” button sits right in the header, clearly visible and wide enough to hit with any grip. On long pages such as the class schedule, it also stays pinned as a slim bar at the bottom of the screen. The menu icon in the top right corner isn’t ideally reachable, but it is rarely needed because the most important paths are right on the page. If you’re wondering whether the so-called [hamburger menu](https://insideuxdesign.com/en/glossar/hamburger-menu) with its three lines is a good idea at all, the article [“The 4 Most Frequently Asked Questions About the Hamburger Menu”](https://insideuxdesign.com/en/blog/the-4-most-asked-questions-about-the-hamburger-menu) has answers.

## Testing without a device lab

You don’t need a drawer full of phones for a first test. Three simple checks already cover a lot:

- **Resize the window:** Open the website on your computer and slowly drag the browser window narrower and wider again. Watch for horizontal scrolling, cut-off text or overlapping elements. The developer tools in all major browsers also include a device mode where you can simulate different screen sizes.
- **Tap on a real phone:** Simulation doesn’t replace a real thumb. Go through the most important tasks on your own device, ideally with one hand while standing. For the yoga studio, that would be: find tomorrow’s class, book a trial class, open directions to the studio.
- **Zoom in:** Zoom the website to 400 percent on a desktop. If it can still be read and used without horizontal scrolling, that is a good sign for accessibility.

It is even more revealing to look over other people’s shoulders. Give two or three people you know a phone and a specific task, and quietly watch where they hesitate or mis-tap.

## Conclusion

Responsive design makes a website adapt to any screen size, using fluid grids, flexible images and media queries. Mobile first defines the order: small screen first, then gradually more. The real benefit lies less in the technology than in the mindset. If you start with little space, you have to decide what really matters, and that clarity benefits everyone in the end.

Nothing about the yoga studio’s offer has changed. But its website now shows first what most people are looking for, is comfortable to use with a thumb and works on every screen, from a small phone to a large monitor. On your next project, start with a simple content list, sort it by the tasks people want to get done, and only then draw your first screen.

## Checklist

- The viewport meta tag is set.
- All page content is collected and sorted by people’s tasks.
- The primary action is visible on mobile without lots of scrolling.
- No important content is missing on mobile; details can be expanded when needed.
- Breakpoints are based on content, not on specific devices.
- Body text has a comfortable line length, even on wide screens.
- At 320 CSS pixels wide and at 400 percent zoom, no horizontal scrolling is needed.
- Touch targets are at least 24 × 24 pixels, ideally 44 × 44 to 48 × 48, with spacing between them.
- Nothing important appears only on mouse hover.
- Frequent actions are easy to reach with a thumb, and risky actions aren’t right next to them.
- The most important tasks have been tested one-handed on a real phone.

## Sources

- [Ethan Marcotte: Responsive Web Design (A List Apart, 2010)](https://alistapart.com/article/responsive-web-design/)
- [Luke Wroblewski: Mobile First (A Book Apart, 2011)](https://lukew.com/resources/mobile_first.asp)
- [web.dev: Responsive web design basics](https://web.dev/articles/responsive-web-design-basics)
- [Google Search Central: Mobile-first indexing has landed (2023)](https://developers.google.com/search/blog/2023/10/mobile-first-is-here)
- [W3C: Understanding Success Criterion 1.4.10 Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow)
- [W3C: Understanding Success Criterion 2.5.8 Target Size (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html)
- [Apple: Human Interface Guidelines, Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility)
- [Google: Touch target size (Android Accessibility Help)](https://support.google.com/accessibility/android/answer/7101858)
- [Steven Hoober: How Do Users Really Hold Mobile Devices? (UXmatters, 2013)](https://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php)
- [Steven Hoober: Touch Design for Mobile Interfaces (Smashing Magazine, 2021)](https://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/)