Panduan Responsive Web Design

TL;DR — Responsive design berarti satu situs web itu reshapes itself untuk fit whatever screen ini adalah pada — phone, tablet, atau laptop — menggunakan yang sama halaman dan sama address untuk everyone. ini adalah setup Google recommends karena ini adalah simplest untuk bangun dan pertahankan berfungsi. ini perlu satu kecil line dari code ( viewport meta tag) untuk berfungsi, dan ini melakukan tidak magically membuat Anda peringkat lebih tinggi.

Apa responsive design adalah

sebuah responsive situs web adalah sebuah single situs web itu adapts -nya layout untuk size dari screen. sama halaman, sama web address, apakah Anda open ini pada sebuah phone, sebuah tablet, atau sebuah big desktop monitor — columns rearrange, images resize, menu collapses, so ini selalu looks right.

alternative, older approaches split Anda situs di dua: sebuah terpisah mobile situs web pada -nya own address (like m.example.com), atau sebuah server itu diam-diam hands phones dan desktops berbeda halaman dari yang sama address. Responsive design skips semua dari itu. ada satu versi dari semuanya.

Mengapa ini adalah recommended cara

Google recommends responsive design, dan -nya alasan adalah refreshingly plain: ini adalah easiest untuk bangun dan maintain. Karena ada hanya satu halaman, Anda hanya memiliki satu hal untuk pertahankan correct. Tidak ada apa pun dapat drift out dari sync antara sebuah “mobile version” (terjemahan) “mobile versi” dan sebuah “desktop version,” (terjemahan) “desktop versi,” karena di sana tidak dua versi.

itu penting lebih daripada ini digunakan untuk, karena Google now membaca mobile versi dari Anda halaman untuk decide bagaimana Anda peringkat (itu’s pengindeksan mobile-pertama). dengan sebuah responsive situs, Anda mobile versi dan Anda desktop versi adalah yang sama hal — so ada tidak ada apa pun untuk mendapatkan wrong.

satu line itu membuat ini berfungsi

Responsive design tidak berfungsi pada -nya own. Anda perlu ini di Anda halaman’s <head>:

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

Tanpa ini, phones pretend untuk menjadi desktop monitors dan shrink Anda seluruh halaman down untuk tiny, unreadable text — dan responsive layout tidak pernah kicks di. ini adalah tidak opsional; ini adalah switch itu turns responsive design pada. (ada sebuah seluruh deep dive pada viewport meta tag jika Anda ingin detail.)

hal orang mendapatkan wrong

Responsive design adalah tidak sebuah peringkat boost. Google memiliki mengatakan outright itu ini tidak peringkat responsive situs lebih tinggi daripada situs dibangun lainnya cara. benefit adalah itu ini adalah simpler dan harder untuk mess up — tidak itu ini earns Anda positions.

dan “it looks okay on my phone” (terjemahan) “ini looks okay pada my phone” tidak yang sama sebagai “it’s responsive.” (terjemahan) “ini adalah responsive.” Responsive berarti layout genuinely adapts melalui CSS pada sebuah single halaman — tidak itu ini happens untuk menjadi readable oleh luck.

ingin penuh versi — tepat Google quotes, bagaimana ini compares untuk dynamic serving dan terpisah URLs, mengapa viewport tag adalah sebuah hard requirement, dan mengapa sebuah responsive situs dapat masih menjadi slow? Switch untuk Advanced tab.

«> TL;DR — Responsive web design serves the same HTML on the same URL to

every device and uses CSS media queries to adapt the layout to the viewport. Google recommends it — “the easiest design pattern to implement and maintain” — but explicitly does not rank it above dynamic serving or separate URLs. Its real edge is operational: one URL, one set of HTML, so content parity is automatic and Google’s own mobile-first-indexing checklist “only applies to dynamic serving and separate URL configurations.” It requires a correct viewport meta tag to function — without it phones assume a desktop-width viewport (980px iOS / 800px old Android) and your media queries never fire. Contrast: dynamic serving (same URL, different HTML via Vary: User-Agent) and separate URLs (m-dot). Responsive controls layout, not speed — a responsive site can still fail Core Web Vitals.

» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh satu, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

definition, precisely

«Google’s own words: 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.” That sentence contains the whole idea: » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

