Cara Merancang Pengaturan Kandungan Untuk Reka Bentuk yang Responsif

Dalam jawatan baru-baru ini, saya membincangkan bagaimana kandungan visual berkaitan dengan reka bentuk susun atur. Walau bagaimanapun subjek ini sangat terperinci, dan serpihan menjadi banyak topik, salah satunya ialah organisasi visual untuk susun atur responsif.

Dalam jawatan ini, saya ingin menyelidiki lebih mendalam ke dalam kandungan responsif untuk melihat beberapa amalan terbaik untuk menyusun semula kandungan untuk skrin yang lebih kecil. Dalam reka bentuk UI & UX, tiada jawapan yang betul bagi setiap projek tetapi ada trend yang berfungsi dengan baik, dan dari trend ini anda boleh membina idea anda sendiri.

Susun semula Grid Ke Senarai

Setiap laman web menggunakan beberapa jenis grid sama ada ia kelihatan atau tidak. Kandungan dalam grid pepejal sering berkumpul bersama secara mendatar pada monitor yang lebih luas, tetapi ini tidak masuk akal pada peranti yang lebih kecil. Ubat terbaik adalah memecahkan grid ini pada skrin yang lebih kecil, dan menukar item ke dalam senarai.

Contoh 1: Majlis Bandaraya Wellington

Lihatlah laman web Majlis Bandar Wellington yang menggunakan sejumlah seksyen gaya grid di halaman rumah.

Terdapat tayangan slaid yang kecil untuk pautan persegi itu mengurangkan sebagai tetingkap penyemak imbas diselaraskan. Bahagian footer juga menjadi lebih kecil, dan akhirnya menukarkan ke dalam senarai menegak pautan.

Pada telefon yang sangat kecil dengan lebar 320px anda perlu merancang untuk saiz peranti. Dalam kes iPhone peranti itu lebih tinggi daripada yang lebih luas jadi masuk akal untuk mengatur kandungan itu.

Contoh 2: Mooyah Burgers

Lihat halaman rumah untuk Mooyah, dan cuba ubah saiz susun atur. Terdapat satu kawasan tayangan slaid kecil yang mengandungi tiga item pada skrin desktop, tetapi ini menyusut turun untuk menunjukkan hanya satu item di telefon bimbit (menambah lebih banyak slaid tersembunyi ke widget).

Kedua-dua kotak promosi yang mengiklankan aplikasi & menu Mooyah tetap tetap bersebelahan sehingga skrin mendapat cukup kecil untuk menyusun semula secara menegak.

The “Berhubung dengan kami!” seksyen juga menyusun semula kandungan supaya setiap jawatan sosial mendapat sebanyak mungkin bilik. Secara umumnya, monitor skrin lebar adalah skrin terluas dan telefon pintar yang paling tinggi.

Contoh 3: Market Tema

Apabila mereka bentuk susun atur dengan grid, anda harus mempertimbangkan kedua-dua gaya susun atur yang tinggi & tinggi sebelum menulis satu baris kod. Dengan cara ini anda akan bersedia membina titik putus yang masuk akal.

Halaman dengan susunan grid penuh harus mengurangkan saiz kotak sebelum memecah mereka ke barisan baru. Sebagai contoh, Market Theme mempunyai a lebar max tetap daripada 1240, dan grid mengandungi empat blok setiap baris.

Sebagai skrin semakin kecil blok ini mengurangkan lebarnya, tetapi akhirnya rosak kepada meninggalkan tiga kotak setiap baris. Pada saiz terkecil, anda akan mendapat satu kotak setiap baris, dan ia mempunyai banyak ruang untuk teks & imejan untuk bersinar.

Selalu ada keseimbangan menjaga seberapa banyak maklumat memandangkan mungkin digabungkan dengan keperluan untuk membuat teks boleh dibaca. Lebih banyak anda membina susun atur grid lebih mudah untuk mencari ini keseimbangan pengaturan kandungan.

Sembunyikan atau Padam Lajur

