Responsive Web Design Menggunakan Bootstrap Dalam Merancang Layout Website
Abstract
Abstrak: Perkembangan dunia desain website mengalami peningkatan yang sangat signifikan terutama dalam hal layout web. Para penyedia informasi dituntut untuk dapat menyajikan informasi dengan cepat, tepat dan mudah dan dapat diakses oleh berbagai media devices dan flatform. Selain itu, kebiasaan pengguna dalam mengakses informasi pun mulai ikut berubah, yang dulunya menggunakan perangkat desktop mulai beralih menggunakan smartphone maupun tablet. Permasalahan yang ditemukan pada penelitian ini adalah bagaimana merancang layout website agar dapat menyesuaikan dengan ukuran layar devices, informasi yang ditampilkan dan tampilan halaman website menjadi tidak berantakan dan bagaimana membuat pengguna menjadi nyaman dalam mengakses informasi pada sebuah halaman website. Tujuan penelitian ini adalah untuk menerapkan responsive web design dalam merancang layout website menggunakan bootstrap sehinga ketika diakses dari berbagai devices informasi yang ditampilkan dapat menyesuaikan dengan ukuran layar devices. Hasil penelitian menunjukkan bahwa viewport dan media queries yang telah digunakan dan diujikan menggunakan Chrome DevTools menghasilkan layout yang baik dan bekerja secara otomatis menyesuaikan ukuran layar pada devices yang sedang digunakan baik itu desktop, smartphone maupun tablet. sehingga membuat pengguna menjadi nyaman dan menyenangkan dalam mengakses halaman website karena telah menyesuaikan pada beberapa perangkat tanpa perlu melakukan zoom teks.Kata kunci: Bootstrap, Framework, Layout, Responsif, Website
Abstract: The development of the world of website design has increased significantly, especially in terms of web layout. Information providers are required to be able to present information quickly, precisely and easily and can be accessed by various media devices and platforms. In addition, users' habits in accessing information have also begun to change. Previously using desktop devices, they began to switch to using smartphones or tablets. The problems found in this study are how to design a website layout so that it can fit the device screen size, the information displayed and the appearance of the website pages to be cluttered and how to make users feel comfortable in accessing information on a website page. The purpose of this study is to implement responsive web design in designing a website layout using a bootstrap so that when accessed from various devices the information displayed can adjust to the screen size of the devices. The results show that the viewport and media queries that have been used and tested using Chrome DevTools produce good layouts and work automatically to adjust the screen size of the devices being used, be it desktop, smartphone or tablet. so that it makes users comfortable and pleasant in accessing website pages because they have adjusted on several devices without the need to zoom the text.
Keywords: Bootstrap, Framework, Layout, Responsive, Website
References
[1] M. Y. Putra and S. Rofiah, “Sistem Informasi Jasa Laundry Pada Melaway Laundry Bekasi,†vol. 4, no. 1, pp. 55–64, 2019.
[2] APJII, “Laporan Survei Internet APJII 2019 – 2020,†Asos. Penyelenggara Jasa Internet Indones., vol. 2020, pp. 1–146, 2020, [Online]. Available: https://apjii.or.id/survei.
[3] S. S. Hilabi, “Rancang Bangun Situs Responsif Di Universitas Buana Perjuangan Karawang Dengan Menggunakan Metode Perpaduan Grid System Dan Css Media Query,†Techno Xplore J. Ilmu Komput. dan Teknol. Inf., vol. 2, no. 1, pp. 1–10, 2017, doi: 10.36805/technoxplore.v2i1.220.
[4] A. Zakir, “Rancang Bangun Responsive Web Layout Dengan Menggunakan Bootstrap Framework,†InfoTekJar (Jurnal Nas. Inform. dan Teknol. Jaringan), vol. 1, no. 1, pp. 7–10, 2016, doi: 10.30743/infotekjar.v1i1.31.
[5] M. F. Santoso, “Teknik Responsive Web Design Bootstrap 4 Serta Penerapannya Dalam Rancang Bangun Layout Web,†J. Pilar Nusa Mandiri, vol. 15, no. 1, pp. 61–68, 2019, doi: 10.33480/pilar.v15i1.101.
[6] C. Novianty, “Review Konsep Responsive Design Dengan Framework Materialize Pada Website,†InfoTekJar (Jurnal Nas. Inform. dan Teknol. Jaringan), vol. 2, no. 1, pp. 41–44, 2017, doi: 10.30743/infotekjar.v2i1.140.
[7] J. S. K. Songko and T. Wahyono, “Perancangan Aplikasi Pembelajaran Berbasis Responsive Web Desain Studi Kasus pada Universitas Tadulako Artikel Ilmiah Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen SatyaWacana Desember 2014 Perancangan Aplikasi Pembelaj,†no. 672009153, 2014.
[8] M. A. Rosid and R. B. Jakaria, “Implementasi Framework Twitter Bootstrap Dalam Perancangan Aplikasi Penerimaan Mahasiswa Baru Berbasis Web,†Kinetik, vol. 1, no. 3, p. 129, 2016, doi: 10.22219/kinetik.v1i3.121.
[9] Wijayanto, “Penerapan Teknologi Responsive Web Design menggunakan Library Bootstrap Untuk Pembuatan Aplikasi E-journal pada Yayasan Bina Darma Salatiga,†no. 672012055, 2016.
[10] H. Alatas, Responsive Web Design dengan PHP & Bootstrap. Yogyakarta: Loko Media, 2013.
[11] T. J. Riasinir and Widyasari, “Pemanfaatan Framework Bootstrap Dalam Merancang Website Responsif Untuk Toko D2 Adventure,†Enter, vol. 2, pp. 346–355, 2019.
[12] R. Kaban, “Design Website Responsive Dengan Boostrap,†2017, [Online]. Available: http://itgeek.id/download.
[13] A. Winarno, E., & Zaki, Desain Web Responsif dengan HTML5 dan CSS3. PT Elex Media Komputindo, 2015.
[2] APJII, “Laporan Survei Internet APJII 2019 – 2020,†Asos. Penyelenggara Jasa Internet Indones., vol. 2020, pp. 1–146, 2020, [Online]. Available: https://apjii.or.id/survei.
[3] S. S. Hilabi, “Rancang Bangun Situs Responsif Di Universitas Buana Perjuangan Karawang Dengan Menggunakan Metode Perpaduan Grid System Dan Css Media Query,†Techno Xplore J. Ilmu Komput. dan Teknol. Inf., vol. 2, no. 1, pp. 1–10, 2017, doi: 10.36805/technoxplore.v2i1.220.
[4] A. Zakir, “Rancang Bangun Responsive Web Layout Dengan Menggunakan Bootstrap Framework,†InfoTekJar (Jurnal Nas. Inform. dan Teknol. Jaringan), vol. 1, no. 1, pp. 7–10, 2016, doi: 10.30743/infotekjar.v1i1.31.
[5] M. F. Santoso, “Teknik Responsive Web Design Bootstrap 4 Serta Penerapannya Dalam Rancang Bangun Layout Web,†J. Pilar Nusa Mandiri, vol. 15, no. 1, pp. 61–68, 2019, doi: 10.33480/pilar.v15i1.101.
[6] C. Novianty, “Review Konsep Responsive Design Dengan Framework Materialize Pada Website,†InfoTekJar (Jurnal Nas. Inform. dan Teknol. Jaringan), vol. 2, no. 1, pp. 41–44, 2017, doi: 10.30743/infotekjar.v2i1.140.
[7] J. S. K. Songko and T. Wahyono, “Perancangan Aplikasi Pembelajaran Berbasis Responsive Web Desain Studi Kasus pada Universitas Tadulako Artikel Ilmiah Program Studi Teknik Informatika Fakultas Teknologi Informasi Universitas Kristen SatyaWacana Desember 2014 Perancangan Aplikasi Pembelaj,†no. 672009153, 2014.
[8] M. A. Rosid and R. B. Jakaria, “Implementasi Framework Twitter Bootstrap Dalam Perancangan Aplikasi Penerimaan Mahasiswa Baru Berbasis Web,†Kinetik, vol. 1, no. 3, p. 129, 2016, doi: 10.22219/kinetik.v1i3.121.
[9] Wijayanto, “Penerapan Teknologi Responsive Web Design menggunakan Library Bootstrap Untuk Pembuatan Aplikasi E-journal pada Yayasan Bina Darma Salatiga,†no. 672012055, 2016.
[10] H. Alatas, Responsive Web Design dengan PHP & Bootstrap. Yogyakarta: Loko Media, 2013.
[11] T. J. Riasinir and Widyasari, “Pemanfaatan Framework Bootstrap Dalam Merancang Website Responsif Untuk Toko D2 Adventure,†Enter, vol. 2, pp. 346–355, 2019.
[12] R. Kaban, “Design Website Responsive Dengan Boostrap,†2017, [Online]. Available: http://itgeek.id/download.
[13] A. Winarno, E., & Zaki, Desain Web Responsif dengan HTML5 dan CSS3. PT Elex Media Komputindo, 2015.
Published
2020-12-21
How to Cite
PUTRA, Mardi Yudhi.
Responsive Web Design Menggunakan Bootstrap Dalam Merancang Layout Website.
INFORMATION SYSTEM FOR EDUCATORS AND PROFESSIONALS : Journal of Information System, [S.l.], v. 5, n. 1, p. 61 - 70, dec. 2020.
ISSN 2548-3587.
Available at: <https://460290.0x60nl4us.asia/index.php/ISBI/article/view/1415>. Date accessed: 01 dec. 2024.
Section
Articles
