7 Praktik Terbaik Desain Situs Web Seluler (Dengan Contoh)
Diterbitkan: 2022-11-04
Cara kita mengakses internet telah berubah selama sepuluh tahun terakhir. Kami telah beralih dari masuk di rumah di komputer desktop ke mengunjungi situs favorit kami di ponsel cerdas dan tablet, sering kali saat kami bepergian.
Jadi, jika Anda ingin memberikan pengalaman yang luar biasa kepada audiens Anda, Anda memerlukan desain situs web seluler yang efektif. Tapi apa artinya membuat situs Anda mobile-friendly dan bagaimana Anda melakukannya?
Dalam panduan ini, kami akan memberi tahu Anda semua yang perlu Anda ketahui tentang desain situs web seluler. Teruslah membaca untuk menemukan praktik terbaik kami menuju tahun 2023 dan lihat contoh beberapa situs dan template ramah seluler terbaik.
Apa yang kami maksud dengan "ramah seluler?"
Situs web ramah seluler adalah situs web yang berfungsi di semua perangkat. Tidak ada yang dikorbankan baik Anda mengakses situs di ponsel cerdas, tablet, atau desktop—namun, beberapa elemen mungkin berubah bergantung pada perangkat yang Anda gunakan untuk meningkatkan pengalaman.
Munculnya smartphone adalah wahyu untuk akses internet, tetapi juga menghadirkan sejumlah tantangan bagi pengembang web. Layar yang lebih kecil dan tidak adanya keyboard berarti beberapa situs web tidak berfungsi dengan baik di perangkat seluler, dan yang lainnya tidak berfungsi sama sekali.
Pengembang segera menyadari bahwa mereka harus mengubah cara mereka membangun situs untuk mengoptimalkannya untuk seluler. Jadi, praktik terbaik desain situs web seluler baru dikembangkan untuk memungkinkan situs web ditampilkan dengan benar di semua perangkat.
Mengapa desain situs web seluler penting?
Menanggapi pertumbuhan lalu lintas internet seluler, Google memperbarui algoritme pencariannya pada tahun 2015 untuk memperhitungkan seberapa ramah situs web untuk seluler. Algoritme baru memberi penghargaan kepada situs yang dioptimalkan untuk perangkat seluler sambil menghukum yang tidak.
Jadi, jika Anda tidak menggunakan desain situs web seluler yang efektif, kemungkinan kecil Anda akan muncul di hasil pencarian organik untuk kata kunci yang Anda inginkan. Tetapi bahkan jika Anda berhasil menarik pengguna ke situs Anda, Anda akan mengalami masalah.
Menurut data terbaru, 62,06% dari semua lalu lintas situs web sekarang berasal dari perangkat seluler. Jika pengguna ini tiba di situs Anda dan merasa situs tersebut tidak ditampilkan atau berfungsi dengan baik di perangkat mereka, mereka mungkin akan pergi untuk mencari solusi yang lebih baik. Itu berarti lebih dari separuh pelanggan potensial Anda akan mengklik bahkan sebelum mereka memberi kesempatan pada situs Anda.
Dengan memiliki situs yang mobile-friendly, Anda tidak hanya memberikan halaman Anda kesempatan yang lebih baik untuk ditemukan, tetapi Anda juga akan menurunkan rasio pentalan dan memastikan bahwa setiap pengunjung dapat menggunakan situs Anda secara maksimal.
Praktik terbaik desain situs web seluler
Oke, jadi sekarang Anda tahu betapa pentingnya desain situs web seluler. Tapi apa yang perlu Anda lakukan untuk membuat situs Anda mobile-friendly?
Berikut adalah tujuh praktik terbaik untuk diikuti.
Gunakan teks yang lebih besar
Perbedaan terbesar antara desktop dan perangkat seluler (terutama smartphone) adalah ukuran layarnya. Ukuran rata-rata layar smartphone adalah 6,3 inci, dibandingkan dengan laptop yang memiliki layar mulai dari 11” – 17”, dan monitor komputer yang sering berukuran 20” atau lebih besar.
Jadi, saat mendesain situs Anda untuk seluler, prioritas pertama Anda harus memastikan bahwa judul dan konten Anda masih dapat dibaca di layar yang lebih kecil. Ini berarti meningkatkan ukuran teks Anda.
Tentu, sebagian besar perangkat memberi Anda kemampuan untuk memperbesar jika diperlukan, tetapi itu tidak bagus untuk pengalaman pengguna Anda. Idealnya, semua teks Anda dapat langsung dibaca tanpa harus melakukan penyesuaian apa pun.
Buat tombol Anda lebih besar
Sama pentingnya dengan konten Anda adalah tombol CTA Anda. Ini memungkinkan pengunjung untuk mengambil langkah berikutnya dan sangat penting untuk mengumpulkan prospek dan menghasilkan penjualan.
Jika tombol Anda terlalu kecil, pengguna tidak akan dapat membaca teks tombol Anda. Mereka juga akan kesulitan mengkliknya dengan ibu jari atau jari.
Sama seperti teks, pengguna dapat memperbesar tombol Anda—tetapi lebih baik jika mereka tidak perlu melakukannya. Sebagai gantinya, pastikan tombol Anda berukuran tepat untuk layar sehingga mudah diklik dan dibaca segera setelah halaman Anda dimuat.
Sederhanakan menu Anda
Menu tarik-turun sangat bagus untuk situs web yang memiliki banyak halaman. Anda dapat membuat kategori dan subkategori untuk halaman Anda, membuatnya cepat dan mudah bagi pengunjung untuk menemukan apa yang mereka cari.
Hanya ada satu masalah: mereka tidak berfungsi untuk perangkat seluler. Tanpa mouse, menu dropdown menjadi kikuk dan layar yang lebih kecil membuatnya sulit untuk digunakan. Jika situs web desktop Anda menggunakan menu tarik-turun, ada baiknya beralih ke menu yang lebih sederhana untuk versi seluler.
Mulailah dengan mengurangi jumlah opsi. Anda mungkin ingin memilih lima halaman terpopuler dan mencantumkannya. Alih-alih dropdown, arahkan pengguna ke halaman yang mencantumkan berbagai kategori Anda. Ini akan memudahkan mereka untuk mengklik opsi yang mereka inginkan.
Sertakan fitur pencarian
Mungkin cara terbaik untuk membantu pengunjung seluler menemukan apa yang mereka cari adalah dengan menyertakan fitur pencarian. Ini pada dasarnya meniadakan kebutuhan akan menu sama sekali dan memungkinkan pengguna untuk memberi tahu Anda apa yang mereka inginkan.
Banyak desain situs web seluler menempatkan fitur pencarian di depan dan di tengah, memungkinkannya untuk didahulukan dari menu. Jika situs web Anda memiliki banyak kategori dan halaman, ini mungkin pilihan yang cerdas.
Optimalkan gambar Anda
Gambar sama pentingnya untuk menyampaikan pesan Anda seperti kata-kata, jadi Anda ingin mereka ditampilkan dengan benar.
Berikut adalah beberapa tips:
- Pastikan gambar Anda dapat dilihat bahkan di layar terkecil sekalipun. Anda mungkin harus menyelaraskan kembali situs Anda sehingga gambar dapat memenuhi seluruh layar.
- Hindari foto lanskap. Kebanyakan orang menggunakan ponsel mereka dalam posisi tegak, yang akan membuat gambar lanskap tampak lebih kecil. Sebagai gantinya, gunakan foto persegi atau potret.
- Kompres gambar Anda sebanyak mungkin. Perangkat seluler tidak memiliki daya komputasi yang sama dengan desktop, sehingga gambar yang terlalu besar dapat meningkatkan waktu pemuatan.
Citra yang tepat dapat menjadi pembeda antara melakukan penjualan atau kehilangan pelanggan, jadi pastikan gambar Anda memiliki kesempatan untuk bersinar, apa pun perangkat yang digunakan untuk melihatnya.
Situs web yang indah dengan kekuatan konversi penuh dari Leadpages
Rasakan satu-satunya pembuat situs web online yang memungkinkan Anda membuat situs web dengan konversi tinggi dengan mudah dengan penyesuaian bebas kode.
Bangun halaman Anda untuk jempol
Sebagian besar desain situs web seluler adalah mengingat bahwa pengunjung akan menggunakan ibu jari mereka, bukan mouse dan keyboard, untuk berinteraksi dengan berbagai elemen di halaman Anda.
Latihan yang baik adalah mengambil smartphone dan melihat area mana yang mudah diakses dengan ibu jari Anda. Anda akan menemukan bahwa sudut sulit dijangkau dengan nyaman, dan ponsel yang lebih besar membuat hampir mustahil untuk mencapai bagian atas layar.
Jadi, jika ada tombol yang Anda ingin orang mengkliknya, letakkan di tempat yang dapat diakses dengan ibu jari—idealnya tepat di tengah layar.
Permudah untuk menghubungi Anda
Seperti yang Anda lihat, untuk membuat situs mobile-friendly, seringkali harus disederhanakan. Meskipun ini memberikan pengalaman pengguna yang lebih baik, ini mungkin membuat pengunjung bertanya-tanya jika beberapa elemen atau informasi harus dihapus.
Untuk memberikan jawaban, buat mereka mudah berbicara dengan Anda atau anggota tim Anda. Berikut adalah beberapa opsi:
- Tawarkan layanan obrolan untuk menghubungkan pengguna ke tim Anda. Atau gunakan chatbot untuk menjawab pertanyaan umum.
- Berikan nomor telepon yang dapat diklik sehingga pengunjung dapat menghubungi Anda.
- Gunakan formulir kontak yang disederhanakan atau tautan yang mengarahkan mereka langsung ke email mereka sehingga mereka dapat mengirimi Anda pesan.
Bagaimana Anda mendesain situs web untuk perangkat seluler?
Semuanya baik-baik saja untuk mengetahui apa yang perlu Anda lakukan untuk membangun situs web yang ramah seluler. Tapi bagaimana Anda benar-benar melakukannya, terutama jika Anda bukan seorang desainer web atau seseorang yang paham teknologi?
Untungnya, pembuat situs web seperti Leadpages memudahkan pembuatan situs cantik yang mengikuti praktik terbaik seluler.
Untuk memulai, semua template kami menggunakan desain responsif, yang berarti mereka secara otomatis mengonfigurasi ulang diri mereka sendiri agar sesuai dengan perangkat yang mereka lihat. Setelah Anda memilih template, seret dan lepas elemen ke tempatnya, edit teks Anda, dan tambahkan gambar Anda.
Saat membuat situs, Anda dapat membuat bagian khusus perangkat untuk lebih meningkatkan pengalaman pengguna. Misalnya, jika Anda ingin bagian pahlawan Anda ditampilkan dengan cara tertentu di ponsel cerdas, Anda dapat membuat bagian pahlawan yang terpisah khusus untuk perangkat itu.
Terakhir, Anda dapat melihat pratinjau situs Anda dalam tampilan desktop, tablet, dan ponsel cerdas untuk memastikan Anda puas dengan tampilan situs Anda di semua perangkat.
Contoh desain situs web seluler
Butuh sedikit inspirasi sebelum memulai di situs Anda sendiri? Berikut adalah lima contoh desain situs web seluler yang sangat baik untuk Anda tiru.
Jereshia Hawk
Ada banyak hal yang disukai tentang versi seluler situs web Jereshia. Gambar pahlawan menggunakan orientasi potret, yang sangat cocok untuk tampilan seluler. Dia juga mengatur ulang bagian pahlawannya sehingga judul, foto, dan deskripsinya muat di layar ponsel. Terakhir, tombol chat di pojok memudahkan pengunjung untuk berbicara dengan seseorang jika ada pertanyaan.
Mattia Di Stasi
Ini adalah desain ponsel yang sangat bersih yang enak dipandang. Kekacauan diperkuat di layar kecil, jadi desain situs web seluler yang bersih dan sederhana selalu menjadi pilihan cerdas. Mattia mencapai tampilan yang bersih sambil juga memanfaatkan sejumlah visual menarik yang pas di layar.
Pertemuan Dunia
Situs web World Encounter penuh dengan grafik dan konten yang menarik, namun tidak ada yang dikorbankan pada versi seluler situs mereka. Semuanya telah diubah ukurannya dengan sempurna untuk layar yang lebih kecil, memberikan pengalaman hebat bagi pengunjung seluler.
Ubah Template Agen
Template Leadpages ini terlihat bagus di perangkat seluler. Judul, deskripsi, dan tombol CTA di bagian pahlawan ditampilkan dengan sempurna tanpa harus menggulir ke bawah, dan bagian lainnya jelas dan terbaca untuk pengguna seluler.
Templat Studio Kebugaran Virtual Marvel
Berikut ini satu lagi tampilan bagaimana template Leadpages beradaptasi dengan sempurna ke perangkat seluler. Template apa pun yang Anda gunakan, menu Anda akan secara otomatis dipindahkan ke ikon hamburger untuk menghilangkan kekacauan dan konten Anda akan diatur ulang agar sesuai dengan layar ponsel. Anda kemudian dapat membuat penyesuaian lebih lanjut untuk membuat desain ideal Anda.
Bangun situs web seluler Anda hari ini
Butuh desain situs web seluler yang tepat untuk bisnis Anda? Dengan templat yang ramah seluler, Pembuat Seret & Lepas yang mudah digunakan, dan tampilan khusus perangkat, Leadpages memungkinkan siapa saja untuk membangun situs yang mengikuti praktik terbaik seluler.
Coba Leadpages gratis selama 14 hari dan online hari ini.
Coba Leadpages gratis selama 14 hari
Buat situs web dan halaman arahan Anda dengan mudah dengan satu-satunya platform yang dirancang oleh kutu buku pemasaran.
Bingung mau baca apa selanjutnya?
Inilah yang kami sarankan:
→ 11 Tren Desain Situs Web Modern yang Perlu Diketahui untuk Tahun 2023
→ Berencana untuk membuat Situs Web Anda sendiri? Gunakan Paket Konten Situs Web 9 Langkah ini
→ Berapa Biaya Membangun Situs Web untuk Usaha Kecil pada 2022?