Pemantau yang lebih luas dan lebih banyak sokongan penyemak imbas membenarkan pemaju untuk membina susun atur yang sangat kompleks. Saya sering melihat blog dengan tiga atau empat tiang yang mengambil bahagian yang baik dari skrin.

Walau bagaimanapun peranti kecil memerlukan aliran kandungan yang masuk akal secara menegak. Saya telah menemui dua pilihan untuk mengendalikan sidebars yang berlebihan:

1. Drop mereka di bawah kandungan utama
2. Sembunyikan semuanya sama sekali

Contoh 1: Berhenti Tekan

Lihat laman web Stop Press. Ia ada empat lajur menegak pada monitor desktop saya.

Lajur kiri adalah menu nav menegak, lajur seterusnya adalah lajur kandungan utama dengan artikel terkini. Kemudian kita mempunyai dua lajur sidebar yang berlimpah dengan tambahan “diketepikan” kandungan.

Apabila tetingkap penyemak imbas dimeteraikan, lajur ini perlahan-lahan mengurangkan saiznya. Yang pertama ialah navigasi kiri yang tersembunyi di belakang ikon menu hamburger.

Titik istirahat seterusnya menyembunyikan lajur tengah bersama butang perkongsian sosial teratas. Kemudian akhirnya pada skrin terkecil, sidebar sebelah kanan sepenuhnya hilang meninggalkan hanya ruang pusat utama kandungan.

Tiada kandungan bar sisi muncul di bawah kandungan utama. Ia benar-benar tersembunyi dari pandangan, dan ini adalah pilihan yang boleh diterima mengurangkan beban halaman dan untuk memastikan ketinggian scrollbar pada saiz yang baik.

Sebaliknya, banyak blog lantas menggerakkan bar sisi bawah kandungan utama seperti pada Concept Art Empire yang mempunyai kiriman yang berkaitan di bar sisi yang akhirnya jatuh di bawah kandungan.

Contoh 2: Blog Wishpond

Blog Wishpond juga benar menghilangkan bar sisi dari skrin pada paparan viewport yang lebih kecil. Kawasan bar sisi ini biasanya mengandungi iklan, borang pendaftaran, dan pautan pos berkaitan. Tiada kandungan ini penting tetapi ia boleh menambah nilai kepada pelawat.

Saya suka mengikut pendekatan hibrid di mana saya menggerakkan bar sisi di bawah kandungan, tetapi juga menyembunyikan beberapa item di bar sisi lalu titik pecah tertentu.

Sebagai contoh, jika saya mempunyai tiga blok iklan dalam susun atur penuh, saya boleh menyembunyikan dua ruang iklan di telefon bimbit. Ini membuat kandungan bar sisi boleh diakses tetapi tidak merosakkan halaman dengan kandungan berlebihan.

Contoh 3: Madame Gautier

Saya juga suka bagaimana Madame Gautier menggunakan mereka “Berita terkini” bar sisi di halaman rumah. Ia akhirnya jatuh di bawah kandungan, dan mengambil kedudukan pandangan penuh pada halaman.

Hampir setiap laman web akan mempunyai sekurang-kurangnya satu bar sisi dalam reka bentuk. Sama ada ini adalah sidebar seluruh halaman atau hanya sesuatu yang muncul pada templat halaman, yang gaya reka bentuk sampingan adalah popular kerana ia muat lebih banyak kandungan pada skrin.

Itu pilihan anda bagaimana untuk mengendalikan kandungan. Anda boleh menurunkan bar sisi yang lebih rendah, menyembunyikannya sama sekali, atau menggunakan hibrid kedua teknik ini. Tetapi anda harus membuat pilihan anda berdasarkan perkaitan bar sisi, dan yang keperluan ke halaman.

Laraskan & Squeeze Margin

Selalu ada titik di mana kandungan tidak boleh dipenggal apa-apa lagi, dan satu bahagian perlu jatuh di bawah yang lain.

Oleh menyesuaikan margin sebelum menurunkan kandungan pada halaman, anda memberikan pembaca kandungan yang lebih luas untuk dipilih.

Contoh 1: Satu Dunia