• sama HTML — satu markup payload, tidak sebuah device-spesifik satu.
• sama URL — Tidak redirect untuk m.example.com, Tidak pengguna-agent fork.
• Displayed differently oleh screen size — melalui CSS media kueri.

«That’s the line that separates it from the two other 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.” Separate URLs “serves different HTML to each device, and on separate URLs,” redirecting users to the device-appropriate version. Responsive is the only one of the three with a single HTML source.

» (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Mengapa Google recommends ini — simplicity, tidak sebuah peringkat edge

Google adalah direct: ini “recommends Responsive Web Design karena ini itu easiest design pattern untuk implement dan maintain.” (terjemahan) “recommends Responsive Web Design karena ini adalah easiest design pattern untuk implement dan maintain.” Note apa itu alasan adalah dan tidak — ini adalah sebuah operational argument (satu codebase, fewer moving bagian), tidak sebuah peringkat argument.

«The single most useful — and most underused — line in Google’s mobile-first best-practices doc is the 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.” Read that again. Google is telling you that most of its long mobile-first checklist — matching structured data across versions, matching robots meta tags, matching alt text, setting Vary headers, wiring up rel=alternate/canonical annotations — simply doesn’t apply to you if you’re responsive, because there’s only one version to get right. That’s the strongest practical case for RWD, and almost nobody frames it that way. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian dua puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

«The knock-on benefits all flow from “one URL, one HTML”: » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

ini adalah persis mengapa, di my Ahrefs guide pada pengindeksan mobile-pertama, “gunakan responsive design” (terjemahan) “gunakan responsive design” adalah pertama dari ten tips untuk membangun sebuah mobile-friendly situs — ini menghapus seluruh categories dari masalah sebelum mereka mulai.

melakukan responsive design secara langsung meningkatkan rankings? Tidak.

ini adalah myth untuk kill early. Google’s Zineb Ait Bahajji put ini plainly: Google melakukan tidak peringkat responsive-design situs better daripada situs menggunakan lainnya configurations (terpisah mobile situs atau dynamic serving). Google masih prefers RWD — karena ini adalah easier untuk maintain, future-friendly, dan mereka see fewer configuration errors dengan ini — tetapi “fewer errors” (terjemahan) “fewer errors” adalah tidak 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 apa hurts Anda.

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

Bagaimana ini berfungsi: viewport meta tag adalah sebuah prerequisite, tidak sebuah nicety

sebagian besar guides list viewport meta tag sebagai satu bullet among banyak CSS tips. ini tidak sebuah tip — ini adalah hal itu membuat responsive design function di semua. Google’s 2012 Penelusuran Central post explaining mengapa Google itself went responsive adalah blunt tentang mengapa: “Oleh default, smartphone browsers pretend untuk menjadi high-resolution desktop browsers, dan lay out a halaman sebagai jika Anda adalah viewing it pada a desktop monitor… Itu default viewport width untuk itu default Android browser adalah 800px, dan 980px untuk iOS, regardless dari itu number dari sebenarnya physical pixels pada itu 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 sebenarnya physical pixels pada screen.”

itu’s failure mode: tanpa sebuah viewport tag, sebuah phone renders Anda halaman ke sebuah 980px-wide canvas dan lalu shrinks seluruh hal untuk fit — tiny text, “overview mode,” (terjemahan) “overview mode,” dan Anda dengan hati-hati-ditulis max-width: 479px media kueri tidak pernah triggers, karena browser thinks ini adalah 980px wide. perbaiki adalah satu line: “Di order untuk trigger itu browser untuk render Anda halaman di a lebih readable scale, Anda perlu untuk gunakan itu viewport meta element: <meta name="viewport" konten="width=device-width, initial-scale=1">.” (terjemahan) “di order untuk trigger browser untuk render Anda halaman di sebuah lebih readable scale, Anda perlu gunakan viewport meta element: tidak terdefinisi.” Setting width=device-width juga berarti layout memperbarui ketika pengguna rotates device, yang adalah apa lets media kueri respond untuk orientation. Deep mechanics — initial-scale, user-scalable/maximum-scale accessibility traps — langsung di dedicated viewport meta tag artikel.

Bagaimana 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 di atas sebagai illustrative, tidak 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, tidak sebuah device list: set them di mana Anda own konten sebenarnya breaks (sebuah nav wraps badly, columns mendapatkan too sempit, text pendek-lines), dan test ranges antara breakpoints too, tidak hanya sebuah handful dari named screen sizes. Device viewport widths perubahan setiap product cycle; konten-driven breakpoints jangan perlu updating ketika mereka melakukan.

«Google’s 2012 post also flagged the CSS discipline that keeps a responsive layout from 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.” Their three guiding principles were equally simple: pages should render legibly at any resolution, one set of content should be viewable on any device, and you should “never show a horizontal scrollbar, whatever the window size.” Modern refinements (clamp() for fluid type, container queries, srcset/<picture> for device-appropriate images) sit on top of that foundation — they’re not required to be “truly” responsive. For implementation depth beyond the SEO framing, Google’s own web.dev Learn Responsive Design course is the place to go. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Responsive vs. dynamic serving vs. terpisah URLs

three configurations Google documents, side oleh side:

Dynamic serving masih membuat sense occasionally (e.g. radically berbeda device experiences itu sebuah single template dapat’t reasonably express); terpisah URLs adalah mostly legacy now. jika Anda’re pada either, penuh 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 apa pun else.

Bing’s angle: criteria, tidak architecture

«Bing agrees with the outcome but frames it differently. It doesn’t endorse “Responsive Web Design” by name the way Google does; instead its mobile-friendliness test evaluates testable criteria — viewport and zoom-control configuration, width of page content, readability of text, spacing of links and other tap targets, and use of incompatible plug-ins. It recommends the same viewport tag Google does, and its content-width rule is that “the content width should not exceed the screen width” — overflow gets flagged as “Page content does not fit device width.” So it’s safe to say Bing and Google both reward mobile-friendly rendering; just attribute the explicit recommended-configuration language to Google specifically. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

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

pengindeksan mobile-pertama adalah selesai — Google finished rollout, dan ini now menggunakan mobile-di-crawl versi dari Anda halaman untuk pengindeksan dan peringkat oleh default. Hampir setiap guide masih menulis tentang responsive design sebagai sebuah “mendapatkan ready untuk mobile-pertama indexing” (terjemahan) “mendapatkan ready untuk mobile-pertama pengindeksan” future-tense move. itu framing adalah stale. rollout adalah menyelesaikan, dan untuk sebuah sudah-responsive situs ini perubahan tidak ada apa pun — Anda konten dan metadata adalah sudah identical di seluruh mobile dan desktop karena ada satu versi. itu’s tidak sebuah coincidence; ini adalah entire poin. situs’s pengindeksan mobile-pertama artikel covers timeline dan parity aturan di penuh.

Responsive ≠ secara otomatis fast

biggest trap. Responsive design controls layout, tidak 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 tidak sebuah Core Web Vitals lulus. Truly optimizing berarti serving appropriately sized assets per breakpoint (itu’s apa srcset/<picture> dan responsive images adalah untuk), tidak hanya letting CSS shrink oversized ones. Perbaiki performa secara terpisah — see Core Web Vitals konten dan responsive-images material untuk bagaimana.

performa tidak satu-satunya assumption itu tidak secara otomatis hold. Satu codebase tidak jaminan identical rendering, accessibility, atau penelusuran-hasil presentation either — browser dan devices masih differ cukup di bagaimana mereka tangani CSS, fonts, dan JavaScript-dependent layout itu cross-device dan cross-browser testing tetap bagian dari job, yang sama sebagai ini akan di bawah apa pun lainnya configuration. “Responsive” (terjemahan) “Responsive” mendeskripsikan sebuah architecture, tidak sebuah verified outcome; test ini like Anda’d test apa pun else.

sebuah little history

«Worth one paragraph, because it reframes the whole “best practice.” Google didn’t recommend responsive design first and adopt it later — it went responsive on its own properties first, for engineering reasons, and the recommendation followed. As its 2012 post explains, 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.” Canonical-URL preservation, no redirect complexity, simpler sharing — those were the reasons before anyone called it an SEO best practice, and they’re still the reasons. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Di mana ini sits di bigger picture: responsive design adalah satu piece dari lebih luas mobile SEO story, alongside mobile usability, intrusive interstitials, history dari AMP, dan mobile SEO checklist itu ties them together. ini artikel adalah “bagaimana seharusnya I serve mobile?” (terjemahan) “bagaimana seharusnya I sajikan mobile?” piece; others cover rest.

AI summary

sebuah condensed take pada Advanced versi:

«- Responsive web design = same HTML, same URL, CSS media queries adapt the layout to the viewport. It’s one of Google’s three documented mobile configurations, alongside dynamic serving and separate URLs.

• Google recommends it — “the easiest design pattern to implement and maintain” — but it is not a ranking boost. Google (Zineb Ait Bahajji) has said it does not rank responsive sites above the other configurations.
• The real edge is operational. Google’s own scope note: its mobile-first checklist “only applies to dynamic serving and separate URL configurations… In case of responsive design, the content and the metadata are the same” — so parity, Vary headers, and alternate/canonical annotations mostly don’t apply.
• The viewport meta tag is a hard prerequisite, not a tip: without <meta name="viewport" content="width=device-width, initial-scale=1">, phones assume a desktop-width viewport (980px iOS / 800px old Android) and media queries never fire.
• Contrast: dynamic serving (same URL, different HTML via Vary: User-Agent) and separate URLs (m-dot, needs rel=alternate/canonical). Both are riskier because two versions can drift.
• Bing rewards mobile-friendliness via testable criteria (viewport, content width, readability, tap-target spacing) rather than endorsing RWD by name.
• Mobile-first indexing is complete; for an already-responsive site that changes » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh dua, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) « nothing, since content/metadata are already identical.
• Responsive ≠ fast. It controls layout, not performance — a responsive site can still fail Core Web Vitals if assets and JS aren’t optimized per breakpoint.
• Breakpoints are a layout decision, not a device list. Set them where content actually breaks and test the ranges between them, not just a handful of named screen sizes.
• Responsive ≠ identical everywhere. One codebase doesn’t guarantee identical rendering, accessibility, or presentation across browsers and devices — cross-device testing still matters. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh dua, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Dokumentasi resmi

