Responsive Web Design Menggunakan Bootstrap Dalam Merancang Layout Website - Mardi Yudhi Putra (Lembaga Penelitian dan Pengabdian Masyarakat Universitas Bina Insani, 2020)
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