Meskipun jumlah situs web tanpa pengoptimalan seluler menyusut, masih ada beberapa yang dirancang hanya untuk desktop. Sayangnya, layanan web 'mobilizer' Google sebelumnya telah dihentikan. Penerus spiritual layanan ini adalah Google Weblight, yang dirancang seputar pengoptimalan untuk koneksi yang lambat daripada merevisi situs untuk tampilan seluler. Di luar layanan Google, ada sejumlah praktik dan alat yang harus dipertimbangkan saat mengembangkan situs dengan mempertimbangkan seluler.
Langkah
Bagian 1 dari 2: Bereksperimen dengan Google Weblight
Langkah 1. Analisis cara kerja Weblight
Weblight adalah algoritme yang dibuat oleh Google untuk memberi pengguna pemuatan halaman yang lebih cepat dan lebih ringan saat berada dalam kondisi jaringan yang buruk. Ini berarti bahwa Weblight tidak memiliki antarmuka pengguna dan beroperasi di backend. Halaman dilucuti dari elemen yang lebih kompleks, memberikan pengalaman yang ringan dan ringan, daripada yang dioptimalkan secara eksplisit untuk platform seluler.
Langkah 2. Uji perubahan situs dengan Weblight
Pada perangkat seluler Anda, cukup tambahkan URL situs lengkap Anda di akhir alamat weblight (mis. jika situs web Anda adalah "situs web saya.com" maka Anda memasukkan https://googleweblight.com/?lite_url=https://situswebsaya.com). Halaman tersebut akan memuat versi yang disederhanakan namun fungsional dari dirinya sendiri. Dengan elemen yang dihapus, beberapa situs mungkin tampak jauh lebih baik di layar perangkat seluler.
Langkah 3. Kenali keterbatasannya
Perlu diingat bahwa ini bukan alat konverter eksplisit yang dirancang untuk interaksi pengguna. Meskipun memasukkan situs web secara manual dapat digunakan dalam keadaan darurat, Weblight dirancang untuk kecepatan, bukan kegunaan.
Bagian 2 dari 2: Mendesain untuk Kompatibilitas Seluler
Langkah 1. Ingatlah batasan perangkat seluler
Perangkat seluler memiliki beberapa aspek yang membedakannya dari perangkat desktop. Fitur inti ini harus menjadi pertimbangan utama saat membuat situs untuk konsumsi seluler.
- Layar kecil dan vertikalitas: Meskipun resolusi layar pada perangkat seluler terus meningkat, ukuran dan faktor bentuk tetap menjadi perhatian untuk desain situs. Merancang situs ke dalam tata letak kolom tunggal adalah yang terbaik untuk ponsel (tablet sering kali dapat menggunakan situs desktop tanpa terlalu banyak masalah).
- Antarmuka sentuh: Elemen halaman harus ditempatkan dengan mempertimbangkan ukuran jari. Elemen yang menggunakan mouseover harus diminimalkan atau didesain ulang untuk sentuhan (misalnya menu dropdown).
- Kecepatan data: Salah satu keuntungan besar perangkat seluler adalah penggunaan di luar jangkauan wifi, tetapi koneksi data biasanya lebih lambat dan kurang dapat diandalkan. Antarmuka pengguna (UI) harus tetap sederhana dan konten harus terlihat dan dapat diakses. Terlalu banyak kekacauan akan menghambat waktu muat dan membuat navigasi menjadi sulit.
Langkah 2. Gunakan layanan Content Management System (CMS)
Bagi mereka yang mengembangkan dengan sumber daya yang lebih sedikit, menggunakan layanan CMS seperti Wordpress atau Squarespace adalah pilihan yang bagus untuk desain seluler yang murah dan ramah pengguna. Tema yang memanfaatkan desain web responsif akan memberikan template termudah untuk situs seluler.
Desain web responsif adalah teori desain web yang mempromosikan penggunaan elemen desain yang lancar untuk memungkinkan transisi desain dan kegunaan yang mulus di seluruh platform
Langkah 3. Uji layar perangkat seluler menggunakan perangkat lunak desktop
Ada sejumlah aplikasi web gratis yang memungkinkan Anda meniru perangkat seluler untuk menguji estetika dan fungsionalitas situs web. Menggunakan alat ini semudah memilih perangkat uji yang diinginkan, lalu masuk ke situs web target untuk melihat pratinjau. Sebagian besar akan menyertakan alat untuk variabel seperti orientasi layar, kerapatan piksel, atau bahkan pemilihan browser. Beberapa contoh populer adalah:
- Emulator Mode Perangkat Chrome
- mobilephoneemulator.com
- screenfly (bagian dari quirktools)
- mobiletest.me (keanggotaan berbayar)