Utama-sumber documentation dari mesin pencari.

«Google

• Mobile-first Indexing Best Practices — the canonical doc: the responsive definition, the three configurations, the “easiest to implement and maintain” recommendation, and the scope note that most of the checklist doesn’t apply to responsive sites. Start here.
• Responsive design – harnessing the power of media queries (2012) — Google explaining why it went responsive: the viewport-tag requirement, the 980px/800px default-viewport problem, and the max-width/min-height CSS discipline.
• Learn Responsive Design (web.dev) — Google-owned developer course on the implementation side (media queries, responsive images, dark mode). The old developers.google.com/search/mobile-sites/mobile-seo/responsive-design URL now redirects here.
• Understanding Google page experience — where mobile-friendliness and Core Web Vitals fit as signals (relevant to the “responsive ≠ fast” point). » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh tujuh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Bing / Microsoft

• Bing Webmaster Guidelines — Bing’s umum guidance; mobile-friendliness adalah treated sebagai testable criteria alih-alih sebuah named preferred architecture.
• Announcing Bing Mobile Friendliness Test alat (Nov 2015) — five criteria Bing memeriksa: viewport/zoom config, konten width, readability, tap-target spacing, dan incompatible plug-ins.

Quotes dari sumber

pada—record statements dari Google dan Bing. setiap tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada sumber halaman.

