Apakah Anda memiliki " situs web responsif "? Ini adalah situs dengan tata letak yang berubah berdasarkan perangkat dan ukuran layar pengunjung . Desain web yang responsif kini menjadi praktik terbaik industri. Ini direkomendasikan oleh Google dan ditemukan di jutaan situs di seluruh Web. Namun demikian, ada perbedaan besar antara memiliki situs web yang cukup "cocok" pada ukuran layar yang berbeda dan memiliki situs yang benar-benar responsif.
Saya secara rutin melihat perusahaan mendesain ulang situs web mereka dan mengeluarkan siaran pers yang memamerkan kebajikan desain ramah seluler baru mereka. Ketika saya mengunjungi situs-situs tersebut, apa yang sering saya temukan adalah tata letak yang memang berskala dan berubah agar muat di layar yang berbeda, tetapi sejauh itulah mereka mengambil gagasan tentang respons. Ini tidak cukup. Sebuah situs web yang benar-benar responsif tidak hanya berskala untuk menyesuaikan dengan layar yang lebih kecil atau lebih besar. Di situs-situs ini, Anda juga akan menemukan ciri-ciri penting berikut.
1. Kinerja Dioptimalkan
Tidak ada yang suka menunggu situs web dimuat, dan ketika seseorang menggunakan perangkat seluler dengan koneksi yang mungkin kurang ideal, kebutuhan situs untuk memuat dengan cepat bahkan lebih penting.
Jadi bagaimana Anda mengoptimalkan kinerja situs Anda? Jika Anda memulai dengan situs baru sebagai bagian dari desain ulang, maka Anda harus menjadikannya titik untuk membuat anggaran kinerja sebagai bagian dari proyek itu. Jika Anda bekerja dengan situs yang ada dan tidak memulai dari awal, langkah pertama adalah menguji kinerja situs Anda untuk melihat di mana Anda berdiri hari ini.
Setelah Anda memiliki dasar di mana situs Anda berdiri berdasarkan kinerja, Anda dapat mulai melakukan perbaikan yang diperlukan untuk meningkatkan kecepatan unduh. Tempat yang bagus untuk memulai mungkin dengan gambar situs Anda. Gambar terlalu besar adalah pelopor nomor 1 ketika menyangkut situs pemuatan lambat, jadi mengoptimalkan gambar Anda untuk pengiriman web dapat sangat membantu situs Anda dari sudut pandang kinerja.
Kenyataannya adalah bahwa peningkatan kinerja situs web dan kecepatan unduh yang cepat adalah manfaat yang akan dinikmati semua pengunjung. Lagi pula, tidak ada yang pernah mengeluh bahwa situs memuat "terlalu cepat", tetapi jika situs terlalu lama untuk dimuat, itu benar-benar akan membuat orang pergi apakah itu "cocok" di layar mereka atau tidak.
2. Hierarki Konten Cerdas
Ketika sebuah situs web ditampilkan pada layar besar, Anda dapat meletakkan konten dalam berbagai cara karena layar substansial tersedia real estat. Anda dapat sering memasukkan pesan dan gambar penting, pembaruan berita, informasi acara, dan navigasi situs semua di layar sekaligus. Hal ini memungkinkan pengunjung untuk dengan mudah dan cepat memindai konten dari seluruh halaman dan memutuskan apa yang penting bagi mereka.
Skenario ini berubah cukup dramatis ketika Anda mengambil desain situs itu dan mengubahnya untuk perangkat layar kecil, seperti ponsel. Tiba-tiba Anda bekerja dengan sebagian kecil dari layar real estat yang Anda miliki sebelumnya. Ini berarti Anda perlu memutuskan apa yang akan muncul pertama di situs, apa yang akan mengikutinya, dll. Daripada semuanya terlihat sekaligus, Anda mungkin hanya memiliki ruang untuk menunjukkan satu atau dua hal (salah satunya kemungkinan navigasi). Ini berarti bahwa keputusan hirarki perlu dibuat. Sayangnya, apa yang sering menentukan apa yang muncul pertama di layar, dan kemudian detik, dll. Adalah cara halaman itu sendiri dikodekan. Paling mudah, ketika membangun situs responsif, untuk menampilkan apa pun yang pertama di kode pertama di layar, diikuti oleh item kedua dalam kode dan sebagainya. Sayangnya, apa yang mungkin paling penting pada satu perangkat mungkin tidak penting di perangkat lain. Situs yang benar-benar responsif memahami bahwa hierarki konten harus berubah tergantung pada situasi yang berbeda dan harus cerdas tentang apa yang ditampilkan di mana.
Perbaikan dalam teknik tata letak CSS, termasuk Tata Letak Grid CSS, Flexbox, dan lainnya, memungkinkan para perancang web dan pengembang lebih banyak pilihan ketika datang ke meletakkan konten secara cerdas, bukannya sembelih oleh urutan yang tepat dari area konten dalam kode HTML. Memanfaatkan teknik tata letak baru ini akan menjadi lebih penting karena lanskap perangkat, dan kebutuhan pengguna situs kami, terus berkembang.
3. Pengalaman yang Mengambil Ke Rekening Kekuatan dan Kelemahan Perangkat
Tetap menggunakan topik perangkat - setiap perangkat yang dapat digunakan seseorang untuk mengunjungi situs Anda memiliki kekuatan dan kelemahan yang melekat pada platform tersebut. Situs responsif yang hebat memahami kemampuan dan keterbatasan perangkat yang berbeda dan menggunakannya untuk membuat pengalaman yang disesuaikan yang paling sesuai untuk perangkat apa pun yang mungkin digunakan pengunjung pada saat itu.
Misalnya, ponsel berisi sejumlah fitur yang tidak Anda temukan di komputer desktop tradisional. GPS adalah salah satu contoh fitur mobile-centric (ya, Anda bisa mendapatkan informasi lokasi umum di desktop juga, tetapi perangkat GPS jauh lebih akurat). Situs Anda dapat menggunakan informasi GPS untuk secara cerdas mengirimkan informasi arah langkah demi langkah atau penawaran khusus kepada seseorang yang sangat rinci dan spesifik berdasarkan pada tepat di mana mereka berada pada saat itu.
Contoh lain dari prinsip ini dalam praktik adalah situs yang memahami jenis tampilan layar apa yang Anda gunakan dan mengirim gambar yang paling sesuai dengan tampilan itu. Jika Anda memiliki layar dengan kerapatan piksel tinggi, Anda dapat memutuskan untuk mengirim gambar berkualitas lebih tinggi ke layar itu. Gambar yang sama ini tidak akan berarti pada layar yang kurang mumpuni, dan kualitas ekstra akan hilang sementara ukuran file ekstra akan diunduh tanpa alasan yang sebenarnya.
Situs responsif yang benar-benar hebat mempertimbangkan seluruh pengalaman pengguna dan bekerja untuk menyesuaikan pengalaman itu tidak hanya berdasarkan jenis perangkat atau ukuran layarnya, tetapi aspek penting lainnya dari perangkat keras juga.
4. Isi Dengan Konteks
Awalnya, desain web responsif menerima namanya karena ide tata letak situs merespons ukuran layar yang berbeda, tetapi Anda dapat merespons lebih dari sekadar ukuran layar. Berdasarkan contoh sebelumnya menggunakan kekuatan dan kelemahan perangkat, Anda dapat menggunakannya, serta data lain seperti tanggal dan waktu, untuk benar-benar menyesuaikan pengalaman situs web.
Bayangkan sebuah situs web untuk acara pameran dagang besar. Meskipun situs web yang responsif akan mengubah tata letak halaman situs untuk diskalakan dengan layar yang berbeda, Anda juga dapat menggunakan tanggal untuk menentukan konten apa yang paling penting untuk ditampilkan. Jika itu adalah periode waktu sebelum acara, Anda mungkin ingin menampilkan informasi pendaftaran secara mencolok. Namun, jika acara tersebut benar-benar terjadi pada saat itu, pendaftaran mungkin bukan konten yang paling penting. Sebaliknya, Anda dapat memutuskan bahwa jadwal acara hari itu lebih penting karena lebih relevan dengan kebutuhan mendesak pengguna.
Dengan mengambil langkah lebih jauh, Anda dapat menggunakan GPS perangkat untuk menentukan di mana mereka sebenarnya berada di pameran dagang. Anda dapat memberi mereka konten interaktif berdasarkan lokasi mereka, menunjukkan kepada mereka stan atau sesi terdekat untuk memulai.
5. Aksesibilitas
Contoh terakhir yang akan kita lihat untuk bagaimana sebuah situs dapat benar-benar menanggapi kebutuhan pengunjung adalah memikirkan aksesibilitas situs web . Situs web harus dapat digunakan oleh sebanyak mungkin orang, termasuk mereka yang memiliki kecacatan. Situs web Anda harus dapat digunakan oleh seseorang yang membutuhkan pembaca layar atau perangkat lunak terbantu lainnya untuk mengakses kontennya. Dengan cara ini, situs Anda menanggapi kebutuhan mereka karena Anda telah memastikan bahwa pengalaman, sementara berbeda untuk pengunjung penyandang cacat, masih sesuai.
Dengan menanggapi sebanyak mungkin titik data, dan bukan hanya ukuran layar, situs web bisa jauh lebih dari sekadar "mobile friendly." Ini bisa menjadi pengalaman yang benar-benar responsif dalam setiap arti frasa.