Menerapkan Desain yang Responsif

Ketika membuka blog pada layar yang berbeda, mungkin kita akan menemukan satu hal yang unik. Tampilan blog tidak berubah seperti aslinya, terutama bagi blog yang struktur pengkodean menggunakan fixed layout. Tidak jarang kita menggeser ke kanan & ke kiri — lama-lama jari jadi lentik— untuk membaca artikel atau beberapa widget pada sidebar. Idealnya, tampilan yang baik adalah menggeser ke atas & ke bawah.

Sebuah hal yang menarik ketika Blogger™ menambahkan fitur ini dalam kapabilitas tampilan blog pada versi mobile. Namun yang menjadi kendala adalah ketika kita telah menerapkan beberapa conditional tags dalam sebuah pengkodean atau widget, maka hal itu akan menjadi kompleks. Meskipun dalam penerapan untuk versi mobile sudah dapat dikustomisasi menurut keinginan pengelola, seperti menambahkan mobile='yes', mobile='no', dan mobile='only' pada widget ataupun penggunaan conditional tags berikut.

<b:if cond='data:blog.isMobile'>

Sebagai alternatif kita dapat menerapkan desain yang responsif pada blog dengan menggunakan media queries. Bukankah antara perangkat komputer & mobile berbeda dari sisi kekuatan memuat suatu halaman situs web atau blog? Benar sekali, jika ditampilkan dalam default, besar kemungkinan waktu memuat pada mobile akan lebih singkat. Tetapi apabila kita melakukan kustomisasi — pada tampilan mobile — hingga hampir mirip dengan tampilan di perangkat komputer, tentu akan menambah beban juga bukan? Yah, terutama di Blogger™. Berikut contoh sederhana penerapan media queries dalam CSS template — Optimasi Blog menggunakan cara ini.

@media screen and (max-width:800px) {
  …
  CSS untuk media screen dengan lebar maksimal 800px
  …
  <!-- contoh CSS:
  body {
    font-size: .875em;
    line-height: 1.7143em;
  }
  -->
}

@media screen and (max-width:600px) {
  …
  CSS untuk media screen dengan lebar maksimal 600px
  …
}

Atau dengan menggunakan penggabungan media queries (min & max)

@media screen and (min-width:600px) and (max-width:800px) {
  …
  CSS untuk media screen dengan lebar minimal 600px dan maksimal 800px
  …
}

Catatan: kode yang berwarna merah merupakan lebar layar, kita dapat menambah variabel lebar yang lain (1024px, 800px, 600px, 480px, 320px, dan sebagainya) di dalamnya. Dan masih banyak lagi metode media queries lain yang mungkin tidak hanya terbatas pada lebar layar, seperti lebar device (device-width). Kita dapat menelusurinya melalui media queries — W3C (World Wide Web Consortium).

Dengan menggunakan media queries, diharapkan tampilan blog akan sesuai dengan beberapa ukuran lebar layar yang berbeda. Tentunya harus disesuaikan pula dengan pengkodean template pada masing-masing blog. Kemudian akses URL yang dilakukan pengguna mungkin tidak akan bervariasi, seperti penambahan ?m=0 atau ?m=1 di belakang permalink. Hal inilah yang menjadi dasar mengapa saya mencoret “Lihat versi mobile” pada kaki blog ini, namun akan menjadi alternatif apabila akses sedang ‘lemot’ pada pengguna mobile.