<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="id">
	<id>https://wiki.unissula.ac.id/index.php?action=history&amp;feed=atom&amp;title=Desain_web_responsif</id>
	<title>Desain web responsif - Riwayat revisi</title>
	<link rel="self" type="application/atom+xml" href="https://wiki.unissula.ac.id/index.php?action=history&amp;feed=atom&amp;title=Desain_web_responsif"/>
	<link rel="alternate" type="text/html" href="https://wiki.unissula.ac.id/index.php?title=Desain_web_responsif&amp;action=history"/>
	<updated>2026-09-15T18:24:51Z</updated>
	<subtitle>Riwayat revisi halaman ini di wiki</subtitle>
	<generator>MediaWiki 1.46.0</generator>
	<entry>
		<id>https://wiki.unissula.ac.id/index.php?title=Desain_web_responsif&amp;diff=4973&amp;oldid=prev</id>
		<title>Maintenance script: Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi</title>
		<link rel="alternate" type="text/html" href="https://wiki.unissula.ac.id/index.php?title=Desain_web_responsif&amp;diff=4973&amp;oldid=prev"/>
		<updated>2026-08-24T03:58:57Z</updated>

		<summary type="html">&lt;p&gt;Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi&lt;/p&gt;
&lt;table style=&quot;background-color: #fff; color: #202122;&quot; data-mw-interface=&quot;&quot;&gt;
				&lt;col class=&quot;diff-marker&quot; /&gt;
				&lt;col class=&quot;diff-content&quot; /&gt;
				&lt;col class=&quot;diff-marker&quot; /&gt;
				&lt;col class=&quot;diff-content&quot; /&gt;
				&lt;tr class=&quot;diff-title&quot; lang=&quot;id&quot;&gt;
				&lt;td colspan=&quot;2&quot; style=&quot;background-color: #fff; color: #202122; text-align: center;&quot;&gt;← Revisi sebelumnya&lt;/td&gt;
				&lt;td colspan=&quot;2&quot; style=&quot;background-color: #fff; color: #202122; text-align: center;&quot;&gt;Revisi per 24 Agustus 2026 03.58&lt;/td&gt;
				&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot; id=&quot;mw-diff-left-l1&quot;&gt;Baris 1:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Baris 1:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&#039;&#039;&#039;Desain web responsif&#039;&#039;&#039; ([[bahasa Inggris]]: &#039;&#039;responsive web design (RWD)&#039;&#039;) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik &#039;&#039;mobile&#039;&#039; maupun [[komputer meja]]. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar. Ukuran [[huruf]], &#039;&#039;[[user interface]]&#039;&#039;, gambar dan tata letak akan menyesuaikan dengan lebar layar dan [[resolusi]] layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat melalui perangkat komputer meja.&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;+&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&#039;&#039;&#039;Desain web responsif&#039;&#039;&#039; ([[bahasa Inggris]]: &#039;&#039;responsive web design (RWD)&#039;&#039;) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik &#039;&#039;mobile&#039;&#039; maupun [[komputer meja]]. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar.&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;ref&amp;gt;[https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design Artikel:&quot;Responsive Web design&quot; di mozilla.org]&amp;lt;/ref&amp;gt; &lt;/ins&gt;Ukuran [[huruf]], &#039;&#039;[[user interface]]&#039;&#039;, gambar dan tata letak akan menyesuaikan dengan lebar layar dan [[resolusi]] layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat melalui perangkat komputer meja.&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;ref&amp;gt;[http://blog&lt;/ins&gt;.&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;teamtreehouse&lt;/ins&gt;.&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;com/beginners-guide-to-responsive-&lt;/ins&gt;web&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;-design Artikel:&quot;Beginner’s Guide to Responsive Web Design&quot; di teamtreehouse.com&lt;/ins&gt;]&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;/ref&amp;gt;&lt;/ins&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt; &lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;Desain web responsif telah menjadi hal yang penting karena jumlah lalu lintas seluler saat ini menyumbang lebih dari setengah dari total lalu lintas internet&lt;/del&gt;. &lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;Karenanya, Google mengumumkan [[Mobilegeddon]] pada tahun 2015, dan mulai meningkatkan peringkat situs yang ramah seluler jika pencarian dilakukan dari perangkat seluler&lt;/del&gt;. &lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;Desain &lt;/del&gt;web &lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;responsif merupakan contoh dari [[plastisitas antarmuka&lt;/del&gt;]&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;].&lt;/del&gt;&lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-deleted&quot;&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;+&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;Desain web responsif telah menjadi hal yang penting karena jumlah lalu lintas seluler saat ini menyumbang lebih dari setengah dari total lalu lintas internet.&amp;lt;ref&amp;gt;[http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper]. &#039;&#039;Cisco&#039;&#039;. January 30, 2015.&amp;lt;/ref&amp;gt; Karenanya, Google mengumumkan [[Mobilegeddon]] pada tahun 2015, dan mulai meningkatkan peringkat situs yang ramah seluler jika pencarian dilakukan dari perangkat seluler.&amp;lt;ref&amp;gt;[http://googlewebmastercentral.blogspot.com/2015/04/rolling-out-mobile-friendly-update.html Official Google Webmaster Central Blog: Rolling out the mobile-friendly update]. &#039;&#039;Official Google Webmaster Central Blog&#039;&#039;.&amp;lt;/ref&amp;gt; Desain web responsif merupakan contoh dari [[plastisitas antarmuka]].&amp;lt;ref&amp;gt;D. Thevenin. &#039;&#039;Plasticity of User Interfaces: Framework and Research Agenda&#039;&#039;. 2002. hlm. 110–117.&amp;lt;/ref&amp;gt;&lt;/ins&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== Sejarah ==&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== Sejarah ==&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot; id=&quot;mw-diff-left-l8&quot;&gt;Baris 8:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Baris 7:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Dengan menggunakan [[ponsel cerdas]] dan koneksi internet yang mumpuni, berselancar di internet menjadi hal yang biasa. Individu dapat meng-&amp;#039;&amp;#039;update&amp;#039;&amp;#039; statusnya di [[Facebook]], membaca [[email]], mengirim foto ataupun membaca berita melalui perangkat cerdasnya kapanpun dan dimanapun dia berada.&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Dengan menggunakan [[ponsel cerdas]] dan koneksi internet yang mumpuni, berselancar di internet menjadi hal yang biasa. Individu dapat meng-&amp;#039;&amp;#039;update&amp;#039;&amp;#039; statusnya di [[Facebook]], membaca [[email]], mengirim foto ataupun membaca berita melalui perangkat cerdasnya kapanpun dan dimanapun dia berada.&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Namun terkadang keterbatasan teknologi web dengan [[HTML]]-nya masih sering terjadi pada saat itu. Tidak semua web bisa dibuka atau berjalan secara baik di ponsel cerdas dan [[Komputer tablet]] yang umumnya berukuran kecil dibanding perangkat [[Komputer meja]]. Bahkan beberapa fitur terkadang tidak bisa beroperasi. Hal inilah yang membuat para [[web desainer]] dituntut berpikir menggunakan cara baru dalam menyampaikan informasi di dalam web yang bersahabat dengan perangkat mobile.&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Namun terkadang keterbatasan teknologi web dengan [[HTML]]-nya masih sering terjadi pada saat itu. Tidak semua web bisa dibuka atau berjalan secara baik di ponsel cerdas dan [[Komputer tablet]] yang umumnya berukuran kecil dibanding perangkat [[Komputer meja]]. Bahkan beberapa fitur terkadang tidak bisa beroperasi. Hal inilah yang membuat para [[web desainer]] dituntut berpikir menggunakan cara baru dalam menyampaikan informasi di dalam web yang bersahabat dengan perangkat mobile.&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Desain Web Responsif, membantu menjembatani hal tersebut, dengan menggunakan teknologi baru [[HTML 5]] dan [[CSS 3]]. Berlahan berbagai situs web besar seperti [[Google]], [[Amazon.com]], [[Facebook]], Portal berita [[BBC]] dan CNN mulai mengadaptasi metode tersebut.&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;+&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Desain Web Responsif, membantu menjembatani hal tersebut, dengan menggunakan teknologi baru [[HTML 5]] dan [[CSS 3]].&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;ref&amp;gt;[http://alistapart.com/article/responsive-web-design Artikel:&quot;Responsive Web Design&quot; di alistapart.com]&amp;lt;/ref&amp;gt; &lt;/ins&gt;Berlahan berbagai situs web besar seperti [[Google]], [[Amazon.com]], [[Facebook]], Portal berita [[BBC]]&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;ref&amp;gt;[http://www.bbc.co.uk/academy/technology/article/art20130720141931783 Artikel:&quot;Responsive web design at BBC News&quot; di BBC.co.uk]&amp;lt;/ref&amp;gt; &lt;/ins&gt;dan CNN mulai mengadaptasi metode tersebut.&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== Ciri Web dengan Desain Web Responsif ==&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== Ciri Web dengan Desain Web Responsif ==&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot; id=&quot;mw-diff-left-l22&quot;&gt;Baris 22:&lt;/td&gt;
