Bagaimana Merencanakan Pengaturan Konten Untuk Desain yang Responsif

Dalam posting terbaru, saya membahas caranya konten visual berhubungan dengan desain tata letak. Namun subjek ini sangat rinci, dan terpecah menjadi banyak sub-topik, salah satunya adalah organisasi visual untuk tata letak responsif.

Dalam posting ini, saya ingin menggali lebih dalam ke konten responsif untuk melihat beberapa praktik terbaik mengatur ulang konten untuk layar yang lebih kecil. Dalam desain UI & UX, tidak ada jawaban yang benar untuk setiap proyek tetapi ada tren yang bekerja dengan baik, dan dari tren ini Anda dapat membangun ide Anda sendiri.

Susun Ulang Grid Ke Daftar

Setiap situs web menggunakan beberapa jenis kisi apakah itu terlihat atau tidak. Konten dalam kotak yang solid sering kali dikelompokkan bersama secara horizontal pada monitor yang lebih luas, tetapi ini tidak masuk akal pada perangkat yang lebih kecil. Obat terbaik adalah memecah grid ini pada layar yang lebih kecil, dan ubah item menjadi daftar.

Contoh 1: Dewan Kota Wellington

Lihatlah situs web Dewan Kota Wellington yang menggunakan sejumlah bagian bergaya grid di halaman rumah.

Ada tayangan slide kecil tautan persegi itu mengurangi karena ukuran jendela browser. Bagian footer juga menjadi lebih kecil, dan akhirnya dikonversi menjadi daftar tautan vertikal.

Pada ponsel yang sangat kecil dengan lebar 320px Anda perlu mendesain untuk ukuran perangkat. Dalam kasus iPhone, perangkat lebih tinggi daripada yang lebih luas sehingga masuk akal untuk mengatur konten seperti itu.

Contoh 2: Burger Mooyah

Lihatlah halaman beranda Mooyah, dan coba ubah ukuran tata letaknya. Ada area tayangan slide kecil yang berisi tiga item pada layar desktop, tapi ini menyusut untuk hanya menampilkan satu item di ponsel (menambahkan lebih banyak slide tersembunyi ke widget).

Dua kotak promosi yang mengiklankan aplikasi & menu Mooyah tetap diperbaiki berdampingan hingga layarnya cukup kecil untuk mengatur ulang secara vertikal.

Itu “Terhubung dengan kami!” Bagian juga mengatur ulang konten sehingga setiap pos sosial mendapat ruang sebanyak mungkin. Secara umum, monitor layar lebar adalah yang terluas dan layar smartphone adalah yang tertinggi.

Contoh 3: Pasar Tema

Saat mendesain tata letak dengan kisi, Anda harus mempertimbangkan baik gaya tata letak lebar & tinggi sebelum menulis satu baris kode. Dengan cara ini Anda akan siap membangun breakpoint yang masuk akal.

Halaman dengan tata letak kotak penuh harus kurangi ukuran kotak sebelum memecah mereka ke baris baru. Misalnya, Pasar Tema memiliki a tetap lebar maks 1240, dan kotak berisi empat blok per baris.

Saat layar semakin kecil blok-blok ini kurangi lebarnya, tapi akhirnya kerusakan untuk tinggalkan tiga kotak per baris. Pada ukuran terkecil, Anda mendapatkan satu kotak per baris, dan itu memiliki banyak ruang untuk teks & gambar bersinar.

Selalu ada keseimbangan menjaga sebanyak mungkin info dalam tampilan mungkin dikombinasikan dengan kebutuhan untuk membuat teks dapat dibaca. Semakin banyak Anda membangun tata letak kotak, semakin mudah untuk menemukan ini keseimbangan pengaturan konten.

Sembunyikan atau Hapus Kolom

Monitor yang lebih luas dan lebih banyak dukungan browser memungkinkan pengembang untuk membangun tata letak yang sangat kompleks. Saya sering melihat blog dengan tiga atau bahkan empat kolom yang mengambil sebagian besar layar.

Namun perangkat yang lebih kecil membutuhkan aliran konten itu masuk akal secara vertikal. Saya telah menemukan dua opsi untuk menangani sidebar yang berlebihan:

1. Letakkan di bawah konten utama
2. Sembunyikan mereka sama sekali

Contoh 1: Berhenti Tekan

Lihatlah situs web Stop Press. Memiliki empat kolom vertikal pada monitor desktop saya.

Kolom kiri adalah menu nav vertikal, kolom berikutnya adalah kolom konten utama dengan artikel terbaru. Lalu kami memiliki dua kolom bilah sisi yang berbeda dipenuhi dengan tambahan “ke samping” konten.

Saat jendela browser diubah ukurannya, kolom-kolom ini perlahan-lahan kurangi ukurannya. Yang pertama adalah navigasi kiri yang tersembunyi di balik ikon menu hamburger.

Breakpoint berikutnya menyembunyikan kolom tengah bersama dengan tombol berbagi sosial teratas. Lalu akhirnya pada layar terkecil, sidebar paling kanan benar-benar menghilang hanya menyisakan kolom pusat primer konten.

Tidak ada konten bilah sisi yang muncul di bawah konten utama. Nya benar-benar tersembunyi dari pandangan, dan ini adalah pilihan yang bisa diterima kurangi pemuatan halaman dan untuk menjaga ketinggian bilah gulir pada ukuran yang layak.

Di sisi lain, banyak blog jangan memindahkan bilah sisi di bawah konten utama seperti pada Concept Art Empire yang menampilkan posting terkait di sidebar yang akhirnya turun di bawah konten.

Contoh 2: Wishpond Blog

