Penggunaan perangkat seluler untuk menjelajahi web tumbuh dengan kecepatan fantastis, tapi sayangnya banyak web tidak dioptimalkan untuk perangkat seluler. Perangkat seluler sering terkendala dengan ukuran layar dan memerlukan pendekatan berbeda dalam bagaimana materi ditampilkan di layar.
Ada banyak ukuran layar yang berbeda untuk ponsel, "phablet," tablet, desktop, konsol game, TV, dan bahkan perangkat yang dapat dikenakan. Ukuran layar selalu berubah, jadi sangatlah penting agar situs Anda bisa beradaptasi dengan tiap ukuran layar, sekarang atau di masa mendatang.
Desain web responsif, awalnya didefinisikan oleh Ethan Marcotte di A List Apart, sebagai jawaban atas kebutuhan pengguna dan perangkat yang mereka gunakan. Perubahan layout berdasarkan ukuran dan kemampuan perangkat. Misalnya, di ponsel, pengguna melihat materi yang ditampilkan dalam tampilan satu kolom; tablet mungkin menampilkan materi yang sama dalam dua kolom.
Responsive Web Design

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.
You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.
This is a free course offered through Udacity
Take CourseMenyetel tampilan yang terlihat
Laman yang dioptimalkan untuk berbagai perangkat harus menyertakan tag meta viewport di kepala dokumen. Sebuah tag meta viewport memberikan petunjuk ke browser tentang cara mengontrol ukuran laman dan penskalaan.
TL;DR
- Gunakan tag meta viewport untuk mengontrol lebar dan penskalaan tampilan yang terlihat di browser.
- Sertakan
width=device-width
untuk mencocokkan lebar layar dalam piksel yang tidak bergantung perangkat. - Sertakan
initial-scale=1
untuk membentuk hubungan 1:1 antara piksel CSS dan piksel yang tidak bergantung perangkat. - Pastikan laman Anda bisa diakses dengan tidak menonaktifkan penskalaan pengguna.
Dalam upaya menyediakan pengalaman terbaik, browser seluler merender laman pada lebar layar desktop (biasanya sekitar 980 px, meskipun ini bisa berbeda antar perangkat), dan kemudian mencoba membuat materi terlihat lebih baik dengan memperbesar ukuran font dan mengubah ukuran materi agar sesuai dengan layar. Ini berarti bahwa ukuran font mungkin tampil tidak konsisten bagi pengguna, yang mungkin harus ketuk dua kali atau cubit-untuk-zoom agar bisa melihat dan berinteraksi dengan materi.
<meta name="viewport" content="width=device-width, initial-scale=1">
Menggunakan nilai meta viewport width=device-width
menginstruksikan laman untuk mencocokkan
lebar layar dalam piksel yang tidak tergantung perangkat. Hal ini memungkinkan laman untuk meng-ubah posisi/geometri
materi agar sesuai dengan ukuran layar yang berbeda, apakah di-render pada telepon
seluler kecil atau monitor desktop yang besar.
Beberapa browser menjaga lebar laman konstan ketika memutar ke mode
lanskap, dan melakukan zoom bukannya meng-ubah posisi/geometri untuk mengisi layar. Menambahkan atribut
initial-scale=1
menginstruksikan browser untuk membangun hubungan 1:1 antara piksel
CSS dan piksel yang tidak tergantung perangkat terlepas dari orientasi perangkat, dan
memungkinkan laman untuk memanfaatkan lebar lanskap penuh.
Memastikan tampilan yang terlihat bisa diakses
Selain menetapkan initial-scale
, Anda juga bisa mengatur atribut berikut pada tampilan yang terlihat:
minimum-scale
maximum-scale
user-scalable
Bila diatur, ini bisa menonaktifkan kemampuan pengguna untuk melakukan zoom tampilan yang terlihat, berpotensi menyebabkan masalah aksesibilitas.
Menyesuaikan ukuran materi dengan tampilan yang terlihat
Pada desktop dan perangkat seluler, pengguna terbiasa menggulir situs web secara vertikal, tidak secara horizontal; memaksa pengguna menggulir secara horizontal atau harus memperkecil tampilan agar bisa melihat seluruh laman akan menyebabkan pengalaman pengguna yang buruk.
TL;DR
- Jangan menggunakan elemen berlebar tetap yang besar.
- Materi tidak boleh bergantung pada lebar tampilan yang terlihat tertentu untuk merender dengan baik.
- Gunakan kueri media CSS untuk menerapkan penataan gaya yang berbeda untuk layar kecil dan besar.
Ketika mengembangkan sebuah situs seluler dengan tag meta viewport
, terkadang kita
secara tidak sengaja membuat materi laman yang tidak muat dalam tampilan yang terlihat
yang ditetapkan. Misalnya, gambar yang ditampilkan mempunyai lebar yang lebih lebar dari
tampilan yang terlihat bisa menyebabkan tampilan yang terlihat untuk menggulir secara horizontal. Anda harus menyesuaikan materi
ini agar muat ke dalam lebar tampilan yang terlihat, sehingga pengguna tidak perlu
menggulir secara horizontal.
Oleh karena ukuran dan lebar layar dalam piksel CSS bervariasi antar perangkat (misalnya, antara ponsel dan tablet, dan bahkan antara ponsel yang berbeda), materi tidak boleh bergantung pada lebar tampilan yang terlihat tertentu untuk dirender dengan baik.
Menyetel lebar CSS mutlak besar untuk elemen laman (seperti contoh di bawah),
menyebabkan div
menjadi terlalu lebar untuk tampilan yang terlihat pada perangkat yang lebih sempit (misalnya,
perangkat dengan lebar piksel CSS 320, seperti iPhone). Sebaiknya, pertimbangkan
untuk menggunakan nilai lebar relatif, seperti width: 100%
. Demikian juga, berhati-hatilah menggunakan
nilai pemosisian absolut besar yang bisa menyebabkan elemen berada di luar
tampilan yang terlihat pada layar kecil.
Menggunakan kueri media CSS agar responsif
Kueri media adalah filter sederhana yang bisa diterapkan pada gaya CSS. Kueri media memudahkan kita untuk mengubah gaya berdasarkan karakteristik dari perangkat yang merender materi, termasuk tipe tampilan, lebar, tinggi, orientasi dan bahkan resolusi.
TL;DR
- Gunakan kueri media untuk menerapkan gaya berdasarkan karakteristik perangkat.
- Gunakan
min-width
di atasmin-device-width
untuk memastikan pengalaman yang paling luas. - Gunakan ukuran relatif untuk elemen agar tidak merusak layout.
Misalnya, Anda bisa menempatkan semua gaya yang diperlukan untuk pencetakan dalam kueri media cetak:
<link rel="stylesheet" href="print.css" media="print">
Selain menggunakan atribut media
di tautan style sheet, ada dua
cara lain untuk menerapkan kueri media yang bisa disematkan dalam file CSS: @media
dan @import
. Karena alasan kinerja, salah satu dari dua metode pertama tersebut
direkomendasikan pada sintaks @import
(lihat Hindari pengimporan CSS).
@media print {
/* print style sheets go here */
}
@import url(print.css) print;
Logika yang berlaku untuk kueri media adalah tidak saling eksklusif, dan untuk setiap filter yang memenuhi kriteria tersebut maka blok CSS yang dihasilkan akan diterapkan dengan menggunakan aturan standar prioritas sesuai CSS.
Menggunakan kueri media berdasarkan ukuran tampilan yang terlihat
Kueri media memungkinkan kita untuk menciptakan pengalaman responsif ketika gaya tertentu diaplikasikan ke layar kecil, layar besar, dan semua layar. Sintaks kueri media memungkinkan untuk pembuatan aturan yang bisa diterapkan tergantung pada karakteristik perangkat.
@media (query) {
/* CSS Rules used when query matches */
}
Meskipun ada beberapa item berbeda yang bisa kita kueri, yang paling
sering digunakan untuk desain web responsif adalah min-width
, max-width
, min-height
, dan
max-height
.
Parameter | |
---|---|
min-width |
Aturan diterapkan untuk setiap browser yang mempunyai lebar lebih besar dari nilai yang didefinisikan dalam kueri. |
max-width |
Aturan diterapkan untuk setiap browser yang mempunyai lebar lebih kecil dari nilai yang didefinisikan dalam kueri. |
min-height |
Aturan diterapkan untuk setiap browser yang mempunyai tinggi lebih besar dari nilai yang didefinisikan dalam kueri. |
max-height |
Aturan diterapkan untuk setiap browser yang mempunyai tinggi lebih kecil dari nilai yang didefinisikan dalam kueri. |
orientation=portrait |
Aturan diterapkan untuk setiap browser ketika tingginya lebih besar dari atau sama dengan lebarnya. |
orientation=landscape |
Aturan untuk setiap browser ketika lebarnya lebih besar dari tingginya. |
Mari kita lihat contoh berikut:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css"> <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css"> <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css"> <link rel="stylesheet" media="(orientation: landscape)" href="landscape.css"> <style> @media (min-width: 500px) and (max-width: 600px) { h1 { color: fuchsia; } .desc:after { content:" In fact, it's between 500px and 600px wide."; } } </style>
- Ketika browser lebarnya antara 0 px dan 640 px, diterapkan
max-640px.css
. - Ketika browser lebarnya antara 500 px dan 600 px, gaya dalam
@media
akan diterapkan. - Ketika browser lebarnya 640 px atau lebih, diterapkan
min-640px.css
. - Ketika browser lebarnya lebih besar daripada tingginya, diterapkan
landscape.css
. - Ketika browser tingginya lebih besar daripada lebarnya, diterapkan
portrait.css
.
Catatan tentang min-device-width
Adalah mungkin juga membuat kueri berdasarkan
min-device-width
, meskipun praktik ini sangat tidak dianjurkan.
Perbedaannya sangat kecil namun sangat penting: min-width
didasarkan pada
ukuran jendela browser sedangkan min-device-width
didasarkan pada
ukuran layar. Sayangnya beberapa browser, termasuk browser Android
lama, tidak melaporkan lebar perangkat dengan benar; browser tersebut melaporkan ukuran layar dalam satuan piksel perangkat, bukan dalam lebar tampilan yang terlihat yang diharapkan.
Selain itu, menggunakan min-device-width
bisa mencegah materi diadaptasikan pada
desktop atau perangkat lain yang memperbolehkan jendela diubah ukurannya karena kueri
didasarkan pada ukuran perangkat yang sebenarnya, bukan ukuran jendela browser.
Gunakan any-pointer
dan any-hover
untuk interaksi yang fleksibel
Dimulai dengan Chrome 39, style sheet Anda bisa menulis selektor yang mencakup
beberapa tipe pointer dan perilaku arahkan ke atas. Fitur media any-pointer
dan any-hover
mirip dengan pointer
dan hover
dalam mengizinkan Anda untuk melakukan kueri
kemampuan pointer pengguna. Namun, tidak seperti yang terakhir, any-pointer
dan
any-hover
beroperasi pada gabungan dari semua perangkat pointer dan bukan hanya
perangkat pointer utama.
Menggunakan unit relatif
Konsep penting di balik desain responsif adalah fluiditas dan proporsionalitas yang bertentangan dengan konsep layout lebar tetap. Menggunakan unit relatif untuk pengukuran bisa membantu menyederhanakan layout dan mencegah kita secara tidak sengaja membuat komponen yang terlalu besar untuk tampilan yang terlihat.
Misalnya, setelan lebar: 100% pada div
tingkat atas, memastikan bahwa itu membentang meliputi
lebar tampilan yang terlihat dan tidak terlalu besar atau terlalu kecil untuk tampilan yang terlihat. div
akan cocok, tidak peduli apakah itu iPhone berlebar 320 px, Blackberry Z10 berlebar 342 px,
atau sebuah Nexus 5 yang berlebar 360 px.
Selain itu, menggunakan unit relatif memungkinkan browser untuk merender materi berdasarkan tingkat zoom pengguna tanpa perlu menambahkan bilah gulir horizontal ke laman.
Tidak disarankan—lebar tetap
div.fullWidth {
width: 320px;
margin-left: auto;
margin-right: auto;
}
Disarankan—lebar responsif
div.fullWidth {
width: 100%;
}
Cara memilih breakpoint
Jangan mendefinisikan breakpoint berdasarkan kelas perangkat. Mendefinisikan breakpoint berdasarkan perangkat, produk, nama merek, atau sistem operasi tertentu yang digunakan saat ini bisa mengakibatkan mimpi buruk dalam pemeliharaan. Malahan, materi itu sendiri yang harus menentukan bagaimana layout menyesuaikan dengan kontainer.
TL;DR
- Buat breakpoint berdasarkan materi, jangan pernah berdasarkan perangkat, produk, atau merek tertentu.
- Desainlah untuk perangkat seluler terkecil lebih dahulu; kemudian secara progresif meningkatkan pengalaman pengguna seiring bertambahnya properti layar.
- Jaga jumlah maksimum baris teks sekitar 70 atau 80 karakter.
Memilih breakpoint utama dengan secara bertahap mulai dari layar kecil hingga ke besar.

