Responsive Web Design Concept

Responsive Web Design Concept, Hallo-hallo jakarta :D Sore ini, Mas Kodok akan bagi-bagi materi lagi nih tentang Apa itu Responsive Web Design Concept, serta bagaimana Responsive Web Design Concept itu digunakan :D Sebelumnya Mas Kodok ucapkan terimakasih kepada teman-teman yang sudah follow twitter @ID_WebMaster, like fanspage ID_WebMaster serta ikut gabung ke Grup FB ID-WebMaster Code :D yang terakhir jangan lupa follow blog ini ya dimenu kanan bawah ^___^ biar supportnya nambah :))

Catatan Penting:
Materi Responsive Web Design Concept ini saya terjemahkan dari Smashing Magazine pada URL yang beralamatkan di: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Karena banyak yang bilang membaca teks bahasa inggris itu mumeti, makanya saya terjemahkan :))

Apa Itu Responsive Web Design Concept ?

Responsive Web Design Concept adalah sebuah konsep yang memaparkan tentang bagaimana sebuah website dapat ditampilkan secara compatible disemua device. Device yang dimaksud adalah: Mobile (Handphone), Laptop, Komputer, Netbook atau bahkan di LCD proyektor yang resolusi layarnya sangat besar.

Intinya, Responsive Web Design Concept digunakan supaya tampilan sebuah website dapat dibuka disemua device dengan berbagai resolusi monitor yang berbeda2.

Layar Monitor juga terbagi menjadi 2 jenis:
1. Potrait (Vertical)
2. Landscape (Horizontal)

Ukurannya pun bermacam-macam:
1. 800x600
2. 1024x768
3. 1024x600
4. 1280x1024
5. dan lain-lain

Mengapa Materi Responsive Web Design Concept itu penting untuk dipelajari?

Jawabannya simple:
"Karena hampir setiap client, pengguna, atau web developer menginginkan website mereka dapat dibuka secara compatible diberbagai device yang mereka miliki.

Contohnya Maimunah, "Mbak Maimunah adalah seorang Blogger yang hobinya menulis di blog pribadi miliknya yang ber-platform Wordpress. Kemudian Mbak Maimunah ingin mengganti template blognya, setelah googling ke sana-sini, akhirnya ketemulah sebuah template wp yang bagus dan interaktif. Namun dia tidak puas dengan template barunya, Why????

"Dia tidak puas, karena pada saat Mbak Maimunah membuka blog pribadi miliknya di HP berjenis Smartphone Blackberry, tampilan blognya amburadul alias kacau. Menu-menu menjadi berpindah-pindah lokasi dari center hingga ke kanan, banner yang ada diblognya berpindah ke atas, judul blognya bergeser rada ke bawah dan sebagainya.

Kemudian Mbak Maimunah mencobanya lagi di HP Smartpone Android miliknya Mas Kodok.
*kenapa jadi bawa-bawa sayaaa -____-*

Maimunah: om kodok, om, minjem hapenya dong :s
Mas Kodok: kalo boleh tau buat apa ya mbak?
Maimunah: Buat buka web saya mas, karena tampilannya acak-acakan pas saya buka di hp saya tadi :s
Mas Kodok: Lah, kok bisa gitu mbak?
Maimunah: Nggak tau nih mas :( apa karna kemarin hape saya nyemplung di closed wc ya mas :(
Mas Kodok: lha terus apa hubungannya sama tampilan weeeeebbbbb =)) *nangis dipojokan* :T____T:

Akhirnya Mas Kodok meminjamkan HPnya kepada Maimunah, Dengan senang Maimunah pun membuka blognya yang beralamatkan di: http://maimunah-cellalu-cayank-qm-cellaluw.com

Dan setelah di buka di HP nya Mas Kodok, tampilan webnya pun masih acak-acakan. akhirnya dia menangis lagi, lalu memeluk Mas Kodok B-)
#HalahOpoan iki skip =))

Jadi begitulah kira-kira gambarannya :D bayangkan jika anda punya client besar seperti pemerintahan, atau perusahaan. Bisa-bisa complain sana-sini dan akhirnya anda jadi kerepotan =)) *tapi tergantung juga sih, kalau dapet client yang baik dan ngga ngurusin projectnya terlalu kompleks. pasti ngga bakalan ngurusin masalah Responsive Web Design ini deh ;P*

So, Should we just suffer the consequences of losing visitors from one device, for the benefit of gaining visitors from another? Or is there another option? :D

Sekali lagi, Responsive Web Design adalah sebuah teknik yang menunjukkan bahwa Desain dan pengembangan, harus menanggapi perilaku pengguna berdasarkan pada layar, platform ukuran dan orientasi.

Dalam pengimplementasiannya, teknik Responsive Web Design terdiri dari campuran grid fleksibel + layout, images dan penggunaan query CSS media yang baik.

Teknik Mengatur Lebar Tampilan Website

Seperti yang sudah kita bahas, bahwa setiap orang pasti menggunakan berbagai macam resolusi layar untuk browsing di Internet, maka dari itu saya gambarkan bagaimana teknik mengatur tampilan layar yang baik.

1. Untuk layar yang berjenis landscape
Usahakan menggunakan patokan lebar: 1004 pixel x tinggi: Unlimited pixel. Kenapa untuk tinggi saya berikan unlimited? karena orang itu membaca content dari bawah ke atas :)) dan sering scroll-scroll mouse.. coba kalau scrollnya ke kanan (kelebaran) jadi ngga lucu kan =))

Sebenarnya Lebar 1004pixel itu merupakan bagian dari 1024pixel. Lalu, yang 20pixel nya lagi kemana? Ya jelas yang 20 pixel nya lagi buat scroll dikanan browser to yo -___- begini nih gambarannya :)

Bagaimana? sudah faham kan. hmmmm sekarang gini..
bayangkan jika anda menggunakan lebar website PAS 1024pixel. tentu sisa 20pixel untuk scroll-bar vertical kanan browser pasti tidak akan keliatan, dan hasilnya akan muncul scroll-bar HORIZONTAL lagi dibagian atas start menu :D dan jika ingin scroll lagi kebawah untuk melihat footer, pasti harus menggulung layar ke kanan dulu, kemudian baru dikebawahin =)) repot kan..

tapi ini tidak berefek jika resolusi monitor anda lebih dari 1024pixel, karena website akan menjadi ke tengah, dann scroll-bar vertical pun akan tampak biasa-biasa saja. terus, bagaimana dengan pengguna yang hanya memiliki komputer dengan resolusi 1024pixel? tentu pasti sangat kecewa bukan?

2. Untuk Layar yang berjenis Potrait (Vertical) Biasanya Di HP yang Layarnya Nggak Lebar
Gunakan ukuran lebar 240pixel kali Unlimited Pixel, Atau jika masih muncul horizontal scrollbar, anda kurangi 20pixel, sehingga menjadi 220pixel :D

Kalau menurut smashing magazine ukuran layar itu terbagi menjadi dua macam, ya sama Potrait dan Landscape. nih contohnya:

Catatan: 
Gambar diatas menunjukan lebar lengkapnya, bukan bagaimana cara menyetting lebarnya agar pas :D

Bukan hanya itu :D Layar monitor pun ikut berkembang pesat seiring kemajuan zaman. nih contohnya, ada masih banyak lagi jenis-jenis ukurang layar monitor :D

Oke :D kita cukupkan sampai disini dulu, kita lanjutkan lagi setelah shalat magrib :D

NB: Untuk sementara disatukan dulu, karena kalau dibagi-bagi menjadi beberapa part nanti ngga teratur belajarnya #okesip