Bagi teman-teman yang berkecimpung di dunia web design, mungkin pernah mendengar mengenai “Adaptive Web Design (AWD)” dan “Responsive Web Design (RWD)“. Keduanya sama-sama merupakan konsep sekaligus teknologi baru dalam pengembangan web, khususnya yang berkaitan dengan frontend atau design interface.
Kedua konsep tersebut sebetulnya sudah ada sejak lama, mungkin sebelum tahun 2009, namun baru populer sekitar 2 tahun belakangan ini.
Nah sebetulnya seperti apakah konsep tersebut? Bagaimana cara kerjanya, dan apakah perbedaan diantara kedua konsep tersebut.
Konsep Adaptive dan Responsive
Konsep adaptive dan responsive sebetulnya hampir sama dan memang lahir dari kebutuhan user akan tampilan web yang lebih baik “di semua device”.
Akhir-akhir ini memang device mobile menjadi sorotan, karena efisiensi dan mobilitas yang didapatkan. Banyak sekali mobile device yang beredar, seperti handphone, baik itu android phone, iphone, blackberry dan lain sebagainya. Selain itu juga ada tablet seperti mini tablet, ipad, dan lain sebagainya.
Sebelum mobile device menjadi sorotan, tampilan web tidaklah responsive ataupun adaptive. Ketika teman-teman membuka suatu halaman web di komputer ataupun di mobile device, maka tampilan yang muncul akan sama persis, bedanya tampilan di mobile device akan lebih kecil sehingga sulit untuk dibaca dan sulit untuk mengontrol navigasi di mobile device. Hal itulah yang kemudian menyebabkan munculnya ide sekaligus konsep baru dalam web design, yaitu responsive dan adaptive web design.
Kedua konsep ini sama-sama mengatasi masalah diatas, ketika suatu website dibuka melalui mobile device, maka tampilan akan otomatis menyesuaikan dengan ukuran layar device. Semisal ketika dibuka di komputer tampilan sangatlah lebar, maka jika dibuka di iphone, tampilan akan menyesuaikan dengan lebar iphone, tanpa merusak layout yang ada.
Perbedaan Responsive dan Adaptive
Setelah mengetahui apa itu konsep responsive dan adaptive, sekarang kita perlu tahu juga apakah perbedaannya.
Responsive Web Design
Dari istilah yang dipakai responsive berati “bersifat selalu merespon” dalam hal ini merespon ukuran layar dari device. Sifat dari responsive adalah fluid atau flexible, artinya tampilan website akan menyesuaikan dengan ukuran layar.
Lalu elemen apa saja yang secara otomatis akan menyesuaikan dengan ukuran layar?
Jawabannya adalah.. “semua elemen”, baik itu lebar website, lebar menu, ukuran font, ukuran image, bahkan ukuran video, akan secara otomatis menyesuaikan dengan ukuran layar.
Lalu secara teknikal bagaimana konsep ini dapat bekerja..?
Jawabannya adalah.. secara sederhana konsep ini menggunakan ukuran persentase untuk semua elemennya, jadi lebar website, lebar image, lebar video, lebar menu, dan semua elemennya di-set dalam ukuran persentase, sehingga ketika ukuran layar berubah, maka secara otomatis elemen-elemen akan menyesuaikan ukurannya sesuai dengan lebar layar.
Adaptive Web Design
Adaptive web design berarti kemampuan suatu website dalam hal ini tampilan website untuk beradaptasi dengan ukuran layar.
Lho.. terus apa bedanya dengan responsive.. bukankah responsive juga bisa beradaptasi dengan ukuran layar…?
Iya betul sekali.. memang keduanya sama-sama bisa menyesuaikan dengan ukuran layar, namun dalam hal ini adaptive lebih luas cakupannya, bukan hanya bisa menyesuaikan lebar website dan elemen-elemennya, namun dengan konsep adaptive, tampilan website dapat menjadi berbeda sama sekali antara tampilan di komputer dan di device mobile.
Dari pengertian istilah yang digunakan sudah sangat terlihat perbedaan antara adaptive dan responsive. Responsive hanya merespon terhadap ukuran layar, sedangkan adaptive lebih dari itu, yaitu beradaptasi dengan ukuran layar.
Istilah adaptasi berarti kemampuan organisme dalam mengatasi tekanan lingkungan, tujuannya adalah untuk bertahan hidup, ketika suatu organisme beradaptasi, dia bukan hanya merespon terhadap tekanan lingkungan dengan merubah perilakunya, namun juga dapat merubah fungsi-fungsi tubuhnya, sehingga benar-benar dapat hidup di lingkungan baru.
Sama halnya dengan website yang adaptive, ketika adaptive website dibuka di mobile device, maka tampilannya bukan hanya merespon dengan menyesuaikan ukuran layar, namun elemen-elemennya dapat beradaptasi, sebagai contoh semisal suatu website dibuka di komputer, tampilan menu akan berjejer horizontal, namun ketika dibuka di mobile device, tampilan menu akan berubah menjadi dropdown, seperti contoh berikut.
Tampilan menu website di komputer
Tampilan menu website adaptive
Nah dapat dilihat dari contoh diatas bahwa website adaptive benar-benar menyesuaikan tampilan agar maksimal, dan user dapat merasakan sensasi maksimal ketika berkelana di website kita lewat device yang berbeda-beda.
Kesimpulan
Konsep-konsep baru di dunia web design mulai bermunculan salah satunya adalah kedua konsep diatas, yaitu adaptive dan responsive web design. Keduanya memiliki cara pandang yang sama, yaitu menyesuaikan tampilan website sesuai dengan ukuran layar device. Responsive akan menyesuaikan ukuran elemen-elemen pada website sesuai dengan ukuran layar, baik itu lebar website, lebar menu, lebar image, bahkan lebar video. Sedangkan adaptive, bukan sekedar menyesuaikan ukuran elemen sesuai dengan ukuran device, namun juga merubah elemen-elemen yang ada sesuai dengan kebutuhan device agar sensasi menjelajahi website dapat secara maksimal dirasakan oleh user.
The post Adaptive dan Responsive Web Design appeared first on Stoepy.