What defines responsive web design?

The same HTML on the same URL for every device, with CSS media queries adapting the layout to the viewport

Different HTML served to phones and desktops from separate URLs

A server that detects the user-agent and returns device-specific HTML from one URL

A separate mobile site hosted on m.example.com

Why does Google recommend responsive design?

Because it's the easiest design pattern to implement and maintain, with one URL and one set of HTML

Because responsive sites rank higher than sites using other configurations

Because it's the only configuration Google will crawl

Because it automatically passes Core Web Vitals

What happens if a responsive page is missing the viewport meta tag?

Mobile browsers assume a desktop-width viewport (around 980px on iOS / 800px on old Android) and shrink the page, so the media queries never fire as intended

Nothing — the media queries fire based on the physical screen size anyway

The page is automatically converted to a separate mobile URL

Google refuses to index the page

How does responsive design differ from dynamic serving?

Responsive serves the same HTML to all devices; dynamic serving returns different HTML per device from the same URL using user-agent sniffing and a Vary: User-Agent header

Responsive uses separate URLs; dynamic serving uses one URL

They are two names for the same thing

Dynamic serving requires a viewport meta tag; responsive does not

Is a responsive site automatically fast and good for Core Web Vitals?

No — responsive controls layout, not performance, so it can still ship oversized images or heavy JS and fail LCP or CLS

Yes — responsive design guarantees a passing Core Web Vitals score

No, because responsive design blocks image loading on mobile

Poradnik: Responsive Web Design

TL;DR — Responsive design means one website że reshapes itself to fit whatever screen it’s on — phone, tablet, lub laptop — używając the same strona i the same address dla everyone. It’s the setup Google recommends ponieważ it’s the simplest to build i zachować działający. It needs one mały wiersz of code (the viewport meta znacznik) to działać, i it robi nie magically make you rank higher.

co responsive design jest

A responsive website jest a single website że adapts jego layout to the size of the screen. Same strona, same web address, whether you otwarty it on a phone, a tablet, lub a big komputer stacjonarny monitorować — the columns rearrange, the images resize, the menu collapses, so it zawsze looks right.

The alternative, older approaches split twój witryna in two: a oddzielny mobilny website on jego own address (like m.example.com), lub a serwer że quietly hands phones i desktops różny strony z the same address. Responsive design skips wszystkie of że. There’s one version of everything.

Why it’s the recommended way

Google recommends responsive design, i jego powód jest refreshingly plain: it’s the easiest to build i maintain. ponieważ there’s tylko one strona, you tylko mieć one thing to zachować poprawny. Nothing może drift out of sync między a “mobilny version” and a “komputer stacjonarny version,” ponieważ there aren’t two versions.

że matters więcej niż it używany to, ponieważ Google now reads the mobilny version of twój strona to decide how you rank (że’s mobilny-pierwszy indeksowanie). z a responsive witryna, twój mobilny version i twój komputer stacjonarny version są the same thing — so there’s nothing to get błędny.

The one wiersz że makes it działać

Responsive design doesn’t działać on jego own. You need ten in twój strona’s <head>:

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

bez it, phones pretend to być komputer stacjonarny monitors i shrink twój whole strona down to tiny, unreadable tekst — i the responsive layout nigdy kicks in. It’s nie optional; it’s the switch że turns responsive design on. (There’s a whole deep dive on the viewport meta znacznik if you want the details.)

The thing people get błędny

Responsive design jest nie a ranking boost. Google ma said outright że it doesn’t rank responsive witryny higher than witryny built the other ways. The benefit jest że it’s simpler i harder to mess up — nie że it earns you positions.

i “it looks okay on my phone” isn’t the same as “it’s responsive.” Responsive means the layout genuinely adapts via CSS on a single strona — nie że it happens to być readable by luck.

Want the pełny version — the dokładny Google cytaty, how it compares to dynamiczny serving i oddzielny URLs, why the viewport znacznik jest a trudny requirement, i why a responsive witryna może nadal być slow? Switch to the Advanced tab.

