Bagaimana kita menghadapi perubahan tektonik ini dalam perilaku pengguna? Kami telah bergerak melampaui era peretasan m-dot atau t-dot, ke era di mana teknik desain yang responsif dan adaptif menentukan hari – apa yang disebut W3C sebagai pendekatan One Web. Bagian utama dari rekomendasi W3C adalah bahwa “Satu Web berarti membuat, sejauh yang wajar, informasi dan layanan yang sama yang tersedia untuk pengguna terlepas dari perangkat yang mereka gunakan.”

Untuk seorang pengembang yang berarti bahwa mengambil pendekatan One Web memastikan bahwa situs Anda tidak hanya berfungsi pada smartphone dan tablet saat ini, tetapi juga dapat dibuktikan di masa depan untuk layar masa depan yang tidak terbayangkan.

Saat ini ada tiga pendekatan populer untuk mengembangkan situs Web One: menggunakan desain responsif; desain adaptif sisi klien; dan desain adaptif sisi server.

Yang satu tidak lebih baik atau lebih buruk dari yang lain; masing-masing memiliki kekuatan dan kelemahannya sendiri dan pengembang web yang bijak akan mempertimbangkan manfaat dan kelemahan masing-masing sebelum memilih yang cocok untuk proyek mereka berikutnya.

Desain Web Responsif

Desain web responsif adalah pendekatan One Web yang paling umum. Pendekatan ini menggunakan kueri media CSS untuk mengubah presentasi situs web berdasarkan ukuran tampilan perangkat. Jumlah situs responsif meningkat pesat, dari Boston Globe ke Disney hingga Indochino.

Keuntungan utama dari pendekatan ini adalah bahwa desainer dapat menggunakan satu templat untuk semua perangkat, dan hanya menggunakan CSS untuk menentukan bagaimana konten dirender pada ukuran layar yang berbeda. Plus, para desainer itu masih dapat bekerja dalam HTML dan CSS, teknologi yang sudah mereka kenal. Selain itu, semakin banyak perangkat sumber terbuka yang responsif ramah dan terbuka seperti Bootstrap atau Foundation yang membantu menyederhanakan proses membangun situs responsif.

Fase desain dan pengujian bisa sangat rewel, karena sulit untuk menyesuaikan pengalaman pengguna untuk setiap perangkat atau konteks yang mungkin. Kita semua telah melihat tata letak situs responsif yang terlihat seperti sekelompok potongan puzzle yang tidak cocok satu sama lain. Desain web responsif bekerja paling baik dalam kombinasi dengan pendekatan mobile-first, di mana case use mobile diprioritaskan selama pengembangan. Peningkatan progresif kemudian digunakan untuk menangani kasus penggunaan tablet dan desktop.

Angka-angkanya setinggi itu karena pendekatan responsif mencakup semua perangkat. Pengguna Anda hanya menggunakan satu perangkat, tetapi mereka harus menunggu semua elemen halaman dan sumber daya dimuat sebelum mereka dapat menggunakannya. Sederhananya, kinerja memengaruhi garis bawah Anda. Pada ponsel cerdas, tingkat konversi turun 3,5 persen ekstra ketika pengguna harus menunggu hanya satu detik. Pada tiga detik kedua, 57 persen pengguna akan meninggalkan situs Anda sepenuhnya.

Baca Juga : Strategi dan Teknik SEO Lokal

Sementara desain responsif dengan cepat menjadi standar de facto, itu juga menciptakan tantangan baru bagi bisnis online, termasuk bagaimana menangani gambar, cara mengoptimalkan kinerja seluler dan seringkali berarti situs harus dibangun kembali dari bawah ke atas dengan pendekatan mobile pertama.

Adaptif Sisi Klien