Desain materi agar pas dengan ukuran layar kecil terlebih dahulu, kemudian perluas layar sampai breakpoint menjadi diperlukan. Ini memungkinkan Anda untuk mengoptimalkan breakpoint berdasarkan materi dan mempertahankan jumlah breakpoint sesedikit mungkin.
Mari kita bekerja melalui contoh yang kita lihat di awal: prakiraan cuaca. Langkah pertama adalah membuat prakiraan terlihat bagus di layar kecil.

Berikutnya, ubah ukuran browser sampai ada terlalu banyak ruang putih antara elemen, dan tampilan prakiraan cuaca terlihat tidak bagus. Keputusan ini sedikit subjektif, namun di atas 600px pasti terlalu lebar.
Untuk memasukkan breakpoint pada 600 px, buat dua style sheet baru, satu untuk digunakan saat browser 600 px dan kurang dari itu, dan satu ketika luasnya lebih dari 600 px.
<link rel="stylesheet" href="weather.css"> <link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css"> <link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">

Yang terakhir, optimalisasi CSS. Dalam contoh ini, kami telah menempatkan gaya umum
seperti font, ikon, pemosisian dasar, dan warna di weather.css
. Layout tertentu
untuk layar kecil kemudian ditempatkan di weather-small.css
, dan model
layar besar ditempatkan di weather-large.css
.
Memilih breakpoint kecil bila diperlukan
Selain memilih breakpoint besar ketika layout berubah secara signifikan, ini juga membantu untuk menyesuaikan perubahan kecil. Misalnya, antara breakpoint utama mungkin ada gunanya mengatur margin atau padding pada elemen, atau memperbesar ukuran font agar terlihat lebih natural dalam layout.
Mari kita mulai dengan mengoptimalkan layout layar kecil. Pada kasus ini, mari kita memperbesar font ketika luas tampilan yang terlihat lebih besar dari 360px. Kedua, ketika ada cukup ruang, kita bisa memisahkan suhu tinggi dan rendah sehingga semua berada di baris yang sama dan tidak tumpang tindih. Dan juga 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 layar besar akan sangat baik membatasi lebar maksimum panel prakiraan cuaca sehingga tidak memakai seluruh lebar layar.
@media (min-width: 700px) { .weather-forecast { width: 700px; } }
Mengoptimalkan teks untuk bacaan
Teori pembacaan klasik menyarankan bahwa kolom yang ideal harus berisi 70 sampai 80 karakter per baris (sekitar 8 sampai 10 kata dalam bahasa Inggris). Jadi setiap kali lebar blok teks bertambah melewati 10 kata, pertimbangkan menambahkan breakpoint.