TL;DR — Responsive web design serves the same HTML on the same URL to każdy urządzenie i używa CSS media zapytania to adapt the layout to the viewport. Google recommends it — “the easiest design pattern to implement i maintain” — ale explicitly robi nie rank it above dynamiczny serving lub oddzielny URLs. jego rzeczywisty edge jest operational: one URL, one ustawić of HTML, so treść parity jest automatic i Google’s own mobilny-pierwszy-indeksowanie checklist “only applies to dynamic serving and separate URL configurations.” It wymaga a poprawny viewport meta znacznik to function — bez it phones assume a komputer stacjonarny-width viewport (980px iOS / 800px old Android) i twój media zapytania nigdy fire. Contrast: dynamiczny serving (same URL, różny HTML via Vary: użytkownik-Agent) i oddzielny URLs (m-dot). Responsive controls layout, nie speed — a responsive witryna może nadal fail Core Web Vitals.

The definition, precisely

Google’s own words: responsive design “serves the same HTML code on the same URL regardless of the użytkownicy’ urządzenie (na przykład, komputer stacjonarny, tablet, mobilny, non-visual przeglądarka), ale może display the treść differently na podstawie the screen size.” że zdanie contains the whole idea:

Same HTML — one znaczniki payload, nie a urządzenie-specific one.
Same URL — no redirect to m.example.com, no użytkownik-agent fork.
Displayed differently by screen size — via CSS media zapytania.

że’s the wiersz że separates it z the two other konfiguracje Google documents. dynamiczny serving “używa the same URL regardless of urządzenie… relies on użytkownik-agent sniffing i the Vary: user-agent HTTP nagłówek odpowiedzi to serve a różny version of the HTML to różny urządzenia.” Separate URLs “serves różny HTML to każdy urządzenie, i on oddzielny URLs,” redirecting użytkownicy to the urządzenie-appropriate version. Responsive jest the tylko one of the three z a single HTML źródło.

Why Google recommends it — simplicity, nie a ranking edge

Google jest bezpośredni: it “recommends Responsive Web Design ponieważ it’s the easiest design pattern to implement i maintain.” Note co że powód jest i isn’t — it’s an operational argument (one codebase, fewer moving parts), nie a ranking argument.

The single najbardziej użyteczny — i najbardziej underused — wiersz in Google’s mobilny-pierwszy best-practices doc jest the scope note: “The treści of ten poradnik tylko apply to dynamiczny serving i oddzielny URL konfiguracje. In case of responsive design, the treść i the metadata są the same on the mobilny i komputer stacjonarny version of the strony.” Read że again. Google jest telling you że najbardziej of jego long mobilny-pierwszy checklist — matching dane strukturalne w całym versions, matching robots meta znaczniki, matching tekst alternatywny, setting Vary headers, wiring up rel=alternate/canonical annotations — simply doesn’t apply to you if you’re responsive, ponieważ there’s tylko one version to get right. że’s the strongest practical case dla RWD, i almost nobody frames it że way.

The knock-on benefits wszystkie flow z “one URL, one HTML”:

No duplicate-treść lub parity risk między example.com/page i m.example.com/page — there’s nothing to diverge.
No Vary: User-Agent fragility the way dynamiczny serving carries (a pamięć podręczna że ignores the header może serve the błędny HTML to the błędny urządzenie — lub to Googlebot).
No łańcuchy przekierowań lub link-equity splitting w całym komputer stacjonarny i mobilny URLs.
No annotation machinery (rel=alternate on komputer stacjonarny, rel=canonical on mobilny) to maintain i get błędny.

ten jest exactly why, in my Ahrefs poradnik on mobilny-pierwszy indeksowanie, “use responsive design” jest the pierwszy of the ten tips dla building a mobilny-friendly witryna — it removes whole kategorie of problems przed they start.

robi responsive design directly poprawić rankings? No.

