Bahasa

Panduan Responsive Web Design

What responsive design adalah, why Google recommends ini di atas dynamic serving atau separate mobile URLs, how viewport meta tag membuat ini berfungsi, dan peringkat myth.

Pertama kali diterbitkan: 2 Jul 2026 · Terakhir diperbarui: 3 Agu 2026 · Advanced
Bahasa
AIDitulis olehAI v2

Responsive web design menyajikan yang sama HTML pada yang sama URL untuk setiap device dan menggunakan CSS media kueri untuk adapt layout untuk viewport. ini adalah Google's recommended mobile configuration — not because ini peringkat better (ini doesn't; Google memiliki said so outright) tetapi because there's one URL dan one set dari HTML untuk crawl dan indeks, which membuat ini easiest untuk implement dan maintain. ini memerlukan sebuah correct viewport meta tag untuk berfungsi di semua — without ini, phones fake sebuah desktop-width viewport dan Anda media kueri tidak pernah fire. ini contrasts dengan dynamic serving (sama URL, berbeda HTML via sebuah Vary header) dan separate URLs (m-dot). Responsive isn't automatically fast: layout adaptation adalah not performa, so Core Web Vitals masih perlu separate attention.

TL;DR — Responsive web design menyajikan sama HTML pada yang sama URL untuk setiap device dan menggunakan CSS media kueri untuk adapt layout untuk viewport. Google recommends ini — “the easiest design pattern to implement and maintain” (terjemahan) “ easiest design pattern untuk implement dan maintain” — tetapi explicitly melakukan not peringkat ini above dynamic serving atau separate URLs. -nya nyata edge adalah operational: one URL, one set dari HTML, so konten parity adalah automatic dan Google’s own mobile-pertama-pengindeksan checklist “only applies to dynamic serving and separate URL configurations.” (terjemahan) “hanya applies untuk dynamic serving dan separate URL configurations.” ini memerlukan sebuah correct viewport meta tag untuk function — without ini phones assume sebuah desktop-width viewport (980px iOS / 800px old Android) dan Anda media kueri tidak pernah fire. Contrast: dynamic serving (sama URL, berbeda HTML via Vary: User-Agent) dan separate URLs (m-dot). Responsive controls layout, not speed — sebuah responsive situs dapat masih fail Core Web Vitals.

Evidence for this claim Responsive design differs from dynamic serving, which changes HTML by user agent at one URL, and separate mobile URLs, which use distinct URLs. Scope: mobile and desktop rendered web documents Confidence: high · Verified: Mobile-first indexing best practices Evidence for this claim Responsive design serves the same HTML at the same URL while CSS adapts display to screen size. Scope: Google definition of responsive web design. Confidence: high · Verified: Google Search Central: Responsive design Evidence for this claim Google recommends responsive design because it is the easiest mobile pattern to implement and maintain. Scope: Google configuration recommendation. Confidence: high · Verified: Google Search Central: Mobile configurations

definition, precisely

Google’s own kata: responsive design “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.” (terjemahan) “menyajikan yang sama HTML code pada yang sama URL regardless dari pengguna’ device (misalnya, desktop, tablet, mobile, non-visual browser), tetapi dapat display konten differently berdasarkan screen size.” itu kalimat berisi whole idea:

  • sama HTML — one markup payload, not sebuah device-spesifik one.
  • sama URL — no redirect untuk m.example.com, no pengguna-agent fork.
  • Displayed differently oleh screen size — via CSS media kueri.

itu’s line itu separates ini dari two lainnya configurations Google documents. Dynamic serving “uses the same URL regardless of device… relies on user-agent sniffing and the Vary: user-agent HTTP response header to serve a different version of the HTML to different devices.” (terjemahan) “menggunakan yang sama URL regardless dari device… relies pada pengguna-agent sniffing dan undefined respons header HTTP untuk sajikan berbeda versi dari HTML untuk berbeda devices.” Separate URLs “serves different HTML to each device, and on separate URLs,” (terjemahan) “menyajikan berbeda HTML untuk setiap device, dan pada separate URLs,” redirecting pengguna untuk device-appropriate versi. Responsive adalah satu-satunya one dari three dengan sebuah single HTML source.

