Pengertian Responsif Web Design – Sebuah Panduan Bagi Pemula

jasa pembuatan website di jakarta selatan - Google sudah resmi mereferensikan Design Situs Responsive jadi cara yang disenangi (Baca : diwajibkan) oleh Google untuk membuat sebuah website pada piranti mobile. Bila Kamu memiliki website atau situs (blog), telah waktunya Kamu serius untuk memperhitungkan dan berpindah ke design situs responsif dari pada menjaga website situs “mobile-friendly” Kamu dengan terpisah.

Satu Design untuk Beragam Ukuran Layar 

Bila Kamu belum juga banyak ketahui mengenai rencana Responsif Situs Design (RWD), disini yaitu tips cepat yang juga akan menjawab beberapa besar pertanyaan umum yang mungkin Kamu juga ingin bertanya hal yang sama. Mari kita mulai.

Kenapa situs (blog) saya harus berpindah memakai Design Responsif? 

Website kamu terlihat hebat dari layar desktop tetapi belum juga pasti juga akan terlihat indah atau bahkan juga tidak bisa dipertunjukkan ketika website Kamu diliat pada layar smartphone, tablet atau e-reader (seperti Kindle). Setelah Kamu buat design responsif, website juga akan terlihat baik (dan dapat di baca) pada semua layar, bukan sekedar pada layar desktop.

Apa keuntungan beda bila berpindah ke Design Situs Responsive? 

Dengan Design Responsif, Kamu dapat buat satu design yang dengan automatis juga akan beradaptasi berdasar pada ukuran layar suatu piranti baik desktop ataupun mobile. Pendekatan ini tawarkan banyak keuntungan, yakni :

1. Dapat menghemat waktu dan uang karena Kamu tidaklah perlu me-maintain website dengan terpisah untuk desktop dan hp.
2. Design responsif baik untuk kebutuhan SEO pada website karena setiap halaman di website Kamu juga akan memiliki URL tunggal dan dengan hal tersebut Kamu tidaklah perlu cemas saat berada dalam kondisi seperti ketika beberapa link website Kamu menuju ke website mobile, sesaat link yang beda menuju ke website desktop Kamu. 
3. Google Analytics juga akan buat report yang lebih baik pada website Kamu karena data dari pemakai hp dan desktop juga akan dipadukan. 
4. Hal yang sama juga akan berlaku untuk statistik “social sharing” (Facebook Likes, Tweets, +1) saat halaman situs versus mobile dan desktop Kamu tak akan memiliki URL yang berlainan. 
5. Design responsif lebih mudah untuk di maintain karena tidak melibatkan komponen server-side. Kamu hanya perlu memodifikasi CSS yang memicu halaman itu untuk merubah penampilan (atau layout) pada piranti tertentu. 
6. Dalam cara design yang sebelumnya juga akan lihat “string” pada “user agent” untuk memastikan nama dari piranti mobile dan browser yang dipakai untuk buat keinginan itu. Hal tersebut kurang akurat dan dengan jumlah browser dan piranti mobile yang selalu berkembang sehari-hari, juga akan sangat susah untuk me-maintain kondisi itu. Design responsif tidak memerlukan user agent. 

Apa yang perlu saya kenali untuk mulai Design Responsif? 

Design Responsif yaitu murni HTML dan CSS. Kamu buat ketentuan simpel dalam CSS kalau perubahan style didasarkan pada ukuran layar dari piranti pemakai.

Misalnya, Kamu dapat menulis ketentuan yang menyebutkan bila ukuran layar pemakai kurang dari 320 piksel, janganlah tunjukkan sidebar atau bila ukuran layar semakin besar dari 1920 piksel (widescreen desktop), juga akan jadi besar ukuran font pada body teks jadi 15px. Tersebut disini ketentuan di atas bila ditranslate kedalam kode :

@media screen and (max-width : 320px) {
. sidebar { display : none }
}
@media screen and (min-width : 1920px) {
body { font-size : 15px }
}

Bagaimana caranya ketahui apakah sebuah website memakai Design Responsif? 

Itu mudah. Buka website pada browser desktop dan ganti ukuran browser. Bila tata letak website beralih saat Kamu merubah ukuran browser, bermakna website itu memakai design responsif. Kamu dapat juga memakai on-line tool untuk memperbandingkan layout yang berlainan dari sebuah halaman pada tab yang sama.

Bila saya memakai Design Responsif, apakah website saya akan dipertunjukkan pada browser yang telah tua? 

Beberapa besar ya. Responsif Situs Design memakai CSS3 media query dan HTML5 (untuk semantik yang lebih baik) yg tidak di dukung dalam versus lama IE. Tetapi, ada JavaScript yang bisa jadi jalan keluar – misalnya respond. js dan modernizr – yang membawa “the power of” CSS3 dan HTML5 untuk browser lama termasuk IE6.

Apakah Design Responsif aman dipakai dengan jaringan iklan seperti Google AdSense? 

Bila Kamu memakai iklan di website Kamu, Kamu harus hati-hati memilih format karena unit lebar (seperti leaderboard 728 × 60 piksel) mungkin tidak pas pada layar hp 320px. Mungkin manfaatkanlah unit persegi panjang standard (seperti 300 × 250) karena bisa dengan mudah masuk pada layar smartphone dan desktop wide screen.

Terdapat beberapa ribu piranti berbasiskan mobile. Berapakah resolusi layar yang di dukung oleh design responsif? 

Buka dashboard Google Analytics Kamu dan pilih Audience - Technology - Browser & OS. Lalu berpindah pada tab Screen Resolution pada Report dan saksikan berapakah resolusi piranti mobile yang dipakai untuk buka website Kamu.

Saya mereferensikan penyusunan berikut dalam Media queri CSS3 – 320px (iPhone landscape), 480px (iPhone portrait), 600px (Android Tablet), 768px (iPad + * Galaxy Tab) dan 1024px (iPad landscape dan desktop).

Bagaimana saya mulai Design Situs Responsif? Adakah tutorial yang bagus? 

Pertama, baca artikel ini by Ethan Marcotte dan lalu silakan bila ingin beli bukunya. Tersebut disini beberapa sumber daya on-line yang bisa menolong Kamu mulai :

1. Website – Smashing Magazine, CSS Tricks and Situs Designer Wall (website yang sering mengulas mengenai design responsif) 
2. Tutorial Video – YouTube, envatotuts+ 
3. Buku – Code Poet (situs design experts mengulas tehnik untuk membuat responsif WordPress. Buku ini ada dalam PDF, Kindle dan EPUB format) 
4. Podcasts – Shop Talk, 5by5 Situs Show and The Industry 
5. Twitter – @RWD, @NetMag and @SmashingMag 

Lihat juga : jasa pembuatan website di tangerang

Adakah beberapa kekurangan memakai Design Responsif? 

Design Responsif dapat memberikan beberapa extra kilobytes pada situs situs Kamu karena harus men-download model CSS dan file JavaScript yang harusnya tidaklah perlu. Problem yang lain yaitu pada sekitar gambar. Kamu pastinya tidak mau terima gambar memiliki resolusi tinggi pada website mobile Kamu, tetapi juga akan susah dijauhi di dalam design yang responsif.