ten jest the myth to kill early. Google’s Zineb Ait Bahajji put it plainly: Google robi nie rank responsive-design witryny better than witryny używając other konfiguracje (oddzielny mobilny witryny lub dynamiczny serving). Google nadal prefers RWD — ponieważ it’s easier to maintain, future-friendly, i they see fewer konfiguracja błędy z it — ale “fewer errors” jest nie the same as “a ranking bonus.” A well-implemented dynamiczny-serving lub m-dot witryna że zachowuje parity może rank identically; the risk z tamte jest że they drift, i drift jest co hurts you.

So the honest framing: responsive design doesn’t win you rankings. It saves you z losing them to a parity mistake, i it saves you maintenance time. oba są worth a lot — neither jest an algorithm boost.

How it działa: the viewport meta znacznik jest a prerequisite, nie a nicety

najbardziej poradniki lista the viewport meta znacznik as one bullet among wiele CSS tips. It isn’t a tip — it’s the thing że makes responsive design function at wszystkie. Google’s 2012 Search Central post explaining why Google itself went responsive jest blunt o why: “By domyślny, smartphone przeglądarki pretend to być wysoki-resolution komputer stacjonarny przeglądarki, i lay out a strona as if you były viewing it on a komputer stacjonarny monitorować… The domyślny viewport width dla the domyślny Android przeglądarka jest 800px, i 980px dla iOS, regardless of the liczba of rzeczywisty physical pixels on the screen.”

że’s the awaria mode: bez a viewport znacznik, a phone renders twój strona do an 980px-wide canvas i then shrinks the whole thing to fit — tiny tekst, “overview mode,” i twój carefully-written max-width: 479px media zapytanie nigdy triggers, ponieważ the przeglądarka thinks it jest 980px wide. The fix jest the one wiersz: “In order to trigger the przeglądarka to render twój strona at a więcej readable scale, you need to użyj viewport meta element: <meta name="viewport" content="width=device-width, initial-scale=1">.” Setting width=urządzenie-width również means the layout updates gdy the użytkownik rotates the urządzenie, który jest co lets media zapytania respond to orientation. Deep mechanics — initial-scale, the user-scalable/maximum-scale accessibility traps — live in the dedicated viewport meta znacznik artykuł.

How it działa: CSS media zapytania

z the viewport ustawić correctly, the layout adapts z CSS media zapytania — reguły że apply tylko at certain viewport widths:

<style>
/* Base styles apply everywhere */
@media screen and (max-width: 479px) {
  /* Portrait smartphones: stack columns, hide the sidebar, grow tap targets */
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  /* Tablets */
}
</style>

Treat the pixel wartości above as illustrative, nie a checklist to copy. The durable practice — echoed w całym MDN’s media-zapytanie reference i web.dev’s responsive-design course — jest to treat breakpoints as a layout decision, nie a urządzenie lista: ustawić them gdzie twój own treść actually breaks (a nav wraps badly, columns get too narrow, tekst short-wiersze), i test the ranges między breakpoints too, nie just a handful of named screen sizes. urządzenie viewport widths change każdy produkt cycle; treść-driven breakpoints don’t need updating gdy they robić.

Google’s 2012 post również flagged the CSS discipline że zachowuje a responsive layout z breaking: “zamiast specifying width dla container elementy, we started używając max-width instead. In place of height we używany min-height, so larger fonts lub multi-wiersz tekst don’t break the container’s granice.” ich three guiding principles były equally prosty: strony powinien render legibly at dowolny resolution, one ustawić of treść powinien być viewable on dowolny urządzenie, i you powinien “never show a horizontal scrollbar, whatever the window size.” Modern refinements (clamp() dla fluid type, container zapytania, srcset/<picture> dla urządzenie-appropriate images) sit on top of że foundation — they’re nie required to być “truly” responsive. dla implementacja depth beyond the SEO framing, Google’s own web.dev Learn Responsive Design course jest the place to go.

Responsive vs. dynamiczny serving vs. oddzielny URLs

The three konfiguracje Google documents, side by side:

	Responsive design	dynamiczny serving	oddzielny URLs (m-dot)
