Adakah anda mempunyai " laman web responsif "? Ini adalah laman web dengan tata letak yang berubah berdasarkan peranti pelawat dan saiz skrin. Reka bentuk web responsif kini merupakan amalan terbaik industri. Ia disyorkan oleh Google dan dijumpai di berjuta-juta tapak di seluruh Web. Walau bagaimanapun, terdapat perbezaan yang besar antara laman web yang hanya "sesuai" pada saiz skrin yang berbeza dan mempunyai laman web yang benar-benar responsif.
Saya secara rutin melihat syarikat-syarikat mereka bentuk semula laman web mereka dan menolak pembebasan akhbar yang memaparkan kebaikan reka bentuk mesra mudah alih baru mereka. Apabila saya melawat laman web tersebut, apa yang sering saya temui adalah susun atur yang memang berskala dan berubah untuk disesuaikan dengan skrin yang berbeza, tetapi itu adalah sejauh mereka mengambil idea responsif. Ini tidak mencukupi. Laman web yang benar-benar responsif tidak lebih daripada sekadar sesuai dengan skrin yang lebih kecil atau lebih besar. Di laman web ini, anda juga akan mendapati ciri-ciri penting berikut.
1. Prestasi yang dioptimumkan
Tidak ada yang suka menunggu tapak web untuk dimuatkan, dan apabila seseorang menggunakan peranti mudah alih dengan sambungan yang kurang daripada ideal, perlunya tapak untuk memuatkan dengan cepat adalah lebih penting.
Jadi bagaimana anda mengoptimumkan prestasi tapak anda? Sekiranya anda memulakan laman web baru sebagai sebahagian daripada reka bentuk semula, maka anda harus membuat satu titik untuk membuat anggaran prestasi sebagai sebahagian daripada projek tersebut. Jika anda bekerja dengan laman web yang sedia ada dan tidak bermula dari awal, langkah pertama adalah untuk menguji prestasi laman web anda untuk melihat tempat anda berdiri hari ini.
Sebaik sahaja anda mempunyai asas di mana tapak anda berdiri dengan bijak, anda boleh mula membuat peningkatan yang diperlukan untuk meningkatkan kelajuan muat turun. Tempat yang bagus untuk bermula mungkin dengan imej tapak anda. Imej-imej besar adalah pelopor # 1 ketika datang ke laman loading yang perlahan, sehingga mengoptimalkan imej Anda untuk pengiriman web dapat benar-benar membantu situs Anda dari sudut pandang kinerja.
Realitinya ialah prestasi laman web yang lebih baik dan kelajuan muat turun pantas adalah manfaat yang semua pengunjung akan menghargai. Lagipun, tiada siapa yang pernah mengadu bahawa laman web dimuatkan "terlalu pantas", tetapi jika laman web mengambil masa terlalu lama untuk memuatkan, ia benar-benar akan mengalihkan orang pergi sama ada secara responsif "sesuai" di skrin mereka atau tidak.
2. Hierarki Kandungan Pintar
Apabila sebuah laman web dipaparkan pada skrin besar, anda dapat meletakkan kandungan dalam pelbagai cara kerana real estat skrin besar yang ada. Anda sering boleh menyesuaikan mesej penting dan imej, kemas kini berita, maklumat acara dan navigasi tapak semua pada skrin sekali gus. Ini membolehkan pengunjung dengan mudah dan cepat mengimbas kandungan seluruh halaman dan memutuskan apa yang penting kepada mereka.
Senario ini berubah dengan dramatik apabila anda mengambil reka bentuk tapak dan mengubahnya untuk peranti skrin kecil, seperti telefon bimbit. Tiba-tiba anda bekerja dengan sebahagian kecil daripada realiti skrin yang anda ada sebelum ini. Ini bermakna anda perlu memutuskan apa yang akan muncul terlebih dahulu di laman web ini, apa yang akan mengikutinya, dan lain-lain. Daripada semua yang dilihat sekaligus, anda mungkin hanya mempunyai ruang untuk menunjukkan satu atau dua perkara (salah satunya adalah navigasi). Ini bermakna keputusan hierarki perlu dibuat. Malangnya, yang sering menentukan perkara yang pertama di skrin, dan kemudian kedua, dan lain-lain adalah cara halaman itu sendiri dikodkan. Ia adalah yang paling mudah, apabila membina laman responsif, untuk memaparkan apa yang pertama di dalam kod pertama di skrin, diikuti oleh item kedua dalam kod dan sebagainya. Malangnya, apa yang paling penting pada satu peranti mungkin tidak begitu kritikal terhadap yang lain. Laman yang benar-benar responsif memahami bahawa hierarki kandungan harus berubah bergantung pada situasi yang berbeza dan harus pandai tentang apa yang dipaparkan di mana.
Penambahbaikan dalam teknik susunatur CSS, termasuk CSS Grid Layout, Flexbox, dan banyak lagi, membolehkan pereka web dan pemaju lebih banyak pilihan apabila membincangkan kandungan secara bijak, bukannya dihalang oleh urutan kandungan tepat dalam kod HTML. Mengambil kesempatan daripada teknik susun atur baru ini akan menjadi lebih penting lagi sebagai landskap peranti, dan keperluan pengguna laman web kami, terus berkembang.
3. Pengalaman yang Mengambil Ke Akaun Kekuatan dan Kelemahan Peranti
Menghadapi topik peranti - setiap peranti yang seseorang boleh gunakan untuk melawat tapak anda mempunyai kedua-dua kekuatan dan kelemahan yang wujud pada platform tersebut. Laman responsif yang hebat memahami keupayaan dan batasan peranti yang berlainan dan menggunakannya untuk mencipta pengalaman tersuai yang paling sesuai untuk peranti apa pun pelawat boleh menggunakan pada ketika itu.
Contohnya, telefon bimbit termasuk beberapa ciri yang tidak dapat anda temukan dalam komputer meja tradisional. GPS adalah salah satu contoh ciri mudah alih (ya, anda boleh mendapatkan maklumat lokasi umum pada desktop juga, tetapi GPS peranti jauh lebih tepat). Tapak anda boleh menggunakan maklumat GPS untuk dengan bijak menghantar maklumat arah atau tawaran istimewa yang sangat terperinci dan khusus mengikut tepat di mana ia berada pada masa itu.
Satu lagi contoh utama dalam amalan ini adalah laman web yang memahami jenis paparan skrin yang anda gunakan dan menghantar imej yang paling sesuai dengan paparan tersebut. Jika anda mempunyai skrin dengan ketumpatan piksel yang tinggi, anda boleh membuat keputusan untuk menghantar imej berkualiti tinggi ke skrin itu. Imej yang sama akan menjadi tidak berguna pada skrin yang kurang berkemampuan, bagaimanapun, dan kualiti tambahan akan hilang sementara saiz fail tambahan akan dimuat turun tanpa sebab sebenar.
Tapak responsif yang benar-benar hebat menganggap keseluruhan pengalaman pengguna dan bekerja untuk menyesuaikan pengalaman itu berdasarkan bukan hanya jenis peranti atau saiz skrinnya, tetapi aspek penting lain juga perkakasan.
4. Kandungan Dengan Konteks
Pada mulanya, reka bentuk web responsif menerima namanya kerana gagasan susun atur tapak bertindak balas kepada saiz skrin yang berbeza, tetapi anda boleh bertindak balas dengan lebih daripada sekadar saiz skrin. Membangun pada contoh sebelumnya menggunakan kekuatan dan kelemahan peranti, anda boleh menggunakannya, serta data lain seperti tarikh dan masa, untuk benar-benar menyesuaikan pengalaman laman web.
Bayangkan tapak web untuk acara pameran perdagangan yang besar. Walaupun laman web responsif akan menukar susun atur laman web untuk skala dengan skrin yang berbeza, anda juga boleh menggunakan tarikh untuk menentukan kandungan yang paling penting untuk dipaparkan. Sekiranya tempoh masa sebelum acara tersebut, anda mungkin ingin memaparkan maklumat pendaftaran dengan jelas. Jika, bagaimanapun, peristiwa itu sebenarnya berlaku pada masa itu, pendaftaran mungkin bukan kandungan yang paling penting. Sebaliknya, anda boleh menentukan jadual hari kejadian adalah lebih kritikal kerana ia lebih relevan dengan keperluan segera pengguna.
Mengambil langkah lagi, anda boleh mengetik ke GPS peranti untuk menentukan di mana mereka berada di pameran perdagangan. Anda boleh memberi mereka kandungan interaktif berdasarkan lokasi mereka, menunjukkan mereka bilik atau sesi berhampiran untuk memulakan.
5. Kebolehcapaian
Contoh akhir kita akan melihat bagaimana tapak dapat benar-benar memberi respons kepada keperluan pengunjung adalah untuk memikirkan akses laman web . Laman web harus dapat digunakan oleh sebanyak mungkin orang, termasuk mereka yang mempunyai kecacatan. Laman web anda harus dapat digunakan oleh seseorang yang memerlukan pembaca skrin atau perisian bantuan lain untuk mengakses kandungannya. Dengan cara ini, laman web anda bertindak balas terhadap keperluan mereka kerana anda telah memastikan bahawa pengalaman, sementara berbeza untuk pengunjung kurang upaya, masih sesuai.
Dengan memberi respons kepada seberapa banyak titik data yang mungkin, dan bukan hanya saiz skrin, laman web boleh menjadi lebih daripada sekadar "mesra mudah alih." Ia boleh menjadi pengalaman yang benar-benar responsif dalam setiap segi frasa.