Dasar-dasar desain web responsif

Cara membuat situs yang merespons kebutuhan dan kemampuan perangkat yang menampilkannya.

Penggunaan perangkat seluler untuk menjelajahi web terus berkembang dengan kecepatan yang sangat tinggi, dan perangkat ini sering kali terkendala oleh ukuran layar dan memerlukan pendekatan yang berbeda terhadap cara konten ditampilkan di layar.

Desain web responsif, yang awalnya didefinisikan oleh Ethan Marcotte dalam A List Apart, merespons kebutuhan pengguna dan perangkat yang mereka gunakan. Tata letak berubah berdasarkan ukuran dan kemampuan perangkat. Misalnya, di ponsel, pengguna akan melihat konten ditampilkan dalam tampilan kolom tunggal; tablet mungkin menampilkan konten yang sama dalam dua kolom.

Dalam video ini, desain bergerak dari area pandang sempit ke area pandang lebar, yang merespons real estate layar yang tersedia.

Ada banyak ukuran layar yang berbeda di ponsel, "phablet", tablet, desktop, konsol game, TV, dan bahkan perangkat wearable. Ukuran layar selalu berubah, jadi penting bagi situs Anda untuk dapat beradaptasi dengan segala ukuran layar, saat ini atau di masa mendatang. Selain itu, perangkat memiliki berbagai fitur yang dapat kita gunakan untuk berinteraksi dengannya. Misalnya, beberapa pengunjung Anda akan menggunakan layar sentuh. Desain responsif modern mempertimbangkan semua hal ini untuk mengoptimalkan pengalaman bagi semua orang.

Menyetel area pandang

Halaman yang dioptimalkan untuk berbagai perangkat harus menyertakan tag meta area pandang di kepala dokumen. Tag area pandang meta memberikan petunjuk ke browser tentang cara mengontrol dimensi dan penskalaan halaman.

Untuk memberikan pengalaman terbaik, browser seluler merender halaman pada lebar layar desktop (biasanya sekitar 980px, meskipun ini bervariasi di seluruh perangkat), lalu mencoba membuat konten terlihat lebih baik dengan memperbesar ukuran font dan menskalakan konten agar sesuai dengan layar. Artinya, ukuran font mungkin tampak tidak konsisten bagi pengguna, yang mungkin harus mengetuk dua kali atau mencubit 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 area pandang meta width=device-width menginstruksikan halaman untuk mencocokkan lebar layar dalam piksel yang tidak bergantung pada perangkat. Piksel independen perangkat (atau kepadatan) yang merupakan representasi dari satu piksel, yang mungkin pada layar berkepadatan tinggi terdiri dari banyak piksel fisik. Hal ini memungkinkan halaman untuk menyesuaikan posisi/geometri konten agar sesuai dengan berbagai ukuran layar, baik yang dirender di ponsel kecil atau monitor desktop besar.

Screenshot halaman dengan teks yang sulit dibaca karena sangat diperkecil.
Contoh cara halaman dimuat di perangkat tanpa tag meta area pandang. Lihat contoh ini di Glitch.
Screenshot halaman yang sama dengan teks dalam ukuran yang dapat dibaca.
Contoh cara halaman dimuat di perangkat dengan tag meta area pandang. Lihat contoh ini di Glitch.

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

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

Memastikan area pandang yang dapat diakses

Selain menyetel initial-scale, Anda juga dapat menyetel atribut berikut di area pandang:

  • minimum-scale
  • maximum-scale
  • user-scalable

Jika ditetapkan, hal ini dapat menonaktifkan kemampuan pengguna untuk melakukan zoom pada area pandang, yang berpotensi menyebabkan masalah aksesibilitas. Oleh karena itu, kami tidak akan merekomendasikan penggunaan atribut ini.

Menyesuaikan ukuran konten ke area pandang

Pada desktop dan perangkat seluler, pengguna terbiasa men-scroll situs secara vertikal, bukan horizontal; memaksa pengguna men-scroll secara horizontal atau memperkecil agar dapat melihat seluruh halaman akan menyebabkan pengalaman pengguna yang buruk.

Saat mengembangkan situs seluler dengan tag area pandang meta, sangat mudah untuk secara tidak sengaja membuat konten halaman yang tidak pas dalam area pandang yang ditentukan. Misalnya, gambar yang ditampilkan dengan lebar yang lebih lebar daripada area pandang dapat menyebabkan area pandang ter-scroll secara horizontal. Anda harus menyesuaikan konten ini agar pas dengan lebar area pandang, sehingga pengguna tidak perlu men-scroll secara horizontal.

Konten tidak berukuran dengan benar untuk area pandang Audit Lighthouse dapat membantu Anda mengotomatiskan proses deteksi konten yang berlebih.

Gambar

