Desain Web Responsif

Desain Web Responsif

Membuat web yang dapat menyesuaikan atau beradaptasi pada berbagai ukuran layar, ketika web dibuka di perangkat mobile seperti Smartphone, Tablet atau di PC Desktop. Web yang responsif atau layout web yang dapat menyesuaikan ukuran layar (Responsive Web Design (RWD)). Tujuannya agar memberikan pengalaman berselancar yang optimal kepada pengunjung web. Ukuran huruf, gambar akan menyesuaikan dengan layar lebar dan resolusi monitor yang digunakan. Dengan teknik ini pengunjung dapat merasakan pengalaman yang sama, web yang dikunjungi dengan menggunakan perangkat seperti smartphone akan sama, seperti disaat dibuka pada PC-Desktop.

800px-Content-is-like-water-1980.jpg

Fluid Layout

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.”

John Allsopp, “A Dao of Web Design

Teknik yang akan kita coba tidak menggunakan framework CSS seperti Bootstrap dan Foundation atau framework lainnya. Disini kita akan mencari tahu pemahaman dan konsep yang paling mendasar, bagaimana membangun sebuah web yang responsif.

Dengan menggunakan ponsel cerdas (smartphone) berselancar didunia maya sudah menjadi hal yang biasa, membaca berita, mengirim email, foto kapanpun dan dimanapun. Tinggal membuka aplikasi perambah (browser), ketik alamat situs dan mulailah bersurfing ria. Masalahnya adalah situs yang kita kunjungi, apakah akan sama tampilannya ketika dibuka di perangkat dengan ukuran yang lebih kecil, (karena web yang dibuat pada umumnya memiliki ukuran yang statis yang mengacu pada ukuran komputer saja atau PC Desktop) atau tidak sesuai, sehingga akan akan menimbulkan pengalaman berselancar yang kurang optimal kepada pengguna.

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.

Sejarah layout web responsif pertama kali yang menggunakan fitur viewport browser adalah audi.com pada tahun 2001. Pada tahun 2010 Ethan Marcotte membuat sebuah tulisan di Majalah Online, yang menjelaskan secara detail konsep kerja responsif web.

Responsive Web Design – The Viewport
Cakupan area yang terlihat pada layout web oleh pengguna atau dikenal dengan istilah viewport. Sudah banyak artikel yang menjelaskan tentang meta tag viewport ini, dapat kalian kunjungi disini, sini dan disini.

Meta Tag Viewport memberitahukan kepada browser bahwa bagaimana halaman web tersebut akan ditampilkan, maksudnya memberikan instruksi saat browser merender halaman, berapa ukuran lebar halaman (viewport) yang akan ditampilkan nanti. Untuk lebih jelasnya perhatikan gambar berikut:

yellowweb_responsive3.jpg

Ukuran Standar Layar Monitor

Gambar diatas menunjukkan ukuran web yang ketika diakses menggunakan komputer desktop, artinya web berada pada posisi default atau ukuran standar.

Coba perhatikan pada gambar dibawah ini:

yellowweb_responsive1.jpg

Tanpa Meta Tag Viewport

KLIK DEMO TANPA VIEWPORT

Pada gambar diatas kita simulasikan pada browser (Firefox) kalian pilih menu pada hamburger icon (garis horizontal tiga buah) kemudian pilih Web Developer lalu pilih Responsive Design Mode atau tekan CTRL+SHIFT+M, disini disimulasikan menggunakan perangkat Samsung Galaxy S7, hasilnya jika diperhatikan tampak bilah horizontal (scroll bar) pada bagian bawah halaman. Tentunya hal ini akan mengurangi pengalaman berselancar yang kurang optimal. Karena kita tidak menyisipkan perintah Meta Tag Viewport pada halaman web tersebut. Coba bandingkan dengan gambar dibawah ini:

yellowweb_responsive2.jpg

Dengan Meta Tag Viewport

KLIK DEMO MENGGUNAKAN VIEWPORT

Pada gambar diatas, halaman terlihat penuh dan tidak ada lagi garis horizontal (scroll bar) yang berada pada bagian bawah layout.

