Rabu, 01 Agustus 2012

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 :


CODE CSS:

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


Reaksi:

1 komentar:

  1. Keren infonya gan sangat membantu untuk membedakan web responsive dan yang bukan.

    bagi agan yang berminat belajar membuat web reponsive bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html

    BalasHapus

WARNING !
Komentar anda tidak boleh mengandung unsur:
1.Penghinaan, Rasis dan Pelecehan
2.Spamming (Spam Comments)
3.Link Iklan, ads etc
Terima Kasih.


Jika ada request ato laporan tentang :
1.Request Software atau Tutorial
2.Bad Link & Re-active link (akibat broken link)
Silakan comment di bawah atau kirim pesan ke saya via facebook >> Akunku : Adhieresthenes Hier Banu Arfakhshad