Headers & Logos Responsif - Tips dan Perangkap

Konsep reka bentuk web responsif telah meresap web, dan menjadi ruji bagi pemaju frontend. Tidak dapat dinafikan nilai reka bentuk responsif di dunia moden tetapi ada kesukaran memahami sepenuhnya bagaimana untuk merancang susun atur responsif dengan betul.

Subjek ini boleh menjadi panjang kerana terdapat begitu banyak kawasan unik laman web tetapi fokus pada unsur-unsur individu dapat membantu anda untuk lebih memahami tujuan pengguna, dan bagaimana tujuan tersebut dapat dicapai dengan reka bentuk responsif.

Saya ingin menutupinya tip reka bentuk untuk pengepala, logo, dan menu navigasi, kerana ia berkaitan dengan reka bentuk responsif. Ambil cadangan ini kerana ia digunakan untuk kerja anda sendiri dan pastikan anda bentuk antara muka anda dengan kelakuan pengguna dalam fikiran.

Thinner Navbars

Di skrin besar, biasanya mempunyai tajuk besar, mungkin juga tajuk yang besar dengan tingkat pautan tingkat pelbagai. Tetapi skrin yang lebih kecil tidak mempunyai ruang yang sama, dan harus dibatasi sekiranya diperlukan.

Sejak aplikasi mudah alih asli biasanya ada tajuk tetap, ini adalah amalan biasa dalam reka bentuk responsif juga. Tajuk tetap juga harus menyusut apabila pada peranti yang lebih kecil: ini meninggalkan lebih banyak ruang untuk kandungan, tetapi masih memberikan pembaca akses langsung ke header & navigasi.

Ambil contoh susun atur Cartoon Brew pada monitor bersaiz penuh, dan pada peranti mudah alih.

Pada titik pecah 600px, navigasi menyusut hampir separuh ketinggiannya pada halaman. Ini menjadikan logo dan menu nav boleh diklik lebih kecil, tetapi mereka jauh lebih berkadar ke ruang skrin relatif.

Juga pertimbangkan bahawa Cartoon Brew mempunyai kotak jatuh turun sebagai menu responsif pada skrin mudah alih. Ini bermakna ia overlay kandungan pada halaman apabila dibuka, jadi penting untuk meninggalkan banyak ruang untuk ini.

Contoh yang sama boleh didapati di laman web Jacksonville Art Walk. Navbar atas tetap tetap semasa menatal tetapi mengecilkan pada peranti yang lebih kecil. Ini lebih baik untuk reka bentuk responsif kerana navbar nipis meninggalkan lebih banyak ruang untuk kandungan pada skrin mudah alih yang lebih kecil.

Setiap pautan dalam navbar mempunyai ikon berkaitan yang dilampirkan pada pautan teks. Ini kelihatan hebat pada monitor skrin lebar tetapi ia terlalu terperinci untuk skrin yang lebih kecil.

Navigasi Art Walk berubah ke menu dropdown dengan sambungan tetap sekitar titik pecah 770px. Ikon tersembunyi dalam menu lungsur turun kerana mereka terlalu kecil dan terlalu sempit pada peranti yang lebih kecil.

Apabila mereka bentuk tajuk responsif sentiasa dipertimbangkan ruang skrin keseluruhan sambil menyusun navbar. Sekiranya anda tidak mahu pengepala kekal tetap itu betul-betul halus, tetapi anda masih mahu mengecilkannya sedikit untuk menjimatkan bilik di bahagian atas halaman.

Ikonkan Logo

Kebanyakan logo menggabungkan beberapa teks dan ikon atau grafik untuk mewakili jenama. Ini bermakna anda sentiasa boleh ikonkan (ya itu kata sebenar) jenis logo ini turun ke simbol versi penuhnya.

Ini adalah teknik yang kuat untuk tajuk yang responsif kerana tidak ada ruang yang cukup untuk logo penuh. Anda akan kehilangan sebahagian besar glitz & glamor logo saiz penuh, tapi itulah harga yang mungkin perlu dibayar untuk susun atur responsif yang bersih.

Lihat logo untuk Berita Pereka Web dan lihat bagaimana ia berubah semasa anda mengubah saiz penyemak imbas.

Mungkin tidak semua orang akan mengenali ikon itu ketika pertama kali melawat laman web, tetapi terima kasih pengiktirafan corak ini bukan masalah besar.

Orang ramai telah berada di Internet cukup lama untuk mengetahui bahawa sudut kiri atas halaman biasanya dikhaskan untuk logo. Ikon merah jambu kecil ini juga digunakan dalam favicon, jadi mudah membuat beberapa kesimpulan tanpa menggali terlalu jauh ke laman web.

