Web MobileBeginner12 min readUpdated March 2025

Responsive & Mobile-First Web Design

Make websites work on every screen. Learn the viewport meta tag, mobile-first CSS, flexbox, grid and media queries, plus how to test on real devices.

Mobile-First Thinking

Design for the smallest screen first, then add complexity as space allows. Mobile-first CSS is simpler, loads faster on phones and forces you to prioritize content.

Every page needs the viewport meta tag, otherwise phones render a zoomed-out desktop layout:

html

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

Flexible Layouts with Grid

CSS Grid with `auto-fit` and `minmax` creates a layout that adapts to any width with no media queries at all:

css

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  padding: 1rem;
  border-radius: 12px;
  background: #fff;
}

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

Media Queries

Start with base styles for phones, then enhance at wider breakpoints using `min-width`:

css

.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
  .sidebar {
    width: 260px;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Touch and Performance Tips

Phones add constraints beyond screen width:

Make tap targets at least 44 x 44 px.
Use relative units (`rem`, `%`, `clamp()`) for fluid type and spacing.
Serve appropriately sized images and lazy-load the ones below the fold.
Test on real devices and with browser device emulation, including slow networks.

Key Takeaways

Always include the viewport meta tag and design mobile-first.
Grid auto-fit/minmax creates fluid layouts without breakpoints.
Use min-width media queries to progressively enhance for larger screens.
Respect touch targets, reduced motion and image performance.

Contact Us

Have a question or feedback? Fill out the form below or reach us directly at support@nvaitraining.com