Desain adaptif dibangun berdasarkan prinsip-prinsip desain responsif untuk menghadirkan pengalaman pengguna yang ditargetkan pada perangkat dan konteks tertentu. Ini menggunakan JavaScript untuk memperkaya situs web dengan fungsionalitas dan penyesuaian lanjutan. Misalnya, situs web adaptif hanya mengirimkan gambar berkualitas Retina ke tampilan Retina (seperti iPad baru) sementara tampilan definisi standar menerima gambar berkualitas lebih rendah.

Ada dua pendekatan untuk desain adaptif – satu di mana adaptasi terjadi di sisi klien, di browser pengguna, dan yang lain di mana server web melakukan pekerjaan berat untuk mendeteksi berbagai perangkat dan memuat templat yang benar. Contoh situs adaptif sisi klien termasuk Threadless dan Ideeli. Salah satu kekuatan dari pendekatan templating adaptif adalah kemampuan untuk menggunakan kembali satu set HTML dan JavaScript di seluruh perangkat, menyederhanakan manajemen perubahan dan pengujian.

Pendekatan adaptif sisi klien berarti Anda tidak perlu membangun kembali situs Anda dari awal. Alih-alih, Anda dapat membangun konten yang ada sambil tetap memberikan tata letak responsif seluler. Untuk pengembang ahli, pendekatan ini juga memungkinkan Anda untuk secara khusus menargetkan perangkat atau resolusi layar tertentu. Misalnya, untuk banyak klien ritel fesyen daring Mobify, 95% lalu lintas seluler mereka berasal dari iPhone. Adaptasi sisi klien berarti mereka dapat mengoptimalkan secara khusus untuk Smartphone Apple.

Tidak seperti desain responsif, templat adaptif memastikan bahwa hanya sumber daya yang diperlukan yang dimuat oleh perangkat klien. Karena deteksi perangkat dan fitur dialihkan ke perangkat seluler itu sendiri, jaringan CDN seperti Akamai dan Edgecast dapat menggunakan sebagian besar fungsi caching mereka tanpa mengganggu pengalaman pengguna.

situsAktifitas pendekatan sisi klien memiliki penghalang yang lebih tinggi untuk masuk daripada desain responsif. Pengembang harus memiliki pemahaman yang kuat tentang JavaScript untuk menggunakan teknik ini. Itu juga tergantung pada templat situs yang ada sebagai fondasi. Akhirnya, karena adaptasi sisi klien adalah semacam lapisan di atas basis kode yang ada, Anda perlu mempertahankannya sebagai situs Anda secara keseluruhan berkembang.

Adaptif Sisi-Server

Kami dapat mencapai pendekatan adaptif sisi server dalam berbagai cara, melalui plug-in sisi server dan deteksi agen pengguna khusus. Situs yang menggunakan sisi server adaptif termasuk Etsy, One Kings Lane dan OnlineShoes.com.

Mengapa memilih sisi server yang adaptif? Biasanya menawarkan template berbeda untuk setiap perangkat, memungkinkan lebih banyak penyesuaian, dan menjaga logika deteksi perangkat di server, memungkinkan halaman seluler yang lebih kecil yang memuat lebih cepat. Selain itu, ada banyak plug-in sisi server yang tersedia untuk CMS umum dan sistem e-commerce seperti Magento.

Mengapa memilih sisi server yang adaptif? Biasanya menawarkan template berbeda untuk setiap perangkat, memungkinkan lebih banyak penyesuaian, dan menjaga logika deteksi perangkat di server, memungkinkan halaman seluler yang lebih kecil yang memuat lebih cepat. Selain itu, ada banyak plug-in sisi server yang tersedia untuk CMS umum dan sistem e-commerce seperti Magento. Tentu saja, banyak perusahaan masih bergulat dengan dasar-dasar responsif, dan mereka tidak siap untuk menghadapi rasa adaptif yang lebih canggih. Semakin tinggi, persaingan dan lalu lintas seluler, akan mendorong semakin banyak organisasi untuk menendang ban pada ketiga pendekatan, dan memilih yang paling cocok untuk penggunanya.