URL	One URL	One URL	różny URLs (`m.example.com`)
HTML	Same HTML dla wszystkie	różny HTML per urządzenie	różny HTML per urządzenie
How it adapts	CSS media zapytania	serwer użytkownik-agent sniffing	Redirect to urządzenie-specific witryna
Extra requirement	Viewport meta znacznik	`Vary: User-Agent` header	`rel=alternate` + `rel=canonical`, hreflang w całym versions
Parity risk	niski — one version	Medium — łatwy to drift	wysoki — two witryny to sync
Google’s stance	Recommended	Supported	Supported, least recommended

dynamiczny serving nadal makes sense occasionally (e.g. radically różny urządzenie experiences że a single template może’t reasonably express); oddzielny URLs są mostly legacy now. If you’re on either, the pełny deep dives — w tym the Vary header mechanics dla dynamiczny serving — są in the dynamiczny serving artykuł. ale dla a greenfield build, responsive jest the domyślny answer, i the burden of proof jest on choosing anything else.

Bing’s angle: criteria, nie architektura

Bing agrees z the outcome ale frames it differently. It doesn’t endorse “Responsive Web Design” by nazwa the way Google robi; instead jego mobilny-friendliness test evaluates testable criteria — viewport i zoom-control konfiguracja, width of strona treść, readability of tekst, spacing of links i other tap targets, i używać of incompatible plug-ins. It recommends the same viewport znacznik Google robi, i jego treść-width reguła jest że “the treść width powinien nie exceed the screen width” — overflow gets flagged as “strona treść robi nie fit urządzenie width.” So it’s bezpieczny to say Bing i Google oba reward mobilny-friendly renderowanie; just atrybut the explicit recommended-konfiguracja język to Google specifically.

Responsive design i mobilny-pierwszy indeksowanie (post-July 2024)

mobilny-pierwszy indeksowanie jest done — Google finished the rollout, i it now używa the mobilny-crawled version of twój strona dla indeksowanie i ranking by domyślny. Almost każdy poradnik nadal writes o responsive design as a “get ready dla mobilny-pierwszy indeksowanie” future-tense move. że framing jest stale. The rollout jest complete, i dla an już-responsive witryna it changes nothing — twój treść i metadata są już identical w całym mobilny i komputer stacjonarny ponieważ there’s one version. że’s nie a coincidence; it’s the entire point. The witryna’s mobilny-pierwszy indeksowanie artykuł covers the timeline i the parity reguły in pełny.

Responsive ≠ automatically fast

The biggest trap. Responsive design controls layout, nie wydajność. A responsive witryna może nadal ship a 3 MB komputer stacjonarny hero image że phones just scale down in CSS, lub wysyłać komputer stacjonarny-weight JavaScript to a mobilny urządzenie — i fail LCP lub CLS badly. “Responsive” jest nie a Core Web Vitals pass. Truly optimizing means serving appropriately sized assets per breakpoint (że’s co srcset/<picture> i responsive images są dla), nie just letting CSS shrink oversized ones. Fix wydajność osobno — see the Core Web Vitals treść i the responsive-images material dla how.

wydajność isn’t the tylko assumption że doesn’t automatically hold. One codebase doesn’t guarantee identical renderowanie, accessibility, lub search-wynik presentation either — przeglądarki i urządzenia nadal differ enough in how they handle CSS, fonts, i JavaScript-dependent layout że cross-urządzenie i cross-przeglądarka testing stays part of the job, the same as it by poniżej dowolny other konfiguracja. “Responsive” describes an architektura, nie a verified outcome; test it like you’d test anything else.

A little history

Worth one akapit, ponieważ it reframes the whole “best practice.” Google didn’t rekomendować responsive design pierwszy i adopt it later — it went responsive on jego own właściwości pierwszy, dla engineering powody, i the recommendation followed. As jego 2012 post wyjaśnia, Google “faced a stark choice między creating mobilny specific websites, lub adapting existing witryny… Creating two witryny by pozwalać us to better target specific hardware, ale maintaining a single shared witryna preserves a kanoniczny URL, avoiding dowolny complicated redirects, i simplifies the sharing of web addresses.” Canonical-URL preservation, no redirect complexity, simpler sharing — tamte były the powody przed anyone called it an SEO dobra praktyka, i they’re nadal the powody.

