Need Of The Hour Bukan Desain Responsif Tapi Performa Responsif

Desain responsif telah menunjukkan beberapa masalah kinerja belakangan ini. Ironisnya adalah – desain responsif bekerja dengan cukup baik pada jajaran smartphone terbaru, tetapi tidak ada yang lebih dari itu.

Anda mungkin bingung karena sebagian besar pengguna web memiliki smartphone kelas atas. Namun, populasi besar masih menggunakan perangkat seluler dengan ukuran layar kecil yang berjalan di Android atau iOS versi lama dan mungkin hanya ponsel berfitur dengan sedikit fungsionalitas. Akibatnya, desain responsif tidak melayani audiens yang lebih luas seperti yang seharusnya dilakukan.

Keyakinan lama bahwa desain responsif adalah untuk perangkat seluler dengan ukuran layar apa pun sangat berkaitan dengan masalah ini. Karena kinerja menurun dan ketidakpuasan meningkat, ada kebutuhan untuk melihat melampaui desain responsif. Alih-alih, fokus harus memastikan kinerja yang responsif. Postingan ini kurang lebih sama.

Jadi, pertanyaan besarnya adalah apa yang harus dilakukan?

Buang konsep desain yang mengutamakan desktop

Kontributor signifikan untuk masalah yang terus-menerus ini adalah bahwa masih fokus pada pendekatan desain yang mengutamakan desktop. Penekanannya adalah mendesain situs web untuk desktop dan kemudian mendesain untuk perangkat lain seperti ponsel cerdas dan tablet. Untuk fungsionalitas yang hilang, pengembang menggunakan shim dan polyfill dengan murah hati. Tentu saja, ada perpustakaan yang luas untuk memastikan perkembangan yang pesat. Namun, ini tidak mengatasi masalah ketidakcocokan browser. Apakah dibenarkan untuk terlibat dalam konsep desain yang tidak memberikan hasil yang diinginkan?

Tidak terlalu sulit untuk menerapkan pendekatan desain yang mengutamakan seluler di mana tujuannya adalah untuk menawarkan hanya informasi yang dimaksudkan kepada pengguna seluler di layarnya alih-alih semua hal yang mematikan perangkat. Luke Wroblewski mengkonseptualisasikan pendekatan desain ini untuk pertama kalinya pada tahun 2011 dan sejak itu, banyak pakar industri memuji pendekatan desain terobosannya.

Lebih banyak data, meskipun hanya membutuhkan sepersekian detik dapat memiliki dampak yang luar biasa pada waktu pemuatan secara keseluruhan. Namun, benar juga bahwa situs web semakin berat dengan konten yang kaya grafis, dan semakin banyak orang yang menggunakan perangkat seluler mereka untuk mengakses hal yang sama. Ketika pengguna mengetik URL situs web di ponsel dengan layar resolusi rendah, tujuannya selalu untuk mengakses konten situs web, tetapi apa yang dia alami adalah mimpi buruk. Ini karena kesulitan dalam menavigasi melalui iklan yang tidak perlu yang tak ada habisnya. Hapus elemen konten yang dapat dihindari tersebut untuk memungkinkan pengguna Anda mengakses konten utama. Ini meningkatkan lalu lintas situs, karena selain dari pengguna dengan ponsel cerdas kelas atas, banyak yang akan mengakses situs web Anda melalui perangkat seluler beresolusi rendah. Mengirimkan versi teks saja sangat masuk akal jika ponsel memiliki kemampuan terbatas, tetapi sekali lagi, Anda mungkin mengatakan pengalaman pengguna terganggu. Ya, tapi itu masih lebih baik daripada tidak menerima konten sama sekali. Setidaknya dalam kasus seperti itu, pengguna akan mengakses informasi dasar tentang situs Anda. Apakah ada gunanya merancang situs web sedemikian rupa sehingga mengurangi potensi jangkauannya?

Anda pasti akan menerima kenyataan bahwa menunggu tanpa henti hanya untuk memeriksa situs web tidak menggairahkan siapa pun. Sesuai beberapa survei oleh Akamai dan Gomez.com, sekitar 50% pengguna web sangat mengharapkan situs web dimuat dalam 2 detik atau bahkan kurang. Ada lebih banyak kemungkinan pengabaian situs jika situs web gagal dimuat di browser hanya dalam 3 detik! Selain itu, sebagian besar situs web e-commerce saat ini memiliki banyak tombol berbagi sosial seperti Facebook, Google Plus, Twitter, LinkedIn, dll. Tahukah Anda bahwa tombol ini menambahkan lebih dari 500KB ke situs responsif Anda dan memengaruhi kinerjanya? Tombol suka Facebook saja membutuhkan kode terkompresi sebesar 270KB! Ini juga membutuhkan beberapa permintaan HTTP. Sebagai gantinya, gunakan tombol berbagi sosial berdasarkan URL karena ukuran yang sangat besar pasti akan memengaruhi waktu pemuatan situs web responsif Anda meskipun koneksi selulernya cepat.

