Mobile-first design: the basics every website should have

Start from the smallest screen

When a design starts from a wide monitor, the phone version usually ends up as a squashed copy: the columns stack, the menu disappears and the important things sink somewhere near the bottom. When you start from a screen about 360px wide, you are forced to decide what really matters.

A useful exercise: write down what a visitor needs to do in the first ten seconds. For a restaurant it is the menu, the address and the phone number. For a dentist it is the services, opening hours and a booking button. For a guest house it is photos, prices and available dates. These must be visible without searching.

• One main action per screen: “Call”, “Book”, “See the menu”.
• Short headings and paragraphs of 2–4 sentences.
• The phone number as a link (tel:), the address with a link to a map.
• The most important content before decorative elements.

Viewport, fluid layouts and breakpoints

Without the viewport meta tag, a phone shows the site as a shrunken desktop page and the user has to pinch to zoom. The standard line is <meta name="viewport" content="width=device-width, initial-scale=1">. Do not disable zooming (user-scalable=no): it gets in the way of people with poor eyesight.

Instead of fixed pixel widths, use percentages, flexible grids (flexbox, grid) and max-width for text. Put breakpoints where the content starts to look wrong, not at the sizes of particular phones — the models change every year.

• Write the styles for the small screen as the base, and add to them for larger screens with min-width media queries.
• Limit the line length to about 60–75 characters on desktop — long lines are hard to read.
• Check landscape orientation too: nothing should stick out sideways or cause a horizontal scroll.

Text you can read without squinting

The base font on a phone should be at least 16px. This is not only about comfort: Safari on the iPhone automatically zooms in when the user taps an input field with a font smaller than 16px. The page “jumps” and then has to be zoomed back by hand. With 16px in the fields, that problem goes away.

Sufficient contrast matters just as much. Light grey text on white looks elegant on the designer’s screen, but in sunlight, on a phone with the brightness turned down, it becomes unreadable. A line height of about 1.5 and a clear difference between headings and body text make the page easier to scan.

Buttons for fingers, not for a mouse

A finger is far less precise than a cursor. Different guidelines give similar minimums for a touch target:

• Apple Human Interface Guidelines: at least 44 × 44 points.
• Google’s Material Design: at least 48 × 48 dp.
• WCAG 2.2, success criterion 2.5.8 (level AA): a minimum of 24 × 24 CSS pixels, or enough spacing around smaller targets.

WCAG sets the lower limit, while Apple’s and Google’s guidelines describe the comfortable size. In practice, aim for about 44–48px for important buttons and leave space between neighbouring links so that the wrong one does not get tapped.

Think about the “thumb zone” too. When a phone is held in one hand, the lower and middle parts of the screen are the easiest to reach and the top corners the hardest. That is why many apps put their main actions at the bottom. On a website this might be a bar with “Call” and “Map” at the bottom edge — but only if it is slim and does not cover the content.

Forms that don’t annoy people

Forms are where mobile sites lose the most enquiries. Every unnecessary field is a reason for someone to give up. Ask only for what you need in order to reply.

• Use the right field type: type="tel" for phone numbers, type="email" for email, inputmode="numeric" for numbers — the phone shows the matching keyboard.
• Add the autocomplete attribute (name, email, tel, street-address) so the browser can fill in the details itself.
• Put the label above the field, not just as grey placeholder text inside it — that disappears as soon as someone starts typing.
• Show errors next to the field, with clear text about what needs fixing.
• Make the submit button wide and use a verb: “Send your enquiry”, not just “Submit”.

Images sized for the phone

A 4000px photo straight from the camera can weigh several megabytes and take seconds to load on mobile data. The browser can pick the right size itself if you give it options.

• The srcset and sizes attributes tell the browser which sizes exist and how wide the image will be displayed.
• The WebP and AVIF formats usually give much smaller files than JPEG at similar quality.
• Set width and height (or aspect-ratio) so the content does not “jump” while the image loads.
• Use loading="lazy" for images below the first screen; the first, large image should not be lazy-loaded.

There is more about speed in the article how to keep a small website fast.

The most common mistakes

• Hover-only menus. There is no “hover” on a phone — submenus must open on tap.
• Full-screen pop-ups. A newsletter, a discount and a cookie notice all at once, before the person has even seen the content. Google also takes a dim view of intrusive pop-ups on mobile.
• Fixed bars that eat the screen. A top menu, a bottom bar and a cookie banner can leave half the height for the content. Let the top menu hide when the user scrolls down.
• Tables and PDFs instead of pages. A price list as a PDF is awkward on a phone; plain text or a list works better.
• Video that autoplays with sound and burns through mobile data.

Test on real phones

The device mode in the browser’s developer tools is useful, but it does not replace a real phone. It does not show how slow the network is outside, how hard it is to hit a small link with your thumb, or how the colours look in sunlight.

1. Open the site on an older, inexpensive Android phone and on an iPhone.
2. Turn off Wi-Fi and try it on mobile data.
3. Complete the main task with one hand: a call, an enquiry, a booking.
4. Ask someone who doesn’t know the site to find the opening hours — and just watch.

If you are wondering whether you need a website or an app at all, see also when a website is the better choice than a mobile app. And if you want to see what mobile sites look like in practice, at TemidaSoft we have put together a few demo sites you can open on your phone.