Pro Kontra Desain Web Responsif

  • 4 minute read
Share
0 people shared the story
0
0
0
0

Responsive_Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_PhoneSebelum istilah Responsive Web Design (RWD) diperkenalkan, konsorsium internasional W3C telah memperkenalkan terlebih dahulu istilah “One Web” pada tahun 2005. Istilah “One Web” digunakan untuk menjelaskan bahwa sebuah halaman situsweb harus dapat berjalan dan menyesuaikan perangkat yang dimiliki pengguna dalam berbagai macam bentuk, seperti desktop, tablet, dan smartphone, yang sedang bertumbuh.

“One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices,” W3C.

Pertumbuhan perangkat bergerak berbasis layar sentuh memunculkan istilah RWD. Istilah tersebut dipaparkan secara gamblang oleh Ethan Marcotte di tahun 2010 dalam sebuah artikel situsweb “A List Apart”. Sesuai definisinya, RWD merupakan sebuah metode yang digunakan untuk menampilkan situsweb secara responsif. Dalam hal ini, istilah responsif berarti menyesuaikan ukuran layar perangkat. Tantangan menampilkan situsweb pada ukuran layar kecil yaitu cara memilah dan menempatkan konten informasi, yang dipadukan dengan pengaturan struktur navigasi situsweb.

“Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors),” Wikipedia (intisari dari berbagai sumber).

Mewabahnya berbagai varian ukuran smartphone dan tablet memaksa sebuah situsweb dapat ditampilkan secara ramah kepada pengguna. Konon istilah RWD mencapai puncak popularitasnya pada tahun 2013 lalu. Mashable menyebut tahun 2013 sebagai “the Year of Responsive Web Design “. Di tahun tersebut banyak para ahli desain dan pengembang situsweb berlomba-lomba menciptakan tampilan RWD. Sekaligus mengkritisi ide-ide RWD beserta celah-celahnya dalam membangun tampilan sebuah situsweb.

Perkembangan standar HTML5 dan CSS3 yang semakin populer juga telah memberikan peluang yang baik dalam mendukung eksistensi RWD. Hal ini ditandai dengan kemunculan framework frontend RWD yang semakin banyak dan diminati, seperti Bootstrap, Foundation, Modernizr, dan sebagainya. Platform-platform tersebut memanjakan pengembang dalam mendesain situsweb berbasis RWD melalui aturan-aturan penulisan kode yang sudah ditentukan. Akibatnya, seolah-olah semua desain situsweb modern harus responsif.

responsive5

Melalui RWD, pengembang situsweb cukup memanipulasi kode situsweb agar tampilan tersebut dapat secara otomatis mendeteksi ukuran perangkat. Ethan Marcotte dalam tulisannya menjelaskan bahwa RWD setidaknya mempunyai tiga bagian utama, sebagai berikut:

  • a fluid layout that uses a flexible grid, which in turn ensures that a website can scale to a browser’s full width;
  • images that work in a flexible context, whether fluid themselves or perhaps controlled through overflow mechanisms; and
  • media queries, which optimize the design for different viewing contexts and spot-fix bugs that occur at different resolution ranges.

Pengalaman pengguna smartphone berbeda dengan pengalaman pengguna desktop ketika membuka sebuah situsweb. Imbasnya tampilan halaman web pada perangkat mobile juga harus sesuai dengan karakter perangkat tersebut. Misalnya ukuran layar yang jauh lebih kecil pada smartphone akan memudahkan pengguna agar tidak perlu melakukan zoom ketika membaca sebuah halaman situsweb.


Kekurangan RWD adalah dalam hal page load times. Page load times merupakan waktu yang dibutuhkan untuk memuat sebuah halaman situsweb. Dalam konsep RWD, semua aset yang terkandung dalam situsweb tetap harus dimuat seluruhnya, tetapi dengan tampilan yang menyesuaikan ukuran layar smartphone. Akibatnya waktu yang dibutuhkan untuk memuat sebuah halaman web menjadi lama sehingga menyebabkan pengunjung cepat jenuh.

Di zaman sebelum metode RWD ini ramai dibicarakan, solusi untuk mengatasi masalah tersebut adalah dengan membangun dua tampilan situsweb yang berbeda, yaitu untuk versi mobile dan versi desktop. Untuk keperluan mobile web, pengembang dapat membuang konten-konten yang tidak perlu ditampilkan. Ini sesuai dengan saran Jakob Nielsen, seorang konsultan usability dan pakar HCI terkenal dari Universitas Kopenhagen, Denmark. Beliau pernah menyarankan demikian:

“Build a separate mobile site. With less content. Cut features that are not core to the mobile use case. The feature set should be much smaller for a mobile site than for a desktop site. A company’s full site typically includes PR information and investor relations sections… but this info should be eliminated from the mobile site.”

Ken Barber dalam tulisannya juga menyarankan pengembang situsweb agar mempertimbangkan pertanyaan-pertanyaan berikut sebelum mulai membangun RWD:

  • Do I have plans to change my website?
  • Do I publish a lot of content that’s updated very frequently?
  • Is my site more focused on delivering information versus complex functionality?

Jika ketiga pertanyaan tersebut dijawab “YA”, maka RWD tepat untuk diterapkan ke dalam desain situsweb.

responsive-Content-is-like-water-1980

Pro dan kontra RWD masih menjadi topik yang menarik untuk dikaji. Untuk mengatasi kelemahan RWD, pengembang situsweb setidaknya harus lebih berhati-hati, apakah perlu menggunakan RWD, membuat versi mobile, atau membiarkan tampilan apa adanya. Semua tergantung kondisi, fungsionalitas dan konteks informasi situsweb yang ingin ditampilkan. Dengan demikian, tujuan mengembangkan situsweb menjadi semakin jelas, yaitu: memberikan rasa nyaman kepada pengguna saat menjelajahi sebuah situsweb tanpa diganggu oleh hal-hal yang tidak diperlukan.[]

Referensi

Komentar
Share
Tweet
Share
Share
Related Tags

You May Also Like