&lt;td colspan=&quot;2&quot; class=&quot;diff-lineno&quot;&gt;Baris 21:&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== Referensi ==&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== Referensi ==&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;* Responsive Web Design by Example; oleh Thorig Firdaus; Packt Publishing, Birmingham - Mumbai; 2013.&lt;/del&gt;&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;+&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;references &lt;/ins&gt;/&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;gt;&lt;/ins&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;* The Responsive Web; oleh Matthew Carver; Manning Shelter Island; 2015.&lt;/del&gt;&lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;* Implementing Responsive Design; oleh Tim Kadlec; New Riders, Berkeley, USA; 2013.&lt;/del&gt;&lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;*  [http:&lt;/del&gt;/&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;/alistapart.com/article/responsive-web-design Artikel&quot;Responsive Web Design&quot; di alistapart.com]&lt;/del&gt;&lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt; &lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;del style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;== Catatan kaki ==&lt;/del&gt;&lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt; &lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;−&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt; &lt;/div&gt;&lt;/td&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-added&quot;&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== Sumber dan atribusi ==&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;== Sumber dan atribusi ==&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;br&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Desain+web+responsif&amp;amp;oldid=27998513 Wikipedia bahasa Indonesia], revisi 27998513 (2025-10-16T03:47:27Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.&lt;/div&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot;&gt;&lt;/td&gt;&lt;td style=&quot;background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Desain+web+responsif&amp;amp;oldid=27998513 Wikipedia bahasa Indonesia], revisi 27998513 (2025-10-16T03:47:27Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-deleted&quot;&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;+&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&lt;/ins&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td colspan=&quot;2&quot; class=&quot;diff-side-deleted&quot;&gt;&lt;/td&gt;&lt;td class=&quot;diff-marker&quot; data-marker=&quot;+&quot;&gt;&lt;/td&gt;&lt;td style=&quot;color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;&quot;&gt;&lt;div&gt;&lt;ins style=&quot;font-weight: bold; text-decoration: none;&quot;&gt;&amp;lt;!-- WIKI_UNISSULA_PRESENTATION_V4 --&amp;gt;&lt;/ins&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</summary>
		<author><name>Maintenance script</name></author>
	</entry>
	<entry>
		<id>https://wiki.unissula.ac.id/index.php?title=Desain_web_responsif&amp;diff=4573&amp;oldid=prev</id>
		<title>Maintenance script: Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 27998513; atribusi sumber disertakan.</title>
		<link rel="alternate" type="text/html" href="https://wiki.unissula.ac.id/index.php?title=Desain_web_responsif&amp;diff=4573&amp;oldid=prev"/>
		<updated>2026-08-24T03:22:15Z</updated>

		<summary type="html">&lt;p&gt;Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 27998513; atribusi sumber disertakan.&lt;/p&gt;
&lt;p&gt;&lt;b&gt;Halaman baru&lt;/b&gt;&lt;/p&gt;&lt;div&gt;&amp;#039;&amp;#039;&amp;#039;Desain web responsif&amp;#039;&amp;#039;&amp;#039; ([[bahasa Inggris]]: &amp;#039;&amp;#039;responsive web design (RWD)&amp;#039;&amp;#039;) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik &amp;#039;&amp;#039;mobile&amp;#039;&amp;#039; maupun [[komputer meja]]. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar. Ukuran [[huruf]], &amp;#039;&amp;#039;[[user interface]]&amp;#039;&amp;#039;, gambar dan tata letak akan menyesuaikan dengan lebar layar dan [[resolusi]] layar monitor yang tersedia. Hasilnya pengguna akan merasakan pengalaman mudah membaca, nyaman dan melihat informasi web tersebut sama dengan jika ia melihat melalui perangkat komputer meja.&lt;br /&gt;
&lt;br /&gt;
Desain web responsif telah menjadi hal yang penting karena jumlah lalu lintas seluler saat ini menyumbang lebih dari setengah dari total lalu lintas internet. Karenanya, Google mengumumkan [[Mobilegeddon]] pada tahun 2015, dan mulai meningkatkan peringkat situs yang ramah seluler jika pencarian dilakukan dari perangkat seluler. Desain web responsif merupakan contoh dari [[plastisitas antarmuka]].&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Sejarah ==&lt;br /&gt;
Berawal sekitar tahun [[2013]], terjadi perubahan peningkatan penggunaan &amp;#039;&amp;#039;mobile device&amp;#039;&amp;#039; dengan munculnya beragam perangkat cerdas yang terintegrasi dengan [[ponsel]] seperti [[iPhone]]. Koneksi [[internet]] menjadi sebuah keharusan dalam masyarakat modern, dan tidak dapat dimungkiri kemajuan teknologi dan industri ini menuntut setiap individual untuk bergabung dalam sebuah jaringan [[internet]] melalui berbagai [[perangkat cerdas]] tersebut.&lt;br /&gt;
Dengan menggunakan [[ponsel cerdas]] dan koneksi internet yang mumpuni, berselancar di internet menjadi hal yang biasa. Individu dapat meng-&amp;#039;&amp;#039;update&amp;#039;&amp;#039; statusnya di [[Facebook]], membaca [[email]], mengirim foto ataupun membaca berita melalui perangkat cerdasnya kapanpun dan dimanapun dia berada.&lt;br /&gt;
Namun terkadang keterbatasan teknologi web dengan [[HTML]]-nya masih sering terjadi pada saat itu. Tidak semua web bisa dibuka atau berjalan secara baik di ponsel cerdas dan [[Komputer tablet]] yang umumnya berukuran kecil dibanding perangkat [[Komputer meja]]. Bahkan beberapa fitur terkadang tidak bisa beroperasi. Hal inilah yang membuat para [[web desainer]] dituntut berpikir menggunakan cara baru dalam menyampaikan informasi di dalam web yang bersahabat dengan perangkat mobile.&lt;br /&gt;
Desain Web Responsif, membantu menjembatani hal tersebut, dengan menggunakan teknologi baru [[HTML 5]] dan [[CSS 3]]. Berlahan berbagai situs web besar seperti [[Google]], [[Amazon.com]], [[Facebook]], Portal berita [[BBC]] dan CNN mulai mengadaptasi metode tersebut.&lt;br /&gt;
&lt;br /&gt;
== Ciri Web dengan Desain Web Responsif ==&lt;br /&gt;
* &amp;#039;&amp;#039;User interface&amp;#039;&amp;#039;-nya beradaptasi di berbagai perangkat berbeda&lt;br /&gt;
* Ukuran huruf, tata letak dan gambarnya beradaptasi di berbagai ukuran layar yang berbeda&lt;br /&gt;
* Umumnya menggunakan &amp;#039;&amp;#039;scrolling&amp;#039;&amp;#039; dan &amp;#039;&amp;#039;swipe&amp;#039;&amp;#039; untuk ber&amp;#039;&amp;#039;navigasi&amp;#039;&amp;#039; di perangkat mobile&lt;br /&gt;
* [[Lintas platform]]&lt;br /&gt;
&lt;br /&gt;
== Lihat juga ==&lt;br /&gt;
* [[Antarmuka pengguna]]&lt;br /&gt;
* [[HTML 5]]&lt;br /&gt;
* [[CSS 3]]&lt;br /&gt;
&lt;br /&gt;
== Referensi ==&lt;br /&gt;
* Responsive Web Design by Example; oleh Thorig Firdaus; Packt Publishing, Birmingham - Mumbai; 2013.&lt;br /&gt;
* The Responsive Web; oleh Matthew Carver; Manning Shelter Island; 2015.&lt;br /&gt;
* Implementing Responsive Design; oleh Tim Kadlec; New Riders, Berkeley, USA; 2013.&lt;br /&gt;
*  [http://alistapart.com/article/responsive-web-design Artikel&amp;quot;Responsive Web Design&amp;quot; di alistapart.com]&lt;br /&gt;
&lt;br /&gt;
== Catatan kaki ==&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Sumber dan atribusi ==&lt;br /&gt;
&lt;br /&gt;
Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Desain+web+responsif&amp;amp;oldid=27998513 Wikipedia bahasa Indonesia], revisi 27998513 (2025-10-16T03:47:27Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.&lt;/div&gt;</summary>
		<author><name>Maintenance script</name></author>
	</entry>
</feed>