Anda tidak semestinya perlu bergantung kepada grafik untuk teknik logo yang dipeluwap ini. Tajuk Young And Hungry menggunakan teks hijau terang untuk logo yang akhirnya memasangkan teks "Y & H".

Diberikan ini mungkin tidak berfungsi untuk setiap laman web jika penjenamaan tidak mudah dikenali sebagai huruf tunggal. Tetapi ia menunjukkan bahawa logo boleh dibuat lebih mudah ke dalam kedua-dua grafik & teks, dan kedua-dua varian mengambil ruang kurang pada skrin yang lebih kecil.

Mengendalikan Latar Belakang Skrin Penuh

Banyak halaman pendaratan menggunakan latar belakang skrin penuh untuk menarik lebih banyak perhatian. Ini adalah teknik yang kuat tetapi sering berfungsi dengan baik pada monitor yang besar.

Jadi bagaimana anda mengendalikan ini pada skrin yang lebih kecil? Secara amnya, pereka sama ada keluarkan imej latar belakang melewati titik pecah tertentu, atau imej itu sendiri diselaraskan semula untuk dimuatkan dalam tetingkap.

Cap Radio Raffle menggunakan teknik ini di halaman rumah mereka. Imej latar belakang memelihara titik fokus dalam pandangan pada setiap masa, tidak kira berapa saiz skrin diselaraskan.

Jenis penyelesaiannya biasanya memerlukan beberapa kedudukan CSS tetapi ia benar-benar mudah apabila anda menggantungkannya. Hanya teruskan tumpuan dalam pandangan pada setiap masa, dan saiz semula bekas imej untuk muat mengikut peranti.

Di luar latar belakang yang besar untuk alasan estetik, Anda mungkin juga menggunakan gambar besar untuk kandungan halaman. Halaman rumah Mashable menggunakan latar belakang imej yang ditampilkan untuk cerita teratas yang merangkumi keseluruhan susun atur.

Susun atur responsif mereka memampatkan imej sementara menjaga pusat tumpuan utama. Sukar untuk melakukan ini kerana ia menampilkan perubahan imej apabila kisah berubah, jadi foto mesti dikendalikan dengan berhati-hati. Penyelesaian Mashable masih merupakan cara terbaik untuk mengendalikan foto skrin penuh untuk susun atur blog & majalah apabila direka dengan betul.

Mudahkan Navigasi

Apabila membaiki semula untuk skrin yang lebih kecil, menyimpan sebanyak mungkin pautan dalam navigasi, dan menjadikannya mudah diakses. Ini bermakna anda mungkin perlu menjalin beberapa pautan jika anda mempunyai menu jatuh turun pelbagai peringkat.

Walaupun jika anda mempunyai strategi yang tepat, masih ada kemungkinan untuk memastikan semua dropdowns di-tact. Sebagai contoh Kidscreen menggunakan a menu flyout dengan ikon anak panah kecil menunjukkan sublink dalam menu responsif.

Ramai orang berhujah terhadap menu hamburger tetapi saya datang untuk menerimanya sebagai item yang diperlukan untuk menu navigasi panjang. Ia hanya berfungsi, dan telah difahami secara meluas oleh kebanyakan pengguna telefon pintar sebagai "butang menu".

Malah, anda akan tertekan untuk mencari tapak responsif yang tidak bergantung pada menu hamburger tiga bar. CyberChimps adalah contoh yang hebat menggunakan dropdown menegak bukannya slaid masuk.

Struktur navigasi untuk CyberChimps disusun semula untuk meluncur ke bawah di atas halaman. Menu jatuh dari atas dengan elemen blok besar untuk pautan.

Dengan lebih banyak kawasan untuk klik dan teks pautan yang lebih besar, proses menavigasi halaman menjadi lebih mudah. Bertujuan untuk mengikuti falsafah ini dengan pengetua penuh responsif anda, dan reka bentuk anda akan meningkat secara drastik.

Bina Sendiri

Dengan petua-petua ini, pelupusan anda tidak akan menjadi masalah untuk menggunakan tajuk responsif yang boleh digunakan. Walaupun terdapat banyak alat untuk membantu anda, satu-satunya cara untuk benar-benar memahami adalah melalui amalan.

Jadi ambil teknik ini dengan anda dan mula membina laman web! Saya juga menyenaraikan beberapa sumber lanjut untuk tajuk responsif yang boleh anda lihat di bawah.

• Buat Menu Navigasi Responsif CSS Mudah Alih Asas (teamtreehouse.com)
• Amalan Terbaik untuk Header Website Responsif (ux.stackexchange.com)
• Bagaimanakah saya boleh membuat imej kepala saya betul-betul responsif? (stackoverflow.com)