Evidence for this claim Responsive design differs from dynamic serving, which changes HTML by user agent at one URL, and separate mobile URLs, which use distinct URLs. Scope: mobile and desktop rendered web documents Confidence: high · Verified: Mobile-first indexing best practices

Why Google recommends ini — simplicity, not sebuah peringkat edge

Google adalah direct: ini “recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain.” (terjemahan) “recommends Responsive Web Design because ini adalah easiest design pattern untuk implement dan maintain.” Note what itu alasan adalah dan isn’t — ini adalah sebuah operational argument (one codebase, fewer moving bagian), not sebuah peringkat argument.

Evidence for this claim Google recommends responsive design because it is the easiest mobile pattern to implement and maintain. Scope: Google configuration recommendation. Confidence: high · Verified: Google Search Central: Mobile configurations

single sebagian besar berguna — dan sebagian besar underused — line di Google’s mobile-pertama best-practices doc adalah scope note: “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.” (terjemahan) “ contents dari ini guide hanya apply untuk dynamic serving dan separate URL configurations. di case dari responsive design, konten dan metadata adalah yang sama pada mobile dan desktop versi dari halaman.” Read itu again. Google adalah telling Anda itu sebagian besar dari -nya panjang mobile-pertama checklist — matching data terstruktur di seluruh versi, matching robots meta tags, matching teks alt, setting Vary headers, wiring up rel=alternate/canonical annotations — simply doesn’t apply untuk Anda jika Anda’re responsive, because there’s hanya one versi untuk get right. itu’s strongest practical case untuk RWD, dan almost nobody frames ini itu cara.

knock-pada benefits semua flow dari “one URL, one HTML” (terjemahan) “one URL, one HTML”:

  • No duplicate-konten atau parity risk antara example.com/page dan m.example.com/page — there’s nothing untuk diverge.
  • No Vary: User-Agent fragility cara dynamic serving carries (sebuah cache itu ignores header dapat sajikan wrong HTML untuk wrong device — atau untuk Googlebot).
  • No rantai pengalihan atau tautan-equity splitting di seluruh desktop dan mobile URLs.
  • No annotation machinery (rel=alternate pada desktop, rel=canonical pada mobile) untuk maintain dan get wrong.

ini adalah exactly why, di my Ahrefs guide pada pengindeksan mobile-pertama, “use responsive design” (terjemahan) “gunakan responsive design” adalah pertama dari ten tips untuk membangun sebuah mobile-friendly situs — ini menghapus whole categories dari masalah sebelum mereka start.

melakukan responsive design directly meningkatkan rankings? No.

ini adalah myth untuk kill early. Google’s Zineb Ait Bahajji put ini plainly: Google melakukan not peringkat responsive-design situs better daripada situs menggunakan lainnya configurations (separate mobile situs atau dynamic serving). Google masih prefers RWD — because ini adalah easier untuk maintain, future-friendly, dan mereka see fewer configuration errors dengan ini — tetapi “fewer errors” (terjemahan) “fewer errors” adalah not yang sama sebagai “a ranking bonus.” (terjemahan) “sebuah peringkat bonus.” sebuah well-implemented dynamic-serving atau m-dot situs itu mempertahankan parity dapat peringkat identically; risk dengan itu adalah itu mereka drift, dan drift adalah what hurts Anda.

So honest framing: responsive design doesn’t win Anda rankings. ini saves Anda dari losing them untuk sebuah parity mistake, dan ini saves Anda maintenance time. Both adalah worth sebuah lot — neither adalah sebuah algorithm boost.

How ini berfungsi: viewport meta tag adalah sebuah prerequisite, not sebuah nicety

sebagian besar guides list viewport meta tag sebagai one bullet among banyak CSS tips. ini isn’t sebuah tip — ini adalah thing itu membuat responsive design function di semua. Google’s 2012 Search Central post explaining why Google itself went responsive adalah blunt tentang why: “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.” (terjemahan) “oleh default, smartphone browser pretend untuk menjadi tinggi-resolution desktop browser, dan lay out sebuah halaman sebagai jika Anda adalah viewing ini pada sebuah desktop monitor… default viewport width untuk default Android browser adalah 800px, dan 980px untuk iOS, regardless dari angka dari actual physical pixels pada screen.”

