Responsive Design Element Website

Hmmm...sudah lama gak update konten blog lagi. Berhubung lagi ada project pengembangan website tiba-tiba saya sangat tertarik dengan istilah Responsive Design Element Website. Setelah browsing sana-sini akhirnya saya pun mulai mengerti. Bagi seorang Web Designer membuat desain menjadi responsif mungkin sangatlah mudah, tapi bagaimana menjaga agar element terlihat seimbang pada semua layout itu membutuhkan seni tersendiri sob. hee..

Sedikit penjelasan tentang Responsive Design. Secara sekilas, teknik ini cukup sederhana, apabila anda menguasai HTML dan CSS, maka anda bisa menerapkan teknik Responsive Design. Karena sebenarnya yang dilakukan adalah CSS mengecek ukuran area browser, kemudian akan menerapkan style CSS yang sesuai dengan ukuran tersebut. Jadi tidak memerlukan kode pemrograman yang script based seperti PHP, ASP atau lainnya. Teknik ini murni urusan si UX designer atau front end designer.

Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart (http://www.alistapart.com/articles/responsive-web-design/). Ia mengulas tiga teknik yang telah ada yakni Flexible grid layout, flexible images, dan media and media queries ke dalam satu pendekatan dan menamakannya Responsive Design. Beberapa istilah yang digunakan untuk mengacu hal yang sama antara lain fluid design, elastic layout, rubber layout, liquid design, adaptive layout, cross-device design, dan flexible design.

Marcotte dan beberapa ahli lainnya berargumen bahwa metodologi responsive yang sebenarnya adalah tidak hanya cukup melakukan perubahan layout sesuai dengan ukuran browser yang mengaksesnya, akan tetapi melakukan perubahan total secara keseluruhan terhadap pendekatan yang kita pakai saat mendesain sebuah web. Daripada memulai desain pada ukuran layar desktop yang fixed atau tetap dan kemudian mengecilkannya dan mengatur isinya guna keperluan ukuran yang lebih kecil, maka sebaiknya desain dilakukan pada ukuran viewport yang terkecil terlebih dahulu dan dilanjutkan pada ukuran viewport yang lebih besar.

Contoh tampilan Responsive design dengan berbagai ukuran.

sumber gambar: http://www.white-fire.co.uk

Bagi sobat sekalian yang ingin melakukan pengecekkan terhadap website atau blog-nya, apakah sudah Responsive atau belum bisa kunjungi http://mattkersley.com/responsive/ lalu inputkan website sobat kemudian tekan Enter.

Semoga share info dan ulasan saya bermanfaat bagi sobat blogger..