Kinerja situs web memiliki dampak langsung pada kinerja bisnis dan situs web yang responsif lambat tidak pernah memberikan manfaat apa pun untuk bisnis. Percaya atau tidak, sebagian besar pengguna ponsel tidak tertarik untuk melakukan penelitian atau membaca artikel yang panjang. Sebagian besar dari mereka menggunakan perangkat seluler mereka untuk akses mudah ke Facebook, WhatsApp, Twitter, dan untuk menikmati kesenangan berbelanja online. Selain itu, ponsel tidak lagi menjadi tren, itu adalah masa depan.

Sesuai dengan statistik Comscore tahun lalu, jumlah pengguna Internet khusus seluler di AS telah meningkat tajam sementara pengguna hanya desktop berkurang menjadi 10,6 persen.

Perlu mengatakan sesuatu lagi untuk meyakinkan?

Pastikan degradasi yang anggun

Dalam beberapa tahun terakhir, Anda mungkin menemukan kata kunci baru di dunia desain responsif, dan itu adalah 'degradasi yang anggun'. Ya, degradasi yang anggun menyiratkan bahwa meskipun suatu fitur tidak berfungsi dengan baik, fitur tersebut harus gagal sedemikian rupa sehingga memfasilitasi kegunaan yang dapat diterima. Ini berarti, membuat desain situs web untuk desktop dan kemudian secara bertahap beralih ke tablet, ponsel cerdas, dan ponsel menengah. Kinerja desain responsif di mana situs web terdegradasi dengan anggun pasti akan tinggi karena pengalaman pengguna di sini selalu yang terbaik. Situs web akan tetap berfungsi meskipun ada kekurangan, dan pengunjung pasti akan terkesan dengan kualitas keseluruhannya.

Sekarang, Anda mungkin memiliki pertanyaan ini di benak Anda bahwa apa yang begitu menarik tentang degradasi yang anggun. Jawabannya sederhana. Ini karena membuat konten Anda, terlihat dan dapat dibaca terlepas dari browser, yang merupakan prestasi luar biasa! Untungnya, jika Anda menggunakan CSS3, degradasi yang anggun menjadi pekerjaan yang mudah karena sebagian besar properti CSS3 terdegradasi secara otomatis yaitu sudut yang dibulatkan menjadi persegi, teks dibungkus alih-alih berjalan dalam satu baris, gradien menjadi warna datar, dan banyak lagi.

Mari kita lihat contoh degradasi yang anggun. Misalkan, Anda telah merancang situs web responsif dengan fitur JavaScript dan fitur ini tidak didukung oleh browser Anda atau mungkin dinonaktifkan di sisi klien Anda. Jadi, apa yang bisa Anda lakukan untuk mendapatkan konten tersebut? Nah, dalam kasus seperti itu, degradasi yang anggun memungkinkan browser Anda menampilkan konten dalam tag "noscript".

Ini dapat Anda pahami lebih baik dengan pengkodean yang diberikan di bawah ini:

[xhtml]
<noskrip>
<h1>John yang terhormat, Anda mengalami masalah!</h1>
<p>Browser Anda tidak mendukung JavaScript atau dinonaktifkan untuk sementara.
Kunjungi <a href="/support/browsers/">dukungan browser</a> kami untuk mendapatkan bantuan.</p>
</noskrip>
[/xhtml]

Ada satu lagi contoh degradasi anggun yang ingin saya bagikan, dan itu adalah penggunaan HTML5 oleh YouTube untuk memutar video. Misalkan, browser Anda tidak mendukung HTML5, video akan ditampilkan dengan menggunakan Flash, dan jika Flash tidak diinstal, Anda akan menerima pesan untuk menginstal yang sama di perangkat seluler Anda. Dalam kedua kasus, Anda akan dapat menonton video. Namun, satu kelemahan dari degradasi yang anggun ini adalah meskipun kinerjanya bagus, Anda harus berkompromi dengan elemen desain tertentu jika Anda menggunakan browser yang sudah ketinggalan zaman. Saya kira menentukan elemen visual penting dari situs web Anda sebelumnya dapat membantu.

Tidak perlu menyimpan perpustakaan yang tidak digunakan

Salah satu praktik terbaik adalah tidak menyimpan perpustakaan yang tidak digunakan. Ya, memang benar bahwa melacak perpustakaan yang digunakan dan yang tidak digunakan sangat memakan waktu, tetapi memang layak. Terkadang, Anda mungkin memperhatikan bahwa Anda hanya menggunakan satu fungsi setelah dimasukkannya pustaka. Kadang bisa dua atau tiga genap. Alat yang paling sering saya gunakan untuk membuat desain responsif adalah jQuery. Faktanya, ada banyak library jQuery yang membantu pengembang untuk membuat situs web yang responsif. Dimasukkannya beberapa pustaka seperti pustaka JavaScript hanya karena Anda menyukai beberapa widget akan meningkatkan waktu pemuatan halaman Anda secara signifikan. Namun, itu akan menjadi praktik yang rapi untuk menganalisis perpustakaan mana yang digunakan dan sejauh mana.

Periksa ketersediaan fitur

