TEKNIK RESPONSIVE WEB DESIGN BOOTSTRAP 4 SERTA PENERAPANNYA DALAM RANCANG BANGUN LAYOUT WEB

Authors

  • Miftah Faroq Santoso Program Studi Ilmu Komputer STMIK Nusa Mandiri

DOI:

https://doi.org/10.33480/pilar.v15i1.101

Keywords:

CSS Media Query, Bootstrap CSS, Responsive Web Design

Abstract

Technology development makes influences the way to access the internet, which generally uses Desktop and Notebook computers, giving to other alternatives, namely accessing the internet using Tablets and Smartphones. The problem is that the majority of web layout designs cannot adjust the layout size automatically for these devices, because the resolution size of each device is different. To overcome the existing problems, we need a responsive web design method and technique in order to produce web layouts that can adjust the size of screen resolution automatically. The method used by applying the concept of Responsive Web Design (RWD), so that web layouts can adapt to screen size. Responsive web design techniques can be done in several ways, including using manual techniques using CSS Media Query and implementing CSS Frameworks such as Bootstrap CSS. The test results showed that the implementation of responsive web layouts using Bootstrap was very effective and efficient because web designers only needed the main library from Bootstrap, which was then combined by modifying according to the wishes of the user.

Downloads

Download data is not yet available.

References

Anugerah, S. (2013). Pemodelan Responsive Web Menggunakan Foundation Framework Dalam Pengembangan Perangkat Lunak, 2013(semnasIF), 230–236.

Baturay, M. H., & Birtane, M. (2013). Responsive Web Design: A New Type of Design for Web-based Instructional Content. Procedia - Social and Behavioral Sciences, 106, 2275–2279. https://doi.org/10.1016/j.sbspro.2013.12.259

Bryant, J., & Jones, M. (2012). Responsive Web Design. Pro HTML5 Performance. https://doi.org/10.1007/978-1-4302-4525-4_4

Hidayat, A., Utomo, V. G., & Djohan, H. A. (n.d.). PENERAPAN RESPONSIVE WEB DESIGN DALAM PERANCANGAN SISTEM MODUL ONLINE ADAPTIF, 44–48.

M. SOEKARNO PUTRA. (2017). Perancangan Desain Website Digital Library Universitas Bina Darma Dengan Menerapkan Responsive Web Design. Jurnal INFORMANIKA, 3(1), 29–33.

Winarno, E., & Zaki, A. (2015). Desain Web Responsif dengan HTML5 dan CSS3. PT Elex Media Komputindo.

Zakir, A. (2016). Rancang Bangun Responsive Web Layout Dengan Menggunakan Bootstrap Framework. InfoTekJar (Jurnal Nasional Informatika Dan Teknologi Jaringan), 1(1), 7–10. https://doi.org/10.30743/infotekjar.v1i1.31

Downloads

Published

2019-03-15

How to Cite

Santoso, M. F. (2019). TEKNIK RESPONSIVE WEB DESIGN BOOTSTRAP 4 SERTA PENERAPANNYA DALAM RANCANG BANGUN LAYOUT WEB. Jurnal Pilar Nusa Mandiri, 15(1), 61–68. https://doi.org/10.33480/pilar.v15i1.101

Issue

Vol. 15 No. 1 (2019): Pilar Nusa Mandiri : Journal of Computing and Information System Periode Maret 2019

Section

Articles

License

An author who publishes in the Pilar Nusa Mandiri: Journal of Computing and Information System agrees to the following terms:

  1. Author retains the copyright and grants the journal the right of first publication of the work simultaneously licensed under the Creative Commons Attribution-NonCommercial 4.0 License that allows others to share the work with an acknowledgement of the work's authorship and initial publication in this journal
  2. Author is able to enter into separate, additional contractual arrangements for the non-exclusive distribution of the journal's published version of the work (e.g., post it to an institutional repository or publish it in a book) with the acknowledgement of its initial publication in this journal.
  3. Author is permitted and encouraged to post his/her work online (e.g., in institutional repositories or on their website) prior to and during the submission process, as it can lead to productive exchanges, as well as earlier and greater citation of the published work (See The Effect of Open Access).
    Read more about the Creative Commons Attribution-NonCommercial 4.0 Licence here: https://creativecommons.org/licenses/by-nc/4.0/.