Pengaki di One World adalah contoh yang bagus. Ia ada pautan footer sitewide terapung betul dengan borang pendaftaran e-mel disebelah kiri.

Apabila susutan susun atur, margin dan padding di antara unsur-unsur ini mengecut. Lajur pautan semakin rapat bersama, dan borang pendaftaran mendapat sedikit lebih kecil, juga.

Melangkah ke titik tertentu, hanya masuk akal jatuhkan pautan di bawah borang pendaftaran, dan berikan footer banyak ruang untuk bernafas.

Ya, ia membuat halaman lebih lama, dan ya, ia memerlukan lebih banyak usaha untuk tatal ke bawah sejauh ini, tetapi pada titik-titik istirahat yang lebih kecil ini anda dapat menganggap pengguna adalah pada peranti berorientasikan menegak.

Contoh 2: Pulau Emas

Satu lagi contoh yang saya sayangi ialah halaman rumah Isles Golden dengannya gaya navigasi yang unik. Apabila anda mengubah saiz tetingkap penyemak imbas pautan nav memerah bersama-sama. Akhirnya mereka putus dari satu baris ke dalam dua baris, kemudian ke dalam lajur pada saiz yang sangat kecil.

Item lain pada halaman ikut corak yang sama. Contoh ini menunjukkan kekuatan mengubah saiz margin sebelum menyusun semula susun atur sepenuhnya.

Aliran Menegak Pada Skrin yang lebih kecil

Kandungan halaman harus aliran secara semulajadi, dan penjajaran menegak masuk akal di telefon bimbit. Ini bermakna anda perlu mempertimbangkan blok kandungan dalam halaman kemas kini gaya kandungan dengan sewajarnya. Ini termasuk perenggan, tajuk, blok sekat, senarai tidak teratur, dan juga kotak kandungan tersuai.

Contoh 1: BodyBuilding.com Single Post

Ambil contoh jawatan BodyBuilding ini yang mana menggunakan kotak kecil untuk memamerkan latihan glute yang berlainan.

Kotak ini termasuk gambar kecil di sebelah kanan untuk menunjukkan latihan. Pada skrin kecil, lakaran kecil ini memecah masuk ke barisan baru, dan akhirnya tumpukan di atas satu sama lain.

CSS responsif anda perlu mengambil minutiae kecil ini untuk pertimbangan untuk setiap halaman laman web.

Contoh 2: Vanity Fair

Untuk contoh yang lebih besar, lihat halaman rumah Vanity Fair yang mana sepenuhnya menyusun slider cerita yang ditampilkan. Pada desktop skrin penuh senarai berita berita utama dengan satu imej yang dipaparkan dipaparkan di sebelah. Sebagai pelayar menyusun semula lebih kecil, bahagian atas cerita ini menjadi karusel gelongsor.

Antara muka itu sendiri sepenuhnya berubah dengan menambah navigasi dot, anak panah, dan imej yang dipaparkan untuk setiap cerita dalam senarai. Senarai artikel skrin penuh mereka lebih banyak “menegak”, tetapi susun atur ini lebih sukar untuk dikendalikan pada skrin mudah alih, jadi menukarnya menjadi karusel gelongsor adalah pilihan yang lebih baik.

Fikirkan lebih lanjut mengenai aliran pengguna bukannya aliran kandungan anda. Kandungan tidak semestinya perlu dipaksa menjadi susun atur menegak pada skrin kecil. Cukup fikirkan bagaimana mengatur kandungan dengan cara itu menyokong pengalaman melayari menegak.

Menutup Pikiran

Reka bentuk responsif adalah penting hari ini, dan setiap pereka web dan pemaju web harus memahami bagaimana ia berfungsi. Pelawat mengharapkan semua laman web untuk menjadi mesra mudah alih. Setiap kali saya tersandung ke laman web yang tidak responsif, saya merenung melihat bar skru mendatar itu.

Ikuti petua di dalam catatan ini merancang strategi reka bentuk untuk menyusun semula kandungan untuk pengalaman pengguna terbaik pada semua peranti.