Gambar memiliki dimensi tetap dan jika lebih besar dari area pandang akan menyebabkan scrollbar. Cara umum untuk mengatasi masalah ini adalah memberi semua gambar max-width dari 100%. Hal ini akan menyebabkan gambar disusutkan agar sesuai dengan ruang yang dimilikinya, jika ukuran area pandang lebih kecil dari gambar. Namun, karena max-width, bukan width, adalah 100%, gambar tidak akan terentang lebih besar dari ukuran naturalnya. Secara umum, menambahkan hal berikut ke stylesheet dapat dilakukan dengan aman, sehingga Anda tidak akan mengalami masalah dengan gambar yang menyebabkan scrollbar.

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

Tambahkan dimensi gambar ke elemen img

Saat menggunakan max-width: 100%, Anda akan mengganti dimensi alami gambar, tetapi Anda tetap harus menggunakan atribut width dan height pada tag <img>. Hal ini karena browser modern akan menggunakan informasi ini untuk mencadangkan ruang sebelum gambar dimuat, hal ini akan membantu menghindari pergeseran tata letak saat konten dimuat.

Tata Letak

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

Sebelumnya, elemen setelan wajib ini digunakan untuk membuat tata letak dalam persentase. Pada contoh di bawah ini, Anda dapat melihat tata letak dua kolom dengan elemen mengambang, yang berukuran menggunakan piksel. Setelah area pandang menjadi lebih kecil dari total lebar kolom, kita harus men-scroll secara horizontal untuk melihat konten.

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.

Dengan menggunakan persentase untuk lebar, kolom selalu tetap menjadi persentase tertentu dari penampung. Ini berarti kolomnya menjadi lebih sempit, bukan membuat scrollbar.

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

Flexbox

Metode tata letak ini ideal jika Anda memiliki sekumpulan item dengan ukuran berbeda dan Anda ingin agar item tersebut cukup pas dalam baris atau baris, dengan item yang lebih kecil memerlukan lebih sedikit ruang, sementara item yang lebih besar mendapatkan lebih banyak ruang.

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

Dalam desain yang responsif, 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 memungkinkan pembuatan kisi-kisi fleksibel yang mudah. Jika mempertimbangkan contoh float sebelumnya, alih-alih membuat kolom dengan persentase, kita dapat menggunakan tata letak petak dan unit fr, yang mewakili sebagian ruang yang tersedia di container.

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

{i>Grid<i} juga dapat digunakan untuk membuat tata letak {i>grid<i} reguler, dengan sebanyak mungkin item yang sesuai. Jumlah trek yang tersedia akan dikurangi saat ukuran layar menyusut. Dalam demo di bawah, kami memiliki sebanyak mungkin kartu yang muat di setiap baris, dengan ukuran minimum 200px.

Baca selengkapnya tentang Tata Letak Petak CSS

Tata letak beberapa kolom

Untuk beberapa jenis tata letak, Anda dapat menggunakan Tata Letak Multi-Kolom (Multicol), yang dapat membuat jumlah kolom responsif dengan properti column-width. Pada demo di bawah, Anda dapat melihat bahwa kolom ditambahkan jika ada ruang untuk kolom 200px lainnya.

Baca selengkapnya tentang Multicol

Menggunakan kueri media CSS untuk responsivitas

Terkadang, Anda perlu membuat perubahan yang lebih besar pada tata letak untuk mendukung ukuran layar tertentu daripada yang akan diizinkan oleh teknik yang ditunjukkan di atas. Di sinilah kueri media menjadi berguna.

Kueri media adalah filter sederhana yang dapat diterapkan pada gaya CSS. Fitur ini memudahkan Anda mengubah gaya berdasarkan jenis perangkat yang merender konten, atau fitur perangkat tersebut, misalnya lebar, tinggi, orientasi, kemampuan untuk mengarahkan kursor, dan apakah perangkat sedang digunakan sebagai layar sentuh.

Guna memberikan gaya yang berbeda untuk pencetakan, Anda harus menargetkan jenis output sehingga Anda dapat menyertakan stylesheet dengan gaya cetak seperti berikut:

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

Atau, Anda dapat menyertakan gaya cetak dalam stylesheet utama menggunakan kueri media:

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

Untuk desain web responsif, kami biasanya meminta fitur perangkat untuk memberikan tata letak yang berbeda bagi layar yang lebih kecil, atau saat kami mendeteksi bahwa pengunjung menggunakan layar sentuh.

Kueri media berdasarkan ukuran area pandang

Kueri media memungkinkan kita menciptakan pengalaman responsif yang menerapkan gaya tertentu ke perangkat layar kecil, perangkat layar besar, dan di antaranya. Fitur yang kita deteksi di sini adalah ukuran layar, dan kita 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, lihat lebar, tinggi, orientasi, dan rasio aspek di MDN.

Kueri media berdasarkan kemampuan perangkat

Mengingat banyaknya perangkat yang tersedia, kami tidak dapat berasumsi bahwa setiap perangkat besar adalah komputer desktop atau laptop biasa, atau bahwa orang hanya menggunakan layar sentuh pada perangkat kecil. Dengan beberapa tambahan yang lebih baru pada spesifikasi kueri media, kami dapat menguji fitur seperti jenis pointer yang digunakan untuk berinteraksi dengan perangkat dan apakah pengguna dapat mengarahkan kursor ke 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, any-pointer.

