Satu situs web, banyak layar. Desain responsif membuat satu tata letak beradaptasi dengan berbagai ukuran dan orientasi perangkat. Istilah ini dicetuskan oleh Ethan Marcotte pada tahun 2010, berdasarkan ide-ide sebelumnya tentang grid fleksibel dan gambar fluid. Alih-alih membangun situs terpisah untuk desktop dan seluler, desainer membuat satu basis kode yang mengatur ulang dirinya sendiri berdasarkan lebar viewport.

Tiga komponen teknis membuat semuanya berfungsi. Grid fluid menggunakan persentase alih-alih piksel tetap, sehingga kolom dapat meregang dan menyusut. Gambar fleksibel menyesuaikan ukurannya di dalam wadahnya. Kueri media mendeteksi ukuran layar dan menerapkan aturan CSS yang berbeda pada breakpoint yang ditentukan. Tata letak desktop tiga kolom mungkin menyusut menjadi satu kolom di ponsel, dengan navigasi berpindah ke menu hamburger. Tujuannya bukanlah kontrol yang sempurna hingga tingkat piksel, tetapi adaptasi yang anggun.

Teknik inti

• Kisi-kisi fluida berdasarkan persentase.
• Gambar dan media yang fleksibel.
• Media query pada breakpoint yang telah ditentukan.
• Prioritas konten yang mengutamakan perangkat seluler.

Desain responsif kini menjadi praktik standar. Pengguna mengharapkan situs web berfungsi dengan baik, baik saat dibuka di ponsel, tablet, laptop, atau televisi.