Responsive design in 2026 – mobile-first and best practices

TL;DR

Responsive design is designing sites that work well on all devices (phone, tablet, desktop). Mobile-first is an approach that starts with mobile design, then expands to larger screens. Here's how to do it well in 2026.

Who this is for

Designers creating responsive sites
Developers implementing responsive design
Business owners wanting sites that work on all devices

Keyword (SEO)

responsive design, mobile-first, responsive websites, mobile optimization, css breakpoints

What is responsive design?

Responsive design is a way of designing sites that:

Adapt to screen – look good on phone, tablet and desktop
Use flexible units – %, rem, vw instead of px
Have media queries – different styles for different screen sizes
Optimize images – different sizes for different devices

Mobile-first approach

Mobile-first is an approach that:

Starts with mobile – you design for small screens first
Expands to larger – then add styles for tablets and desktops
Prioritizes content – on mobile there's only the most important
Optimizes performance – less code, faster loading

Mobile-first advantages

Better performance – less code to load
Better UX – focus on most important content
Faster development – easier to add than remove
Better SEO – Google prefers mobile-first

Breakpoints

Standard breakpoints

/* Mobile First - start with mobile */
/* Base styles for mobile (320px+) */

/* Tablet */
@media (min-width: 768px) {
  /* Styles for tablets */
}

/* Desktop */
@media (min-width: 1024px) {
  /* Styles for desktops */
}

/* Large Desktop */
@media (min-width: 1440px) {
  /* Styles for large screens */
}

Popular breakpoints in 2026

Mobile: 320px - 767px
Tablet: 768px - 1023px
Desktop: 1024px - 1439px
Large Desktop: 1440px+

Best practices

1. Flexible units

Instead of px:

.container {
  width: 1200px; /* ❌ Fixed */
}

Use % or rem:

.container {
  width: 100%; /* ✅ Flexible */
  max-width: 1200px;
  padding: 1rem; /* ✅ Responsive padding */
}

2. Flexbox and Grid

Flexbox for layouts:

.container {
  display: flex;
  flex-direction: column; /* Mobile: column */
}

@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Tablet+: row */
  }
}

Grid for complex layouts:

.grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: 1rem;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* Tablet: 2 columns */
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
  }
}

3. Responsive typography

/* Mobile-first typography */
h1 {
  font-size: 1.5rem; /* Mobile */
  line-height: 1.2;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2rem; /* Tablet */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 2.5rem; /* Desktop */
  }
}

4. Responsive images

HTML:

<img 
  src="image-mobile.jpg" 
  srcset="image-mobile.jpg 320w, 
          image-tablet.jpg 768w, 
          image-desktop.jpg 1024w"
  sizes="(max-width: 767px) 100vw, 
         (max-width: 1023px) 50vw, 
         33vw"
  alt="Description"
/>

CSS:

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

5. Touch-friendly buttons

.button {
  min-height: 44px; /* Minimum for touch */
  min-width: 44px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

Mobile: hamburger menu

.mobile-menu {
  display: block; /* Mobile */
}

.desktop-menu {
  display: none; /* Mobile */
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none; /* Desktop */
  }
  
  .desktop-menu {
    display: flex; /* Desktop */
  }
}

Performance optimization

1. Lazy loading

<img 
  src="image.jpg" 
  loading="lazy" 
  alt="Description"
/>

2. CSS containment

.card {
  contain: layout style paint;
}

3. Will-change

.animated-element {
  will-change: transform;
}

4. Reduce motion

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

Testing responsive

1. DevTools

Chrome DevTools – Device Toolbar
Firefox Responsive Design Mode
Safari Responsive Design Mode

2. Real devices

Test on real phones and tablets
Different browsers (Chrome, Safari, Firefox)
Different systems (iOS, Android)

3. Online tools

BrowserStack – testing on many devices
Responsive Design Checker
Google Mobile-Friendly Test

Common mistakes

1. Fixed widths

/* ❌ Bad */
.container {
  width: 1200px;
}

/* ✅ Good */
.container {
  width: 100%;
  max-width: 1200px;
}

2. Too many breakpoints

/* ❌ Too many breakpoints */
@media (min-width: 320px) { }
@media (min-width: 480px) { }
@media (min-width: 640px) { }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
/* ... */

/* ✅ Just a few */
@media (min-width: 768px) { }
@media (min-width: 1024px) { }

3. Ignoring touch

/* ❌ Bad */
.button {
  height: 20px; /* Too small for touch */
}

/* ✅ Good */
.button {
  min-height: 44px; /* Minimum for touch */
}

Summary

Responsive design is standard in 2026. Mobile-first approach is the best approach – you start with mobile, then expand to larger screens. Use flexible units, Flexbox/Grid, responsive images and test on real devices. Remember about performance and touch-friendly design.

Want a responsive site?

Contact – tell us about your project
See our implementations – examples of responsive sites
Check our process – how we work