Membuat Website ‘Pas’ di Segala Ukuran Layar

31 Maret, 2013

Banyaknya smartphone dan device lainnya yang memiliki browser serta akses ke internet, membuat Web Designer harus memikirkan banyak trik untuk membuat websitenya tetap dapat diakses dari manapun tanpa merusak desain yang sudah dibuatnya untuk tampilan desktop.

Sebelumnya para pembuat website biasa membuat dua tampilan situs,  misalkan namadomain.com ketika dibuka di smartphone/mobile maka akan dialihkan ke m.namadomain.com dan sebagainya. Namun dengan adanya CSS3 Media Queries yang belakangan ini banyak dibicarakan dan sampai menjadikan sebuah tren web baru Responsive Web Design, semua dapat dilakukan tanpa harus membuat dua tampilan. Satu untuk desktop dan satu untuk mobile. Merepotkan.

Mari Memulai!

Cukup mudah, kamu tinggal menambahkan @media ke dalam css websitemu.


@media only screen and (max-width: 699px) {
    /* Tambahkan CSS untuk ukuran layar maksimal 699px (dari 0px - 699px) */
}


@media only screen and (min-width: 1000px) {
    /* Tambahkan CSS untuk ukuran layar minimal 1000px (dari 1000px - ~) */
}


@media only screen and (min-width: 700px) and (max-width: 999px) {
    /* Tambahkan CSS untuk ukuran layar minimal 700px dan maksimal 999px (700px - 999px) */
}

Untuk mencobanya, kamu bisa me-resize browser yang kamu pakai.

Agar lebih spesifik lagi, kita harus menentukan target layar dari website yang akan diakses diberbagai device. Untuk smartphone biasanya berukuran kurang dari 320px di portrait mode dan kurang dari 480px di landscape mode. Tablet berukuran sekitar 768px – 1024px. Dan desktop dengan width yang lebih besar.

Sehingga bisa kita buat seperti ini.


@media only screen and (max-width: 1024px) {
    /* Desktop, Tablet & Mobile. */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Desktop & Tablet */
}
@media only screen and (max-width: 767px) {
    /* Tablet (Portrait) */
}
@media only screen and (min-wdth: 480px) and (max-width: 767px) {
    /* Tablet (Portrait) & Mobile (Landscape) */
}
@media only screen and (max-width: 479px) {
    /* Mobile */
}

1024px disini adalah besar layar yang nantinya akan dipakai untuk width website kita. Kamu bisa menggantinya dengan 960px (yang biasa banyak dipakai), atau sesuai dengan ukuran yang biasa kamu gunakan untuk lebar websitemu sendiri.

Tambahan Meta untuk Browser iOS & Android

Browser bawaan untuk smartphone, misalkan pada iOS & Android biasanya menggunakan zoom default yang berbeda-beda. Dan itu sama sekali membuat media queries yang sudah kita buat terkadang menjadi tidak pas. Untuk itu kita perlu menambahkan meta baru di head website yang kita buat.

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

width=device-width akan mengatur width sesuai dengan width di device yang digunakan. Dan initial-scale=1.0 akan men-zoom sesuai dengan ukuran valuenya. 1.0 berarti berskala 1:1 dengan aslinya, dan kamu bisa menggantinya.

Tips
  • Letakkan media queries dipaling bawah setelah style default bawaan. Jadi, style default tidak akan ikut terbawa jika media queries sudah ditentukan untuk suatu ukuran layar tertentu.
  • Urutkan media queries dari urutan yang paling besar ke-kecil. Terkadang ada beberapa style yang tabrakan dengan style lainnya yang sudah didefinisikan diatasnya.
Sudah Bisa di …

Dari http://caniuse.com/#feat=css-mediaqueries, CSS3 Media Queries ini sudah bisa digunakan di semua browser terbaru, termasuk IE9 keatas dan browser bawaan Android, iOS dan Blackberry.

Jadi tunggu apa lagi, buat website-mu tetap rapi diakses dari mana saja.

Komentar ditutup.

  • Suka dengan TrikWeb? Sukai halaman kami di Facebook untuk menyebarkannya ke teman-temanmu

  • Ikuti TrikWeb di Twitter untuk mendapatkan pembaruan terbaru tentang pengembangan website

  • TrikWeb — 2014

    Kumpulan trik untuk membangun website dan hal terkait lainnya tentang pengembangan website dari Muhar Dwi Purwanto
    Dibuat dengan di Jakarta