Desain yang dilihat di layar kecil tidak boleh terlihat seperti versi yang diperkecil dari tata letak layar besar. Demikian pula, desain yang dilihat di layar besar tidak boleh terlihat seperti versi yang diperbesar dari tata letak layar kecil. Sebaliknya, desain harus cukup fleksibel untuk beradaptasi dengan semua ukuran layar. Desain responsif yang berhasil akan memanfaatkan setiap faktor bentuk.
Artinya, beberapa elemen antarmuka mungkin perlu terlihat sangat berbeda, bergantung pada konteks tempat elemen tersebut dilihat. Anda mungkin perlu menerapkan CSS yang sangat berbeda ke codebase HTML yang sama untuk memanfaatkan berbagai ukuran layar. Hal ini bisa menjadi tantangan desain yang cukup besar.
Berikut beberapa tantangan umum yang mungkin Anda hadapi.
Navigasi
Menampilkan daftar link navigasi cukup mudah di layar besar. Ada banyak ruang untuk menampung link tersebut.
Di layar kecil, ruang sangat terbatas. Saat mendesain untuk situasi ini, Anda mungkin tergoda untuk menyembunyikan navigasi di balik tombol. Masalah dengan solusi ini adalah pengguna harus melakukan dua langkah untuk membuka menu, lalu memilih opsi. Hingga menu dibuka, pengguna akan bertanya-tanya "ke mana saya bisa pergi?"
Coba temukan strategi yang menghindari penyembunyian navigasi. Jika memiliki item yang relatif sedikit, Anda dapat menata gaya navigasi agar terlihat bagus di layar kecil.
Pola tersebut tidak akan diskalakan jika navigasi Anda memiliki banyak link. Navigasi akan terlihat berantakan jika link di-wrap ke dua atau tiga baris di layar kecil.
Salah satu solusi yang memungkinkan adalah menyimpan link dalam satu baris, tetapi memangkas daftar di tepi layar. Pengguna dapat menggeser secara horizontal untuk menampilkan link yang tidak langsung terlihat. Ini adalah pola overflow.
Keuntungan dari teknik ini adalah teknik ini dapat diskalakan ke lebar perangkat dan jumlah link apa pun. Kekurangannya adalah pengguna mungkin melewatkan link yang awalnya tidak terlihat. Jika Anda menggunakan teknik ini untuk navigasi utama, pastikan beberapa link pertama adalah link 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 tombol untuk menampilkan dan menyembunyikan konten. Hal ini disebut pengungkapan progresif.
Pastikan tombol yang mengalihkan tampilan navigasi diberi label. Jangan hanya mengandalkan ikon agar dapat dipahami.
Ikon tanpa label adalah navigasi "makanan misterius"—pengguna tidak akan tahu apa yang ada di dalamnya sampai mereka mencobanya. Berikan label teks untuk memberi tahu pengguna apa yang akan ditampilkan tombol.
Carousel
Apa yang berlaku untuk navigasi juga berlaku untuk konten lainnya: sebaiknya jangan menyembunyikan apa pun. Carousel adalah metode umum untuk menyembunyikan konten. Carousel mungkin terlihat rapi, tetapi ada kemungkinan besar pengguna tidak akan pernah menemukan konten tersembunyi. Carousel lebih baik dalam memecahkan masalah organisasi—seperti konten apa yang harus ditampilkan di halaman beranda—daripada melayani pengguna.
Meskipun demikian, saat ruang sangat terbatas, carousel dapat mencegah halaman menjadi terlalu panjang dan berantakan. Anda dapat menggunakan pendekatan hybrid: menampilkan konten dalam carousel 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 penggeseran 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 digesek dengan cara yang terasa lancar. Berkat scroll-snap-type: inline mandatory, item akan ditempatkan.
Jika layar cukup besar—lebih lebar dari 50em dalam hal ini—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 menggunakan lebar penuh. Jika demikian, tidak akan ada indikasi bahwa lebih banyak konten tersedia di luar tepi area pandang.
Carousel adalah contoh lain dari pola overflow yang sedang digunakan. Jika Anda memiliki banyak item yang dapat dijelajahi pengguna, Anda dapat terus menggunakan pola overflow bahkan di layar besar, termasuk televisi. Penggeser media ini menggunakan beberapa carousel untuk mengelola sejumlah besar opsi.
Sekali lagi, properti scroll-snap memastikan interaksi terasa lancar. Selain itu, perhatikan bahwa gambar dalam carousel memiliki loading="lazy" yang diterapkan padanya. Dalam hal ini, gambar tidak berada di bawah lipatan, tetapi berada di luar tepi, tetapi prinsip yang sama berlaku: jika pengguna tidak pernah menggeser sejauh item tersebut, gambar tidak akan didownload, sehingga menghemat bandwidth.
Dengan menambahkan JavaScript, Anda dapat menambahkan kontrol interaktif ke carousel. Anda bahkan dapat membuatnya otomatis melakukan siklus melalui item. Namun, pikirkan baik-baik 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 data tabel; baris dan kolom informasi terkait. Namun, jika tabel terlalu besar, tabel tersebut dapat merusak tata letak layar kecil Anda.
Anda dapat menerapkan pola overflow ke tabel. Dalam contoh ini, tabel di-wrap 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 overflow adalah kompromi yang baik untuk layar kecil, tetapi pastikan jelas bahwa konten di luar layar dapat dijangkau. Pertimbangkan untuk menempatkan bayangan atau gradien di tepi tempat konten dipangkas.
Pengungkapan progresif adalah cara yang berguna untuk menghemat ruang, tetapi berhati-hatilah saat menggunakannya untuk konten yang sangat penting. Pengungkapan progresif lebih cocok untuk tindakan sekunder. Pastikan elemen antarmuka yang memicu pengungkapan diberi label yang jelas—jangan hanya mengandalkan ikonografi.
Desain untuk layar yang lebih kecil terlebih dahulu. Lebih mudah 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 mengadaptasi elemen antarmuka ke 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.