itu’s failure mode: without sebuah viewport tag, sebuah phone renders Anda halaman ke sebuah 980px-wide canvas dan lalu shrinks whole thing untuk fit — tiny text, “overview mode,” (terjemahan) “overview mode,” dan Anda carefully-written max-width: 479px media kueri tidak pernah triggers, because browser thinks ini adalah 980px wide. fix adalah one line: “In order to trigger the browser to render your page at a more readable scale, you need to use the viewport meta element: <meta name="viewport" content="width=device-width, initial-scale=1">.” (terjemahan) “di order untuk trigger browser untuk render Anda halaman di sebuah more readable scale, Anda perlu gunakan viewport meta element: undefined.” Setting width=device-width juga berarti layout updates when pengguna rotates device, which adalah what lets media kueri respond untuk orientation. Deep mechanics — initial-scale, user-scalable/maximum-scale accessibility traps — live di dedicated viewport meta tag artikel.

How ini berfungsi: CSS media kueri

dengan viewport set correctly, layout adapts dengan CSS media kueri — aturan itu apply hanya di 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 pixel nilai above sebagai illustrative, not sebuah checklist untuk copy. durable practice — echoed di seluruh MDN’s media-kueri reference dan web.dev’s responsive-design course — adalah untuk treat breakpoints sebagai sebuah layout decision, not sebuah device list: set them where Anda own konten actually breaks (sebuah nav wraps badly, columns get too narrow, text pendek-lines), dan test ranges antara breakpoints too, not hanya sebuah handful dari named screen sizes. Device viewport widths perubahan setiap product cycle; konten-driven breakpoints don’t perlu updating when mereka melakukan.

Google’s 2012 post juga flagged CSS discipline itu mempertahankan sebuah responsive layout dari breaking: “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.” (terjemahan) “alih-alih specifying undefined untuk container elements, kami started menggunakan undefined instead. di place dari undefined kami digunakan undefined, so larger fonts atau multi-line text don’t break container’s boundaries.” mereka three guiding principles adalah equally sederhana: halaman seharusnya render legibly di apa pun resolution, one set dari konten seharusnya menjadi viewable pada apa pun device, dan Anda harus “never show a horizontal scrollbar, whatever the window size.” (terjemahan) “tidak pernah tampilkan sebuah horizontal scrollbar, whatever window size.” Modern refinements (clamp() untuk fluid jenis, container kueri, srcset/<picture> untuk device-appropriate images) sit pada top dari itu foundation — mereka’re not diperlukan untuk menjadi “truly” (terjemahan) “truly” responsive. untuk implementation depth beyond SEO framing, Google’s own web.dev Learn Responsive Design course adalah place untuk go.

Responsive vs. dynamic serving vs. separate URLs

three configurations Google documents, side oleh side:

Responsive designDynamic servingSeparate URLs (m-dot)
URLOne URLOne URLberbeda URLs (m.example.com)
HTMLsama HTML untuk semuaberbeda HTML per deviceberbeda HTML per device
How ini adaptsCSS media kueriserver pengguna-agent sniffingRedirect untuk device-spesifik situs
Extra requirementViewport meta tagVary: User-Agent headerrel=alternate + rel=canonical, hreflang di seluruh versi
Parity riskrendah — one versiMedium — easy untuk drifttinggi — two situs untuk sync
Google’s stanceRecommendeddidukungdidukung, least recommended

Dynamic serving masih membuat sense occasionally (e.g. radically berbeda device experiences itu sebuah single template dapat’t reasonably express); separate URLs adalah mostly legacy now. jika Anda’re pada either, full deep dives — including Vary header mechanics untuk dynamic serving — adalah di dynamic serving artikel. tetapi untuk sebuah greenfield bangun, responsive adalah default jawaban, dan burden dari proof adalah pada choosing anything else.

Bing’s angle: criteria, not architecture

