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.
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.
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.
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.
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.
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.
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.
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.