Google — definition dan 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 quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Google recommends Responsive Web Design because it’s the easiest design pattern to implement and maintain.” Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh empat, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “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 quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh empat, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google — dynamic serving dan terpisah URLs (untuk 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.” (Dynamic serving.) Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “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.” (Separate URLs.) Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh enam, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google — mengapa viewport tag adalah diperlukan (2012 Penelusuran 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 quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “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 quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh delapan, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “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 quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh delapan, bagian kecil tiga: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “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 quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh delapan, bagian kecil empat: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Google — Tidak peringkat boost (Zineb Ait Bahajji, melalui mesin pencari Roundtable’s coverage)

• Google melakukan “not rank responsive web design sites better than sites using other configurations (separate site for mobile or dynamic serving).” (terjemahan) “tidak peringkat responsive web design situs better daripada situs menggunakan lainnya configurations (terpisah situs untuk mobile atau dynamic serving).” Google’s stated alasan untuk masih preferring ini: “it’s easier to maintain, it’s future-friendly and we see less configuration errors with RWD.” (terjemahan) “ini adalah easier untuk maintain, ini adalah future-friendly dan kami see lebih sedikit configuration errors dengan RWD.” Baca coverage

Google (Nov 2016), relayed melalui 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.” (terjemahan) “jika Anda memiliki sebuah responsive situs atau sebuah dynamic serving situs di mana utama konten dan markup adalah equivalent di seluruh mobile dan desktop, Anda tidak seharusnya memiliki untuk perubahan apa pun.” See deck

Yang mobile configuration seharusnya I gunakan?

untuk hampir setiap baru bangun jawaban adalah responsive — tetapi ada legitimate alasan lainnya dua masih exist. Click melalui ini.

Responsive design — cheat sheet

** definition:** sama HTML, sama URL, CSS media kueri adapt layout untuk viewport. Satu versi dari semuanya.

** diperlukan tag** (tidak ada apa pun berfungsi tanpa ini):

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

Config perbandingan

Mengapa responsive, di satu line setiap

• Satu URL, satu HTML → konten parity adalah automatic.
• Google’s checklist “hanya applies untuk dynamic serving dan terpisah URL configurations.” (terjemahan) “hanya applies untuk dynamic serving dan terpisah URL configurations.”
• Tidak Vary header risk, Tidak rantai pengalihan, Tidak alternate/canonical annotations.
• Easiest untuk implement dan maintain — Google’s stated alasan.

Apa ini adalah Tidak

• Tidak sebuah peringkat boost (Google: tidak peringkat responsive di atas lainnya configs).
• Tidak secara otomatis fast — layout ≠ performa; CWV masih perlu berfungsi.
• Tidak yang sama sebagai “looks okay on my phone” (terjemahan) “looks okay pada my phone” — ini adalah media-kueri-driven adaptation.

Viewport failure mode: Tidak tag → phone assumes 980px (iOS) / 800px (old Android) viewport, shrinks halaman, media kueri tidak pernah fire.

«Bing: rewards mobile-friendliness by testable criteria (viewport, content width, readability, tap-target spacing) — doesn’t endorse “RWD” by name. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian sembilan puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

pengindeksan mobile-pertama: menyelesaikan; untuk sebuah responsive situs ini perubahan tidak ada apa pun — konten/metadata sudah identical.

Responsive design QA checklist

«Run this to confirm a site is genuinely responsive and not just “fluid desktop”: » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

• Viewport meta tag present dan correct — <meta name="viewport" content="width=device-width, initial-scale=1"> di <head> dari setiap halaman.
• Tidak zoom-blocking — hindari user-scalable=no / maximum-scale=1 di viewport tag (accessibility regression, dan Bing dapat flag ini).
• sama URL, sama HTML di seluruh devices — Tidak pengguna-agent fork, Tidak redirect untuk sebuah terpisah mobile URL.
• Tidak horizontal scroll di umum widths (360, 390, 414, 768, 1024, 1280).
• Media kueri sebenarnya fire — layout genuinely restructures di breakpoints, tidak hanya shrinks.
• Tap targets big cukup dan spaced (~48px) pada kecil breakpoints.
• Readable text tanpa zooming (~16px base floor).
• Images sized per breakpoint — menggunakan srcset/<picture>, tidak sebuah giant desktop image scaled down di CSS.
• CSS/JS tidak blocked di robots.txt — Googlebot harus render responsive layout.
• Mobile Core Web Vitals lulus — LCP < 2,5s, INP < 200ms, CLS < 0,1 pada mobile (responsive ≠ fast; periksa secara terpisah).
• tanpa konten hidden dari mobile melalui display:none itu Anda sebenarnya ingin terindeks.
• Dirender mobile HTML reviewed di Search Console pemeriksaan URL.
• Spot-diperiksa pada nyata browser/devices, tidak hanya sebuah resized desktop window — satu codebase tidak jaminan identical rendering di mana-mana.

Responsive design anti-patterns

mistakes itu turn “we’re responsive” (terjemahan) “kami’re responsive” ke sebuah masalah:

«- No viewport meta tag (or a wrong one). The single most common failure — the media queries are all written correctly but never fire because the phone is rendering into an 980px canvas. Always the first thing to check.

• user-scalable=no / maximum-scale=1. Blocking pinch-zoom is an accessibility regression and can get flagged by Bing’s mobile test. Don’t disable zoom to “protect” your layout.
• “Fluid desktop” masquerading as responsive. The layout scales proportionally but never restructures — three columns just get narrower instead of stacking. It technically resizes; it isn’t really responsive.
• display:none on content you want indexed. Hiding a whole section on mobile via CSS to “keep it clean.” Under mobile-first indexing the mobile HTML is what’s read — hide it and you risk it not being indexed. (Tabs/accordions that keep the content in the HTML are fine; fully removing it is not.)
• Treating “responsive” as a performance strategy. Shipping a 3 MB desktop hero and letting CSS shrink it, or sending desktop-weight JS to phones. The layout adapts; the payload doesn’t. This is how responsive sites fail Core Web Vitals.
• Reaching for dynamic serving or m-dot by default. Choosing a two-version architecture when a single responsive template would do — signing up for parity drift, Vary-header fragility, or annotation maintenance you didn’t need. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus sepuluh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- Assuming responsive earns rankings. Building the business case on a ranking boost that doesn’t exist. Sell it on simplicity and fewer errors, which are real. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus sepuluh, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

periksa sebuah halaman untuk responsive readiness

Quick cara untuk konfirmasi dua hal itu membuat atau break responsive design: viewport tag, dan apakah server adalah diam-diam forking HTML oleh pengguna-agent.

1) adalah viewport meta tag 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) melakukan server sajikan berbeda HTML untuk mobile vs. desktop? (shell)

