ilustrasi responsive web design

Mengenal Responsive Web Design menjadi sebuah kewajiban oleh seorang Web Designer saat ini. Karena saat ini banyak perangkat yang sudah dapat berinternet dan mengakses informasi melalui website ataupun aplikasi.

Web Designer dituntut untuk mempunyai keahlian dalam membuat tampilan website menjadi responsive agar dapat dilihat dari berbagai macam layar perangkat.

Jadi Responsive Web Design adalah sebuah metode penggunaan HTML dan CSS yang secara otomatis dapat mengubah ukuran, menyembunyikan, mengecilkan, atau memperbesar sebuah website agar terlihat bagus disemua perangkat (ponsel, tablet, dan komputer).

Sejarah Berkembangnya Responsive Design

Sekitar tahun 2013, terjadi peningkatan pengguna Mobile Device dengan munculnya beragam perangkat cerdas yang sering disebut Smartphone dan Tablet PC.

Koneksi internet menjadi sebuah kebutuhan masyarakat modern, dengan menggunakan Smartphone dan koneksi internet setiap orang bisa mendapatkan informasi melalui website.

Namun tidak semua website bisa berjalan dengan baik pada Smartphone dan Tablet PC, terkadang beberapa fitur tidak bisa beroperasi.

Kendala inilah yang membuat para web desainer berpikir menggunakan cara baru dalam menyampaikan informasi.

Dengan teknologi baru HTML dan CSS, website besar seperti Google, Amazon, Facebook, BBC, dan CNN mulai mengadaptasi metode tersebut.

Teknologi ini yang membuat sebuah halaman website dapat diakses dari perangkat apapun tanpa menghilangkan fungsi-fungsinya.

Namun dengan perkembangan zaman dan teknologi, saat ini sudah ada Framework yang memiliki kumpulan script/syntax dalam mendesain tampilan website menjadi responsif dengan cepat dan mudah.

Berikut adalah beberapa Framework yang akan membantu Anda dalam mendesain website menjadi lebih cepat dan mudah :

  1. Bootstrap.
  2. Foundation.
  3. Pure.
  4. Skeleton.
  5. Montage.
  6. Siimple.
  7. Gumby.
  8. Semantic UI.
  9. Cascade.

Prinsip Mengenal Responsive Web Design

Untuk memiliki desain web yang responsif, pastikan website Anda memiliki prinsip-prinsip berikut :

1. Fluid Grid

Maksud dari fluid grid adalah sebuah grid atau garis-garis batas yang menentukan letak suatu komponen dalam desain, namun dapat berubah-ubah sesuai dengan ukuran tampilannya.

Hal ini karena satuan yang digunakan adalah satuan yang relatif seperti persen, atau em (satuan dipakai dalam tipografi).

2. Media Queries

Adanya media query memungkinkan desainmu lebih sesuai dengan berbagai ukuran layar.

Media query memungkinkan website untuk dapat mengambil data mengenai ukuran layar yang digunakan untuk menampilkan konten.

3. Responsive Media

Prinsip selanjutnya yang harus diperhatikan dalam membuat responsive web design adalah media yang responsif.

Seperti pada poin pertama, yaitu kamu harus memastikan bahwa media seperti foto dan video dapat ditampilkan dengan baik di berbagai ukuran layar.

Oleh karenanya, dibandingkan dengan menggunakan ukuran tampilan berupa pixel, maka pastikan ukuran dari media yang ditampilkan dalam bentuk persentase.

Sangat disarankan untuk memberikan pengukuran dari media sebesar 100%, agar media yang ditampilkan dalam tampilan yang maksimal.

Keuntungan Responsive Web Design

  • Keuntungannya website terlihat rapih pada beberapa perangkat, ini membuat pengguna perangkat merasa nyaman dalam mencari informasi pada website tersebut.
  • Hemat biaya develop, tidak perlu develop ulang untuk tampilan pada perangkat yang berbeda.
  • Mudah dalam maintenance, dikarenakan website yang dibangun hanya menggunakan satu sumber.
  • Tampilan sesuai dengan website asli, tidak ada konten yang lupa atau hilang pada tampilan di perangkat lainnya.

Baca juga : Mengenal Apa itu Google Analytics?