Header & Logo Responsif - Tip dan Jebakan

Konsep desain web responsif telah merasuki web, dan menjadi bahan pokok bagi pengembang frontend. Tidak dapat disangkal nilai desain responsif di dunia modern, tetapi ada beberapa kesulitan untuk sepenuhnya memahami cara merancang tata letak responsif dengan benar..

Subjek bisa berlangsung panjang karena ada begitu banyak area unik dari sebuah situs web tetapi berfokus pada elemen individu dapat membantu Anda lebih memahami tujuan pengguna, dan bagaimana tujuan tersebut dapat dicapai dengan desain responsif.

Saya ingin menutupinya kiat desain untuk header, logo, dan menu navigasi, karena mereka berkaitan dengan desain responsif. Ambil saran-saran ini ketika mereka berlaku untuk pekerjaan Anda sendiri dan pastikan untuk merancang antarmuka Anda dengan perilaku pengguna dalam pikiran.

Navbar yang lebih tipis

Pada layar besar, normal memiliki header besar, bahkan mungkin header besar dengan tingkatan tautan multi-level. Tetapi layar yang lebih kecil tidak memiliki ruang yang sama, dan harus dibatasi sesuai kebutuhan.

Karena biasanya aplikasi seluler asli punya tajuk tetap, ini adalah praktik umum dalam desain responsif juga. Header tetap juga harus menyusut ketika di perangkat yang lebih kecil: ini menyisakan lebih banyak ruang untuk konten, tetapi masih memberi pembaca akses langsung ke header & navigasi.

Ambil contoh tata letak Brew Kartun pada monitor ukuran penuh, dan pada perangkat seluler.

Pada breakpoint 600px, navigasi menyusut hampir setengah tingginya pada halaman. Ini membuat kedua logo dan menu nav yang dapat diklik lebih kecil, tetapi mereka jauh lebih proporsional ke ruang layar relatif.

Juga pertimbangkan bahwa Kartun Brew memiliki kotak dropdown sebagai menu responsif pada layar ponsel. Ini artinya overlay konten pada halaman ketika dibuka, jadi penting untuk meninggalkan banyak ruang untuk ini.

Contoh serupa dapat ditemukan di situs web Jacksonville Art Walk. Navbar atas tetap tetap saat menggulir tetapi menyusut pada perangkat yang lebih kecil. Ini lebih baik untuk desain responsif karena navbar lebih tipis menyisakan lebih banyak ruang untuk konten pada layar ponsel yang lebih kecil.

Setiap tautan di navbar memiliki ikon terkait yang dilampirkan ke tautan teks. Ini terlihat bagus pada monitor layar lebar tetapi terlalu detail untuk layar yang lebih kecil.

Navigasi Art Walk berubah ke menu dropdown dengan tautan tetap di sekitar breakpoint 770px. Ikon disembunyikan di menu dropdown karena terlalu kecil dan terlalu sempit pada perangkat yang lebih kecil.

Saat mendesain tajuk responsif, selalu pertimbangkan ruang layar keseluruhan saat menata navbar. Jika Anda tidak ingin tajuk tetap diperbaiki itu tidak masalah, tetapi Anda mungkin tetap menginginkannya Kecilkan sedikit untuk menghemat ruang di bagian atas halaman.

Ikonkan Logo

Sebagian besar logo memasukkan beberapa teks dan ikon atau grafik untuk mewakili merek. Ini berarti Anda selalu bisa menjadi ikon (Ya itu kata asli) logo semacam ini ke simbol versi lengkapnya.

Ini adalah teknik yang ampuh untuk header responsif karena tidak selalu ada ruang yang cukup untuk logo lengkap. Anda kehilangan sebagian kemewahan & kemewahan logo ukuran penuh, tapi itulah harga yang mungkin harus Anda bayar untuk tata letak responsif yang bersih.

Lihat logo untuk Berita Desainer Web dan lihat bagaimana perubahannya saat Anda mengubah ukuran browser.

Mungkin tidak semua orang akan mengenali ikon itu ketika pertama kali mengunjungi situs, tetapi terima kasih pengenalan pola ini bukan masalah besar.

Orang sudah cukup lama di Internet untuk mengetahui bahwa sudut kiri atas halaman biasanya disediakan untuk logo. Ikon merah muda kecil ini juga digunakan dalam favicon, jadi mudah untuk membuat beberapa kesimpulan tanpa menggali terlalu jauh ke dalam situs.

