Membuat blog menjadi responsive | mobile friendly

Ha eL sob,

Membuat tampilan web menjadi responsive adalah hal yg sangat penting.Responsive scale menjadi tumpuan bagi sebuah website agar mendapat predikat "mobile friendly" ketika muncul di hasil pencarian search engine.Ini berarti website tersebut dapat di nikmati 100% tanpa kekurangan jika di akses melalui perangkat mobile.
Untuk mengetahui apakah website anda sudah responsive silahkan test di situs berikut: 1.https://www.google.com/webmasters/tools/mobile-friendly/ 2.http://responsinator.com
Jika ternyata website anda belum responsive silahkan coba hal berikut: 1.Pastikan ada kode berikut di section < head > .... < / head >.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
2.Gunakan CSS @mediaqueries
Salah satu cara agar website menjadi responsive adalah dengan menambahkan css mediaquerry, contoh:
@media only screen and (max-width:1024px){ #wrapper, #header-wrapper, #content-wrapper, #sidebar-wrapper #footer-wrapper {float:none; width:98% !important; margin:0 auto; } }
Penjelasan:
arti dari css di atas adalah 'jika layar kurang dari 1024 pixel sampai maksimal 1024 pixel maka wrapper dll = tanpa float, lebar 98 persen dari 1024 pixel'.
Hal yang paling penting dari css di atas adalah menggunakan satuan pixel hanya untuk wrapper/pembungkus body/tubuh dari content yg disajikan.Sedangkan bagian body/tubuh menggunakan satuan persen.Sehingga css bisa beradaptasi dengan layar gadget secara otomatis.Baik itu komputer,laptop,tablet,phablet,smartphone dll.
Anda harus mengganti @media only screen and ( max-width:1024px ) sesuai dengan target gadget yg akan di tentukan. misalnya kita coba buat untuk device dengan layar kecil 240pixel yg biasa di pakai untuk hp ukuran 4 inch kebawah.
@media only screen and (max-width:330px){ #wrapper, #header-wrapper, #content-wrapper, #sidebar-wrapper #footer-wrapper { float:none; width:98% !important; margin:0 auto; display:block; } #header h1{ font-size:120%; tet-align:center; } #sidebar-wrapper h3 { font-size:100%; background-img:transparent; } }
Penjelasan:
"jika layar kurang dari atau sampai maksimal 330 pixel maka:bagian wrapper dll lebarnya 98 persen,ruang kosong dari tepi layar ke wrapper nol atau otomatis,tampilan blok, huruf di bagian kepala dengan heading tingkat 1 sebesar 120 persen, huruf di bagian sidebar dengan heading tingkat 3 100%, latar belakang bagian sidebar transparan"

3.Gunakan Flexible Grids 4.Gunakan Fluid Images

↓SHARE THIS↓

Facebook Twitter Google+