Desain web responsif adalah istilah terbaru yang telah digunakan untuk menggambarkan konsep tata letak situs web yang berubah sebagai respons terhadap ukuran dan resolusi layar pengguna. Hal ini semakin penting dengan munculnya smartphone dan tablet karena layar mereka sangat berbeda dari laptop dan desktop tradisional. Ethan Marcotte menciptakan frase desain web responsif dan dia menulis sebuah buku tentang subjek tersebut, yang berjudul Desain Web Responsif.
Banyak pengguna mungkin telah memperhatikan bahwa situs web sering kali memiliki situs seluler alternatif. Di masa lalu, ini telah menjadi perusahaan yang dirancang secara terpisah, tetapi sekarang dengan lebih banyak variasi perangkat, browser, dan layar, desain situs web terpisah menjadi semakin tidak efisien dan kegunaan tata letak yang fleksibel telah diakui. Masalahnya adalah memelihara situs yang berbeda untuk perangkat yang berbeda memakan waktu dan mahal. Selain itu, sering kali situs mendeteksi jenis perangkat yang digunakan untuk mengaksesnya dan mengalihkannya jika itu adalah perangkat seluler. Dengan banyaknya jumlah perangkat seluler yang digunakan untuk mengakses situs, terdapat beban yang lebih besar pada sumber daya server.
Solusinya terletak pada memiliki tata letak yang fleksibel dan merespons pengguna itu sendiri. Salah satu metode desain web responsif utama adalah kueri media, yang diperkenalkan di CSS3. Kueri media memungkinkan situs untuk menanyakan perangkat apa spesifikasinya. Ada dua bagian penting untuk kueri media. Yang pertama adalah jenis media, yang dalam hal ini adalah jenis layar yang digunakan perangkat dan yang kedua adalah kueri itu sendiri, di mana perangkat memeriksa fitur tertentu dari perangkat seperti resolusi vertikal atau horizontal. Sebelumnya ada tata letak responsif berdasarkan JavaScript, tetapi kueri media lebih kuat karena mereka dapat menguji lebih dari sekadar resolusi layar dan properti terpisah ini semuanya dapat diuji dalam satu kueri. Misalnya, bahkan bandwidth yang digunakan oleh konsumen situs web dapat menjadi faktor tata letak yang dilihat. Berdasarkan jawaban atas pertanyaan, CSS akan menyesuaikan markup situsnya dengan perangkat yang digunakan. Desain web yang responsif juga memungkinkan perancang web untuk mengubah di mana atau apakah gambar akan muncul pada tata letak, semuanya disesuaikan dengan pengguna.
Marcotte menjelaskan dalam bukunya bahwa ada dua elemen lain untuk desain web responsif selain media queries dan ini adalah flexible / fluid grids dan responsive images. Pada dasarnya grid biasa dibuat dengan sejumlah piksel dengan jumlah kolom tertentu. Untuk menjadikan fluida ini salah satu cara pertama untuk memikirkan desain adalah dengan memikirkan tentang proporsi dan membuat segala sesuatunya dapat diskalakan. Sudah ada kisi fluida yang telah dibuat sebelumnya yang dapat diunduh dan digunakan untuk situs web responsif baru. Masalah berikutnya menjadi salah satu gambar tetap dalam grid fluid dan ini ditangani melalui penggunaan gambar responsif. Kuncinya pada dasarnya adalah membatasi ukuran gambar ke wadah yang digunakan di situs web. Masalah-masalah ini sederhana dari segi ide tetapi kompleks dalam pelaksanaannya. Konsep-konsep ini merupakan bagian integral dari desain web masa depan karena perilaku responsif akan semakin berharga bagi desainer dan konsumen. Desain web responsif pada dasarnya akan memungkinkan pengguna yang menggunakan perangkat apa pun untuk mendapatkan pengalaman yang lebih disesuaikan dan nyaman secara pribadi.
