Dasar-dasar desain web responsif

Seiring meningkatnya jumlah pengguna ponsel di internet, desainer web menjadi semakin penting untuk menata konten dengan cara yang berfungsi dengan baik untuk berbagai ukuran layar. Desain web responsif, yang awalnya ditentukan oleh Ethan Marcotte di A List Apart, adalah strategi desain yang merespons kebutuhan pengguna dan kemampuan perangkat mereka dengan mengubah tata letak situs agar sesuai dengan perangkat yang digunakan. Misalnya, situs responsif mungkin menampilkan konten dalam tampilan satu kolom di ponsel, dua kolom di tablet, dan tiga atau empat kolom di komputer desktop.

Saat layar menjadi lebih lebar, widget akan mengubah bentuk sebagai respons.

Karena perangkat yang kompatibel dengan internet memiliki begitu banyak kemungkinan ukuran layar, situs Anda harus beradaptasi dengan ukuran layar yang ada atau yang akan datang. Desain responsif modern juga memperhitungkan mode interaksi seperti layar sentuh. Tujuannya adalah untuk mengoptimalkan pengalaman bagi semua orang.

Menetapkan area pandang

Halaman yang dioptimalkan untuk berbagai perangkat harus menyertakan tag meta viewport di header dokumen. Tag ini memberi tahu browser cara mengontrol dimensi dan penskalaan halaman.

Untuk mencoba memberikan pengalaman terbaik, browser seluler merender halaman dengan lebar layar desktop (biasanya sekitar 980px, meskipun ini bervariasi di seluruh perangkat), lalu mencoba membuat konten terlihat lebih baik dengan meningkatkan ukuran font dan menskalakan konten agar sesuai dengan layar. Hal ini dapat membuat font terlihat tidak konsisten dan memerlukan pengguna untuk memperbesar agar dapat melihat dan berinteraksi dengan konten.

<!DOCTYPE html>
<html lang="en">
 
<head>
    …
   
<meta name="viewport" content="width=device-width, initial-scale=1">
    …
 
</head>
  …

Menggunakan nilai meta viewport width=device-width memberi tahu halaman untuk mencocokkan lebar layar dalam piksel yang tidak bergantung perangkat (DIP), unit piksel visual standar (yang dapat terdiri dari banyak piksel fisik pada layar dengan kepadatan tinggi). Hal ini memungkinkan halaman mengubah posisi konten agar sesuai dengan berbagai ukuran layar.

Screenshot halaman
    dengan teks yang sulit dibaca karena diperkecil.
Halaman tanpa tag meta area pandang dimuat dengan sangat diperkecil, sehingga teks sulit dibaca. Lihat contoh ini di Glitch.
Screenshot
    halaman yang sama dengan teks dalam ukuran yang dapat dibaca.
Dengan menetapkan tag meta viewport, Anda dapat membaca halaman tanpa memperbesar. Lihat contoh ini di Glitch.

Beberapa browser mempertahankan lebar halaman konstan saat memutar ke mode lanskap, dan melakukan zoom untuk mengisi layar, bukan mengubah posisi/geometri. Menambahkan nilai initial-scale=1 memberi tahu browser untuk menetapkan hubungan 1:1 antara piksel CSS dan piksel yang tidak bergantung perangkat terlepas dari orientasi perangkat, sehingga halaman dapat memanfaatkan lebar lanskap penuh.

Audit Lighthouse Tidak memiliki tag <meta name="viewport"> dengan width atau initial-scale dapat membantu Anda mengotomatiskan proses untuk memastikan dokumen HTML Anda menggunakan tag meta viewport dengan benar.

Menyesuaikan ukuran materi dengan area pandang

Pada desktop dan perangkat seluler, pengguna terbiasa menggulir situs secara vertikal, tidak secara horizontal. Memaksa pengguna untuk men-scroll secara horizontal atau memperkecil tampilan untuk melihat seluruh halaman akan menyebabkan pengalaman pengguna yang buruk.

Saat mengembangkan situs seluler dengan tag area pandang meta, sering kali kita tidak sengaja membuat konten halaman yang tidak muat dalam area pandang yang ditentukan. Misalnya, gambar yang ditampilkan lebih lebar dari area pandang dapat menyebabkan scroll horizontal. Untuk mencegah hal ini, sesuaikan konten Anda agar sesuai dengan area pandang.

Audit Lighthouse Ukuran konten untuk area pandang tidak tepat dapat membantu Anda mengotomatiskan proses deteksi konten yang melebihi batas.

