MODUL PEMROGRAMAN WEB

Bab 10
Mengenal Responsive Web Design

10.1 Apa Itu Responsive Web

Mungkin kita sudah tidak asing lagi dengan halaman web seperti facebook.com,
twitter.com, detik.com dan sebagainya. Jika kita mengunjungi halaman – halaman tersebut
menggunakan perangkat mobile, maka kita akan didirect (dialihkan) menuju halaman web
versi mobile mereka (m.facebook.com, m.twitter.com, m.detik.com, dst) yang terpisah
dengan halaman fullsitenya (halaman versi desktop). (Mulhim, 2014)

Dari hal tersebut, sebagai seorang web programmer, maka kita harus membuat dua buah
tampilan website untuk versi fullsite dan mobile. Itu artinya kita harus kerja ekstra, bagi
pemilik website maka ini bearti biaya ekstra yang harus dikeluarkan, belum lagi kerepotan
dalam mengupdate konten dan maintenance website yang harus dilakukan pada kedua versi
website(fullsite dan mobile).

Dengan berkembangnya teknologi, khususnya dalam pemrograman web, maka muncul

sebuah gagasan baru yaitu bagaimana caranya membuat sebuah halaman web yang dapat
menyesuaikan tampilannya/ layoutnya secara otomatis dengan ukuran layar perangkat
ataupun jendela web browser. Ketika ukuran layar perangkat kecil atau jendela web browser
dikecilkan beberapa elemen web akan menyesuaikan baik dari segi ukuran maupun posisi,
misal pada menu navigasi yang berada diatas dan sidebar yang berada disebelah kanan
akan berpindah kebawah. Lalu gambar-gambar akan ikut mengecil seiring mengecilnya
layar perangkat ataupun jendela web browser. Hal demikian diartikan bahwa halaman web
tersebut sudah menerapkan teknik Responsive Web Design (RWD).

Responsive Web Design (RWD) semakin popular sekitar pertengahan 2010 lalu, ini
berawal dari sebuah artikel Desain Web Responsif yang ditulis oleh Ethan Marcotte
pada website alistapart.com. Pada artikel tersebut mengusulkan bagaimana sebuah desain
web bisa menyesuaikan sendiri baik dari segi ukuran maupun komponen website pada
perangkat mobile dan Desktop secara fleksibel tanpa harus membuat desain yang berbeda
untuk perangkat berbeda dengan konten isinya sama. Dari situ maka lahirlah sebuah konsep
Responsive Web Design yang lebih fleksibel dan bisa beradaptasi hampir disemua layar
berbeda.

66
MODUL PEMROGRAMAN WEB

Pengertian Responsive Web Design menurut http://www.wikipedia.org/ yang dalam

bahasa indonesianya:

“Responsive Web Desain adalah sebuah desain web/situs yang dibuat untuk
memberikan pengalaman menjelajah web secara optimal, mudah dibaca dan
bernavigasi, dengan minimum resizing, panning dan scrolling diberbagai
perangkat (desktop dan mobile).”

Secara sederhana teknik Responsive Web Design adalah membuat website dapat
dibuka melalui media apa saja baik desktop maupun mobile tanpa kehilangan konten atau
isi dari website tersebut dan tetap mudah dalam hal navigasi dan membaca isi dari web
tersebut.

