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 yang diledakkan dari tata letak layar kecil. Sebaliknya, desain tersebut harus cukup fleksibel untuk beradaptasi dengan semua ukuran layar. Desain responsif yang sukses memaksimalkan setiap faktor bentuk.
Ini berarti bahwa beberapa elemen antarmuka mungkin perlu terlihat sangat berbeda tergantung pada konteksnya. Anda mungkin perlu menerapkan CSS yang sangat berbeda ke codebase HTML yang sama untuk memaksimalkan ukuran layar yang berbeda. Ini bisa menjadi tantangan desain.
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.
Di layar kecil, ruang penyimpanan lebih mahal. Saat Anda mendesain untuk situasi ini, Anda mungkin tergoda untuk menyembunyikan navigasi di balik tombol. Masalahnya dengan solusi ini adalah pengguna harus melakukan dua langkah untuk membukanya: buka menu, lalu pilih opsi. Hingga menu terbuka, pengguna bertanya-tanya "ke mana saya bisa pergi?"
Cobalah untuk menemukan strategi yang menghindari penyembunyian navigasi Anda. Jika memiliki jumlah item yang relatif kecil, Anda dapat menata gaya navigasi agar terlihat bagus di layar kecil.
Pola itu tidak akan diskalakan jika navigasi Anda memiliki banyak tautan. Navigasi akan terlihat berantakan jika tautan terbungkus ke dua atau tiga baris pada layar kecil.
Salah satu solusi yang mungkin adalah menjaga tautan pada satu baris, tetapi memotong daftar di tepi layar. Pengguna dapat menggeser secara horizontal untuk menampilkan link yang tidak langsung terlihat. Ini adalah pola tambahan.
Keuntungan teknik ini adalah bahwa teknik ini dapat diskalakan ke lebar perangkat dan jumlah tautan dalam jumlah berapa pun. Kekurangannya adalah pengguna mungkin melewatkan tautan yang awalnya tidak terlihat. Jika Anda menggunakan teknik ini untuk navigasi utama, pastikan beberapa link pertama adalah yang paling penting dan tunjukkan secara visual 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 bagi pengguna untuk menampilkan dan menyembunyikan konten. Hal ini disebut pengungkapan progresif.
Pastikan tombol yang mengubah tampilan navigasi diberi label. Jangan mengandalkan ikon untuk dipahami.
Ikon tak berlabel 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 diungkapkan oleh tombol tersebut.
Carousel
Penjelasan yang benar tentang navigasi juga berlaku untuk konten lainnya: cobalah untuk tidak menyembunyikan apa pun. Carousel adalah metode umum untuk menyembunyikan konten. Mungkin terlihat cukup rapi, tetapi ada kemungkinan bahwa pengguna tidak akan pernah menemukan konten tersembunyi tersebut. Korsel lebih baik dalam memecahkan masalah organisasi—seperti konten apa yang harus ditampilkan di beranda—daripada melayani pengguna.
Meskipun demikian, jika ruang terlalu mahal, korsel dapat mencegah halaman menjadi terlalu panjang dan berantakan. Anda dapat menggunakan pendekatan hibrida: menampilkan konten di korsel untuk layar kecil, tetapi menampilkan konten yang sama dalam petak untuk layar yang lebih besar.
Untuk layar sempit, tampilkan item dalam satu baris 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 item dapat digeser dengan lancar. Berkat scroll-snap-type: inline mandatory, itemnya sudah terpasang dengan benar.
Jika layar sudah cukup besar—dalam hal ini lebih lebar dari 50em—beralihlah ke petak dan tampilkan item di 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 menggunakan lebar penuh. Jika ya, tidak akan ada indikasi bahwa konten lain tersedia di luar tepi area pandang.
Korsel adalah contoh lain dari penerapan pola tambahan. Jika Anda memiliki banyak item yang dapat dijelajahi orang lain, Anda dapat terus menggunakan pola tambahan bahkan di perangkat layar besar, termasuk televisi. Scroller media ini menggunakan beberapa carousel untuk mengelola opsi dalam jumlah besar.
Sekali lagi, properti scroll-snap memastikan bahwa interaksi terasa lancar. Selain itu, perhatikan bahwa gambar dalam carousel telah menerapkan loading="lazy" pada gambar tersebut. Dalam hal ini, gambar tidak berada di paruh bawah, tetapi 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. Anda bahkan dapat membuatnya secara otomatis beralih antar-item. Namun, berpikirlah panjang dan keras sebelum melakukannya—putar otomatis mungkin berfungsi jika carousel adalah satu-satunya konten di halaman, tetapi carousel yang diputar otomatis sangat mengganggu jika seseorang mencoba berinteraksi dengan konten lain (misalnya, membaca teks). Anda dapat membaca praktik terbaik carousel lainnya.
Tabel data
Elemen table sangat cocok untuk menyusun struktur data tabulasi; baris dan kolom informasi
yang terkait. Namun, jika tabel terlalu besar, tata letak layar kecil dapat 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 tambahan adalah kompromi yang baik 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 tepat untuk menghemat ruang, tetapi berhati-hatilah dalam menggunakannya untuk konten yang sangat penting. Ini 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 sebuah khayalan.
Untuk pola elemen UI dan tata letak lainnya, jelajahi bagian Pola web.dev.
Saat Anda mengadaptasi elemen antarmuka dengan ukuran layar yang berbeda, kueri media sangat berguna untuk mengetahui dimensi perangkat. Namun, fitur media seperti min-width dan min-height hanyalah permulaan. Selanjutnya, Anda akan menemukan berbagai macam fitur media lainnya.