Dasar-dasar desain web responsif

Cara membuat situs yang merespons kebutuhan dan kemampuan perangkat yang digunakan untuk melihatnya.

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 terkait cara konten ditampilkan di layar.

Desain web responsif, 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 yang ditampilkan dalam tampilan kolom tunggal; tablet mungkin menampilkan konten yang sama dalam dua kolom.

Di video ini, desain bergerak dari area pandang sempit ke area pandang lebar, yang merespons area 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 beradaptasi dengan setiap ukuran layar, baik sekarang atau pada masa mendatang. Selain itu, perangkat memiliki berbagai fitur yang bisa 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 area pandang meta di bagian head dokumen. Tag area pandang meta memberikan petunjuk ke browser tentang cara mengontrol dimensi dan penskalaan halaman.

Untuk mencoba 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 meningkatkan 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 perangkat. Piksel independen perangkat (atau kepadatan) adalah representasi dari satu piksel, yang mungkin pada layar kepadatan tinggi terdiri dari banyak piksel fisik. Hal ini memungkinkan halaman untuk mengubah posisi/geometri konten agar sesuai dengan berbagai ukuran layar, baik saat dirender di ponsel kecil maupun monitor desktop yang besar.

Screenshot halaman dengan teks yang sulit dibaca karena sangat diperkecil.
Contoh pemuatan halaman di perangkat tanpa tag meta area pandang. Lihat contoh ini di Glitch.
Screenshot halaman yang sama dengan teks pada ukuran yang dapat dibaca.
Contoh cara halaman dimuat di perangkat dengan tag meta area tampilan. 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 membangun 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 mengotomatiskan proses memastikan bahwa dokumen HTML Anda 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 tampilan:

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

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

Menyesuaikan ukuran konten ke area pandang

Pada perangkat desktop dan seluler, pengguna terbiasa men-scroll situs secara vertikal, tidak secara horizontal; memaksa pengguna men-scroll secara horizontal atau memperkecil untuk melihat seluruh halaman akan menghasilkan pengalaman pengguna yang buruk.

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

Konten tidak diubah ukurannya 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 menyusut agar sesuai dengan ruang yang dimilikinya, jika ukuran area pandang lebih kecil daripada gambar. Namun, karena max-width, bukan width, adalah 100%, gambar tidak akan melebar lebih besar dari ukuran naturalnya. Biasanya aman untuk menambahkan baris berikut ke stylesheet sehingga Anda tidak akan pernah memiliki masalah dengan gambar yang menyebabkan scrollbar.

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

Tambahkan dimensi gambar ke elemen img

Saat menggunakan max-width: 100%, Anda mengganti dimensi alami gambar, tetapi Anda tetap harus menggunakan atribut width dan height di tag <img> Anda. Hal ini karena browser modern akan menggunakan informasi ini untuk mencadangkan ruang untuk gambar sebelum 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 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 tampilan menjadi lebih kecil dari lebar total 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 menjadi persentase tertentu dari penampung. Hal ini berarti kolom menjadi lebih sempit, bukan membuat scrollbar.

Teknik tata letak CSS modern seperti Flexbox, Tata Letak Petak, dan Multicol memudahkan pembuatan petak fleksibel ini.

Kotak Flex

Metode tata letak ini sangat ideal jika Anda memiliki sekumpulan item dengan ukuran berbeda dan Anda ingin item tersebut pas dalam baris atau baris, dengan item yang lebih kecil memerlukan lebih sedikit ruang dan 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 petak yang fleksibel dan mudah. Jika kita mempertimbangkan contoh float sebelumnya, daripada membuat kolom dengan persentase, kita dapat menggunakan tata letak petak dan unit fr, yang mewakili sebagian ruang yang tersedia di penampung.

.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 ini, kita memiliki 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 dapat membuat jumlah kolom yang responsif dengan properti column-width. Pada demo di bawah, Anda dapat melihat bahwa kolom ditambahkan jika ada ruang untuk kolom 200px lain.

Baca selengkapnya tentang Multicol

Menggunakan kueri media CSS agar responsif

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

Kueri media adalah filter sederhana yang bisa 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 atau tidak.

Untuk menyediakan berbagai gaya pencetakan, Anda harus menargetkan jenis output sehingga 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 yang responsif, kami biasanya menanyakan fitur perangkat untuk memberikan tata letak yang berbeda untuk layar yang lebih kecil, atau saat kami mendeteksi bahwa pengunjung sedang menggunakan layar sentuh.

Kueri media berdasarkan ukuran area pandang

Kueri media memungkinkan kita menciptakan pengalaman responsif dengan gaya tertentu diterapkan ke layar kecil, layar besar, dan di mana saja. 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 detail selengkapnya, termasuk informasi dukungan browser, 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 orang hanya menggunakan layar sentuh pada perangkat kecil. Dengan beberapa tambahan yang lebih baru pada spesifikasi kueri media, kita dapat menguji fitur-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 perangkat yang berbeda, seperti komputer desktop dan ponsel atau tablet biasa.

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 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 saat 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. Menentukan 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 dengan mulai dari yang kecil, lalu ke besar

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 pada lebar seluler
Aplikasi dengan lebar yang sempit.

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

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

Untuk memasukkan titik henti sementara pada 600px, buat dua kueri media di akhir CSS untuk komponen, satu untuk digunakan saat browser berada 600px dan lebih rendah, dan satu 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 sesuaikan juga perubahan kecil. Misalnya, di antara titik henti sementara utama, sebaiknya sesuaikan margin atau padding pada elemen atau naikkan 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 garis yang sama dan tidak tumpang tindih. Dan 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 sehingga tidak menggunakan seluruh lebar layar.

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

Optimalkan teks untuk dibaca

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

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

Mari kita lihat lebih jauh lagi 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;
  }
}

Hindari sekadar menyembunyikan konten

Berhati-hatilah saat memilih konten yang akan disembunyikan atau ditampilkan, bergantung pada ukuran layar. Jangan menyembunyikan konten hanya karena Anda tidak bisa 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 saat musim semi yang memerlukan informasi untuk menentukan apakah mereka bisa pergi ke luar atau tidak.

Menampilkan titik henti sementara kueri media di Chrome DevTools

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

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

Untuk menampilkan halaman Anda pada titik henti sementara yang berbeda:

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

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

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