Anda tidak selalu harus bergantung pada grafik untuk teknik logo ringkas ini. Header Young And Hungry menggunakan teks hijau terang untuk logo yang akhirnya mengembun menjadi teks "Y&H".

Memang ini mungkin tidak berfungsi untuk setiap situs jika pencitraan merek tidak mudah dikenali sebagai huruf tunggal. Tapi itu menunjukkan logo itu dapat dibuat lebih sederhana menjadi grafik & teks, dan kedua varian mengambil lebih sedikit ruang pada layar yang lebih kecil.

Menangani Latar Belakang Layar Penuh

Banyak halaman arahan menggunakan latar belakang layar penuh untuk menarik lebih banyak perhatian. Ini adalah teknik yang kuat tetapi sering bekerja paling baik pada monitor besar.

Jadi bagaimana Anda menangani ini di layar yang lebih kecil? Umumnya, desainer juga hapus gambar latar belakang melewati breakpoint tertentu, atau gambar itu sendiri ditata kembali agar pas di jendela.

Cap Radio Raffle menggunakan teknik ini di beranda mereka. Gambar latar belakang menjaga titik fokus dalam pandangan setiap saat, tidak peduli seberapa besar ukuran layar.

Solusi semacam ini biasanya membutuhkan beberapa posisi CSS tapi itu benar-benar sederhana ketika Anda terbiasa. Hanya pertahankan titik fokus dalam pandangan setiap saat, dan mengubah ukuran wadah gambar agar sesuai dengan perangkat.

Di luar latar belakang besar untuk alasan estetika, Anda mungkin juga menggunakan gambar besar untuk konten halaman. Halaman muka Mashable menggunakan latar belakang gambar berfitur untuk berita utama yang mencakup seluruh tata letak.

Tata letak responsif mereka kompres gambar sementara menjaga titik fokus pusat. Sulit untuk melakukan ini karena gambar yang ditampilkan berubah ketika cerita berubah, jadi foto harus dikuratori dengan hati-hati. Solusi Mashable masih merupakan metode yang hebat untuk menangani foto layar penuh untuk tata letak blog & majalah jika dirancang dengan benar.

Sederhanakan Navigasinya

Saat pembenahan untuk layar yang lebih kecil, simpan sebanyak mungkin tautan dalam navigasi, dan membuatnya mudah diakses. Ini berarti Anda mungkin perlu membuang beberapa tautan jika Anda memiliki menu dropdown multi-tier.

Meskipun jika Anda memiliki strategi yang tepat, masih mungkin untuk menjaga semua dropdown tetap aktif. Misalnya Kidscreen menggunakan a menu flyout dengan ikon panah kecil menunjukkan sublink di menu responsif.

Banyak orang menentang menu hamburger tetapi saya datang untuk menerimanya sebagai item yang diperlukan untuk menu nav yang panjang. Ini hanya berfungsi, dan telah menjadi dipahami secara luas oleh sebagian besar pengguna ponsel pintar sebagai "tombol menu".

Bahkan, Anda akan kesulitan menemukan situs responsif yang tidak bergantung pada menu hamburger tiga-bar. CyberChimps adalah contoh yang bagus menggunakan dropdown vertikal daripada slide-in.

Struktur navigasi untuk CyberChimps disusun kembali untuk meluncur ke bawah di atas halaman. Menu turun dari atas dengan elemen blok besar untuk tautan.

Dengan lebih banyak area untuk diklik dan teks tautan yang lebih besar, proses navigasi halaman menjadi lebih sederhana. Bertujuan untuk mengikuti filosofi ini dengan seluruh tajuk responsif Anda, dan desain Anda akan meningkat secara drastis.

Bangun Sendiri

Dengan tips ini yang Anda inginkan, seharusnya tidak ada masalah dalam membangun header responsif yang dapat digunakan. Meskipun ada banyak alat untuk membantu Anda, satu-satunya cara untuk benar-benar mengerti adalah melalui latihan.

Jadi bawalah teknik ini dan mulai membangun situs web! Saya juga mendaftar beberapa sumber lebih lanjut untuk tajuk responsif yang dapat Anda lihat di bawah.

• Buat Menu Navigasi Responsif Mobile CSS Dasar (teamtreehouse.com)
• Praktik Terbaik untuk Header Situs Web Responsif (ux.stackexchange.com)
• Bagaimana saya bisa membuat gambar header saya responsif dengan benar? (stackoverflow.com)