Mari kita lihat secara lebih mendalam contoh entri blog di atas. Pada layar yang lebih kecil, font Roboto dengan ukuran 1 em bekerja secara sempurna memberikan 10 kata per baris, namun layar yang lebih besar membutuhkan breakpoint. Pada kasus ini, jika lebar browser lebih besar dari 575px, lebar ideal materi adalah 550px.
@media (min-width: 575px) { article { width: 550px; margin-left: auto; margin-right: auto; } }
Jangan pernah benar-benar menyembunyikan materi
Berhati-hatilah saat memilih materi yang disembunyikan atau ditampilkan menurut ukuran layar. Jangan sembunyikan materi hanya karena Anda tidak bisa memuatnya di layar. Ukuran layar bukanlah indikasi pasti mengenai apa yang mungkin diinginkan pengguna. Misalnya, menghilangkan hitungan serbuk sari dari prakiraan cuaca bisa menjadi masalah serius bagi penderita alergi musim-semi yang membutuhkan informasi untuk menentukan apakah mereka bisa pergi ke luar atau tidak.
Menampilkan breakpoint kueri media di Chrome DevTools
Setelah Anda menyiapkan breakpoint kueri media, Anda pasti ingin melihat bagaimana situs akan terlihat. Anda bisa mengubah ukuran jendela browser untuk memicu breakpoint, namun ada cara yang lebih baik: Chrome DevTools. Dua tangkapan layar di bawah menunjukkan penggunaan DevTools untuk menampilkan bagaimana laman terlihat di bawah breakpoint yang berbeda.
Untuk menampilkan laman Anda di bawah breakpoint yang berbeda:
Buka DevTools kemudian hidupkan Device Mode.
Gunakan kontrol tampilan untuk memilih Responsive, yang menempatkan DevTools ke mode responsif.
Terakhir, buka menu Device Mode dan pilih Show media queries untuk menampilkan breakpoint sebagai bilah berwarna di atas laman Anda.
Klik pada salah satu bilah untuk menampilkan laman Anda saat kueri media aktif. Klik kanan pada bilah untuk melompat ke definisi kueri media. Lihat Kueri media untuk bantuan lebih lanjut.