Perbedaan WebSite Responsive dan Unresponsive

Selamat pagi sobat blogger.. 

admin mau berbagi cerita ni, tentang permasalahan setting layout web yang "apalah namanya ga tau"!! cz nbelun pernah nemuin dan baca istilah itu hehe...

bermula sedang mendesain template web yang ingin tampilan layoutnya (Responsive) berfungsi seperti layout punya "twitter.com" yang mana ketika di minimize si browsernya maka si LayoutWeb akan mengikuti ukuran browser tersebut dan content/isi web menyesuaikan ukuran bersama dengan si browser,*Halah pusing gak ngerti !!  >_<  hehe diriku juga bingung ngejelasinnya,  tapi setelah sekian jam diriku googleling dan facebooking di group Belajar HTML & CSS utk mencari jawaban, akhirnya ketemu juga Gan!! ^^  fiuh..

Ternyata cara pengaturan tersebut keywordnya adalah "Responsive and Unresponsive web"  

Oke langsung ja liat screen shootnya dibawah ni :

Gambar.1  Unsresponsive Web

Gambar.2  Responsive Web

Coba anda perhatikan baik-baik, lihat dan rasakan perbedaanya *halah rasakan kaya makanan ja!!

Gambar.1 Unresponsive web : Weblayout yang terdapat unresponsive web biasa ada di situsweb pada umumnya , content/isi webnya (text,gambar, dll) tidak menyesuaikan atau mengecil ketika si browser mozila firefox di minimize/diperkecil. sehingga gambar dan content terlihat tertutup dan kurang nyaman untuk dilihat ! dan agak repot kalo kita ingin membacanya musti di geser-geser scrollnya ketika ingin melihat note dari web via Handpone saat ujian berlangsung !! ckkckcc rempong de..

 *hehe maaf text yang di coret jgn di tiru cz gak baik kecuali klo ke pepet and bersifat open note ujiannya :p

Gambar.2  Responsive Web:  Weblayout yang sudah di atur sedemikian rupa agar fungsinya responsive, sehingga ketika content/isi (text,gambar, dll) webnya di minimize atau diperkecil melalui browser mozila, maka contentnya tersebut akan menyesuaikan ukuran browser yang di perkecil tadi sehingga lebih enak di lihat dan gak repot tentunya!

Oke sobat kita lanjut, Bonus deh.. sekarang diriku mau ngasih tau bagaimana caranya untuk bisa ngebuat sebuah web layout yang responsive, berikut adalah code HTML dan CSS-nya:

HTML CODE :

<br /> <h1>Responsive</h1><img src="http://lorempixel.com/400/200/"><br />

CODE CSS:
<br /> body {padding:50px;}<br /> <br /> h1 {<br /> font:bold 30px Times,Serif;<br /> margin:0 0 15px;<br /> -webkit-transition:font-size 0.5s ease-out;<br /> -moz-transition:font-size 0.5s ease-out;<br /> -ms-transition:font-size 0.5s ease-out;<br /> -o-transition:font-size 0.5s ease-out;<br /> transition:font-size 0.5s ease-out;<br /> }<br /> <br /> img {<br /> max-width:100%;<br /> height:auto;<br /> }<br /> <br /> @media screen and (max-width:600px) {<br /> h1 {font-size:20px;}<br /> }<br /> <br /> @media screen and (max-width:400px) {<br /> h1 {font-size:10px;}<br /> }<br />

NB: Diatas hanya contoh, HTML gambar dan cssnya sudah disertakan, namun untuk ingin lebih mengetahuinya dan paham silakan anda coba dan modifikasi lagi sendiri!!  Makasih ^^ moga bermanfat deh.. kalo sobat seneng ma postingan ni, di comment dong and tukerlink  =p hehe