Anda dapat memeriksa apakah perangkat Anda mendukung fitur tertentu atau tidak sebelum mengaktifkannya. Misalnya, meskipun Anda telah menginstal versi terbaru Google Chrome di ponsel Android lama Anda, situs web Anda tetap tidak ditampilkan. Terkadang, dalam upaya memuat situs web semacam itu, browser mengalami crash yang sangat parah sehingga membuat seluruh perangkat seluler tidak responsif. Anda perlu me-reboot perangkat, dan ini adalah hal terakhir yang Anda inginkan bukan? Banyak pengguna aplikasi web tertentu sudah menderita karena masalah ini.

Tidak tersedianya fitur pada perangkat namun merancang situs web atau aplikasi telah mengakibatkan beberapa masalah nyata seperti crash instan aplikasi Google Hangout pada perangkat Android di seluruh dunia terlepas dari jenis browsernya. Ini terlepas dari kenyataan bahwa aplikasi itu adalah aplikasi yang ringan. Anda mungkin berpendapat bahwa pengguna menggunakan ponsel cerdas Android versi lama, tetapi juga benar bahwa perangkat tersebut masih tersedia sebagai perangkat baru di toko seluler mana pun. Banyak pengguna seluler juga menghadapi masalah kinerja yang sama dengan aplikasi YouTube dan Twitter. Bahkan pembaruan layanan Google Android System Webview melalui Google Play membekukan banyak smartphone menjadi semacam mimpi buruk pengguna.

Optimalkan gambar

Memasukkan gambar besar yang menarik secara visual selalu menggoda bagi para desainer. Masalah muncul ketika mereka tidak mengompres gambar-gambar ini sebelum mengunggahnya ke CMS. Hal ini terutama berlaku dengan beberapa situs web e-niaga di seluruh web. Sesuai penelitian terbaru oleh Radware, halaman semakin besar, dan sekitar 45 persen dari 100 situs ritel teratas tidak terlibat dalam kompresi gambar. Hal ini membuat situs tersebut menjadi lebih besar dan sebagai hasilnya, waktu pemuatan meningkat, tetapi sebagai seorang desainer, Anda dapat menghindari masalah tersebut.

Buat gambar dengan ukuran lebih kecil dengan menggunakan alat pengoptimalan gambar yang sesuai. Faktanya, tidak ada kelangkaan alat seperti itu di web. Beberapa yang terkenal yang dapat Anda gunakan adalah Dynamic Drive, Smush it, dan Riot. Jika Anda seorang pro di Photoshop, Anda juga dapat mengoptimalkan ukuran gambar sendiri. Gunakan teknik kompresi cerdas dan hapus dari metadata yang berlebihan. Mengubah grafik menjadi PNG, gambar kaya warna ke JPEG, dan gambar animasi ke GIF juga berhasil.

Diarahkan untuk kasus ekstrim

Ketika Anda mulai mendesain, Anda pasti memperhatikan bahwa Anda tergoda untuk mendesain halaman yang lebih mudah. Setidaknya, ini memungkinkan Anda untuk menunjukkan sesuatu kepada pemangku kepentingan Anda. Ini mungkin tampak bagus pada pandangan pertama, tetapi jika Anda memfokuskan upaya Anda pada skenario yang paling menantang, pada awalnya, Anda akan mendapatkan hasil yang baik.

Misalnya, halaman web yang menampilkan beberapa artikel, blog, dan siaran pers. Pasti ada judulnya juga. Sekarang, apa yang akan terjadi jika ruang judul yang Anda pikir untuk menunjukkan “Tips Desain Web Responsif” harus menunjukkan judul “10 Tips dan Teknik Penting untuk Desain Situs Web Responsif yang Sukses”? Sekarang, ini adalah kasus ekstrim.

Upaya seperti di atas untuk mengoptimalkan kinerja situs web responsif Anda tampaknya tidak terlihat. Namun, upaya ini menghasilkan pengembalian yang baik dengan pengguna yang senang dan puas. Anda dapat mengambil bantuan berbagai alat seperti alat Pingdom yang memungkinkan Anda memantau waktu buka situs web responsif Anda dengan mudah. Jangan lewatkan aspek vital pengujian untuk memastikan bahwa situs web responsif Anda berfungsi sebagaimana mestinya. Uji pada perangkat nyata sebanyak yang Anda bisa.

Anda juga dapat menggunakan sumber daya seperti Screenfly yang memungkinkan Anda menguji situs web Anda pada beberapa resolusi layar. Anda dapat berargumen bahwa semua strategi ini membutuhkan banyak waktu, tetapi sekali lagi, seseorang perlu bekerja keras untuk menuai manfaatnya. Saat ini, membuat situs web responsif dengan kinerja responsif sangat penting, terlebih lagi karena Google memberi peringkat situs berdasarkan kinerjanya. Jika Anda seorang desainer atau pengembang, jangan membatasi diri Anda pada salah satu praktik terbaik di atas. Anda harus mencari lebih banyak solusi dan mungkin berusaha keras untuk menghadirkan situs web yang menunjukkan kinerja responsif.