Letakkan kode berikut pada setiap halaman, yang bertujuan untuk mengaktifkan viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Setiap browser memiliki ukuran viewport yang berbeda pada umumnya berada dikisaran 980px, semakin kecil layar yang digunakan, maka halaman akan dan selalu diperbesar. Sebagai perbandingan jika kalian menggunanakan smartphone dan tablet untuk mengakses sebuah halaman yang sama, maka di smartphone akan terlihat lebih besar jika dibandingkan dengan menggunakan tablet. Kalian bisa mencoba simulasikan web yang kalian buat disini responsivedesignsimulator.com

Device-width
Ini seperti memerintahkan kepada browser bahwa lebar ukuran yang paling tepat berada di sekian pixel, “Ukuran halaman web ini dapat menyesuaikan dan beradaptasi dengan segala macam ukuran perangkat”. Misalnya kita menuliskan tag seperti ini:

<meta name="viewport" content="width=320">

artinya pada perintah tag viewport diatas, ukuran yang paling baik ketika browser merender tampilan berada di 320px, cara ini tidak begitu efektif ketika kalian menginginkan halaman web yang responsif, bagaimana jika dibuka diukuran yang berbeda katakanlah di tablet, pasti tidak sesuai.

Gunakan perintah berikut, ini mungkin cara yang paling sesuai, mengapa demikian? Meta tag viewport akan secara otomatis menyesuaikan lebar ukuran segala jenis perangkat yang digunakan saat mengakses web.

<meta name="viewport" content="width=device-width">

Initial-scale
Initial-scale mengatur tingkat zoom level dengan memberikan inisial rasio 1, tanpa perintah ini fitur responsif akan tetap berjalan, namun ini akan berpengaruh ketika, mode layar perangkat kalian putar dari mode portrait ke landscape. Perhatikan gambar berikut:

rotate-bad.gif

rotate-bad.gif

dengan menuliskan kode seperti ini

<meta name="viewport" content="width=device-width">

maka hasilnya akan seperti pada gambar diatas.

Coba perhatikan pada gambar dibawah ini, kalian tambahkan kode seperti berikut:

<meta name="viewport" content="width=device-width, initial-scale=1">

hasilnya akan sedikit berbeda, saat kalian merotasi atau memutar perangkat.

rotate-good.gif

rotate-good

Maximum-scale
Ini bermaksud akan menset tingkat zoom berada di tingkat atau level maksimal. Pengguna tidak akan dapat melakukan zooming.

<maximum-scale=1>

Pada kode diatas pengguna tidak diijinkan untuk melakukan zoom halaman. Namun dalam beberapa kasus terkadang pengguna ingin melakukan zooming pada huruf atau gambar, hal ini berkaitan dengan atribut berikutnya.

User-scalable=no
Teman-teman pasti pernah menjumpai halaman web ketika dibuka pada layar yang ukuranya kecil, secara otomatis fitur pada smartphone yaitu pinch gesture (cubit) akan aktif, kalian bisa menggunakan kedua jari kalian untuk memperbesar tampilan halaman web (zoom).
Dengan memberikan atribut User-scalable=no, pengguna tidak diijinkan sama sekali untuk melakukan zooming halaman, baik itu zoom-in dan zoom-out. Hal ini berbeda disaat pengguna melakukan isian pada form, secara otomatis akan melakukan zoom pada form tersebut, dan setelah selesai mengisi form, maka akan kembali ke posisi semula (zoom-out).

Kombinasi yang mematikan

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Gunakan kode diatas untuk membuat halaman web yang responsif. Konsep viewport harus kalian kuasai, berikutnya kita akan kombinasikan dengan Grid View dan Media Query dari CSS 3.

Buat teman-teman yang ingin belajar bagaimana membuat web yang responsif sangat penting untuk menguasai meta tag viewport, pengaturan breakpoint, kemudian kalian coba kombinasikan dengan media-query yang ada di CSS 3 atau menggunakan Grid View.

[email protected]

Comments are closed.