Isi
- 1. Menyembunyikan konten
- 2. Kembung!
- 3. Mengabaikan konvensi kontekstual
- 4. Melayani pengalaman satu ukuran untuk semua
- 5. Mengandalkan dimensi perangkat
- Lakukan evolusi
Membuat pengalaman responsif yang hebat membutuhkan lebih dari sekadar kueri media. Jika menurut Anda membuat tata letak yang licin adalah tujuan utama dari hal responsif ini, Anda kehilangan intinya. Faktanya adalah kami perlu memberikan pengalaman pengguna yang solid ke semakin banyak perangkat yang mendukung web, dan membuat pengalaman perangkat yang sepenuhnya terpisah tidak dapat diskalakan dalam jangka panjang. Menciptakan pengalaman adaptif adalah cara maju yang lebih cerdas, tetapi bukan berarti pendekatan ini bukannya tanpa tantangan.
Berikut beberapa kendala yang ingin Anda hindari saat Anda melakukan perjalanan melalui jalan yang responsif:
1. Menyembunyikan konten
Karena situs responsif berbagi basis kode tunggal, mereka memiliki peluang lebih baik untuk mencapai keseimbangan konten, dan itu bagus. Namun, itu tidak berarti bahwa itu semua adalah permen karet dan kupu-kupu. Masih banyak situs responsif yang menyembunyikan atau menghapus konten untuk layar yang lebih kecil guna mengatasi kendala real estate layar.
Ikuti panduan sederhana ini: jangan menghukum pengguna untuk perangkat yang kebetulan mereka gunakan untuk menjelajah. Orang-orang datang ke situs dan layanan kami dengan harapan, dan tugas kami adalah memastikan mereka dapat mencapai tujuan mereka. Pengguna seluler akan melakukan semua yang dilakukan pengguna desktop, tetapi harus disajikan dengan cara yang dapat digunakan. Jadi lakukan semua yang Anda bisa untuk memastikan sebanyak mungkin orang dapat mengakses konten dan fungsionalitas Anda.
Perlu juga dicatat bahwa konten yang disembunyikan dengan CSS masih diunduh, yang berdampak buruk bagi kinerja dan membawa kita ke perangkap berikutnya untuk menghindari ...
2. Kembung!
Oke, jadi Anda tidak suka konten untuk layar kecil dan Anda telah berusaha untuk memberikan pengalaman penuh, apa pun konteksnya. Semua baik-baik saja dengan dunia, bukan? Tidak, karena sekarang Anda memiliki banyak barang untuk memuat dan itu membutuhkan waktu. 74% pengguna seluler akan keluar setelah 5 detik (PDF) menunggu halaman dimuat, dan kenyataan yang disayangkan adalah bahwa hanya 3% situs responsif versi layar kecil yang secara signifikan lebih ringan daripada versi layar besar mereka. Itu berarti pengguna menanggung beban unduhan yang berpotensi besar.
Halaman biasa di situs responsif Barack Obama memiliki berat lebih dari 4MB. Empat. Megabyte. Ini tidak dapat diterima oleh standar mana pun, tetapi terutama jika Anda mempertimbangkan pengguna yang mungkin menggunakan EDGE, 3G, atau koneksi WiFi yang buruk.
Untuk situs yang tujuannya menjangkau masyarakat umum (semua dengan ras seluler yang berbeda, keyakinan seluler, warna seluler, dan agama seluler), ini menyebabkan masalah aksesibilitas yang serius:
Salah satu tantangan terbesar dalam membuat desain web yang responsif adalah tindakan penyeimbangan dalam memberikan pengalaman penuh sambil tetap mempertahankan pengalaman pengguna yang tajam secara keseluruhan. Hentikan masalah, ikuti praktik terbaik performa, jangan berasumsi koneksi yang kuat secara default, dan cari cara untuk memanfaatkan teknik hebat seperti pemuatan bersyarat untuk menjaga ukuran halaman awal tetap rendah.
3. Mengabaikan konvensi kontekstual
Ponsel bukan tablet, bukan laptop, bukan desktop, bukan TV.
Setiap perangkat menyediakan faktor bentuk, konvensi antarmuka, batasan, dan peluangnya sendiri-sendiri yang unik. Kita perlu mempertimbangkan semua variabel ini untuk menciptakan pengalaman yang terasa alami bagi pengguna. Sekarang saya tidak menyarankan untuk membuat ulang UI asli setiap platform di browser, tetapi kami perlu memperhatikan cara orang memegang perangkat mereka, ikon apa yang biasa mereka lihat, dan sebagainya. Pengalaman responsif yang baik menjangkau di luar kotak pasir yaitu browser dan bersimpati kepada pengguna dan konteks perangkat.
Desain web responsif menurut definisi bukanlah desain seluler, jadi terserah kami untuk memperkenalkan elemen yang mempertimbangkan kontekstual ke desain kami. Itu berarti menangani navigasi responsif dengan cara yang masuk akal bagi pengunjung di seluruh konteks. Itu berarti mendesain untuk sentuhan. Itu berarti menghindari pemaksaan pengguna seluler untuk menyaring konten yang berbeda dalam jumlah yang sangat panjang hanya untuk menemukan apa yang mereka cari.
Mari kita pertimbangkan banyak perbedaan di seluruh perangkat ini, pahami bahwa beberapa kompromi tidak dapat dihindari, tetapi berikan upaya yang solid untuk lebih mempertimbangkan konteks.
4. Melayani pengalaman satu ukuran untuk semua
Seluler lebih dari sekadar berbagai layar kecil, dan konteks yang muncul ini membuka kasus penggunaan, pola, dan kemungkinan yang sama sekali baru. Kita tidak boleh menjual diri kita sendiri dengan hanya membuat tata letak yang responsif. Misalnya, terkadang kita lupa bahwa ponsel bisa mendapatkan lokasi pengguna, melakukan panggilan telepon, dan banyak lagi. Semoga dalam waktu dekat browser di semua gadget ini akan memiliki akses ke lebih banyak API perangkat, yang semakin mendorong batasan dari apa yang mungkin di web.
Kita harus melakukan semua yang kita bisa untuk membuat seluruh pengalaman merespons apa yang mampu dilakukan perangkat. Mengatasi kendala terlebih dahulu memberi kita dasar yang kokoh untuk berdiri, kemudian kita dapat memanfaatkan peningkatan progresif dan deteksi fitur untuk membawa pengalaman ke tingkat berikutnya.
5. Mengandalkan dimensi perangkat
320px. 480px. 768px. 1024px. Lipatan. Ya Tuhan, lipatannya.
Faktanya adalah kami tidak mengontrol ukuran browser pengunjung kami, atau dimensi apa yang diputuskan oleh produsen untuk membuat perangkat mereka. Percayalah, mereka mencoba semua ukuran dalam buku.
Selain itu, tinggi halaman selalu menjadi target yang bergerak karena bilah bookmark, chrome browser, dan toolbar Ask Jeeves. Namun sekarang dalam dunia web seluler, pengalaman web sering kali tidak terlihat melalui lensa browser sama sekali. Kami mengunjungi tautan melalui Facebook, Twitter, dan aplikasi lain, yang masing-masing memiliki chrome khusus untuk memuat tampilan web.Tentu saja, hierarki konten masih penting dan Anda ingin membuka isi halamannya sesegera mungkin, tetapi Anda tidak bisa menyelesaikan semua tentang ketinggian piksel yang tersedia, belajarlah melepaskannya.
Dalam artikelnya Fanfare for the Common Breakpoint, Jeremy Keith dengan fasih menyatakan bahwa "ini bukan tentang apa yang terjadi di breakpoint, ini tentang apa yang terjadi di antara breakpoint". Itu berarti desain kita harus tetap bersatu terlepas dari dimensi tertentu mana pun.
Biarkan desain itu sendiri memilah di mana breakpoint harus terjadi. Saya sangat menyukai saran dari Stephen Hay ini:
"Mulailah dengan layar kecil terlebih dahulu, kemudian perluas hingga terlihat seperti sial. Saatnya memasukkan breakpoint!’
Dengan membiarkan konten itu sendiri menentukan titik henti dari desain responsif kami, kami mempersiapkan desain kami agar terlihat bagus tidak hanya di lanskap saat ini, tetapi juga di masa depan.
Lakukan evolusi
Kami berada di puncak gunung es dalam hal menciptakan pengalaman adaptif. Meskipun perangkap ini (dan banyak lagi yang tidak tercakup dalam artikel ini) ada, itu bukan alasan untuk menghindar dari menciptakan pengalaman adaptif. Dengan semakin banyaknya perangkat yang terhubung dari segala bentuk dan ukuran yang muncul setiap hari, kami sebagai pembuat web memiliki kesempatan untuk berada di sana saat mereka tiba. Meskipun memang agak menakutkan, kita harus menerima tantangan tersebut dan merangkul kesempatan untuk menjangkau orang-orang di mana pun mereka berada.
