Membandingkan Dua Pendekatan Berbeda ke Desain Web Multi-Perangkat
Desain web yang responsif dan adaptif adalah kedua metode untuk membuat situs web ramah multi-perangkat yang bekerja dengan baik pada berbagai ukuran layar. Meskipun desain web responsif direkomendasikan oleh Google dan lebih populer dari kedua pendekatan tersebut, kedua metode ini untuk desain web multi-perangkat memiliki kekuatan dan kelemahannya.
Mari kita lihat perbedaan antara desain web responsif dan adaptif, secara khusus berfokus pada bidang-bidang utama ini:
- Kemudahan pengembangan
- Tingkat kontrol yang Anda miliki atas desain
- Luasnya dukungan perangkat / layar
- Cara ramah masa depan solusinya adalah
- Kecepatan unduhan dan kinerja situs secara keseluruhan
Beberapa Definisi
Sebelum kita masuk ke perbandingan sisi-sisi kita dari desain web responsif dan adaptif, mari kita luangkan waktu untuk melihat definisi tingkat tinggi dari dua pendekatan ini.
Situs web responsif memiliki tata letak cairan yang berubah dan beradaptasi terlepas dari ukuran layar yang digunakan. Kueri media memungkinkan situs yang responsif bahkan mengubah "on the fly" jika peramban diubah ukurannya.
Desain adaptif menggunakan ukuran tetap berdasarkan breakpoint yang ditentukan sebelumnya untuk memberikan versi tata letak yang paling sesuai untuk ukuran layar yang dideteksi ketika halaman pertama kali dimuat.
Dengan definisi yang luas itu, mari kita beralih ke area fokus utama kita.
Kemudahan Pembangunan
Perbedaan paling signifikan antara desain web responsif dan adaptif adalah cara solusi ini diterapkan ke situs web. Karena desain responsif menciptakan tata letak yang sepenuhnya cair, paling baik digunakan pada proyek di mana Anda mendesain ulang situs dari bawah ke atas . Mencoba untuk retrofit kode situs web yang ada untuk menjadi responsif sering merupakan urusan yang melelahkan karena Anda tidak memiliki tingkat kontrol yang akan Anda miliki jika Anda mengembangkan kode tersebut dari awal dan mengambil desain responsif ke dalam akun untuk tahap awal proses tersebut. . Ini berarti bahwa ketika Anda retrofit situs menjadi responsif, Anda dipaksa melakukan kompromi agar tetap berada di basis kode yang ada.
Jika Anda bekerja dengan situs web dengan lebar tetap yang ada, pendekatan adaptif berarti Anda dapat meninggalkan ukuran yang dirancang situs itu secara utuh dan menambahkan tambahan titik adaptasi tambahan sesuai kebutuhan. Dalam beberapa kasus, jika anggaran proyek kecil, dan jika itu hanya akan mengakomodasi sejumlah kecil pekerjaan pengembangan, Anda dapat memilih untuk hanya menambahkan jeda adaptif baru untuk ukuran layar / seluler yang lebih kecil. Ini berarti bahwa Anda akan mengizinkan layar yang lebih besar untuk semua menggunakan tata letak yang sama - mungkin versi 960 breakpoint yang adalah situs yang kemungkinan dirancang untuknya.
Keuntungan pendekatan adaptif adalah Anda dapat memanfaatkan secara lebih baik kode situs yang ada, tetapi salah satu kelemahannya adalah Anda membuat tata letak tata letak yang berbeda untuk setiap breakpoint yang Anda pilih untuk didukung. Ini yang akan berdampak pada beban kerja yang diperlukan untuk mengembangkan dan memelihara solusi ini dalam jangka panjang.
Kontrol Desain
Salah satu kekuatan dari situs web responsif adalah bahwa fluiditas mereka memungkinkan mereka untuk menyesuaikan dan mendukung semua ukuran layar dibandingkan dengan hanya breakpoint yang ditentukan sebelumnya yang ditentukan dalam pendekatan adaptif. Kenyataannya, bagaimanapun, adalah bahwa situs responsif mungkin terlihat bagus pada ukuran layar kunci tertentu (biasanya ukuran yang sesuai dengan perangkat populer yang tersedia di pasar), tetapi desain visual sering terurai di antara resolusi populer tersebut.
Misalnya, situs mungkin terlihat bagus pada tata letak layar lebar 1400 piksel, ukuran layar pertengahan 960 piksel, dan layar kecil terlihat pada 480 piksel, tetapi bagaimana dengan keadaan di antara ukuran-ukuran ini? Sebagai seorang desainer, Anda memiliki sedikit kendali atas ukuran di antara ini dan tampilan visual halaman pada ukuran tersebut sering kurang ideal.
Dengan situs web yang adaptif, Anda memiliki lebih banyak kontrol desain atas berbagai tata letak yang digunakan karena ukurannya tetap berdasarkan breakpoint yang Anda tetapkan. Keadaan aneh di antara keduanya bukan masalah lagi karena Anda telah mendesain setiap "tampilan" (artinya masing-masing tampilan breakpoint) yang akan dikirimkan kepada pengunjung.
Sesederhana tingkat kontrol desain ini mungkin terdengar, Anda harus sadar bahwa itu datang dengan harga. Ya, Anda memiliki kontrol penuh atas tampilan setiap breakpoint, tetapi itu berarti Anda harus menginvestasikan waktu desain yang diperlukan untuk mendesain untuk masing-masing tata letak yang unik. Semakin banyak breakpoint yang Anda pilih untuk dirancang, semakin banyak waktu yang akan Anda habiskan untuk proses itu.
Keluasan Dukungan
Baik desain web responsif dan adaptif menikmati dukungan yang cukup kuat, terutama di browser modern.
Situs web adaptif memerlukan komponen sisi server atau Javascript untuk deteksi ukuran layar. Tentunya, jika situs adaptif membutuhkan Javascript, itu berarti bahwa browser harus mengaktifkannya agar situs tersebut berfungsi dengan benar. Itu mungkin tidak menjadi perhatian utama bagi Anda karena kebanyakan orang akan memiliki Javascript di browser mereka, tetapi setiap kali situs memiliki ketergantungan penting pada apa pun, itu harus diperhatikan.
Situs web responsif dan kueri media yang memberdayakannya akan berfungsi dengan baik di semua browser modern. Satu-satunya masalah yang Anda akan miliki adalah dengan versi Internet Explorer tertua sejak versi 8 dan di bawah tidak mendukung kueri media . Untuk mengatasi hal ini , polyfill Javascript sering digunakan , yang berarti ada ketergantungan pada Javascript di sini juga, setidaknya untuk versi IE yang kuno. Sekali lagi, ini mungkin tidak terlalu menjadi perhatian bagi Anda, terutama jika analitik situs Anda menunjukkan bahwa Anda tidak menerima banyak pengunjung menggunakan versi browser yang lebih lama.
Masa Depan Keramahtamahan
Sifat cairan dari situs web responsif memberi mereka keuntungan lebih dari situs adaptif ketika datang ke masa depan-keramahan. Ini karena situs responsif tersebut tidak dibangun untuk mengakomodasi hanya seperangkat breakpoint yang ditetapkan sebelumnya. Mereka beradaptasi agar sesuai dengan semua layar , termasuk yang mungkin tidak benar-benar ada di pasar saat ini. Ini berarti bahwa situs responsif tidak perlu "diperbaiki" jika resolusi layar baru tiba-tiba menjadi populer.
Melihat keragaman luar biasa di lanskap perangkat (per Agustus 2015, ada lebih dari 24.000 perangkat Android yang berbeda di pasar), memiliki situs yang melakukan yang terbaik untuk mengakomodasi berbagai layar ini sangat penting untuk masa depan-ramah. Ini karena lanskap itu tidak mungkin menjadi kurang beragam di masa depan, yang berarti bahwa merancang untuk layar atau ukuran tertentu akan menjadi tidak mungkin, jika kita belum mencapai kenyataan itu.
Di sisi lain dari skenario perbandingan ini, jika sebuah situs bersifat adaptif dan tidak mengakomodasi resolusi baru yang mungkin menjadi penting di pasar, maka Anda mungkin terpaksa menambahkan breakpoint itu ke situs yang telah Anda buat. Ini menambah waktu desain dan pengembangan ke proyek-proyek dan itu berarti bahwa situs-situs adaptif tersebut harus dipantau secara konsisten untuk memastikan bahwa tidak ada titik baru yang diperkenalkan ke pasar yang harus ditambahkan ke situs. Sekali lagi, dengan keragaman perangkat seperti apa adanya, harus selalu memeriksa ukuran baru dan mungkin mengakomodasi mereka dengan breakpoint baru adalah tantangan berkelanjutan yang akan berdampak pada pekerjaan Anda harus mendukung situs dan biaya pemeliharaan untuk perusahaan atau organisasi untuk siapa situs tersebut.
Kinerja
Desain web responsif telah lama dituduh (tidak adil sehingga dalam banyak kasus) menjadi solusi yang buruk dari sudut pandang kecepatan / kinerja unduhan. Hal ini sebagian besar disebabkan oleh fakta bahwa pada hari-hari awal pendekatan ini, banyak perancang web hanya menggunakan permintaan media layar kecil ke dalam CSS situs yang ada. Ini memaksa gambar dan sumber daya yang ditujukan untuk layar yang lebih besar untuk dikirimkan ke semua perangkat, bahkan jika layar yang lebih kecil itu tidak menggunakannya dalam tata letak akhir mereka. Desain responsif telah datang jauh sejak hari-hari dan kenyataannya adalah bahwa situs responsif kualitas saat ini tidak menderita masalah kinerja.
Kecepatan unduhan lambat dan situs web yang membengkak bukanlah masalah situs web responsif - ini adalah masalah yang dapat ditemukan di semua situs web. Gambar yang terlalu berat, umpan dari media sosial, skrip yang berlebihan, dan lebih banyak lagi dan memberatkan situs, tetapi situs web yang responsif dan adaptif dapat dibuat untuk dimuat dengan cepat. Tentu saja , mereka juga dapat dibangun dengan cara yang tidak membuat kinerja menjadi prioritas, tetapi ini bukan sifat dari solusi itu sendiri, tetapi lebih merupakan refleksi dari tim yang terlibat dalam pengembangan situs itu sendiri.
Beyond Layout
Salah satu aspek yang paling menarik dari desain web adaptif adalah bahwa Anda tidak hanya memiliki kontrol atas desain situs untuk menetapkan breakpoint, tetapi juga sumber daya yang dikirimkan untuk versi situs tersebut. Sebagai contoh, ini berarti bahwa gambar retina hanya dapat dikirim ke perangkat retina, sementara layar non-retina mendapatkan gambar yang lebih tepat yang lebih kecil dalam ukuran file. Sumber daya situs lainnya (file Javascript, gaya CSS, dll.) Dapat dikirim dengan cerdas hanya ketika diperlukan dan akan digunakan.
Penggunaan desain web adaptif ini jauh melampaui persamaan sederhana “jika Anda melakukan retrofit situs web, adaptif mungkin merupakan pendekatan yang lebih mudah digunakan.” Semua situs, termasuk perancangan ulang lengkap, dapat memanfaatkan pendekatan yang lebih cerdas untuk pengalaman yang lebih disesuaikan.
Skenario ini menunjukkan sifat bernuansa perdebatan "responsif versus adaptif" ini. Meskipun benar bahwa pendekatan adaptif mungkin lebih cocok daripada responsif untuk retrofits situs, itu juga bisa menjadi solusi yang bagus untuk perancangan ulang penuh. Demikian pula, dalam beberapa kasus pendekatan responsif dapat ditambahkan ke basis kode situs yang sudah ada, memberikan situs tersebut semua manfaat dari pendekatan yang sepenuhnya responsif.
Pendekatan mana yang lebih baik?
Ketika datang ke desain web responsif versus adaptif, tidak ada "pemenang" yang jelas, meskipun responsif tentu saja pendekatan yang lebih populer. Sebenarnya, pendekatan "lebih baik" tergantung pada kebutuhan proyek tertentu. Selain itu, ini tidak perlu menjadi situasi "baik / atau". Ada banyak profesional web yang membangun situs yang menggabungkan desain web responsif terbaik (lebar cairan, dukungan di masa mendatang) dengan kekuatan desain adaptif (kontrol desain yang lebih baik, pemuatan sumber situs yang cerdas).
Umumnya dikenal sebagai RESS (Desain Web Responsif dengan Komponen Sisi Server), pendekatan ini menunjukkan bahwa tidak ada "satu ukuran yang cocok untuk semua solusi." Baik desain web responsif dan adaptif memiliki kekuatan dan tantangannya, jadi Anda perlu menentukan yang mana akan bekerja paling baik untuk proyek khusus Anda, atau jika solusi hibrida mungkin benar-benar cocok untuk Anda.