Gambar

Gambar dengan dimensi tetap menyebabkan halaman di-scroll jika lebih besar dari tampilan yang terlihat. Sebaiknya berikan max-width 100% untuk semua gambar, yang akan menyusutkan gambar agar sesuai dengan ruang yang tersedia sekaligus mencegahnya meluas melebihi ukuran awalnya.

Pada umumnya, Anda dapat melakukannya dengan menambahkan kode berikut ke sheet gaya:

img {
 
max-width: 100%;
 
display: block;
}

Menambahkan dimensi gambar ke elemen img

Meskipun Anda menetapkan max-width: 100%, sebaiknya tambahkan atribut width dan height ke tag <img> agar browser dapat mencadangkan ruang untuk gambar sebelum dimuat. Hal ini membantu mencegah pergeseran tata letak.

Tata Letak

Karena dimensi dan lebar layar dalam piksel CSS bervariasi antarperangkat (misalnya, antara ponsel dan tablet, dan bahkan antara ponsel yang berbeda), konten tidak boleh bergantung pada lebar area pandang tertentu untuk dirender dengan baik.

Sebelumnya, elemen tata letak setelan ini harus dalam persentase. Menggunakan pengukuran piksel mengharuskan pengguna men-scroll secara horizontal di layar kecil:

Screenshot tata letak dua kolom dengan sebagian besar kolom kedua berada di luar area pandang
Tata letak mengambang menggunakan piksel. Lihat contoh ini di Glitch.

Penggunaan persentase akan membuat kolom lebih sempit di layar yang lebih kecil, karena setiap kolom selalu menggunakan persentase lebar layar yang sama:

Teknik tata letak CSS modern seperti Flexbox, Tata Letak Petak, dan Multikolom membuat pembuatan petak fleksibel ini jauh lebih mudah.

Flexbox

Gunakan Flexbox jika Anda memiliki sekumpulan item dengan ukuran yang berbeda dan ingin item tersebut muat dengan nyaman dalam satu baris atau beberapa baris, dengan item yang lebih kecil menggunakan lebih sedikit ruang dan item yang lebih besar menggunakan lebih banyak ruang.

.items {
 
display: flex;
 
justify-content: space-between;
}

Anda dapat menggunakan Flexbox untuk menampilkan item sebagai satu baris, atau digabungkan ke beberapa baris saat ruang yang tersedia berkurang.

Baca selengkapnya tentang Flexbox.

Tata Letak Petak CSS

Tata Letak Petak CSS membuat petak yang fleksibel. Anda dapat meningkatkan contoh yang mengambang sebelumnya menggunakan tata letak petak dan unit fr, yang mewakili sebagian ruang yang tersedia dalam penampung.

.container {
 
display: grid;
 
grid-template-columns: 1fr 3fr;
}

Anda juga dapat menggunakan Tata Letak Petak untuk membuat tata letak petak reguler dengan item sebanyak yang muat. Jumlah jalur yang tersedia akan berkurang seiring dengan menurunnya ukuran layar. Demo berikut menampilkan petak yang berisi kartu sebanyak yang muat di setiap baris, dengan ukuran minimum 200px.

Baca selengkapnya tentang Tata Letak Petak CSS

Tata letak multi-kolom

Untuk beberapa jenis tata letak, Anda dapat menggunakan Tata Letak Multi-kolom (Multicol), yang membuat jumlah kolom responsif dengan properti column-width. Dalam demo berikut, halaman menambahkan kolom jika ada ruang untuk kolom 200px lain.

Baca selengkapnya tentang Multicol

Menggunakan kueri media CSS untuk responsivitas

Terkadang, Anda mungkin perlu melakukan perubahan yang lebih luas pada tata letak untuk mendukung ukuran layar tertentu daripada yang diizinkan oleh teknik yang dijelaskan sebelumnya. Di sinilah kueri media menjadi berguna.

Kueri media adalah filter sederhana yang dapat Anda terapkan ke gaya CSS, untuk mengubah gaya tersebut berdasarkan jenis perangkat yang merender konten. Kueri media juga dapat mengubah gaya berdasarkan fitur perangkat, termasuk lebar, tinggi, orientasi, dan apakah perangkat digunakan sebagai layar sentuh.

Untuk memberikan gaya yang berbeda untuk pencetakan, Anda dapat menargetkan jenis output dan menyertakan sheet gaya untuk gaya cetak:

<!DOCTYPE html>
<html lang="en">
 
<head>
    …
   
<link rel="stylesheet" href="print.css" media="print">
    …
 
