Hover telah digunakan di situs web selama bertahun-tahun sebagai cara untuk memberikan potongan informasi kepada pengunjung tanpa memicu tindakan. Dengan smartphone dan tablet secara bertahap mengambil alih internet, kita harus memberi mereka perhatian lebih saat merancang sebuah situs web. Karena layar sentuh tidak dapat menangani hover, kita perlu melihat alternatif untuk mengarahkan efek. Jika Anda membuat situs web sendiri atau tidak memiliki sumber daya untuk mempekerjakan perancang web profesional, tutorial ini cocok untuk Anda.
Anda dapat mengelola efek hover dengan layar sentuh tetapi ini bisa sedikit canggung. Anda mungkin lebih baik merancang semuanya dan menggunakan sesuatu yang lain sama sekali. Jika Anda ingin menggunakannya di situs desktop, Anda biasanya memiliki tiga alternatif untuk mengarahkan efek pada situs web seluler:
- Hapus semuanya dan gantikan dengan tindakan utama.
- Tambahkan menu sekunder di mana Anda dapat mengetuk sekali untuk efek melayang dan sekali lagi untuk tindakan utama.
- Tempatkan informasi hover di halamannya sendiri.
Semua akan bekerja dengan baik pada layar sentuh dan desktop tetapi akan membutuhkan beberapa tweak desain untuk diimplementasikan dalam desain yang ada. Anda dapat mengatasinya dengan JavaScript atau kode jQuery pintar juga jika Anda memiliki keterampilan tetapi jika Anda mencoba untuk memikirkannya sendiri, Anda mungkin lebih baik menggunakan alternatif desain daripada kode. Jika Anda ingin menjelajahi alternatif kode untuk efek hover, kunjungi halaman ini.
Hapus efek hover dari desain Anda
Kecuali jika Anda dapat menggunakan perancang web lepas untuk membantu Anda, Anda mungkin lebih baik menghapus efek hover secara bersamaan. Tentu mereka terlihat rapi dan dapat menawarkan informasi tambahan yang bermanfaat tetapi selalu ada cara lain untuk mencapai efek yang sama.
Anda bisa mempertahankan aksi menu sebagai tindakan utama dan memasukkan informasi tambahan di halaman lain. Anda bisa menggunakan kotak breakout, popup, menambah konten deskriptor untuk poin yang Anda coba buat atau yang lain. Jika Anda tidak memiliki keterampilan untuk mengimplementasikan jQuery, ini mungkin opsi paling sederhana.
Tambahkan menu sekunder
Menu sekunder mencakup ketukan pertama yang akan mensimulasikan efek hover. Anda dapat memasukkan informasi dalam menu dan menampilkan menu kedua dalam elemen yang sama. Menu kedua itu bertindak sebagai seleksi aktual seperti yang akan terjadi pada desktop. Pers pertama mensimulasikan hover mouse dan pers kedua mensimulasikan pengguna mengambil tindakan utama.
Ini adalah alternatif yang rapi untuk mengarahkan efek tetapi dibatasi oleh ukuran layar dan membatasi jumlah informasi yang dapat Anda tambahkan ke efek Anda. Efek hover dibatasi oleh sifatnya tetapi lebih terbatas pada ponsel oleh layar real estat yang Anda hadapi. Jika Anda benar-benar ingin memasukkan data tambahan dengan cara yang tidak standar, ini bisa saja itu.
Tempatkan informasi hover di halamannya sendiri
Mungkin pilihan yang lebih mudah adalah memasukkan informasi hover ke dalam halamannya sendiri dengan tautan teks. Ini menyederhanakan menu Anda dan membuat navigasi tetap mudah. Hyperlink berfungsi di seluruh perangkat dan Anda mendapatkan halaman ekstra untuk ukuran situs dan SEO. Kelemahannya adalah Anda harus menambah konten tambahan setidaknya 300 kata atau lebih agar bisa berfungsi.
Selama Anda dapat membalut informasi dengan cukup hati-hati sehingga dapat membaca dengan baik dan menambah nilai bagi pembaca, saya pribadi berpendapat ini adalah alternatif terbaik. Memutuskan di mana menempatkan tautan-tautan itu ke data tambahan terserah Anda dan akan tergantung pada desain Anda, tetapi halaman tambahan memberi Anda kesempatan ekstra untuk menambahkan panggilan untuk bertindak, untuk menambahkan nomor telepon, alamat email, dan informasi tambahan apa pun yang dapat digunakan untuk melakukan penjualan.
Tetap dengan melayang
Jika Anda ingin menggunakan semacam efek hover di situs web utama Anda, Anda harus memasukkannya ke situs seluler Anda, atau setidaknya versi seluler. Ada alternatif menu beralih atau solusi JavaScript tetapi mereka akan membutuhkan ahli untuk menerapkan. Halaman ini membahas alternatif Anda jika Anda ingin menjelajahinya lebih jauh.
Salah satu perangkap termudah untuk jatuh ketika Anda memulai sendiri atau membangun situs web pertama Anda adalah merancang untuk diri sendiri dan bukan audiens Anda. Anda tentu harus merancang sesuatu yang Anda sukai, tetapi ketika mempertimbangkan kegunaan Anda harus memprioritaskan audiens. Anda juga harus mempertimbangkan perangkat yang akan mereka gunakan dan cara mereka paling mungkin terlibat dengan situs web Anda.
Jika audiens Anda masih muda, mereka akan menggunakan ponsel. Jika mereka menggunakan ponsel, arahkan efek dan opsi desain lain seperti itu bukan pilihan terbaik Anda.
