Lompat ke isi

Desain web responsif: Perbedaan antara revisi

Ensiklopedia Pengetahuan Universitas Islam Sultan Agung
Maintenance script (bicara | kontrib)
Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 27998513; atribusi sumber disertakan.
 
Maintenance script (bicara | kontrib)
Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi
 
Baris 1: Baris 1:
'''Desain web responsif''' ([[bahasa Inggris]]: ''responsive web design (RWD)'') adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik ''mobile'' 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]], ''[[user interface]]'', 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.
'''Desain web responsif''' ([[bahasa Inggris]]: ''responsive web design (RWD)'') adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik ''mobile'' maupun [[komputer meja]]. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar.<ref>[https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design Artikel:"Responsive Web design" di mozilla.org]</ref> Ukuran [[huruf]], ''[[user interface]]'', 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.<ref>[http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design Artikel:"Beginner’s Guide to Responsive Web Design" di teamtreehouse.com]</ref>
 
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]].


Desain web responsif telah menjadi hal yang penting karena jumlah lalu lintas seluler saat ini menyumbang lebih dari setengah dari total lalu lintas internet.<ref>[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]. ''Cisco''. January 30, 2015.</ref> Karenanya, Google mengumumkan [[Mobilegeddon]] pada tahun 2015, dan mulai meningkatkan peringkat situs yang ramah seluler jika pencarian dilakukan dari perangkat seluler.<ref>[http://googlewebmastercentral.blogspot.com/2015/04/rolling-out-mobile-friendly-update.html Official Google Webmaster Central Blog: Rolling out the mobile-friendly update]. ''Official Google Webmaster Central Blog''.</ref> Desain web responsif merupakan contoh dari [[plastisitas antarmuka]].<ref>D. Thevenin. ''Plasticity of User Interfaces: Framework and Research Agenda''. 2002. hlm. 110–117.</ref>


== Sejarah ==
== Sejarah ==
Baris 8: Baris 7:
Dengan menggunakan [[ponsel cerdas]] dan koneksi internet yang mumpuni, berselancar di internet menjadi hal yang biasa. Individu dapat meng-''update'' statusnya di [[Facebook]], membaca [[email]], mengirim foto ataupun membaca berita melalui perangkat cerdasnya kapanpun dan dimanapun dia berada.
Dengan menggunakan [[ponsel cerdas]] dan koneksi internet yang mumpuni, berselancar di internet menjadi hal yang biasa. Individu dapat meng-''update'' statusnya di [[Facebook]], membaca [[email]], mengirim foto ataupun membaca berita melalui perangkat cerdasnya kapanpun dan dimanapun dia berada.
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.
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.
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.
Desain Web Responsif, membantu menjembatani hal tersebut, dengan menggunakan teknologi baru [[HTML 5]] dan [[CSS 3]].<ref>[http://alistapart.com/article/responsive-web-design Artikel:"Responsive Web Design" di alistapart.com]</ref> Berlahan berbagai situs web besar seperti [[Google]], [[Amazon.com]], [[Facebook]], Portal berita [[BBC]]<ref>[http://www.bbc.co.uk/academy/technology/article/art20130720141931783 Artikel:"Responsive web design at BBC News" di BBC.co.uk]</ref> dan CNN mulai mengadaptasi metode tersebut.


== Ciri Web dengan Desain Web Responsif ==
== Ciri Web dengan Desain Web Responsif ==
Baris 22: Baris 21:


== Referensi ==
== Referensi ==
* Responsive Web Design by Example; oleh Thorig Firdaus; Packt Publishing, Birmingham - Mumbai; 2013.
<references />
* The Responsive Web; oleh Matthew Carver; Manning Shelter Island; 2015.
* Implementing Responsive Design; oleh Tim Kadlec; New Riders, Berkeley, USA; 2013.
*  [http://alistapart.com/article/responsive-web-design Artikel"Responsive Web Design" di alistapart.com]
 
== Catatan kaki ==
 
 


== Sumber dan atribusi ==
== Sumber dan atribusi ==


Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Desain+web+responsif&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.
Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Desain+web+responsif&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.
<!-- WIKI_UNISSULA_PRESENTATION_V4 -->

Revisi terkini sejak 24 Agustus 2026 03.58

Desain web responsif (bahasa Inggris: responsive web design (RWD)) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun komputer meja. Dengan metode ini, web akan beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun perangkat komputer meja dengan ukuran monitor besar.[1] Ukuran huruf, user interface, 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.[2]

Desain web responsif telah menjadi hal yang penting karena jumlah lalu lintas seluler saat ini menyumbang lebih dari setengah dari total lalu lintas internet.[3] Karenanya, Google mengumumkan Mobilegeddon pada tahun 2015, dan mulai meningkatkan peringkat situs yang ramah seluler jika pencarian dilakukan dari perangkat seluler.[4] Desain web responsif merupakan contoh dari plastisitas antarmuka.[5]

Sejarah

Berawal sekitar tahun 2013, terjadi perubahan peningkatan penggunaan mobile device 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. Dengan menggunakan ponsel cerdas dan koneksi internet yang mumpuni, berselancar di internet menjadi hal yang biasa. Individu dapat meng-update statusnya di Facebook, membaca email, mengirim foto ataupun membaca berita melalui perangkat cerdasnya kapanpun dan dimanapun dia berada. 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. Desain Web Responsif, membantu menjembatani hal tersebut, dengan menggunakan teknologi baru HTML 5 dan CSS 3.[6] Berlahan berbagai situs web besar seperti Google, Amazon.com, Facebook, Portal berita BBC[7] dan CNN mulai mengadaptasi metode tersebut.

Ciri Web dengan Desain Web Responsif

  • User interface-nya beradaptasi di berbagai perangkat berbeda
  • Ukuran huruf, tata letak dan gambarnya beradaptasi di berbagai ukuran layar yang berbeda
  • Umumnya menggunakan scrolling dan swipe untuk bernavigasi di perangkat mobile
  • Lintas platform

Lihat juga

Referensi

Sumber dan atribusi

Konten artikel ini diadaptasi dari 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.