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.Gunakan viewport
Pastikan ada kode berikut di section <head> .... </head>.jika tak ada letakkan tepat di bawah kode <head>.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
kegunaan viewport adalah agar tampilan menjadi full 100% memenuhi layar device target.Jika tidak menggunakan viewport maka akan menyisakan ruang kosong di kiri atau di kanan tampilan web sehingga visitor biasanya akan zoom sampai ukuran tampilan pas di layar.Sedangkan IE script digunakan karena internet explorer tidak support 'Media Queries'.
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:100% !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"
- Untuk laptop
@media only screen and (max-width:1024px){
selector/class/id{
property:value
property:value
}
} - Untuk tablet
@media only screen and (max-width:768px){
selector/class/id{
property:value
property:value
}
} - Untuk phablet
@media only screen and (max-width:580px){
selector/class/id{
property:value
property:value
}
} - Untuk Handphone android crappy
@media only screen and (max-width:330px){
selector/class/id{
property:value
property:value
}
}
semua property dengan value px/pixel yg ada di dalam wrapper konversi ke satuan %persen.
contoh:
#wrapper {max-width: 1024px ;} #header-wrapper{ width:940px; margin:0 auto;}
kita konversi untuk device dengan layar 240px
pertama konversi dulu angka 940px
940x100÷1024= hasilnya 91.796%
lalu masukkan hasilnya ke media screen
@media only screen and (max-width:240px){ #header-wrapper{ width:91.796%; margin:0 auto; } }
Untuk cara conversi online gunakan responsive calculator disini
Jangan terlalu banyak meng-edit bagian media screen, cukup di bagian yang sekiranya akan berantakkan jika di akses melalui perangkat mobile.Agar tidak membebani total css/template.Usahakan gunakan template ukuran di bawah 100kb. Sebab percuma website responsive kalau saat loading awal membutuhkan waktu 30 detik.pasti visitor gk jadi masuk.Usahakan maksimal loading page tidak lebih dari 5 detik.
SELESAI
3.Flexible Grids
Jika cara nomer 2 membuat kepala anda puyeng sebaiknya gunakan cara ini.Yaitu dengan meng-edit langsung ke bagian css nya.
misal:
.wrapper{ width:1024px; } .sidebar-wrapper{ width:300px; font-size:20px} .content-wrapper{ width:700px; }
Ubah menjadi
.wrapper{ width:1024px; } .sidebar-wrapper{ width:29.29%; font-size:1.3em} .content-wrapper{ width:68.35%; }
Caranya:
1.width→ 300 dikali 100 dibagi 1024 atau 300x100÷1024=29.296%.
2.untuk font tentukan dulu pixel font ingin di rubah menjadi berapa pd contoh di atas saya mengubah angka 20px menjadi 15px dalam satuan "em" gunakan satuan apa aja tidak masalah untuk font saran saya gunakan 'em' atau '%' termasuk juga di bagian heading(h1,h2.....h6).
font→ 20 di bagi 15 sama dengan 1.3333333 atau 20÷15=1.3em.
bedanya cara ini langsung di ubah pada css nya.bukan dengan menambahkan mediaqueries ke dalam css.
jika anda baru akan membuat website baiknya menggunakan cara flexible grid.jika anda sudah punya website namun belum responsive gunakan mediaqueries adalah hal terbaik dan irit waktu.
4.Responsive Images
Cuss...tambahkan css berikut ke dalam css anda
img{ height:0 auto; width:0 auto; max-width:100% }
css ini sudah cukup untuk membuat gambar menjadi responsive sob.
5.Responsive Video
Masukkan css berikut ke dalam css anda sob.
.respmedia { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .respmedia iframe, video, object, embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Contoh penggunaan di dalam tag html:
<div class="respmedia"><iframe src="masukkan link embeded anda disini"> </iframe></div>
selesai.
Untuk melihat bagaimana contoh website yang sudah responsive silhkan kunjungi responsivepx.com lalu masukkan alamat blog saya ozmod.blogspot.com. Lalu atur width dan height yang anda inginkan.Okedeh sekian dulu tips dari saya :).
No comments:
Post a Comment
write and share your opinion, comment or positive idea No spam :)
= > Silahkan berkomentar,kritik atau saran sesuai artikel diatas
= > comment dengan url ( mati / hidup ) tidak akan di publish guys