Home » Post » Cara membuat Desain Responsive pada Situs Xtgem

Rifky M. Rizaldy 10-02-2016

Pernahkah sobat melihat tampilan wap/web/blog sobat di berbagai perangkat atau ukuran layar baik melalui hp ataupun pc?
Ya tentunya kita melihat perbedaan ketika melihat situs kita melalui beberapa perangkat. Mungkin ketika melihat situs melalui perangkat mobile atau hp situs kita terlihat begitu bagus namun ketika melihat situs kita di perangkat pc terasa ada yang kurang.

Karena kita tidak bisa memperkirakan pengunjung kita menggunakan perangkat apa, Mungkin teknik Responsive design menjadi salah satu solusinya. Teknik ini cukup sederhana hanya perlu pemahaman tentang HTML dan CSS. Istilah Responsive web design awalnya dicetuskan oleh Ethan Marcotte dalam sebuah artikelnya di ListApart.

Bagaimana cara membuat dan menerapkannya pada situs XtGem kita?
Langsung saja simak langkah-langkah dibawah ini.
1. Masukan Meta tag Viewport
Pertama kita memasukan sebuah meta tag viewport pada halaman XtGem sobat di bawah tag <head>

<meta name="viewport" content="width=device-width,initial- scale=1" />

Mungkin biasanya jika kita membuat halaman baru di Xtgem sudah tersedia maka kita tidak perlu memasukannya lagi. Namun jika belum ada tag di atas pada halaman XtGem sobat maka sobat harus masukan tag tersebut.
Karena tidak semua browser mendukung tag di atas maka kita perlu menambahkan juga kode di bawah ini pada file _headtags Langsung saja copypaste kodenya:

<style type="text/css">
@-wekit-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-moz-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-ms-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@-o-viewport{width:device-width;max-zoom:2;min-zoom:0.5}
@viewport{width:device-width;max-zoom:2;min-zoom:0.5}
</style>

Membuat File CSS
Berikutnya kita membuat file css yang akan di jadikan Responsive. Misal isinya

.list{bakground: #fff;
color: #333;
max-width: 800px;}
.menu {margin: 3px;padding: 5px;}
.page {
border: 1px solid #333;
padding: 5px;
}

Saya rasa sobat sudah cukup paham dengan yang namanya css ini jadi saya tidak perlu menjelaskannya lagi. hehe

Langkah berikutnya menggunakan Media Queries
Dalam langkah ini menggunakan CSS3, sama seperti didalam bahasa pemograman dengan menggunakan
kondisi (if), dimana CSS3 memberikan kondisi bagaimana browser harus merender halaman untuk viewport yang telah di set lebarnya, sehingga halaman html flexibel mengikuti layar browser. contoh:

@media screen and (min-device-width:100px) and (max-device-width:130px) { .list {bakground: #fff;color: #333;padding:2px; max-width: 800px;}
.menu{margin:0;padding: 7px;} }
@media screen and (min-device-width:131px) and (max-device-width:400px) { .list {bakground: #fff;color: # 333;padding:5px; max-width: 800px;}
.menu{margin:0;padding: 5px;} }
@media screen and (min-device-width:401px) and (max-device-width:1600px) { .list {bakground: #fff;color: #333;padding:2px; max-width: 800px;}
.menu{margin:3px;padding: 1px;background: #f00;}
.page{ margin: 3px;padding: 2px;} }

Catatan
-max-device-width = untuk mendeteksi ukuran lebar maximal device
-min-device-width = kebalikan dari max-device
misal: @media screen and (min-device-width:131px) and (max-device-width:400px) berarti element css berkerja di ukuran device di kurang dari atau samadengan 400piksel namun lebih dari atau samadengan 131piksel.
- max-device-width dan min- device-width ukurannya bisa di ubah sesuai kebutuhan sobat.
- perhatikan juga tanda { dan tanda }
- class atau id pada css tidak harus semuanya di buat responsive hanya beberapa saja sesuai kebutuhan dan keinginan sobat.

Demikian lah tutorial kali ini. Diatas hanyalah contoh, selebihnya Tinggal sobat kreasikan lagi. Selamat berkreasi. Semoga bermanfaat.