gdzie ten sits in the bigger picture: responsive design jest one piece of the broader mobilny SEO story, alongside mobilny usability, intrusive interstitials, the history of AMP, i the mobilny SEO checklist że ties them together. ten artykuł jest the “how should I serve mobile?” piece; the others cover the rest.

AI summary

A condensed take on the Advanced version:

Responsive web design = same HTML, same URL, CSS media zapytania adapt the layout to the viewport. It’s one of Google’s three udokumentowany mobilny konfiguracje, alongside dynamiczny serving i oddzielny URLs.
Google recommends it — “the easiest design pattern to implement i maintain” — ale it jest nie a ranking boost. Google (Zineb Ait Bahajji) ma said it robi nie rank responsive witryny above the other konfiguracje.
The rzeczywisty edge jest operational. Google’s own scope note: jego mobilny-pierwszy checklist “tylko applies to dynamiczny serving i oddzielny URL konfiguracje… In case of responsive design, the treść i the metadata są the same” — so parity, Vary headers, i alternate/canonical annotations mostly don’t apply.
The viewport meta znacznik jest a trudny prerequisite, nie a tip: bez <meta name="viewport" content="width=device-width, initial-scale=1">, phones assume a komputer stacjonarny-width viewport (980px iOS / 800px old Android) i media zapytania nigdy fire.
Contrast: dynamiczny serving (same URL, różny HTML via Vary: User-Agent) i oddzielny URLs (m-dot, needs rel=alternate/canonical). oba są riskier ponieważ two versions może drift.
Bing rewards mobilny-friendliness via testable criteria (viewport, treść width, readability, tap-target spacing) zamiast endorsing RWD by nazwa.
mobilny-pierwszy indeksowanie jest complete; dla an już-responsive witryna że changes nothing, since treść/metadata są już identical.
Responsive ≠ fast. It controls layout, nie wydajność — a responsive witryna może nadal fail Core Web Vitals if assets i JS aren’t optimized per breakpoint.
Breakpoints są a layout decision, nie a urządzenie lista. ustawić them gdzie treść actually breaks i test the ranges między them, nie just a handful of named screen sizes.
Responsive ≠ identical everywhere. One codebase doesn’t guarantee identical renderowanie, accessibility, lub presentation w całym przeglądarki i urządzenia — cross-urządzenie testing nadal matters.

Official documentation

Primary-źródło documentation z the wyszukiwarki.

Google

mobilny-pierwszy indeksowanie dobre praktyki — the canonical doc: the responsive definition, the three konfiguracje, the “easiest to implement and maintain” recommendation, i the scope note że najbardziej of the checklist doesn’t apply to responsive witryny. Start here.
Responsive design – harnessing the power of media zapytania (2012) — Google explaining why it went responsive: the viewport-znacznik requirement, the 980px/800px domyślny-viewport problem, i the max-width/min-height CSS discipline.
Learn Responsive Design (web.dev) — Google-owned programista course on the implementacja side (media zapytania, responsive images, dark mode). The old developers.google.com/search/mobile-sites/mobile-seo/responsive-design URL now redirects here.
Understanding Google strona experience — gdzie mobilny-friendliness i Core Web Vitals fit as signals (relevant to the “responsive ≠ fast” point).

Bing / Microsoft

Bing Webmaster Guidelines — Bing’s general guidance; mobilny-friendliness jest treated as testable criteria zamiast a named preferred architektura.
Announcing the Bing mobilny Friendliness Test narzędzie (Nov 2015) — the five criteria Bing sprawdzenia: viewport/zoom config, treść width, readability, tap-target spacing, i incompatible plug-ins.

cytaty z the źródło

On-the-record statements z Google i Bing. każdy link jest a deep link że jumps to the quoted passage on the źródło strona.

Google — the definition i recommendation

