Responsive design: what it is and how to implement it

What is responsive design

Responsive design (Responsive Web Design, RWD) is an approach to building websites in which the interface adapts flexibly to the user's screen size. Ethan Marcotte introduced the term in 2010.

Responsive design is built on three principles: flexible grids, flexible media, and CSS media queries.

Why responsive design is needed

Statistics on mobile device usage:

• More than 60% of global traffic comes from mobile devices
• Google uses mobile-first indexing
• A non-responsive site loses rankings and users
• Core Web Vitals are assessed for the mobile version

CSS responsive design fundamentals

Media queries

/* Мобильные (по умолчанию) */
.container {
  width: 100%;
  padding: 0 16px;
}

/* Планшеты */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Десктопы */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Flexible grids: CSS Grid

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

Flexible grids: Flexbox

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 280px; /* растёт, сжимается, минимум 280px */
}

Responsive images

<!-- Разные изображения для разных размеров экрана -->
<picture>
  <source media="(min-width: 1200px)" srcset="/img/hero-large.jpg">
  <source media="(min-width: 768px)" srcset="/img/hero-medium.jpg">
  <img src="/img/hero-small.jpg" alt="Hero" />
</picture>

<!-- Адаптивный размер через srcset -->
<img
  src="/img/photo.jpg"
  srcset="/img/photo-400.jpg 400w, /img/photo-800.jpg 800w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Photo"
/>

Mobile-first vs. desktop-first

Mobile-first (recommended):

/* Базовый стиль для мобильных */
.element { font-size: 16px; }

/* Увеличиваем для больших экранов */
@media (min-width: 768px) {
  .element { font-size: 18px; }
}

Desktop-first (an outdated approach):

.element { font-size: 18px; }

@media (max-width: 767px) {
  .element { font-size: 16px; }
}

Mobile-first: styles go from smaller to larger screens — it's more efficient and logical.

Testing responsiveness

Testing methods:

1. Chrome DevTools Device Mode (F12 → phone icon)
2. Real devices
3. BrowserStack or similar tools
4. Specialized tools

Checking responsiveness with reChecker

Use Responsive Tester to test your website at different screen resolutions. The tool lets you:

• View the site in an iframe for 6 standard devices
• Switch between portrait and landscape orientation
• Quickly compare how the site displays on different devices

FAQ

Responsive design vs. a mobile version — what's the difference? A mobile version is a separate website (m.example.com). Responsive design is a single website with a flexible interface. Google prefers responsive design: it's easier to index, and there are no duplicates.

Do I need to test on every device? Test at key screen widths: 375px (iPhone SE), 768px (iPad), 1280px (laptop), and 1920px (FHD). Also test on real devices that are commonly used by your audience.

How can I find out which devices my visitors use? Google Analytics → Audience → Mobile devices. Or Yandex.Metrica → Technology → Devices.