Tutorial Desain Web Responsif dengan Bootstrap - Bagian 1 - Pengantar Web Responsif

Senin, 24 April 2017 14:05:01 ,Oleh ,Dilihat : 2.444 x

Diasuh oleh Dr. Ir. Agus Wibowo, M.Kom, M.Si, M.M

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 (smart phone, laptop) maupun komputer PC. 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 layout (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 PC.


        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 berfikir 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.

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

Bootstap (Twitter Bootstrap) merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Dengan bootstrap akan membantu seorang desainer web untuk membuat sebuah tampilan halaman website sehingga dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Contoh halaman front end (terlihat oleh pengunjung) dari website yang dibuat menggunakan Bootstrap :

Twitter Bootstrap dibangun dengan teknologi HTML 5 dan CSS 3 yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.

Contoh halaman back end (hanya dapat diakses oleh administrator) dari website yang dibuat menggunakan Bootstrap :


Bootstrap cocok digunakan untuk desainer web pemula dan menegah karena tidak perlu lagi mendefinisikan CSS serta JQuery, cukup dengan memanggil kelas serta fungsi yang sudah disediakan oleh framework bootstrap.

Untuk mendesain web responsif menggunakan bootstrap (HTML 5 dan CSS 3), berikut persiapan yang harus dilakukan :

1. Mengunduh file distribusi framework bootstraap dari alamat :

http://getbootstrap.com/


2. Mengunduh file Library JQuery dari alamat :

http://jquery.com/download/


3. Mengunduh editor web seperti Adobe Dreamweaver CC (gunakan versi portable agar lebih mudah di pakai, minimal versi CC karena sudah mendukung Bootstrap. Versi CS6 dan dibawahnya belum mendukung).  Dreamweaver CC ini hanya akan berjalan pada Windows 7, 8, 8.1 dan Windows 10. Tidak mendukung Windows XP.


4. Mengunduh web browser Mozilla Firefox ( sudah memiliki fitur developer mode untuk pengujian web responsif)

5. Mengunduh emulator web server seperti XAMPP, WAMP untuk menjalankan halaman web :

https://www.apachefriends.org/index.html


TOP