GO Blog

Bagi para blogger template responsive kini sedang banyak diminati dan di bangun agar menambah optimalisasi tampilan pada seluruh resolusi yang memuat. website besar dan web - web ternama sudah menerapkan ini untuk menunjang tampilan mereka pada setiap resolusi walau pun masih ada pendapat bahwa responsive hanya berguna untuk web atau blog yang memiliki niche tertentu yang perlu di akses dari resolusi terkecil sekalipun. namun menurut saya, lebih baik responsive ini di terapkan dalam niche apa pun karena saat ini banyak pengunjung yang mengakses lewat gadget berbeda - beda resolusinya dan ini penting sebagai pengoptimalan tampilan terbaik untuk yang di tampilkan.

Inti terpenting dari Responsive Web Design sebenarnya terletak dari Fleksibelitas Grid itu sendiri yang pasti, jika anda bingung dengan istilah Grid kita bisa menggunakan alternatif lain dengan istilah yang lebih mudah yaitu Flexible pada Layout / Template yang tidak terpaku hanya dalam satu batas tertentu. Sebelum Desain Web Responsif populer seperti sekarang ini dulunya para Web Programmer terpaku dengan layar desktop dengan lebar desain yang tetap dan cenderung pada desain terpusat dan memiliki resolusi yang sama di kesemuanya. Jika dulu biasanya para web desainer lebih banyak menggunakan satuan px (pixel) untuk ukuran Layout dan Text namun untuk Desain Responsif saat ini para pengembang lebih banyak mengunakan satuan % (percent) sebagai penggantinya, ini dimaksudkan agar desain pada Layout tidak tampak kaku dan bisa Flexible ketika ditampilkan pada resolusi layar yang berbeda.
namun jangan terlalu buru - buru untuk merubah seluruh tampilan awal anda dengan tampilan yang lebih baru sebagai tujuan agar lebih responsive karena tampilan lama anda masih bisa di gunakan dengan hanya merubah sedikit grid yang perlu di sesuaikan dengan tampilan yang flexsible.

Hal terpenting yang perlu di rubah menjadi flexsible/Responsive
Dalam setiap grid/layauot ada beberapa yang penting untuk di rubah nilainya menjadi grid yang mampu menyesuaikan tampilan di resolusi yang berbeda dan ini yang perlu anda perbaiki untuk tampilan lama. tampilan Desain yang belum Responive biasanya lebih banyak menggunakan satuan px seperti dalam contoh CSS dibawah ini:

/* contoh tampilan lama */
#wrapper-content {
 width:680px;
}
#header-wrapper {
 width:1000px;
}
#sidebar-wrapper {
 width:300px;
}
#footer-wrapper {
 width:1000px;
}

Diatas lebar Grid utama adalah dalam reolusi width:1000px dan untuk sidebar width:300px dan content width:680px. Disini saya coba jelaskan cara dan kalkulasi sederhana dalam mengkonversi nilai px (pixel) agar bisa diganti dengan satuan % (percent)

target / context = result
300px / 1000px = width: 30%; /* 300 (originally 300) / 1000 */
680px / 1000px = width: 68%; /* 680 (originally 680) / 1000 */

sehingga ketika di jabarkan kembali dalam tampilan responsive terbaru menjadi seperti berikut ini:

/* contoh tampilan baru */
#wrapper-content {
 width:68%;
}
#header-wrapper {
 width:100%;
}
#sidebar-wrapper {
 width:30%;
}
#footer-wrapper {
 width:100%;
}

dari grid di atas ada 2% skala yang tidak terpakai ini untuk tujuan memberi jarak antara konten dan sidebar agar tidak berhimpitan dan kalkulasi 2% tersebut adalah jara 20px ( dalam pixel ).

Menampilkan tampilan flexible/Responsive dalam resolusi berbeda
Cara ini di kenal dengan CSS Media Query, CSS Media Query adalah salah satu fitur dalam CSS3 yang di peruntukkan untuk menentukan kapan aturan CSS tertentu harus diterapkan dan di ubah sesuai resolusi yang tampil. Hal ini memungkinkan untuk menerapkan CSS khusus untuk perangkat Mobile. Media queries bisa dikatakan otak dari Design Web Responsive karena diarea inilah kita memiliki kontrol penuh terhadap Design Responsive Template kita nantinya.

Ada dua cara untuk ini yaitu @import dan @media dan saya akan membhas yang umum dn lebih dekat untuk di gunakan yaitu @media, lihat contoh di bawah ini:

/* media query */
@media screen and (max-width:1024px){
/* CSS disini */
}
@media screen and (max-width:768px){
/* CSS disini */
}
@media screen and (max-width:320px){
/* CSS disini */
}
@media screen and (max-width:240px){
/* CSS disini */
}

untuk menerapkan cara di atas kita bisa menerapkannya seperti di bawah ini, dan css yang akan saya ambil sebagai contoh adalah tampilan lama yang di ubah menjadi tampilan baru di atas sebelumnya

Dalam rancangan media queries, penempatan kode max-width akan berguna untuk mengatur resolusi besar ke resolusi yang lebih kecil atau bisa juga menggunakan media queries min-width, dengan catatan menggunakan queries ini urutannya dari resolusi kecil ke resolusi yang lebih besar. Hal ini disarankan agar anda lebih mudah merancang queries berdasarkan urutan resolusi layar.

/* css media query */
@media screen and (max-width:1024px){
 #wrapper-content {
  width:68%;
 }
 #header-wrapper {
  width:100%;
 }
 #sidebar-wrapper {
  width:30%;
 }
 #footer-wrapper {
  width:100%;
 }
}

Contoh di atas adalah penempatan di resolusi yang memiliki ukuran 1024px anda bisa menyesuaikan pada resolusi lainnya. tidak hanya itu, di css media query ini kita juga bisa menghilangkan elemn yang tidak ingin di tampilkan agar tampilan lebih optimal.

jadi demikian saja yang bisa saya sharekan untuk pemahaman responsive yang mungkin akan berguna untuk sobat yang ingin membangun tampilan responsive bagi grid lamanya. semoga berguna...