Desain yang dilihat pada layar kecil tidak boleh terlihat seperti versi tata letak layar besar yang diperkecil. Demikian pula, desain yang dilihat di layar besar tidak boleh terlihat seperti versi tata letak layar kecil yang diledakkan. Sebaliknya, desain harus cukup fleksibel untuk beradaptasi dengan semua ukuran layar. Desain responsif yang sukses memanfaatkan setiap faktor bentuk secara maksimal.
Ini berarti bahwa beberapa elemen antarmuka mungkin perlu terlihat sangat berbeda tergantung pada konteks tempat elemen tersebut dilihat. Anda mungkin perlu menerapkan CSS yang sangat berbeda ke codebase HTML yang sama untuk memaksimalkan ukuran layar yang berbeda. Itu bisa menjadi tantangan desain yang sangat bagus!
Berikut beberapa tantangan umum yang mungkin Anda hadapi.
Navigasi
Menampilkan daftar link navigasi cukup mudah di layar besar. Ada banyak ruang untuk mengakomodasi tautan tersebut.
Pada layar kecil, ruang penyimpanan mahal. Saat Anda mendesain untuk situasi ini, Anda mungkin tergoda untuk menyembunyikan navigasi di balik tombol. Masalah dengan solusi ini adalah pengguna kemudian harus melakukan dua langkah untuk sampai ke mana pun: membuka menu, lalu memilih salah satu opsi. Sampai menu dibuka, pengguna akan bertanya-tanya "ke mana saya bisa pergi?"
Coba temukan strategi yang tidak menyembunyikan navigasi Anda. Jika memiliki jumlah item yang relatif kecil, Anda dapat menata gaya navigasi agar terlihat bagus di layar kecil.
Pola itu tidak akan terskalakan jika navigasi Anda memiliki banyak tautan. Navigasi akan terlihat berantakan jika link digabungkan menjadi dua atau tiga baris pada layar kecil.
Salah satu solusi yang dapat dilakukan adalah mempertahankan link pada satu baris, tetapi memotong daftar di tepi layar. Pengguna dapat menggeser secara horizontal untuk membuka link yang tidak langsung terlihat. Ini adalah pola tambahan.
Keuntungan dari teknik ini adalah bahwa teknik ini dapat disesuaikan dengan lebar perangkat dan berbagai tautan. Kekurangannya adalah pengguna bisa saja melewatkan tautan yang awalnya tidak terlihat. Jika Anda menggunakan teknik ini untuk navigasi utama, pastikan beberapa tautan pertama adalah yang paling penting dan secara visual mengindikasikan bahwa ada lebih banyak item dalam daftar. Contoh sebelumnya menggunakan gradien untuk indikator ini.
Sebagai upaya terakhir, Anda dapat memilih untuk menyembunyikan navigasi secara default dan menyediakan mekanisme beralih bagi pengguna untuk menampilkan dan menyembunyikan konten. Hal ini disebut pengungkapan progresif.
Pastikan tombol yang mengalihkan tampilan navigasi diberi label. Jangan mengandalkan ikon untuk dipahami.
Ikon tanpa label adalah navigasi "daging misteri"—pengguna tidak akan tahu apa yang ada di dalamnya sampai mereka menggigitnya. Berikan label teks untuk memberi tahu pengguna apa yang akan muncul dari tombol.
Carousel
Hal yang benar tentang navigasi juga berlaku untuk konten lainnya: cobalah untuk tidak menyembunyikan apa pun. {i>Carousel<i} adalah metode umum untuk menyembunyikan konten. Tampilan tersebut mungkin terlihat cukup rapi, tetapi kemungkinan besar pengguna tidak akan menemukan konten tersembunyi tersebut. Korsel lebih baik dalam memecahkan masalah organisasi—seperti konten apa yang harus ditampilkan di beranda—daripada melayani pengguna.
Meskipun demikian, ketika ruang terbatas, korsel dapat mencegah halaman menjadi terlalu panjang dan berantakan. Anda dapat menggunakan pendekatan campuran: menampilkan konten dalam carousel untuk layar kecil, tetapi menampilkan konten yang sama dalam petak untuk layar yang lebih besar.
Untuk layar sempit, tampilkan item secara berurutan menggunakan flexbox. Baris item akan melampaui tepi layar. Gunakan overflow-x: auto untuk mengizinkan geser horizontal.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Properti scroll-snap memastikan bahwa item dapat digeser dengan lancar. Berkat scroll-snap-type: inline mandatory, item telah terpasang pada tempatnya.
Jika layar cukup besar—dalam hal ini lebih lebar dari 50em—beralihlah ke petak dan tampilkan item dalam baris dan kolom, tanpa menyembunyikan apa pun.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Yang terpenting, item dalam tampilan carousel tidak memenuhi lebar penuh. Jika ya, tidak akan ada indikasi bahwa ada lebih banyak konten yang tersedia di luar tepi area pandang.
Korsel adalah contoh lain dari cara kerja pola tambahan. Jika Anda memiliki banyak item yang dapat dijelajahi orang, Anda dapat terus menggunakan pola tambahan ini bahkan pada layar besar, termasuk televisi. Scroller media ini menggunakan beberapa carousel untuk mengelola jumlah opsi yang signifikan.
Sekali lagi, properti scroll-snap memastikan bahwa interaksi terasa lancar. Selain itu, perhatikan bahwa gambar di carousel telah menerapkan loading="lazy". Dalam hal ini, gambar tidak berada di paruh bawah, berada di luar batas, tetapi prinsip yang sama berlaku: jika pengguna tidak pernah menggeser sejauh item tersebut, gambar tidak akan didownload, sehingga menghemat bandwidth.
Dengan tambahan JavaScript, Anda dapat menambahkan kontrol interaktif ke korsel. Kamu bahkan bisa membuat item digilir secara otomatis. Namun, pikirkan jauh-jauh hari sebelum melakukannya—putar otomatis mungkin berhasil jika korsel adalah satu-satunya konten di halaman, tetapi korsel yang berputar otomatis sangat menjengkelkan jika seseorang mencoba berinteraksi dengan konten lain (misalnya, seperti membaca teks). Anda dapat membaca praktik terbaik carousel selengkapnya.
Tabel data
Elemen table sangat cocok untuk menyusun data tabulasi; baris dan kolom informasi terkait. Tetapi jika tabel menjadi terlalu besar, tata letak layar kecil Anda bisa rusak.
Anda dapat menerapkan pola tambahan ke tabel. Dalam contoh ini, tabel digabungkan dalam div dengan class table-container.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Panduan
Pola luapan adalah kompromi yang bagus untuk layar kecil, tetapi pastikan jelas bahwa konten di luar layar dapat dijangkau. Pertimbangkan untuk menempatkan bayangan atau gradien di atas tepi tempat konten terpotong.
Pengungkapan progresif adalah cara yang berguna untuk menghemat ruang, namun berhati-hatilah saat menggunakannya untuk konten yang sangat penting. Lebih cocok untuk tindakan sekunder. Pastikan elemen antarmuka yang memicu pengungkapan diberi label dengan jelas—jangan hanya mengandalkan ikonografi.
Buat desain untuk layar yang lebih kecil terlebih dahulu. Lebih mudah untuk mengadaptasi desain layar kecil ke layar yang lebih besar daripada sebaliknya. Jika Anda mendesain untuk layar besar terlebih dahulu, ada bahaya bahwa desain layar kecil Anda akan terasa seperti renungan.
Untuk pola tata letak dan elemen UI lainnya, jelajahi bagian Pola web.dev.
Saat Anda mengadaptasi elemen antarmuka dengan berbagai ukuran layar, kueri media sangat berguna untuk mengetahui dimensi perangkat. Namun, fitur media seperti min-width dan min-height hanyalah permulaan. Selanjutnya, Anda akan menemukan
berbagai fitur media lainnya.