Mengapa Anda harus mempertimbangkan desain yang mengutamakan seluler untuk situs web Anda?

Meskipun sudah lima tahun sejak pengumuman 'Mobilegeddon' Google, menciptakan Pengalaman Pengguna (UX) seluler masih menjadi tantangan bagi banyak desainer. Faktanya, mungkin sulit untuk membedakan antara apa yang membuat desain benar-benar berfungsi untuk pengguna seluler, atau hanya secara visual kurang rumit.

Di sinilah strategi “mobile-first” menjadi sangat penting. Mengingat penggunaan internet seluler diprediksi meningkat tujuh kali lipat antara 2017 dan 2022, kebutuhan untuk melayani pengguna seluler tidak akan berkurang. Dengan mengingat hal ini, Anda mungkin ingin mempertimbangkan untuk menambahkan pembuat WordPress yang mengutamakan seluler ke cache alat desain web Anda.

Mari kita mulai!

Mengapa Anda harus mendesain mobile-first (dan perbedaannya dengan mobile-friendly)

Pertama, penting untuk memahami perbedaan antara pendekatan “mobile-first” dan pendekatan “mobile-friendly”. Meskipun terkadang Anda mungkin melihat istilah-istilah ini digunakan secara bergantian, itu bukanlah hal yang sama. Sebenarnya, baik spesifikasi teknis maupun metode pelaksanaannya bisa sangat berbeda.

Jika Anda ingin melihat pendekatan yang mengutamakan seluler, beberapa contoh bagus termasuk situs web Apple, YouTube, dan Airbnb. Tes cepat adalah menarik situs-situs ini di komputer desktop dan perangkat seluler Anda. Jika perbedaannya sulit dideteksi atau tidak ada sama sekali, Anda akan melihat bukti desain yang mengutamakan seluler.

Mari kita lihat beranda YouTube untuk beberapa contoh pilihan desain yang mengutamakan seluler:

Penggunaan gambar besar, teks minimal, dan menu berbasis ikon adalah semua cara YouTube memprioritaskan pengguna seluler. Itu bahkan telah meninggalkan struktur menu desktop yang lebih tradisional untuk menu 'hamburger' yang berfungsi dengan baik di layar ponsel.

Sekarang, saya ingin beralih ke pendekatan ramah seluler untuk melihat lebih dekat. Ini sebenarnya bisa menjadi jalan yang lebih rumit untuk diambil. Ini karena prosesnya bergantung pada pengkodean untuk layar yang lebih besar terlebih dahulu, kemudian menggunakan CSS untuk mencapai pengalaman yang lebih baik di layar kecil. Misalnya, jika Anda mengakses situs web ramah seluler di ponsel, kode akan mendeteksi tampilan Anda dan mengirimkan format 'ramah' ke perangkat Anda.

Dalam situasi ini, menu biasanya akan berubah, gambar akan dioptimalkan, dan pengalaman Anda akan sedikit lebih baik untuk ukuran layar yang Anda gunakan. Namun, Anda mungkin juga kehilangan beberapa fungsi dalam pemformatan ulang. Misalnya, beberapa elemen mungkin tersembunyi di layar yang lebih kecil atau gambar, dan grafik akan menjadi bertumpuk untuk mengakomodasi tata letak seluler.

Di Flywheel, kami percaya bahwa Desain itu penting. Jika Anda setuju, unduh wallpaper desktop Design Matters gratis ini hari ini!

Namun, dengan mobile-first pendekatan, Anda akan membangun untuk tampilan seluler sejak awal. Meskipun desain yang mengutamakan seluler mungkin menggunakan beberapa kerangka kerja desain yang sama dengan sepupunya yang ramah, ia menempatkan pengguna seluler sebagai perhatian utama. Anda juga dapat melihat mobile-first sebagai strategi desain yang memberikan persis apa yang dibutuhkan sejak awal, sementara strategi mobile-friendly mengadaptasi apa yang Anda miliki ke layar yang lebih kecil.

Akibatnya, lebih masuk akal untuk mendesain untuk sebagian besar pengguna Anda. Memulai dengan mempertimbangkan seluler berarti Anda dapat membangun satu situs dan mengirimkan konten yang dirancang khusus untuk jumlah pengunjung situs terbesar, tanpa kehilangan fungsionalitas atau mengurangi pengalaman.

Bagaimana Anda bisa mendapatkan keuntungan dari desain mobile-first

Saya sudah menyebutkan Mobilegeddon, tetapi ada baiknya membahas langkah terbaru Google untuk memprioritaskan situs seluler. Pada Juli 2019, raksasa pencarian itu menaikkan taruhan dan mulai mengindeks berbasis seluler.

Pada kenyataannya, ini sebenarnya dikecualikan di situs mana pun yang sebelumnya diindeks, bahkan jika itu dari variasi desktop. Namun, pasti ada lebih banyak cerita mobile-first.

Saat Anda mendesain dengan strategi mobile-first, Anda kemungkinan akan menggunakan beberapa praktik terbaik desain UX yang telah dicoba dan benar. Ini mengingat pengguna Anda, dan diarahkan untuk meningkatkan pengalaman pengguna. Semua ini terbukti menguntungkan keuntungan Anda dengan menjaga pengunjung di situs lebih lama dan lebih terlibat dalam konten Anda.

Selain itu, pola pikir seluler membawa serta sejumlah opsi lain. Ini mungkin termasuk menggunakan interaksi waktu nyata, strategi berbasis lokasi, dan banyak lagi.