</head>
  …

Anda juga dapat menggunakan kueri media untuk menyertakan gaya cetak di sheet gaya utama:

@media print {
 
/* print styles go here */
}

Untuk desain web responsif, kueri yang paling umum adalah untuk fitur perangkat, sehingga Anda dapat menyesuaikan tata letak untuk layar sentuh atau layar yang lebih kecil.

Kueri media berdasarkan ukuran area pandang

Kueri media memungkinkan Anda membuat pengalaman responsif yang menerapkan gaya tertentu ke ukuran layar tertentu. Kueri untuk ukuran layar dapat menguji hal-hal berikut:

  • width (min-width, max-width)
  • height (min-height, max-height)
  • orientation
  • aspect-ratio

Semua fitur ini memiliki dukungan browser yang sangat baik. Untuk mengetahui detail selengkapnya, termasuk informasi dukungan browser, lihat lebar, tinggi, orientasi, dan rasio aspek di MDN.

Kueri media berdasarkan kemampuan perangkat

Mengingat berbagai perangkat yang tersedia, developer tidak dapat mengasumsikan bahwa setiap perangkat besar adalah komputer desktop atau laptop biasa, atau bahwa setiap perangkat kecil menggunakan layar sentuh. Beberapa tambahan baru pada spesifikasi kueri media memungkinkan Anda menguji fitur seperti jenis pointer yang digunakan untuk berinteraksi dengan perangkat dan apakah pengguna dapat menahan pointer di atas elemen.

  • hover
  • pointer
  • any-hover
  • any-pointer

Coba lihat demo ini di berbagai perangkat, seperti komputer desktop biasa dan ponsel atau tablet.

Fitur yang lebih baru ini memiliki dukungan yang baik di semua browser modern. Cari tahu selengkapnya di halaman MDN untuk hover, any-hover, pointer, dan any-pointer.

Menggunakan any-hover dan any-pointer

Fitur any-hover dan any-pointer menguji apakah pengguna dapat menahan kursor di atas elemen (sering disebut mengarahkan kursor), atau menggunakan kursor sama sekali, meskipun bukan cara utama mereka berinteraksi dengan perangkat. Berhati-hatilah saat menggunakannya, misalnya untuk menghindari memaksa pengguna layar sentuh beralih ke mouse. Namun, any-hover dan any-pointer dapat berguna jika penting untuk menentukan jenis perangkat yang dimiliki pengguna. Misalnya, laptop dengan layar sentuh dan trackpad harus cocok dengan pointer kasar dan halus, selain kemampuan untuk mengarahkan kursor.

Cara memilih titik henti sementara

Jangan menentukan titik henti sementara berdasarkan class perangkat, atau produk, nama merek, atau sistem operasi apa pun. Hal ini membuat kode Anda sulit dikelola. Sebagai gantinya, biarkan konten menentukan bagaimana tata letaknya berubah agar sesuai dengan penampung.

Memilih titik henti sementara utama dengan secara bertahap mulai dari layar kecil hingga ke besar

Desain konten agar pas dengan ukuran layar kecil terlebih dahulu, lalu perluas layar sampai titik henti sementara diperlukan. Hal ini memungkinkan Anda meminimalkan jumlah titik henti sementara di halaman dan mengoptimalkannya berdasarkan konten.

Contoh berikut membahas contoh widget prakiraan cuaca di awal halaman ini. Langkah pertama adalah membuat prakiraan terlihat bagus di layar kecil:

Screenshot
    aplikasi cuaca dengan lebar seluler
Aplikasi dengan lebar sempit.

Berikutnya, ubah ukuran browser sampai ada terlalu banyak spasi kosong di antara elemen agar widget terlihat bagus. Keputusan ini bersifat subjektif, tetapi lebih dari 600px pasti terlalu lebar.

Screenshot
    aplikasi cuaca dengan celah yang lebar di antara item
Pada ukuran ini, tata letak aplikasi mungkin akan berubah.

Untuk menyisipkan titik henti sementara di 600px, buat dua kueri media di akhir CSS untuk komponen: satu untuk digunakan saat browser berukuran 600px atau lebih sempit, dan satu untuk digunakan saat browser berukuran lebih lebar dari 600px.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

Terakhir, optimalisasi CSS. Di dalam kueri media untuk max-width dari 600px, tambahkan CSS yang hanya untuk layar kecil. Di dalam kueri media untuk min-width dari 601px, tambahkan CSS untuk layar yang lebih besar.

Memilih titik henti sementara kecil jika diperlukan

