Mobile-Friendly Web Design Basics

Why small screens matter

For many sites, a large share of visitors arrive on phones, and for some sites it is the majority. Exact proportions vary widely by audience and topic, so check your own figures rather than assuming. Either way, a page that works only on a desktop monitor will frustrate a lot of people.

Designing for small screens is partly technical and partly about empathy. Imagine a visitor standing in a queue, holding a phone in one hand, with a slow connection and a bright screen. Can they find what they came for?

Responsive layout

The usual approach is responsive design: one page whose layout adapts to the width of the screen. On a wide screen, content might sit in several columns. On a narrow one, the columns stack into a single column that is read from top to bottom.

For this to work, a page normally includes a setting called the viewport, which tells the phone to use its real screen width rather than pretending to be a large desktop screen. If you use a modern site builder or theme, this is usually done for you, but it is worth confirming by opening your site on a phone. If you see a tiny zoomed-out version of the desktop layout, the viewport setting or the theme is the likely cause.

A few layout principles help:

• One main column on small screens. Avoid side-by-side content that forces horizontal scrolling.
• Flexible widths. Use proportional widths or limits rather than fixed pixel widths that are wider than a phone.
• Images that scale down. An image set to a fixed large width will overflow the screen.
• No horizontal scrolling for ordinary pages. Wide tables and code samples are the usual exceptions, and they can be given their own scrolling area.
• Sensible order. The order of content on a narrow screen should still make sense. The most important item should appear early.

Readable text

Text that is comfortable on a computer can be tiny on a phone. Guidelines that generally work:

• Body text of roughly 16 pixels or larger is a common baseline for readable pages. Avoid forcing visitors to pinch and zoom.
• Leave generous space between lines. A line height of around one and a half times the text size is typical.
• Keep lines reasonably short. On a phone this tends to happen naturally.
• Use strong contrast between text and background. Light gray text on white may be hard to read in sunlight.
• Do not rely on color alone to carry meaning, such as marking an error only in red.
• Respect the visitor’s own text size settings where you can.

Plain headings and short paragraphs help even more on small screens, because long blocks of text look very heavy when stacked in a narrow column. This overlaps with the ideas in writing clear website copy.

Tap targets and spacing

A mouse pointer is precise; a fingertip is not. Buttons and links must be big enough and far enough apart to tap without hitting the wrong one.

• Common design guidance suggests touch targets in the region of 44 to 48 pixels on each side. Treat that as a rough guide rather than a fixed rule.
• Leave space between neighboring links, particularly in lists, menus and footers.
• Make the whole row or button tappable, not just a few letters of text.
• Place the most-used actions where a thumb can reach them, and avoid putting small links tightly beside the edge of the screen.
• Do not depend on hover effects. A phone has no hover, so anything that appears only when a pointer rests on it will be missing or awkward.

Navigation and forms

Menus that stretch across a desktop page usually fold into a compact menu button on a phone. Check that the button is clear, that it opens and closes reliably, and that important pages are still easy to reach. Do not bury your contact details deep in the menu.

Forms deserve special care because typing on a phone is slow. Keep them short, ask only for what you need, label every field clearly, and use the right field types so the phone shows a suitable keyboard, such as a number pad for phone numbers. Make error messages specific and visible.

Be cautious with pop-ups that cover the whole screen, especially ones that are hard to close. They are frustrating on a small screen and can make a page difficult to use.

Speed on mobile connections

Phones may use slower or less reliable connections, and processing power varies. Large images and heavy scripts hit mobile visitors hardest. A page that feels fine at your desk can feel slow in a train station. For a closer look at what slows pages down, see the basics of page speed.

How to test

You do not need specialized equipment to find most problems.

1. Use your own phone. Open your key pages, scroll, tap every button, and fill in your forms. If you can borrow a second phone with a different screen size or operating system, even better.
2. Resize a desktop browser window. Drag it narrow and watch how the layout responds. Most browsers also include a device-simulation mode in their developer tools.
3. Rotate the screen. Check both upright and sideways orientations.
4. Try a slow connection. Browser tools can simulate slower networks.
5. Use free testing tools. Several are available to flag text that is too small or tap targets that are too close. Treat their reports as prompts for a human check, not final answers.
6. Ask someone else. A friend who has never seen the site will often find problems you no longer notice.

Test the pages that matter most: the home page, your main service or product pages, the contact page and anything involving payment or sign-up.

Accessibility overlaps

Many mobile-friendly habits also help people with disabilities: large readable text, strong contrast, generous tap targets and clear structure. Thinking about web accessibility alongside mobile design usually produces better pages for everyone.

A short checklist

• The page fits the screen width with no sideways scrolling.
• Text is readable without zooming.
• Buttons and links are easy to tap.
• Menus and forms work with a finger.
• Images and video scale properly.
• Nothing important depends on hovering.
• The page loads in a reasonable time on a mobile connection.

Small-screen problems are rarely fixed in one pass. Make checking on a phone a regular part of your site upkeep, particularly after any redesign or new feature.