Over 60% of web traffic comes from mobile devices. If your website doesn't work well on a phone, you're losing more than half your visitors. Responsive design isn't optional — it's the baseline. These 10 tips will help you build websites that look great on every screen size.

1 Always Start with the Viewport Meta Tag

Without this tag, mobile browsers render your page at desktop width and then scale it down — making everything tiny. This single line of HTML is non-negotiable:

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

2 Design Mobile-First

Write your base CSS for mobile screens, then use min-width media queries to add complexity for larger screens. This approach is cleaner and performs better because mobile devices don't have to download and override desktop styles.

/* Base styles: mobile */
.card { padding: 1rem; }

/* Tablet and up */
@media (min-width: 768px) {
  .card { padding: 1.5rem; }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .card { padding: 2rem; }
}

3 Use CSS Grid with auto-fill for Responsive Grids

This single CSS rule creates a responsive grid that automatically adjusts the number of columns based on available space — no media queries needed:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* On mobile: 1 column. Tablet: 2 columns. Desktop: 3+ columns. */

4 Use Fluid Typography with clamp()

Instead of setting different font sizes at different breakpoints, use clamp() to create font sizes that scale smoothly between a minimum and maximum:

h1 {
  /* Min: 1.8rem, preferred: 5vw, max: 3.5rem */
  font-size: clamp(1.8rem, 5vw, 3.5rem);
}

p {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
}

5 Make Images Responsive by Default

Add this to your global CSS and images will never overflow their containers:

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

/* For background images */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
}

For performance, use the srcset attribute to serve different image sizes to different devices:

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Description"
/>

6 Use Relative Units, Not Pixels

Pixels are absolute — they don't scale with user preferences. Use relative units instead:

/* Good */
.container { max-width: 75rem; padding: 0 1.5rem; }
h1 { font-size: 2.5rem; margin-bottom: 1rem; }

/* Avoid for font sizes and spacing */
h1 { font-size: 40px; margin-bottom: 16px; }

7 Handle Navigation on Mobile

Desktop navigation with many links doesn't work on mobile. Use a hamburger menu pattern:

/* Hide nav links on mobile */
@media (max-width: 480px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}

/* Show when menu is open */
.nav-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  padding: 1rem;
}

8 Use Flexbox for Component-Level Layout

Flexbox is perfect for aligning items within a component — navigation bars, card footers, button groups. Use flex-wrap: wrap to let items wrap on small screens:

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* On very small screens, items stack vertically */
@media (max-width: 360px) {
  .card-footer { flex-direction: column; }
}

9 Test on Real Devices, Not Just DevTools

Chrome DevTools responsive mode is useful but not perfect. Real devices have different pixel densities, touch behavior, and browser quirks. Test on at least:

BrowserStack offers free trials for testing on real devices if you don't have them available.

10 Don't Forget Touch Targets

Buttons and links need to be large enough to tap with a finger. Google recommends a minimum touch target size of 48×48px. Small links that are easy to click with a mouse become frustrating on a touchscreen.

/* Ensure buttons are large enough to tap */
.btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0.75rem 1.5rem;
}

/* Add extra padding to small links */
nav a {
  padding: 0.75rem 1rem;
  display: inline-block;
}

Bonus: The CSS Reset That Helps

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

Responsive design is a mindset, not just a set of techniques. Always ask: "How does this look on a phone?" before considering a feature done. The best responsive designs feel natural on every device — not like a desktop site squeezed into a small screen.