Selain memilih titik henti sementara utama saat tata letak berubah secara signifikan, hal ini juga membantu untuk menyesuaikan perubahan kecil. Misalnya, antara titik henti sementara utama, sebaiknya sesuaikan margin atau padding pada elemen, atau perbesar ukuran font agar terlihat lebih natural dalam tata letak.

Contoh ini mengikuti pola yang sama dengan contoh sebelumnya, dimulai dengan mengoptimalkan tata letak layar yang lebih kecil. Pertama, tingkatkan font saat lebar area pandang lebih besar dari 360px. Setelah itu, jika ada cukup ruang, Anda dapat memisahkan suhu tinggi dan rendah sehingga berada di baris yang sama, dan membuat ikon cuaca lebih besar.

@media (min-width: 360px) {
  body
{
   
font-size: 1.0em;
 
}
}

@media (min-width: 500px) {
 
.seven-day-fc .temp-low,
 
.seven-day-fc .temp-high {
   
display: inline-block;
   
width: 45%;
 
}

 
.seven-day-fc .seven-day-temp {
   
margin-left: 5%;
 
}

 
.seven-day-fc .icon {
   
width: 64px;
   
height: 64px;
 
}
}

Untuk layar besar, sebaiknya batasi lebar maksimum panel prakiraan cuaca agar tidak menggunakan seluruh lebar layar.

@media (min-width: 700px) {
 
.weather-forecast {
   
width: 700px;
 
}
}

Mengoptimalkan teks untuk bacaan

Teori keterbacaan klasik menyarankan bahwa kolom yang ideal harus berisi 70 hingga 80 karakter per baris (sekitar 8 hingga 10 kata dalam bahasa Inggris). Pertimbangkan untuk menambahkan titik henti sementara setiap kali lebar blok teks bertambah melewati 10 kata.

Screenshot halaman teks di perangkat seluler
Teks di perangkat seluler.
Screenshot halaman teks di browser desktop
Teks yang sama di browser desktop dengan titik henti sementara yang ditambahkan untuk membatasi panjang baris.

Dalam contoh ini, font Roboto di 1em menghasilkan 10 kata per baris di layar yang lebih kecil, tetapi layar yang lebih besar memerlukan titik henti sementara. Dalam hal ini, jika lebar browser lebih besar dari 575px, lebar konten yang ideal adalah 550px.

@media (min-width: 575px) {
  article
{
   
width: 550px;
   
margin-left: auto;
   
margin-right: auto;
 
}
}

Hindari menyembunyikan konten (:#avoid-hiding-content)

Berhati-hatilah saat memilih materi yang disembunyikan atau ditampilkan menurut ukuran layar. Jangan sembunyikan konten hanya karena Anda tidak bisa memuatnya di layar. Ukuran layar tidak memprediksi apa yang mungkin ingin dilihat pengguna. Misalnya, menghapus jumlah serbuk sari dari prakiraan cuaca dapat menjadi masalah serius bagi penderita alergi musim semi yang memerlukan informasi tersebut untuk memutuskan apakah mereka dapat pergi ke luar.

Melihat titik henti sementara kueri media di Chrome DevTools

Setelah menyiapkan titik henti sementara kueri media, periksa pengaruhnya terhadap tampilan situs Anda. Anda dapat mengubah ukuran jendela browser untuk memicu titik henti sementara, tetapi Chrome DevTools memiliki fitur bawaan yang menampilkan tampilan halaman di titik henti sementara yang berbeda.

Screenshot DevTools dengan aplikasi cuaca terbuka dan lebar 822 piksel dipilih.
DevTools menampilkan aplikasi cuaca dengan ukuran area pandang yang lebih luas.
Screenshot DevTools dengan aplikasi cuaca terbuka dan lebar 436 piksel dipilih.
DevTools menampilkan aplikasi cuaca dengan ukuran area pandang yang lebih sempit.

Untuk melihat halaman Anda di bawah titik henti sementara yang berbeda:

  1. Buka DevTools.
  2. Aktifkan Mode Perangkat. Tindakan ini akan membukanya dalam mode responsif secara default.
  3. Untuk melihat kueri media, buka menu Mode Perangkat, lalu pilih Tampilkan kueri media. Tindakan ini akan menampilkan titik henti sementara sebagai batang berwarna di atas halaman Anda.
  4. Klik salah satu batang untuk melihat halaman Anda saat kueri media tersebut aktif. Klik kanan pada panel untuk melompat ke definisi kueri media tersebut.