jika byte counts differ significantly, Anda dapat menjadi pada dynamic serving — dan Anda’ll ingin sebuah Vary: User-Agent header untuk go dengan ini.

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 viewport tag dari sebuah dimuat halaman

Paste ke browser console pada apa pun halaman:

(() => {
  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 ( “no horizontal scrollbar” (terjemahan) “Tidak horizontal scrollbar” aturan)

Jalankan di sebuah sempit viewport (device toolbar pada) untuk temukan elements wider daripada 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 periksa

Save sebagai sebuah bookmark dan click pada apa pun halaman:

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

Uji pemahaman Anda: Responsive Design

Five quick pertanyaan pada responsive web design. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My writing

• pengindeksan mobile-pertama Goes Mobile-hanya — my Ahrefs guide; “gunakan responsive design” (terjemahan) “gunakan responsive design” leads ten-tip checklist untuk membangun sebuah mobile-friendly situs, dan ini covers konten-parity background itu membuat responsive safe default.
• Beginner’s Guide untuk SEO teknis — di mana mobile configuration sits di bigger crawl/indeks/peringkat picture.
• Core Web Vitals: Apa mereka adalah & cara meningkatkan Yours — performa side, since responsive alone tidak membuat Anda fast.

My speaking

• pengindeksan mobile-pertama (SMX Advanced 2017) (SlideShare) — my deck pada mobile configurations; ini quotes Google’s Nov 2016 line itu responsive dan dynamic-serving situs dengan equivalent konten “tidak seharusnya memiliki untuk ubah apa pun” (terjemahan) “tidak seharusnya memiliki untuk perubahan apa pun” untuk pengindeksan mobile-pertama. (Standing disclaimer: ini adalah my understanding dari ini sistem, tidak sebuah jaminan dari completeness.)

dari sekitar industry

• pengindeksan mobile-pertama Best Practices (Google) — canonical doc: responsive definition, three configurations, dan cakupan note itu sebagian besar dari checklist tidak apply untuk responsive situs.
• Responsive design – harnessing power dari media kueri (Google, 2012) — mengapa Google itself went responsive, dan origin dari -nya viewport-tag recommendation.
• Learn Responsive Design (web.dev / Google) — implementation-depth course: media kueri, responsive images, pengguna preferences.
• Announcing Bing Mobile Friendliness Test alat (Microsoft Bing) — Bing’s five mobile-friendliness criteria (viewport, konten width, readability, tap-target spacing, plug-ins).
• Google: Responsive Design adalah Tidak sebuah sinyal peringkat Boost (mesin pencari Roundtable) — Barry Schwartz’s reporting dari Zineb Ait Bahajji “no ranking boost” (terjemahan) “Tidak peringkat boost” statement.
• adalah responsive web design cukup? (Hint: Tidak) (mesin pencari Land) — contrarian case itu RWD tidak sebuah silver bullet.
• Top 7 SEO Benefits dari Responsive Web Design (mesin pencari Journal) — practical single-URL dan parity wins, laid out.

Videos

• Google Search Central (YouTube) — Martin Splitt’s mobile-friendliness dan rendering explainers, plus Bagaimana Google Search berfungsi series, cover bagaimana Googlebot menangani responsive layouts. Channel

Log perubahan