Cara Sederhana Membuat Responsive Web

Melanjutkan postingan Edy Pang tentang Mengenal Responsive Webdesign saya ingin berbagi cara yang cukup sederhana untuk membuat website kita responsive hanya dengan menambah elemen @media-query pada CSS.

Tahap pertama yang harus kita pahami dalam membuat responsive web adalah lebar dari disain blog/situs kita, diantaranya lebar container, wrapper ataupun main.

Kita kasih contoh pada blog saya rudyazhar.com, apa-apa saja yang saya sesuaikan untuk membuatnya menjadi responsive. Tapi untuk mengujinya silahkan anda perkecil tampilan pada browser anda mulai dari yang lebih kecil hingga yang sangat kecil dan lihat apa yang terjadi.. Blog saya tetap mengikuti seberapa lebar tampilan browser tersebut, tidak ada scroll sama sekali kesamping. Itu yang namanya responsive.

Pertama kali kita mencari kode .wrapper yang memiliki lebar 728 pixel, font-size:1.2em dengan line-height: 1.6;

Tahap selanjutkan kita membuat querynya.
Mulai dari yang paling besar dulu.

@media screen and (max-width: 860px) {

.wrapper {
	width: 95% ;  }

body {font-size: 1em;
	line-height: 1.44;}

p {font-size: 0.8em;}
}

Untuk ukuran 860 saya membuat lebar .wrapper menjadi 95% dari lebar layar, font-size pada body dibuat 1em dengan line-height menjadi 1.44. Sedangkan font untuk postingan saya buat menjadi 0.8em.

@media screen and (max-width:767px) {

#shapeworksbutton {bottom: 52px;
	left: 10px;}

#copyright {
	padding: 100px 0 0 10px;}

#primary, #html5logo, #codecanyon {display:none;}

#iklan {display:none;}

}

pada ukuran 767 saya hanya menghilangkan beberapa elemen yang saya anggap mengganggu dan menyesuaikan letak iklan paling bawah.

@media only screen and (min-device-width : 320px) and (max-device-width : 480px), screen and (max-width: 550px) {

body {
        font-size:0.7em; 
    }
p {
	font-size: 0.7em;}

.wp-pagenavi {display:none;}

}

Nah, ini adalah ukuran terkecil yang saya buat untuk responsibilitas web saya yaitu min-device-width : 320px, disini saya menghilangkan .wp-pagenavi serta mengecilkan lagi ukuran font menjadi 0.7em agar tidak tampak kebesaran saat dibaca melalui layar Handphone.

Baca Juga:  Adobe Edge Web Font : Layanan Web-Font Dari Adobe

Dengan tiga tahap diataslah saya membuat blog saya responsive, kemudian langkah terakhir saya test menggunakan responsive tools, jadi kalau dimana ada yang kurang bisa kita sesuaikan lagi.

Siapa bilang membuat responsive website itu susah? Kalau anda tahu caranya dan mau melakukannya semuanya tidak ada yang sulit…

Komentar

comments

grain storage instagram türk takipçi satın al