Bagaimana Agar Tampilan Web Bagus di Semua Device?

edypang

Blog Dhezign.com | Sekarang ini makin banyak jenis perangkat untuk mengakses website. Ada desktop, laptop, tablet, smart phone. Perangkat-perangkat tersebut memiliki beragam ukuran layar (besar, sedang, kecil). Nah, bagaimana agar website tetap terlihat bagus dan bisa dinikmati dengan nyaman di berbagai perangkat tersebut?

Rabu, 15 Februari lalu, Surabaya Web Community (suWec) mengadakan meetup untuk membahas persoalan itu. Edy Pang (web Artist DheZign Online Solution) menjadi pembicara, membagi pengalamannya menggunakan teknik responsive web design untuk membuat website terlihat bagus di semua device sehingga mobile friendly.

Apa sih responsive web design itu? Edy Pang (@edypang), menerangkan, misalnya kita punya satu website, ketika devicenya mobile, tampilannya akan mengikuti screen mobile tersebut. Web itu juga akan tetap tampil baik (responsif), mengikuti ukuran layar, ketika dibuka di komputer dengan ukuran layar berbeda-beda. Jadi, web design yag responsif akan mengikuti resolusi device. Tampilan di semua device terlihat bagus dan pas dengan layarnya.

Responsive Web Design pertama kali dikenalkan Etha Marcotte (@beep). (Kebanyakan) dari awal, sebuah web itu memang dibuat untuk tampil di desktop. Namun, dengan perkembangan perangkat mengakses web yang beragam, menuntut web designer untuk membuat web yang tetap akan tampil bagus di semua perangkat. Nah, dengan teknik responsive web design, cukup dengan satu kali development, website akan tampil bagus di semua resolusi layar.

Edy kemudian bercerita, bahwa sejarah layout website itu dimulai dari fluid. Kemudian ke fixed. Dan sekarang ke arah responsif.

Secara teknis responsive web begini, biasanya approach awal yang dilakukan para web designer adalah membuat full website (desktop version), lalu meng-hidden elemen-elemen ketika diakses via mobile device. Tapi approach tadi tidak efektif, karena mobile device tetap harus menge-load semua elemen (yang akhirnya dihidden). Sampai pada akhirnya ganti approach bottom-up, desain untuk perangkat mobile dahulu, baru ditambah elemen lain untuk website desktop.

Framework yang bisa digunakan untuk responsive web antara lain: FlexSlider (slider). Itu dipakai ketika di web ada menampilkan slider. FitText (headline), digunakan untuk menyesuaikan headline / tulisan judul, FitVid (video) biasa dipakai untuk web yang mengutamakan tampilan video.

Pada akhirnya, Edy mengatakan, teknik responsive web design sebenarnya cukup sederhana. Namun, web designer harus mempu nyai feel serta dasar mendesain web yang baik, agar tampilan responsif dari web bisa terlihat bagus di semua device.

Loading Facebook Comments ...