Gambar 10. 1 Beberapa ukuran layar yang ada (sumber gambar:

http://line25.com)

Responsive Web Design sangat popular ditahun 2013 dan bisa dipastikan terus berlanjut,
mengingat semakin banyak orang yang mengakses internet menggunakan perangkat mobile
yang memiliki ukuran layar serta resolusi yang berbeda satu sama lain. Berikut ini adalah
gambaran seperti apa sebuah website yang menerapkan teknik Responsive Web Design.

67
MODUL PEMROGRAMAN WEB

1. http://www.okezone.com/ Desktop (Widescreen)

Tablet (Potrait) Smartphone (Potrait)

Gambar 10. 2 Tampilan Website Okezone

68
MODUL PEMROGRAMAN WEB

2. http://stephencaver.com/ Desktop (Widescreen)

Tablet (Potrait) Smartphone (Potrait)

Gambar 1. 3 Tampilan Website stephencaver

69
MODUL PEMROGRAMAN WEB

3. http://teixido.co/

Gambar 10. 4 Tampilan Website Teixido

4. http://cognition.happycog.com/

Gambar 10. 5 Tampilan Website cognition

70
MODUL PEMROGRAMAN WEB

Dan masih banyak website lainnya yang menggunakan Responsive Web Design seperti:

 http://seesparkbox.com/
 http://foodsense.is/
 http://www.bostonglobe.com/
 http://teegallery.com/
 http://www.about.com/
 https://yiibu.com/

10.2 Perbedaan Desain Web Static, liquid, Adaptive dan Responsive

Membuat sebuah desain web yang baik dan menarik harus menjadi prioritas mutlak.
Terlebih lagi dengan perkembangan sekarang, desainer web dituntut agar dapat membuat
desain web yang dapat berjalan diberbagai perangkat dan web browser.

Gambar 10. 6 Desain web antar device

Mari sejenak kita memperhatikan apa sih sebenarnya perbedaan diantara desain web static,
liquid, adaptive dan responsive ? Mana yang harus dipilih seandainya saya akan mendesain
sebuah web ? Cobalah untuk me-resize (mengecilkan & membesarkan) tampilan web
browser agar Anda dapat melihat perbedaan setiap desainnya.

http://www.liquidapsive.co
m/

71
MODUL PEMROGRAMAN WEB

1. Desain Web Static

Desain web static (statis) atau juga disebut fixed merupakan teknik desain web tradisional.
Desain web ini memiliki desain yang sama di semua perangkat baik di desktop, ponsel
ataupun tablet. Umumnya ketika proses pembuatan desain, desainer akan fokus pada 1
perangkat (resolusi saja) misal 1024 px. Ketika membuka desain web ini di perangkat
dengan resolusi yang kecil seperti ponsel misalnya, maka Anda membutuhkan scroll
horizontal untuk dapat melihat keseluruhan desain web.

Kelebihan :

- Ketika proses pembuatan, waktu yang dibutuhkan lebih cepat dan biasanya juga
lebih murah
- Dalam proses desain, persiapan dan kebutuhan yang diperlukan sangat kecil

Kekurangan :

- Pengunjung akan memiliki kesan yang buruk, terlebih jika mereka

menggunakan perangkat dengan resolusi yang kecil (ponsel)
- Tidak memiliki desain optional pada ukuran layar yang berbeda
- Harus membuat situs terpisah untuk pengguna ponsel

2. Desain Web Liquid

Desain web liquid (atau fluid) merupakan desain web yang menggunakan perhitungan
persentase (%) dalam implementasinya. Desain ini bisa dikatakan “sedikit lebih baik”
dibandingkan desain web static terlebih untuk membuatnya juga sangat mudah. Namun
perlu diingat, hampir bisa dipastikan jika web ini dibuka diperangkat ponsel akan terlihat
sangat buruk.

Kelebihan :

- Lebih fleksibel dari desain web static

- Baik digunakan untuk target pengunjung yang menggunakan perangkat
komputer desktop

72
MODUL PEMROGRAMAN WEB

Kekurangan :

- Hasil desain web akan terlihat buruk di layar perangkat ponsel dan tablet yang kecil
- Tampilan konten web terlihat tidak konsisten

3. Desain Web Adaptive

Desain web adaptive merupakan desain web yang memiliki layout yang berbeda untuk
resolusi yang berbeda. Desain web ini dibuat dengan target resolusi tertentu misal untuk
perangkat ponsel, tablet dan desktop. Teknik desain web adaptive bisa dikatakan hampir
sama dengan teknik desain web static, dimana desain web dibuat dengan teknik static
namun memiliki beragam desain untuk perangkat tertentu.

Kelebihan :

- Desain web tersedia pada perangkat tertentu

- Lebih memanjakan pengunjung karena desain web tersedia dalam beberapa
perangkat

Kekurangan :

- Dibutuhkan waktu yang relatif lama dalam proses pembuatannya.

- Desain web hanya ter-target pada perangkat tertentu, sehingga akan terlihat
tidak optimal pada perangkat dengan resolusi yang unik

4. Desain Web Responsive

Desain web responsive ialah gabungan 2 desain web utama yaitu desain web liquid dan
responsive. Desain web responsive ialah pilihan desain web terbaik untuk saat ini. Dengan
desain web responsive, secara otomatis tampilan konten akan menyesuaikan diri
(beradaptasi) dengan berbagai resolusi perangkat. Perlu diingat, desain web responsive
tidak dibuat hanya untuk resolusi tertentu melainkan desain dapat menyesuaikan diri pada
berbagai perangkat dan resolusi.

73
MODUL PEMROGRAMAN WEB

Kelebihan :
- Sangat baik, dikarenakan desain web tersedia untuk semua perangkat & resolusi
- Pengelolaan web akan sangat mudah terutama dalam hal desain

Kekurangan :
- Membutuhkan perencanaan dan persiapan yang lebih (matang) pada tahap desain
- Membutuhkan waktu yang lama dalam proses pembuatannya

Kesimpulan

Dengan mengetahui perbedaan, kelebihan serta kekurangan setiap desain, nantinya Anda
dapat menentukan pilihan mana yang terbaik sesuai dengan kebutuhan. Pemilihan desain
yang tepat akan sangat berbengaruh ketika proses pembuatan dan pengembangan sebuah
desain web nantinya. Dengan harapan, setiap desain yang dihasilkan dapat memberikan
kemudahan serta nilai lebih kepada pengunjung.

Gambar 10. 7 Web Responsive Design

74
MODUL PEMROGRAMAN WEB

10.3 Framework untuk Responsive Web Design

Jika kita ingin membuat sebuah desain web yang responsive dengan cara yang cepat dan
instant tanpa direpotkan menulis code dari awal, maka diperlukan kerangka kerja
(framework) yang dapat digunakan untuk proyek desain web responsive diantaranya:

1. Bootstrap

Bootstrap adalah salah satu framework untuk mengembangkan website dengan tampilan
yang responsive secara cepat dan mudah tanpa perlu membuat code yang rumit dan
panjang.
Bootstrap juga dikenal dengan Twitter Bootstrap bisa diunduh di
http://getbootstrap.com/

Gambar 10. 8 Halaman Dokumentasi bootstrap

2. Foundation

Selain menggunakan Bootstrap, ada alternative lain sebagai pilihan dalam mendesain web
responsive secara cepat yaitu foundation, dengan menggunakan framework ini kita dapat
dengan mudah membuat website dengan kerangka yang sudah disediakan dan
konsisten diberbagai browser. Bisa diunduh di
http://foundation.zurb.com/develop/download.html

Gambar 10. 9 Framework Foundation

75
MODUL PEMROGRAMAN WEB

3. Metro UI

Metro UI merupakan sebuah framework untuk mendesain tampilan web yang

responsive secara cepat dan mudah. Metro UI mempunyai tampilan seperti Windows 8.
Bisa diunduh di

http://metroui.org.ua/

Gambar 10. 10 Framework Metro UI

76
MODUL PEMROGRAMAN WEB

Bab 11
Mendesain web dengan bootstrap
11.1 Apa itu Bootstrap ?

Bootstrap merupakan sebuah framework yang dikembangkan oleh tim Twitter yang
berfungsi sebagai kerangka kerja untuk memudahkan dan mempercepat dalam membuat
tampilan website yang responsive dan terstandar.

Bootstrap menyediakan komponen-komponen antarmuka siap pakai yang telah

dirancang sedemikian rupa untuk digunakan dalam membuat tampilan halaman website
responsive. Bootstrap juga menyediakan sarana untuk membuat layout halaman web
dengan mudah dan rapi yaitu menggunakan grid system 12 kolom.

Bootstrap dibangun dengan teknologi HTML, CSS dan Javascript yang dapat
membuat layout halaman website, table, tombol, form, navigasi, dan komponen lainnya
dalam sebuah website hanya dengan memanggil fungsi class dalam berkas HTML.

11.2 Fitur Bootstrap

Bootstrap sudah mendukung kompatibilitas untuk hamper semua browser terbaru saat
ini. Sejak versi 2.0 bootstrap juga sudah mendukung untuk desain responsive, ini berarti
tata letak komponen dalam halaman web dapat menyesuaikan secara dinamis dengan
mempertimbangkan karakteristik dari perangkat yang digunakan (desktop maupun
mobile) untuk informasi kompatibilitas browser yang didukung oleh bootstrap dapat
dilihat pada gambar 11.1 berikut ini

Gambar 11. 1 Browser Support

77
MODUL PEMROGRAMAN WEB

11.3 Komponen Bootstrap

Bootstrap memiliki banyak komponen-komponen yang dapat digunakan dalam membuat

sebuah tampilan halaman web yang responsive. Bootstrap memiliki 3 jenis komponen, yaitu
CSS Component, Base Component dan Javascript Component.

11.3.1 CSS Component

Terdapat beberapa komponen diantaranya:

Grid System

Grid System menggunakan system grid 12 kolom yang akan memudahkan dalam
melayout sebuah halaman web, berikut contoh grid system bootstrap.

Gambar 11. 2 Grid System

Typography

Typography akan membuat tampilan teks pada halaman web menjadi rapi, mudah
dibaca, dan nyaman dilihat dengan menggunakan font dan ukuran huruf tertentu

78
MODUL PEMROGRAMAN WEB

Gambar 11. 3 Typography

Tables

Tampilan komponen Tabel yang memiliki style menarik sehingga

data yang ditampilkan lebih rapi.

Gambar 11. 4 Table

79
MODUL PEMROGRAMAN WEB

Forms

Untuk membuat formulir inputan pada halaman web.

Gambar 11. 5 Forms

Buttons

Komponen buttons yang disediakan memiliki banyak tema warna yang menarik.

Gambar 11. 6 Buttons

80
MODUL PEMROGRAMAN WEB

Images

Komponen images dapat disesuaikan dengan beberapa jenis style

Gambar 11. 7 Images

11.3.2 Base Component

Membuat tampilan halaman website tampak menarik dengan tampilan yang khas
ala twitter. Komponen-komponen tersebut antara lain adalah sebagai berikut:

Glyphicons

Icon-icon yang dapat digunakan untuk mempercantik tampilan

Gambar 11. 8 Glyphicons

81
MODUL PEMROGRAMAN WEB

Dropdown

Dengan komponen Dropdown yang disediakan akan memudahkan

jika ingin membuat sebuah menu dropdown.

Gambar 11. 9 Dropdown

Navbar

Navbar merupakan salah satu komponen yang dapat digunakan sebagai

header navigasi pada halaman web.

Gambar 11. 10 Navbar

82
MODUL PEMROGRAMAN WEB

Pagination

Tampilan navigasi halaman yang sederhana.

Gambar 11. 11 Pagination

Jumbotron

Sebuah komponen yang ringan, fleksibel yang dapat digunakan untuk

menampilkan content penting dari website.

Gambar 11. 12 Jumbotron

83
MODUL PEMROGRAMAN WEB

Thumbnails

Thumbnails Bootstrap dirancang untuk menampilkan gambar yang terkait

dengan link.

Gambar 11. 13 Thumbnails

Alerts

Komponen Alerts dirancang untuk menampilkan tanda atau peringatan

tertentu pada halaman web dengan banyak pilihan tema warna.

Gambar 11. 14 Alerts

84
MODUL PEMROGRAMAN WEB

Progress Bar

Komponen Progress Bar dapat digunakan untuk menampilkan kemajuan proses

secara up to date

Gambar 2. 15 Progress Bar

List Group

List Group merupakan komponen yang fleksibel untuk menampilkan daftar dengan
konten yang dapat disesuaikan.

Gambar 11. 16 List Group

Panels

Panels untuk menampilkan daya atau konten tertentu dalam sebuah kotak.

Gambar 11. 17 Panels

85
MODUL PEMROGRAMAN WEB

11.3.3 Javascript Component

Tampilan dengan efek-efek dan animasi yang sangat menarik,

berikut beberapa komponen javascript Bootsatrap

Modal

Menampilkan dialog propmpt

Gambar 11. 18 Modal

Tabs

Menampilkan konten web dalam beberapa tab

Gambar 11. 19 Tab

Tooltip

Menampilkan informasi tambahan pada elemen tertentu misal pada sebuah teks

86
MODUL PEMROGRAMAN WEB

Gambar 11. 20 Tooltip

Popover

Menampilkan informasi tambahan dengan menampilkan popup

Gambar 11. 21 Popover

Alert

Untuk menampilkan pesan kesalahan

Gambar 11. 22 Alert

87
Collapse

Memiliki tampilan yang fleksibel, content didalamnya dapat dibuka dan ditutup

Gambar 11. 23 Collapse

Corousel

Untuk menampilkan slideshow image atau gambar yang dapat berjalan otomatis

Gambar 11. 24 Corouse

88