responsive design adalah desain yang mencegah supaya konten hilang ketika ukuran layar diperkecil / di akses melalui device dengan viewport yang berbeda beda. kalo jaman purba dulu, pakenya multiple CSS. diambil dulu height sama width dari web. lalu pilih file css yang cocok. begini contoh algoritma nya

ribet gan? memang .tapi jaman sekarang berkat ditemukanya CSS3 yang sangat membantu. ga perlu lagi pake cara seperti itu. script nya tinggal begini gan
<style>
@media screen and (max-width : 720px){
#header{
width: "400px" !important
}
}
#header{
width : 800px;
}
</style>
penjelasan script

hebat kan gan? bukan cuma itu saja. ini bukan cuma ketika web di load. misal ukuran layar agan width nya 1300px. kan pasti tampilan nya yang diatas 720px tuh. coba aja perkecil browser agan sampe width nya di bawah 720px. dengan sendirinya akan berubah tanpa perlu mereload web !.
inilah yang di maksud untuk mencegah konten hilang khusus yang 1 ini ane masih newbie jadi kurang bisa menjelaskan secara lengkap ya mohon maaf

kita juga bisa mencegah konten hilang dengan menggunakan css2 tapi merubah cara styling kita. yaitu berlatih menggunakan %.
rumus nya adalah:

misal nih. agan nge styling di laptop dengan layar ukuran width 1330px. agan bikin dulu pake versi px atau pixel nya sampai terlihat cocok menurut agan. misal di layar 1330px itu menurut agan header yang cocok ukuran nya 1310px. dengan masing2 10px margin di kanan dan kiri maka begini mengconvert nya.
css awal:

misal ukuran itu menurut agan cocok. maka begini cara convert nya. siapin kalkulator gan
css covertan:

nah begitu gan caranya. lalu kenapa saya ambil 5 angka di belakang koma? karena itu masih termasuk golden rasio gan. coba aja agan ganti dan ambil 2 angka aja misal nya. akan berubah width nya. kalau di layar kecil masih ga masalah. coba asumsikan pengunjung kita pake layar 19' atau malah yang kaya tv. kan akan lumayan berpengaruh tapi itu tetep terserah agan.

cara ini tetep bisa di aplikasikan ke anak dari element tapi dengan "context" nya adalah induk elemen nya. misal begini gan potongan kode html nya:

nah disitu kan header adalah anak dari wrapper. dan WRAPPER itu anak dari BODY. ukuran BODY = Ukuran layar agan. kalau desain itu udah dirasa cocok . mari kita convert. ingat. CONTENT / CONTEXT = RESULT. dengan CONTEXT = induk dari element. maka begini style nya stelah di conver ke %, note: jangan lupa memperhatikan MARGIN / jarak antar elemen

begitu caranya gan. ingat width dari anak element adalah

ingat gan. padding induk bukan padding element nya. itu perhitungan width paling proporsoinal menurut ane gan. dan CONTEXT itu rumusnya

yang perlu di ingat:
bukan cuma box2 yang di ganti ke %.t termasuk gambar juga. supaya ikut mengecil saat layar browser di perkecil.

template responsive bikinan ane. sekedar simple gan. untuk lihat apa yang namanya responsive silahkan perkecil layar browser agan dan lihat header dan content ikut mengecil dan tampilan akan tetap sama sampai ukuran width 1100px (ukuran laptop gede gan ).
nah. mulai ukuran 1100px ke bawah. box welcome akan berpindah ke atas. dan sidebar akan turun ke bawah. dan tulisan di welcome box akan berubah warna menjadi merah!. ini in action nya CSS3 yang ane sebutin pertama tadi gan. monggoh lgsg di cek aja

Tips and trick dari ane gan. sebaiknya kalo mau nyoba ukuran tertentu dan males nggede kecilin web terus terusan . ini ada plugin firefox buat web developer namanya firesizer : click disini untuk downlaod
firesizer berfungsi untuk menambah fungsi ubah browser sesuai keinginan dengan mengklik ikon nya di pojok kanan bawah firefox di toolbar add on. (kalao ga ada coba takan "ctrl + '/' ") nah nanti agan bisa ganti ukuran sesuka agan

saya cuma seorang anak sma yang baru belajar web development. maklumilah jika ada salah. mari belajar bersama