Bing agrees dengan outcome tetapi frames ini differently. ini doesn’t endorse “Responsive Web Design” (terjemahan) “Responsive Web Design” oleh name cara Google melakukan; instead -nya mobile-friendliness test evaluates testable criteria — viewport dan zoom-control configuration, width dari halaman konten, readability dari text, spacing dari tautan dan lainnya tap targets, dan gunakan dari incompatible plug-ins. ini recommends yang sama viewport tag Google melakukan, dan -nya konten-width aturan adalah itu “the content width should not exceed the screen width” (terjemahan) “ konten width seharusnya not exceed screen width” — overflow gets flagged sebagai “Page content does not fit device width.” (terjemahan) “halaman konten melakukan not fit device width.” So ini adalah safe untuk say Bing dan Google both reward mobile-friendly rendering; hanya attribute explicit recommended-configuration language untuk Google specifically.

Responsive design dan pengindeksan mobile-pertama (post-July 2024)

pengindeksan mobile-pertama adalah done — Google finished rollout, dan ini now menggunakan mobile-di-crawl versi dari Anda halaman untuk pengindeksan dan peringkat oleh default. Almost setiap guide masih writes tentang responsive design sebagai sebuah “get ready for mobile-first indexing” (terjemahan) “get ready untuk mobile-pertama pengindeksan” future-tense move. itu framing adalah stale. rollout adalah complete, dan untuk sebuah sudah-responsive situs ini perubahan nothing — Anda konten dan metadata adalah sudah identical di seluruh mobile dan desktop because there’s one versi. itu’s not sebuah coincidence; ini adalah entire poin. situs’s pengindeksan mobile-pertama artikel covers timeline dan parity aturan di full.

Responsive ≠ automatically fast

biggest trap. Responsive design controls layout, not performa. sebuah responsive situs dapat masih ship sebuah 3 MB desktop hero image itu phones hanya scale down di CSS, atau kirim desktop-weight JavaScript untuk sebuah perangkat seluler — dan fail LCP atau CLS badly. “Responsive” (terjemahan) “Responsive” adalah not sebuah Core Web Vitals pass. Truly optimizing berarti serving appropriately sized assets per breakpoint (itu’s what srcset/<picture> dan responsive images adalah untuk), not hanya letting CSS shrink oversized ones. Fix performa separately — see Core Web Vitals konten dan responsive-images material untuk how.

performa isn’t satu-satunya assumption itu doesn’t automatically hold. One codebase doesn’t guarantee identical rendering, accessibility, atau search-hasil presentation either — browser dan devices masih differ enough di how mereka handle CSS, fonts, dan JavaScript-dependent layout itu cross-device dan cross-browser testing stays bagian dari job, yang sama sebagai ini akan di bawah apa pun lainnya configuration. “Responsive” (terjemahan) “Responsive” describes sebuah architecture, not sebuah verified outcome; test ini like Anda’d test anything else.

sebuah little history

Worth one paragraf, because ini reframes whole “best practice.” (terjemahan) “best practice.” Google didn’t recommend responsive design pertama dan adopt ini later — ini went responsive pada -nya own properties pertama, untuk engineering alasan, dan recommendation diikuti. sebagai -nya 2012 post menjelaskan, Google “faced a stark choice between creating mobile specific websites, or adapting existing sites… Creating two sites would allow us to better target specific hardware, but maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses.” (terjemahan) “faced sebuah stark choice antara membuat mobile spesifik situs web, atau adapting existing situs… membuat two situs akan allow us untuk better target spesifik hardware, tetapi maintaining sebuah single shared situs preserves sebuah canonical URL, avoiding apa pun complicated redirects, dan simplifies sharing dari web addresses.” Canonical-URL preservation, no redirect complexity, simpler sharing — itu adalah alasan sebelum anyone called ini sebuah SEO best practice, dan mereka’re masih alasan.

Where ini sits di bigger picture: responsive design adalah one piece dari broader mobile SEO story, alongside mobile usability, intrusive interstitials, history dari AMP, dan mobile SEO checklist itu ties them together. ini artikel adalah “how should I serve mobile?” (terjemahan) “how seharusnya I sajikan mobile?” piece; others cover rest.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.