“Serves the same HTML code on the same URL regardless of the users’ device (for example, desktop, tablet, mobile, non-visual browser), but can display the content differently based on the screen size.” — Google Search Central docs. Jump to cytat
“Google recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain.” Jump to cytat
“The contents of this guide only apply to dynamic serving and separate URL configurations. In case of responsive design, the content and the metadata are the same on the mobile and desktop version of the pages.” Jump to cytat

Google — dynamiczny serving i oddzielny URLs (dla contrast)

“Uses the same URL regardless of device. This configuration relies on user-agent sniffing and the Vary: user-agent HTTP response header to serve a different version of the HTML to different devices.” (dynamiczny serving.) Jump to cytat
“Serves different HTML to each device, and on separate URLs. Like dynamic serving, this configuration relies on the user-agent and Vary HTTP headers to redirect users to the device-appropriate version of the site.” (oddzielny URLs.) Jump to cytat

Google — why the viewport znacznik jest required (2012 Search Central blog)

“By default, smartphone browsers pretend to be high-resolution desktop browsers, and lay out a page as if you were viewing it on a desktop monitor… The default viewport width for the default Android browser is 800px, and 980px for iOS, regardless of the number of actual physical pixels on the screen.” Jump to cytat
“In order to trigger the browser to render your page at a more readable scale, you need to use the viewport meta element.” Jump to cytat
“We faced a stark choice between creating mobile specific websites, or adapting existing sites and new launches to render well on both desktop and mobile… maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses.” Jump to cytat
“Instead of specifying width for container elements, we started using max-width instead. In place of height we used min-height, so larger fonts or multi-line text don’t break the container’s boundaries.” Jump to cytat

Google — no ranking boost (Zineb Ait Bahajji, via wyszukiwarka Roundtable’s coverage)

Google robi “not rank responsive web design sites better than sites using other configurations (separate site for mobile or dynamic serving).” Google’s stated powód dla nadal preferring it: “it’s easier to maintain, it’s future-friendly and we see less configuration errors with RWD.” przeczytaj coverage

Google (Nov 2016), relayed via my SMX Advanced 2017 deck

“If you have a responsive site or a dynamic serving site where the primary content and markup is equivalent across mobile and desktop, you shouldn’t have to change anything.” See the deck

Note: the Zineb Ait Bahajji “no ranking boost” statement jest Barry Schwartz’s well-znany reporting at wyszukiwarka Roundtable; the strona renders client-side i resisted automated verification of an dokładny #:~:text= fragment in ten pass, so it’s linked to the artykuł zamiast deep-linked — confirm the dokładny wording wobec the live strona przed treating it as final verbatim. The 2016 Google statement jest quoted here as relayed przez my own SMX Advanced 2017 deck (attributed to the Google Webmasters Blog, Nov 2016), nie fetched z a live primary Google URL.

który mobilny konfiguracja powinien I używać?

dla almost każdy new zbuduj answer jest responsive — ale there są legitimate powody the other two nadal exist. Click przez it.

Choosing a mobile configuration

Responsive design — cheat sheet

The definition: same HTML, same URL, CSS media zapytania adapt the layout to the viewport. One version of everything.

The required znacznik (nothing działa bez it):

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

Config comparison

Config	One URL?	Same HTML?	Extra requirement	Google’s stance
Responsive	Yes	Yes	Viewport meta znacznik	Recommended
dynamiczny serving	Yes	No (by UA)	`Vary: User-Agent`	Supported, fragile
oddzielny URLs (m-dot)	No	No	`rel=alternate` + `canonical`, hreflang	Least recommended

Why responsive, in one wiersz każdy

One URL, one HTML → treść parity jest automatic.
Google’s checklist “only applies to dynamic serving and separate URL configurations.”
No Vary header risk, no łańcuchy przekierowań, no alternate/canonical annotations.
Easiest to implement i maintain — Google’s stated powód.

co it jest nie

nie a ranking boost (Google: doesn’t rank responsive above other configs).
nie automatically fast — layout ≠ wydajność; CWV nadal needs działać.
nie the same as “looks okay on my phone” — it’s media-zapytanie-driven adaptation.