Bagaimana membangun dengan strategi mobile-first

Selanjutnya, saya ingin melihat beberapa kiat utama yang dapat membantu Anda memulai strategi yang mengutamakan seluler. Meskipun ini dapat dianggap sebagai praktik yang direkomendasikan untuk desain situs apa pun, ada beberapa hal yang tidak dapat Anda terapkan hanya dengan CSS mobile-friendly.

Tetap sederhana dengan menggabungkan konten Anda

Ini adalah pendekatan yang cukup banyak digunakan yang secara sistematis dapat membantu Anda mendeklarasikan konten Anda sebelum beralih ke situs yang mengutamakan seluler. Tidak efisien untuk mencoba dan bekerja dengan konten yang mungkin baru saja Anda hapus nanti.

Konsolidasi konten memiliki proses yang cukup fleksibel namun preskriptif yang dimulai dengan membuat katalog konten yang ada. Alat yang tersedia seperti Google Analytics dapat digunakan untuk membantu proses ini, dan dapat menunjukkan dengan tepat kinerja area konten tertentu:

Setelah Anda mengambil stok konten Anda dan menganalisis kinerjanya, Anda dapat mulai membuat keputusan tentang gaya masa depan dan strategi konten Anda.

Ubah desain situs Anda dengan menggunakan tema mobile-first

Jika Anda memperbarui situs web yang berfokus pada desktop dengan desain yang mengutamakan seluler, Anda mungkin harus memilih tema baru. Ini karena pendekatan mobile-first tidak diterapkan pada desain yang sudah ada – ini adalah transformasi dengan strategi yang berbeda sama sekali.

Jika Anda belum menggunakan pembuat WordPress mobile-first, saya sangat menyarankan untuk mempertimbangkannya. Tidak hanya WordPress sebagai Sistem Manajemen Konten (CMS) paling populer yang tersedia, ia juga menawarkan tema yang paling serbaguna. Ini mencakup banyak tema mobile-first yang semuanya dikemas dengan fitur yang dapat membantu menjaga desain baru Anda tetap pada jalurnya.

Manfaatkan potensi teknologi seluler dengan desain inovatif

Salah satu keuntungan besar dalam mendesain untuk seluler, seperti yang kami sebutkan sebelumnya, adalah Anda tidak lagi terkunci dalam ruang dan waktu yang akan digunakan pengguna desktop. Misalnya, Anda dapat mendesain dengan asumsi bahwa pelanggan Anda benar-benar bisa berada di mana saja. ketika mereka berinteraksi dengan situs web Anda.

Ini membuka pintu untuk memprioritaskan pengembangan yang menggabungkan elemen-elemen seperti Augmented Reality (AR), aktivasi suara, fitur layar sentuh, dan banyak lagi. Misalnya, salah satu opsi berkemampuan sentuh yang populer dan menarik adalah membuat gamify situs web Anda dengan 'roda putar':

Ini adalah opsi menyenangkan yang memberi Anda cara untuk mengumpulkan informasi prospek sambil menawarkan kupon atau diskon. Versi seluler ini sering memberi pengguna opsi untuk benar-benar 'memutar' roda dengan menggesekkan jari mereka di atasnya.

Beberapa kemungkinan lain yang dapat Anda pertimbangkan dengan desain mobile-first meliputi:

• Menggunakan opsi tanda tangan yang diaktifkan dengan sentuhan untuk hal-hal seperti penandatanganan kontrak dan kustomisasi produk.
• Memanfaatkan AR untuk memberikan pengalaman menarik di mana pengguna dapat melihat seperti apa produk virtual di rumah mereka.
• Membuat opsi atau diskon penjualan berbasis lokasi dengan pemberitahuan push dan teknologi GPS.

Ada banyak cara lain untuk memaksimalkan peluang yang dapat diperkenalkan oleh pendekatan desain yang mengutamakan seluler. Kuncinya adalah menyeimbangkan bentuk dan fungsi, karena Anda ingin memastikan bahwa Anda tetap memberikan pengalaman yang ramah pengguna.

Kesimpulan

Setelah Anda memahami perbedaan mendasar antara strategi mobile-friendly dan mobile-first, Anda dapat memulai perombakan situs web mobile-first Anda sendiri. Karena adopsi penggunaan internet seluler sepertinya tidak akan menurun dalam waktu dekat, saya sangat merekomendasikan untuk mengevaluasi situs web Anda saat ini untuk area di mana Anda dapat menerapkan praktik yang mengutamakan seluler.

Saat Anda memulai rencana desain yang mengutamakan seluler, Anda dapat mengingat tiga tip sederhana ini:

1. Buat konten Anda tetap sederhana dan lugas.
2. Ubah desain situs Anda dengan tema mobile-first.
3. Manfaatkan fitur teknis unik dari perangkat seluler.

Apakah Anda sedang mengerjakan perubahan yang mengutamakan seluler, dan jika ya, bagaimana hasilnya? Beri tahu kami di bagian komentar di bawah!

Ingin lebih banyak tips untuk mendesain situs?

Dalam panduan ini, kami akan membahas tip tentang cara bekerja lebih cepat untuk mempercepat alur kerja WordPress Anda dan cara membongkar tugas alur kerja desain web. Dari penyiapan situs awal hingga menjalankannya, temukan bagaimana Anda dapat memangkas jam kerja Anda sehari-hari! Unduh panduan gratis di bawah ini.