Blog Wishpond juga sepenuhnya menghapus sidebar dari layar pada viewports yang lebih kecil. Area bilah sisi ini biasanya berisi iklan, formulir pendaftaran, dan tautan posting terkait. Tidak satu pun dari konten ini yang vital tetapi dapat menambah nilai bagi pengunjung.

Saya suka mengikuti a pendekatan hybrid tempat saya memindahkan bilah sisi di bawah konten, tetapi juga menyembunyikan beberapa item di bilah sisi melewati breakpoint tertentu.

Misalnya, jika saya memiliki tiga blok iklan dalam tata letak lengkap, saya dapat menyembunyikan dua ruang iklan di seluler. Ini membuat konten bilah sisi dapat diakses tapi tidak mengacaukan halaman dengan konten yang berlebihan.

Contoh 3: Nyonya Gautier

Saya juga suka bagaimana Nyonya Gautier menggunakan mereka “Berita terbaru” bilah sisi di halaman beranda. Akhirnya turun di bawah konten, dan mengambil posisi tampilan penuh di halaman.

Hampir setiap situs web akan memiliki setidaknya satu sidebar dalam desain. Apakah ini bilah sisi lebar situs atau hanya sesuatu yang muncul pada templat halaman, the gaya desain berdampingan populer karena itu cocok untuk lebih banyak konten di layar.

Itu pilihanmu cara menangani konten. Anda dapat menurunkan bilah sisi lebih rendah, menyembunyikannya sama sekali, atau menggunakan gabungan kedua teknik ini. Tetapi Anda harus membuat pilihan berdasarkan relevansi bilah samping, dan itu kebutuhan ke halaman.

Sesuaikan & Peras Margin

Akan selalu ada titik di mana konten tidak dapat diperas lebih jauh, dan satu bagian perlu jatuh di bawah yang lain.

Oleh menyesuaikan margin sebelum menurunkan konten pada halaman, Anda memberi pembaca lebih banyak konten untuk dipilih.

Contoh 1: Satu Dunia

Footer di One World adalah contoh yang bagus. Memiliki tautan footer sitewide melayang benar dengan formulir pendaftaran email di kiri.

Saat tata letak diubah, margin dan bantalan di antara elemen-elemen ini menyusut. Kolom tautan lebih dekat bersama, dan formulir pendaftaran menjadi sedikit lebih kecil, terlalu.

Melewati titik tertentu, itu masuk akal untuk letakkan tautan di bawah formulir pendaftaran, dan berikan catatan kaki banyak ruang untuk bernafas.

Ya, itu memang membuat halaman lebih lama, dan ya, butuh lebih banyak usaha untuk menggulir ke bawah sejauh itu, tetapi pada breakpoints yang lebih kecil ini Anda dapat menganggap pengguna pada perangkat yang berorientasi vertikal.

Contoh 2: Kepulauan Emas

Contoh lain yang saya sukai adalah laman beranda Golden Isles dengan isinya gaya navigasi yang unik. Ketika Anda mengubah ukuran jendela browser tautan nav remas bersama. Akhirnya mereka istirahat dari satu baris menjadi dua baris, lalu turun ke kolom dengan ukuran paling kecil.

Barang-barang lain di halaman ikuti pola yang sama. Contoh ini menunjukkan kekuatan mengubah ukuran margin sebelum sepenuhnya menata tata letak.

Aliran Vertikal Pada Layar Lebih Kecil

Konten halaman seharusnya mengalir secara alami, dan perataan vertikal masuk akal di ponsel. Ini berarti Anda perlu mempertimbangkan blok konten dalam halaman perbarui gaya konten yang sesuai. Ini termasuk paragraf, tajuk, pemblokiran, daftar tidak berurutan, dan juga kotak konten khusus.

Contoh 1: Satu Posting BodyBuilding.com

Ambil contoh postingan BodyBuilding ini yang mana menggunakan kotak kecil untuk memamerkan latihan glute yang berbeda.

Kotak-kotak ini termasuk thumbnail di sisi kanan untuk memperagakan latihan. Pada layar yang lebih kecil, thumbnail ini memecah ke baris baru, dan akhirnya tumpukan di atas satu sama lain.

CSS responsif Anda harus mempertimbangkan hal kecil mungil ini untuk setiap halaman situs web.

Contoh 2: Vanity Fair

Untuk contoh yang lebih besar, lihat halaman utama Vanity Fair yang sepenuhnya mengatur ulang slider cerita unggulan. Pada desktop layar penuh, daftar berita utama dengan satu gambar unggulan ditampilkan di samping. Ketika browser mengubah ukuran lebih kecil, ini bagian cerita utama menjadi korsel geser.

Antarmuka itu sendiri benar-benar berubah dengan menambahkan navigasi titik, panah, dan gambar unggulan untuk setiap cerita dalam daftar. Daftar artikel layar penuh mereka lebih dari itu “vertikal”, tetapi tata letak ini lebih sulit untuk beroperasi pada layar ponsel, jadi mengubahnya menjadi korsel geser adalah pilihan yang lebih baik.

Berpikir lebih lanjut tentang aliran pengguna daripada aliran konten Anda. Konten tidak selalu harus dipaksa menjadi tata letak vertikal di layar kecil. Pikirkan saja bagaimana mengatur konten dengan cara itu mendukung pengalaman penelusuran vertikal.

Pikiran Penutup

Desain responsif sangat penting hari ini, dan setiap perancang dan pengembang web harus memahami cara kerjanya. Pengunjung mengharapkan semua situs web menjadi ramah mobile. Setiap kali saya tersandung ke situs web yang tidak responsif, saya merasa ngeri saat melihat scrollbar horizontal itu.

Ikuti tips dalam posting ini untuk merencanakan strategi desain untuk mengatur ulang konten untuk pengalaman pengguna terbaik di semua perangkat.