A responsive website adapts its layout and interactions to the available space. Mobile-first is a way to build that behaviour: start with a usable narrow layout, then add enhancements as the viewport grows. It does not mean hiding essential information from desktop users or treating a phone as a scaled-down computer.
Start with the job, not the device
List what visitors need to accomplish: read an article, compare offers, submit a form or find contact details. On a narrow screen, order the content around that job. A decorative hero is secondary to a clear heading, useful context and the primary action.
Check the source order as well as the visual order. CSS can rearrange items visually while keyboard and assistive technology users encounter the document in a different sequence. Aim for an order that makes sense before applying layout changes.
Make the grid flexible
Give the main container a maximum width and flexible side margins. Start cards in one column and introduce more columns when the content has room. Here is a small example:
<meta name="viewport" content="width=device-width, initial-scale=1">
<section class="cards" aria-label="Features">
<article class="card"><h2>First feature</h2><p>Useful details.</p></article>
<article class="card"><h2>Second feature</h2><p>More details.</p></article>
</section>
*, *::before, *::after { box-sizing: border-box; }
.cards {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.card { min-width: 0; padding: 1.25rem; }
.card img { display: block; max-width: 100%; height: auto; }
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
Place the viewport meta element in the document head. The breakpoint is an example, not a universal tablet boundary. Change the window width and select the point at which your actual content needs a different layout. Long links, tables and embeds can still overflow and need separate attention.
Design for touch and keyboard
A compact menu needs a clearly labelled control, a way to close it and a state that assistive technology can understand. Test focus visibility and keyboard navigation. Avoid making important actions available only on hover; touch users need a way to reach them too.
Leave enough space around controls so adjacent links are not easy to activate by mistake. Forms should have visible labels and clear errors. Verify that the submit action remains understandable after an error and that server-side validation handles the submitted values.
Treat media as content
Make images fit their containers without distortion. Write useful alternative text for meaningful images; decorative media should not repeat nearby content. If a design crops a picture, check whether the subject remains visible at different aspect ratios. Choose appropriately sized files while maintaining acceptable quality.
Video and scroll-driven effects need testing on real devices. Loading conditions, browser controls and autoplay behaviour can vary. Provide controls where needed, and avoid making the only way to understand essential content depend on sound or animation.
Tables, text and performance
Long headings and enlarged text expose fixed-height containers quickly. Test them before release, with sufficient contrast and a readable line length. A wide table may need a scrollable wrapper with a clear hint or an alternative presentation that preserves the relationship between headings and values. Do not silently hide information needed to make a decision.
Measure performance on your own pages. Large images, fonts and scripts can add significant cost on a slow connection. Reduce unnecessary resources and measure again; the result depends on the page, network and device.
A practical pre-launch checklist
- Test a narrow and a wide phone, a tablet and a desktop; resize between your chosen breakpoints.
- Check portrait and landscape, long headings and empty or error states.
- Look for page-wide horizontal scrolling, clipping and overlapping content.
- Complete the main journey using touch and keyboard, including form errors.
- Increase text zoom and check contrast, focus and reading order.
- Test media and loading on a constrained connection, preferably on real devices and browsers used by your audience.
Browser developer tools are useful for exploring many sizes, but a real device can reveal differences in gestures, keyboards and browser chrome. Fix the problems that block the main journey first, then recheck nearby widths.
Russian original: https://morlix.ru/blog/adaptivnyy-dizayn-sayta-mobile-first
Top comments (0)