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.
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.
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-scalemaximum-scaleuser-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.
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)orientationaspect-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.
hoverpointerany-hoverany-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.
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.
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.
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.
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.