Pada masa sebelum CSS ada, web terlihat berbeda. Atau mungkin saya harus mengatakan bahwa semuanya tampak sama. Lagipula, hanya ada sedikit pilihan gaya.
Hyperlink berbasis teks adalah contoh yang bagus. Hampir setiap situs web menggunakan warna biru default yang sama. Dimungkinkan untuk mengubah warna tautan. Namun sebagian besar situs cenderung menggunakan warna biru.
Ya, itu membosankan di permukaan. Namun ini juga merupakan cara yang bagus untuk membantu pengguna menemukan tautan dengan cepat. Desainer tidak bisa menerapkan gaya mewah. Jadi, generasi pertama pengguna web belajar mencari teks berwarna biru yang bergaris bawah.
Kemudian CSS hadir dan benar-benar mengubah apa yang mungkin terjadi. Hyperlink bisa berupa warna pelangi apa saja. Mereka juga dapat menggunakan latar belakang, animasi, dan tipografi khusus.
Selain itu, kami dapat mengubah gaya tautan berdasarkan konteks. Hal ini memungkinkan untuk memiliki tautan dengan gaya berbeda di header dan area konten Anda, misalnya. Sangat menyenangkan memiliki pilihan. Namun ada juga beberapa kelemahan.
Terkadang kami mengambil gaya tautan khusus terlalu jauh. Kami menukar kesederhanaan dengan kompleksitas. Hal ini dapat mempersulit pengguna untuk membedakannya. Ini berdampak pada kegunaan dan aksesibilitas.
Jadi, apa yang harus kita ingat saat menata hyperlink? Berikut beberapa tip untuk menjadikannya cantik dan menjaganya tetap dapat digunakan.
Jadikan Hyperlink Mudah Dikenali
Pengguna kini lebih paham web dibandingkan beberapa dekade yang lalu. Desainer web menyadari hal ini. Namun terkadang hal ini membuat mereka memberikan terlalu banyak kredit kepada pengguna.
Kami melihat contoh di tautan yang hampir tidak terlihat. Mungkin warna tautannya hampir sama dengan teks lainnya. Atau garis bawah menyatu dengan latar belakang halaman.
Kehalusan mempunyai tempatnya dalam desain. Tapi itu tidak berlaku untuk hyperlink. Mereka harus menonjol – tidak peduli bagaimana Anda menatanya.
Warna tautan harus kontras dengan teks lainnya. Dan itu juga harus melewati pedoman aksesibilitas.
Tautan juga harus menyertakan satu atau lebih fitur desain. Itu bisa berupa garis bawah atau perubahan bobot font. Ini membantu individu buta warna membedakan tautan dari teks biasa.
Catatan aksesibilitas lainnya: selalu gunakan outline properti di tautan :focus negara. Pengguna yang bernavigasi melalui keyboard dapat lebih mudah mengidentifikasi tautan Anda. Kami telah menggunakannya dalam semua cuplikan di sini.
Lihat Pena Styling Hyperlink: Jadikan Mereka Dapat Dikenali oleh Eric Karkovack
Garis Bawah Harus Menjadi Pilihan Pertama
CSS membuka pintu air dalam hal bagaimana kita menata hyperlink. Dan banyak desainer menggunakannya untuk menghilangkan garis bawah.
Membuang garis bawah dapat menghasilkan tampilan yang “bersih”. Namun, hal ini juga membuat tautan lebih sulit dikenali. Ini sangat merepotkan dalam teks isi.
Bagian teks yang panjang dapat membuat pengguna frustrasi. Menjadi sulit untuk mempertahankan fokus. Namun keadaan menjadi lebih buruk ketika mereka tidak dapat menemukan tautan apa pun di dalamnya.
Itu sebabnya menggarisbawahi tautan harus menjadi pilihan pertama Anda. Ini adalah fitur sederhana yang membuat membaca sekilas konten menjadi lebih mudah.
Hal yang disayangkan adalah preferensi klien dapat menghalanginya. Beberapa mengasosiasikan garis bawah dengan desain web jadul.
Ini saat yang tepat untuk mendidik mereka. Jelaskan bagaimana garis bawah membantu pengguna mencapai tujuan mereka. Itu
kenyamanan tambahan dapat menghasilkan lebih banyak konversi. Mudah-mudahan, hal ini akan meyakinkan mereka untuk mengutamakan pengguna.
Selain itu, kita dapat menggunakan CSS untuk membuat garis bawah menjadi lebih menarik. Itu text-decoration-color Dan text-decoration-style properti menambahkan banyak pilihan gaya. Garis bawah mungkin kuno, tetapi tidak harus membosankan.
Lihat Pena Penataan Hyperlink: Gunakan Garis Bawah oleh Eric Karkovack
Pastikan Penataannya Konsisten
Penataan tautan juga harus konsisten. Menavigasi situs web akan menjadi lebih mudah diprediksi. Pengguna tidak perlu berpikir dua kali tentang cara berkeliling.
Namun, setiap tautan tidak harus terlihat sama. Konteks juga berperan di sini. Misalnya, Anda dapat menggunakan gaya berbeda di header dan footer situs Anda. Dan konten dalam sidebar bisa terlihat berbeda dari teks isi.
Namun gaya yang berbeda ini harus diterapkan dengan wajar. Tampilannya harus sesuai dengan pola yang ditentukan.
Menggunakan tipografi yang sangat berbeda, misalnya, dapat membuat pengguna bingung. Seperti elemen desain lainnya, harus ada alasan dan alasan dalam tampilan dan cara kerja tautan.
Lihat Pena Styling Hyperlink: Tetap Konsisten oleh Eric Karkovack
Tautan Bisa Cantik dan Fungsional
Penataan gaya hyperlink menjalankan keseluruhannya. Beberapa desainer web mengabaikannya sama sekali. Yang lain menambahkan CSS khusus senilai wastafel dapur.
Dalam hal kegunaan, yang pertama mungkin merupakan jalur yang lebih aman. Pengguna akan dapat melihat tautan di tengah konten Anda.
Meski begitu, keseimbangan masih bisa dicapai. Anda dapat membuat gaya khusus untuk mendandani tautan agar sesuai dengan merek Anda. Dan Anda dapat melakukannya dengan cara yang selalu diingat pengguna.
Oleh karena itu, jangan takut untuk bereksperimen dengan gaya tautan. Ingatlah tujuan situs Anda beserta praktik terbaiknya.
