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 queriesW3C (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.

5 komentar untuk “Menerapkan Desain yang Responsif”

  1. benar sekali mas OB,,, lihat versi mobile sangat berguna bg perselancar dunia maya yg mencri informasi melalui perangkat seluler,,, tdax dpt disangkal klu kt sbgai pencri informasi menginginkan kan wkt loading yg lbh cpt agar informasi yg kt cri dpt segera kt miliki. Dengan kata lain informasi lah yg plng penting ketimbng tampilan blog bila menggunakan perangkat mobile

    BalasHapus
  2. Kalau menurut saya, tidak semua blog perlu dijadikan responsif mas. Tergantung informasi apa yang disajikan di blog tadi.

    BalasHapus
    Balasan
    1. @Leo Ari WIbowo — Desain blog yang responsif tergantung dari pengelola blog, mas. Alternatif itu muncul, ketika pengelola blog menemui bahwa terdapat sejumlah pengguna melakukan akses melalui beberapa layar yang berbeda.

      Hapus
  3. dua jempol banget infonya ...



    jangan lupa sobat follow blog saya di www.treehuges.blo9gspot.com nanti saya mengikuti blog anda

    BalasHapus
  4. waah desain responsiip emmng sangat penting sekali di dunia bloger gan

    BalasHapus