Menggunakan any-hover dan any-pointer

Fitur any-hover dan any-pointer akan menguji apakah pengguna memiliki kemampuan untuk mengarahkan kursor atau menggunakan jenis pointer tersebut meskipun itu bukan cara utama mereka berinteraksi dengan perangkat. Berhati-hatilah saat menggunakannya. Memaksa pengguna untuk beralih ke mouse ketika mereka menggunakan layar sentuh tidaklah mudah! Namun, any-hover dan any-pointer mungkin berguna jika penting untuk mengetahui 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 mendefinisikan titik henti sementara berdasarkan class perangkat. Mendefinisikan titik henti sementara berdasarkan perangkat, produk, nama merek, atau sistem operasi tertentu yang digunakan saat ini dapat mengakibatkan mimpi buruk dalam pemeliharaan. Sebaliknya, konten itu sendiri yang harus menentukan bagaimana tata letak menyesuaikan dengan penampungnya.

Memilih titik henti sementara utama mulai dari yang kecil hingga yang ke bawah

Desain konten agar sesuai dengan ukuran layar kecil terlebih dahulu, lalu luaskan layar sampai titik henti sementara diperlukan. Hal ini memungkinkan Anda mengoptimalkan titik henti sementara berdasarkan konten dan mempertahankan jumlah titik henti sementara seminimal mungkin.

Mari kita pelajari contoh yang kita lihat di awal: prakiraan cuaca. Langkah pertama adalah membuat perkiraan terlihat bagus di layar kecil.

Screenshot aplikasi cuaca dengan lebar perangkat seluler
Aplikasi dengan lebar yang sempit.

Selanjutnya, ubah ukuran browser sampai ada terlalu banyak ruang kosong di antara elemen, dan tampilan perkiraan tidak akan terlihat baik. Keputusan ini agak subjektif, tetapi di atas 600px pasti terlalu lebar.

Screenshot aplikasi cuaca dengan jarak yang lebar antar-item
Aplikasi pada saat kita merasa harus menyesuaikan desain.

Untuk menyisipkan titik henti sementara di 600px, buat dua kueri media di akhir CSS untuk komponen, satu untuk digunakan saat browser dalam 600px dan di bawahnya, dan satu lagi saat lebih lebar dari 600px.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

Terakhir, faktorkan ulang 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.

Pilih titik henti sementara kecil jika diperlukan

Selain memilih titik henti sementara utama saat tata letak berubah secara signifikan, sebaiknya Anda juga menyesuaikan perubahan kecil. Misalnya, di antara titik henti sementara utama, sebaiknya sesuaikan margin atau padding pada elemen, atau tambah ukuran font agar terlihat lebih alami dalam tata letak.

Mari kita mulai dengan mengoptimalkan tata letak layar kecil. Dalam hal ini, mari kita perbesar font saat lebar area pandang lebih besar dari 360px. Kedua, jika ada cukup ruang, kita bisa memisahkan suhu tinggi dan rendah sehingga keduanya berada di baris yang sama, bukan di atas satu sama lain. Mari kita buat ikon cuaca sedikit 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;
  }
}

Demikian pula, untuk perangkat layar besar, sebaiknya batasi lebar maksimum panel perkiraan agar tidak memakai seluruh lebar layar.

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

Mengoptimalkan teks untuk dibaca

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

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

Mari kita pelajari lebih lanjut contoh postingan blog di atas. Pada layar yang lebih kecil, font Roboto di 1em berfungsi dengan baik memberikan 10 kata per baris, 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;
  }
}

Jangan hanya menyembunyikan konten

Berhati-hatilah saat memilih konten yang akan disembunyikan atau ditampilkan, bergantung pada ukuran layar. Jangan hanya menyembunyikan konten hanya karena Anda tidak dapat memuatnya di layar. Ukuran layar bukanlah indikasi pasti tentang apa yang mungkin diinginkan pengguna. Misalnya, menghilangkan jumlah serbuk sari dari perkiraan cuaca dapat menjadi masalah serius bagi penderita alergi di musim semi yang memerlukan informasi untuk menentukan apakah mereka bisa pergi keluar atau tidak.

Menampilkan titik henti sementara kueri media di Chrome DevTools

Setelah menyiapkan titik henti sementara kueri media, sebaiknya lihat tampilan situs Anda. Anda dapat mengubah ukuran jendela browser untuk memicu titik henti sementara, tetapi Chrome DevTools memiliki fitur bawaan yang memudahkan Anda untuk melihat tampilan halaman di bawah titik henti sementara yang berbeda.

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

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

Buka DevTools, lalu aktifkan Mode Perangkat. Tindakan ini akan terbuka dalam mode responsif secara default.

Untuk melihat kueri media, buka menu Mode Perangkat dan pilih Show media queries untuk menampilkan titik henti sementara Anda sebagai batang berwarna di atas halaman.

Klik salah satu batang untuk melihat halaman Anda saat kueri media tersebut aktif. Klik kanan panel untuk melompat ke definisi kueri media.