Memasang Tema Responsif di Blogger www.rizaumami.com

New bootstrap like theme for www.rizaumami.com

Layaknya slogan iklan; "kesan pertama begitu menggoda, selanjutnya...", demikian juga dengan penampilan sebuah blog, kesan pertama si pengunjung sangat memengaruhi apakah dia akan rutin mampir ataukah sekedar sekali singgah.

Awalnya blog ini hanya saya dandani dengan tema sederhana bawaan Blogger dengan sedikit dipersolek di sana dan di sini. Kala itu dirasa sudah memadai dan saya merasa cukup puas. Hingga kemudian ada sebuah komentar dalam sebuah artikel blog ini yang menanyakan mengapa tampilan blog ini tidak responsif?
Sejujurnya saya tidak pernah memikirkan blog responsif secara serius karena tema sederhana yang saya pakai telah memiliki moda mobile yang memberikan tampilan khusus bagi pengunjung yang menggunakan perangkat berlayar kecil. Alasan lain adalah karena saya berniat content first, ingin fokus pada konten, lainnya tidak terlalu penting.

But, hey, seorang koki yang hebat itu bukan yang hanya bisa membuat makanan enak bagi dirinya, namun juga bisa membuat makanan lezat sesuai selera orang lain. Demikian halnya dengan pengelola blog, blog bukan hanya cukup memuaskan dirinya namun juga menyenangkan bagi para pengunjungnya.
A good comment is priceless. Jadi kali ini pun, saya sebagai pengelola blog yang baik kemudian berusaha mencari hal-ihwal rancangan web yang responsif dan bagaimana cara menerapkannya di blog.

Alkisah, seiring perkembangan teknologi kini banyak yang mengakses internet menggunakan perangkat bergerak. Terlebih di Indonesia yang karena kondisi geografis membuat infrastruktur internet lebih mengarah ke seluler. Adalah bijak untuk tidak mengabaikan jutaan pengguna perangkat bergerak calon potensial pengunjung blog kita.

Lalu bagaimana agar blog kita memberikan pengalaman yang menyenangkan bagi pengunjung yang mengaksesnya dengan menggunakan perangkat bergerak atau perangkat berlayar kecil? Ada empat cara untuk meraihnya...

  1. Responsive design
    Laman web dirancang luwes untuk bisa menyesuaikan tampilan sesuai ukuran layar yang digunakan pengunjung.
  2. Accelerated Mobile Page
    Laman yang khusus dirancang untuk menyajikan tampilan bagi perangkat bergerak atau berlayar kecil
  3. Dynamic serving
    Laman web dirancang dengan dua kode di mana yang satu khusus pengunjung yang menggunakan layar besar (desktop/laptop) dan satu lagi khusus bagi pengunjung yang menggunakan perangkat bergerak atau layar kecil.
  4. Mobile URL
    Membuat laman tersendiri khusus bagi tiap jenis perangkat yang digunakan pengunjung.

Bagi saya, yang sementara ini menggunakan layanan gratis dari Blogger, teknik responsive design adalah yang paling masuk akal. Ia tidak memerlukan alamat khusus layaknya mobile URL, atau menulis konten ganda seperti dynamic serving, juga bisa untuk desktop serta mobile tidak seperti AMP yang hanya fokus di mobile. Tidak heran jika Google juga lebih menyarankan responsive design.

OK, target kini lebih mengerucut. Saatnya mencari tahu bagaimana membuat blog menganut paham rancangan responsif. Sekilas membaca teorinya lumayan menyeramkan, blog responsif dirancang dengan niat mobile first. Hmmm, jika demikian pasti akan sangat merepotkan karena saya belum paham soal merancang blog yang mobile first. Well, dasarnya saya memang tidak bisa merancang wajah blog. Terlebih, timbul pertanyaan bagaimana dengan artikel yang telah naik blog? Perlukah perubahan lagi?

Ah, ternyata setelah berselancar lebih jauh di internet, mengubah blog yang telah ada menjadi responsif tidaklah seseram yang dibayangkan. Untuk best practice mungkin memang perlu write form scratch, namun untuk blog amatir seperti yang saya kelola cukuplah hanya dengan mengganti temanya.
Kini saatnya berburu tema.

Saya tidak bisa membuat tema Blogger, dan tidak ingin belajar untuk bisa. Jika berkutat belajar membuat tema, kapan menulis artikelnya? Jadi ya tiada jalan lain selain berburu yang gratisan. Bukannya tidak mau membeli, namun saya kesulitan mengakses sistem keuangan modern, jadi agak rumit untuk melakukan pembayarannya.
Sayangnya mencari tema gratisan yang sesuai selera lumayan sulit. Saya suka desain yang bersih dan minimalis, sementara banyak tema yang saya temui tampilannya seperti pasar malam; ramai dan terkesan menjejalkan semua. Belum lagi tema-tema tersebut menyaratkan footer yang menuju laman si pembuat tema. Saya paham bahwasanya tidak ada yang benar-benar gratis, dan ini harga yang harus dibayar untuk mendapatkan tema secara cuma-cuma. But, I just don't like it.

Selintas terpintas bagaimana jika mencari tema Blogger-nya di GitHub saja? Mungkin terkesan aneh, tapi GitHub sekarang lebih menyerupai media sosial bagi para coder. Di GitHub kita tidak hanya menemukan kode program, namun juga gist serial number atau sekedar paste tautan piranti lunak bajakan.

Dan benar saja. Saya menemukan beberapa tema Blogger di GitHub. Tidak banyak, tidak juga sedikit. Sayangnya kebanyakan temanya tidak menarik dan reponya juga tidak jelas. Sampai kemudian saya menemukan repo dari gaerae (God bless his soul), tema bootstrap-nya langsung memikat hati saya pada pandangan pertama. The theme is pretty and its code is clear.

Singkat cerita, saya pun forking repo https://github.com/gaerae/blogger-templates dan membuat perubahan-perubahan demi memuaskan kebutuhan dan selera untuk blog www.rizaumami.com. Sebagai rasa syukur dan terimakasih, saya pun menggunggah ulang perubahan yang telah saya lakukan pada template tersebut dengan harapan dapat membantu "another me". Reponya bisa dilihat di sini: https://github.com/rizaumami/blogger-templates.
Jika Anda menemukan hal-hal masih mengganggu pengalaman menikmati blog ini, jangan ragu untuk mengirimkan saran dan kritiknya di blog ini atau (lebih baik lagi) dengan melakukan pull request di https://github.com/rizaumami/blogger-templates.

Demikian hikayat pergantian wajah blog ini, semoga ada manfaat yang dapat dipetik darinya.
Wassalam...