Viewport awaria mode: no znacznik → phone assumes 980px (iOS) / 800px (old Android) viewport, shrinks the strona, media zapytania nigdy fire.

Bing: rewards mobilny-friendliness by testable criteria (viewport, treść width, readability, tap-target spacing) — doesn’t endorse “RWD” by nazwa.

mobilny-pierwszy indeksowanie: complete; dla a responsive witryna it changes nothing — treść/metadata już identical.

Responsive design QA checklist

Run ten to confirm a witryna jest genuinely responsive i nie just “fluid desktop”:

Responsive design anti-patterns

The mistakes że turn “we’re responsive” do a problem:

No viewport meta znacznik (lub a błędny one). The single najbardziej common awaria — the media zapytania są wszystkie written correctly ale nigdy fire ponieważ the phone jest renderowanie do an 980px canvas. zawsze the pierwszy thing to sprawdzenie.
user-scalable=no / maximum-scale=1. Blocking pinch-zoom jest an accessibility regression i może get flagged by Bing’s mobilny test. Don’t disable zoom to “protect” twój layout.
“Fluid desktop” masquerading as responsive. The layout scales proportionally ale nigdy restructures — three columns just get narrower zamiast stacking. It technically resizes; it isn’t really responsive.
display:none on treść you want zindeksowany. Hiding a whole sekcja on mobilny via CSS to “keep it clean.” poniżej mobilny-pierwszy indeksowanie the mobilny HTML jest co’s read — hide it i you risk it nie będąc zindeksowany. (Tabs/accordions że zachowaj treść in the HTML są fine; fully removing it jest nie.)
Treating “responsive” as a wydajność strategy. wysyłka a 3 MB komputer stacjonarny hero i letting CSS shrink it, lub sending komputer stacjonarny-weight JS to phones. The layout adapts; the payload doesn’t. ten jest how responsive witryny fail Core Web Vitals.
Reaching dla dynamiczny serving lub m-dot by domyślny. Choosing a two-version architektura gdy a single responsive template by robić — signing up dla parity drift, Vary-header fragility, lub annotation maintenance you didn’t need.
Assuming responsive earns rankings. Building the firma case on a ranking boost że doesn’t exist. sprzedawać it on simplicity i fewer błędy, który są rzeczywisty.

sprawdzenie a strona dla responsive readiness

Quick ways to confirm the two things że make lub break responsive design: the viewport znacznik, i whether the serwer jest quietly forking HTML by użytkownik-agent.

1) jest the viewport meta znacznik present? (shell)

# Fetch the page and look for the viewport meta tag
curl -s https://example.com/ | grep -io '<meta[^>]*name=["'"'"']viewport["'"'"'][^>]*>'
# Expect something like:
# <meta name="viewport" content="width=device-width, initial-scale=1">

2) robi the serwer serve różny HTML to mobilny vs. komputer stacjonarny? (shell)

If the byte counts differ significantly, you może być on dynamiczny serving — i you’ll want a Vary: User-Agent header to go z it.

UA_MOBILE="Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125 Mobile Safari/537.36"
UA_DESKTOP="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125 Safari/537.36"

echo "Mobile bytes:  $(curl -s -A "$UA_MOBILE"  https://example.com/ | wc -c)"
echo "Desktop bytes: $(curl -s -A "$UA_DESKTOP" https://example.com/ | wc -c)"

# If they differ, check for the Vary header (needed for dynamic serving):
curl -sI -A "$UA_MOBILE" https://example.com/ | grep -i '^vary:'
# Expect: Vary: User-Agent  (among any other Vary values)

3) DevTools console — audit the viewport znacznik z a załadowany strona

Paste do the przeglądarka console on dowolny strona:

(() => {
  const vp = document.querySelector('meta[name="viewport"]');
  if (!vp) return console.warn('❌ No viewport meta tag — responsive layout will not work.');
  const c = vp.getAttribute('content') || '';
  console.log('viewport content:', c);
  console.log(/width=device-width/.test(c) ? '✅ width=device-width set' : '❌ missing width=device-width');
  console.log(/user-scalable=no|maximum-scale=1(\b|,|$)/.test(c)
    ? '⚠️ zoom is blocked — accessibility regression' : '✅ zoom not blocked');
})();

4) DevTools console — flag horizontal overflow (the “no horizontal scrollbar” reguła)

Run at a narrow viewport (urządzenie toolbar on) to find elementy wider than the screen:

(() => {
  const w = document.documentElement.clientWidth;
  const bleeding = [...document.querySelectorAll('*')]
    .filter(el => el.getBoundingClientRect().right > w + 1)
    .slice(0, 20);
  console.log(bleeding.length ? '⚠️ Elements overflowing the viewport:' : '✅ No horizontal overflow');
  bleeding.forEach(el => console.log(el.tagName.toLowerCase() + (el.className ? '.' + String(el.className).split(' ').join('.') : ''), el));
})();

5) Bookmarklet — quick viewport sprawdzenie

Save as a bookmark i click on dowolny strona:

javascript:(()=>{const v=document.querySelector('meta[name="viewport"]');alert(v?('viewport: '+v.getAttribute('content')):'No viewport meta tag found — responsive layout will not work.');})();

Test yourself: Responsive Design

Five quick questions on responsive web design. Pick an answer dla każdy, then sprawdzenie.

zasoby worth twój time

My writing

mobilny-pierwszy indeksowanie Goes mobilny-tylko — my Ahrefs poradnik; “use responsive design” leads the ten-tip checklist dla building a mobilny-friendly witryna, i it covers the treść-parity background że makes responsive the bezpieczny domyślny.
The Beginner’s poradnik to techniczne SEO — gdzie mobilny konfiguracja sits in the bigger crawl/index/rank picture.
Core Web Vitals: co They są & How to poprawić Yours — the wydajność side, since responsive alone doesn’t make you fast.

My speaking

mobilny-pierwszy indeksowanie (SMX Advanced 2017) (SlideShare) — my deck on mobilny konfiguracje; it cytaty Google’s Nov 2016 wiersz że responsive i dynamiczny-serving witryny z equivalent treść “shouldn’t have to change anything” dla mobilny-pierwszy indeksowanie. (Standing disclaimer: ten jest my understanding of te systemy, nie a guarantee of completeness.)

z around the industry

mobilny-pierwszy indeksowanie dobre praktyki (Google) — the canonical doc: the responsive definition, the three konfiguracje, i the scope note że najbardziej of the checklist doesn’t apply to responsive witryny.
Responsive design – harnessing the power of media zapytania (Google, 2012) — why Google itself went responsive, i the origin of jego viewport-znacznik recommendation.
Learn Responsive Design (web.dev / Google) — the implementacja-depth course: media zapytania, responsive images, użytkownik preferences.
Announcing the Bing mobilny Friendliness Test narzędzie (Microsoft Bing) — Bing’s five mobilny-friendliness criteria (viewport, treść width, readability, tap-target spacing, plug-ins).
Google: Responsive Design jest nie A Ranking Signal Boost (wyszukiwarka Roundtable) — Barry Schwartz’s reporting of the Zineb Ait Bahajji “no ranking boost” statement.
jest responsive web design enough? (Hint: No) (wyszukiwarka Land) — the contrarian case że RWD isn’t a silver bullet.
Top 7 SEO Benefits Of Responsive Web Design (wyszukiwarka Journal) — the practical single-URL i parity wins, laid out.

Videos

Google Search Central (YouTube) — Martin Splitt’s mobilny-friendliness i renderowanie explainers, plus the How Google Search działa series, cover how Googlebot handles responsive layouts. Channel

Dziennik zmian

Zaktualizowano 18 lip 2026.

Podsumowanie redakcyjne i zapisane szczegóły zmian.

Szczegóły zmian

Szczegółowe uwagi dotyczące zmian są obecnie dostępne po angielsku.
Szczegółowe uwagi dotyczące zmian są obecnie dostępne po angielsku.

Pełne porównanie jest niedostępne — dla tej wersji nie zarchiwizowano wcześniejszej migawki.