Redesign

Beberapa hari terakhir aku sibuk mengutak-atik tampilan blog ini.

Melelahkan, sekaligus menyenangkan.

Lumayan sih. Berhasil mengubah tampilan template Sederhana bawaan Blogger menjadi template satu kolom yang semakin Sederhana ini.

Tampilan baru ajiksip.web.id.

Akan kuceritakan secara singkat gimana proses bikinnya. Aku menggunakan basis template Simple, template default dari Blogger.

Pertama aku melakukan backup template, supaya kalau ada error tinggal upload template backupan.

Kedua aku menghapus CSS bundle, baik di tampilan biasa maupun mobile. Caranya adalah dengan menambahkan properti b:css='false' di tag html.

Ketiga aku menghapus seluruh style CSS yang ada di template, seluruh kode CSS di dalam <b:skin> dan <b:template-skin>. Kemudian menambahkan modern normalize sebagai pondasi.

Keempat aku menghapus markup tidak berguna, seperti faux, column, macro, dan lainnya, sehingga yang tersisa hanya struktur utama saja. Layout tampilan satu kolom, dengan urutan dari atas area header, menu, konten, komentar, navigasi, dan footer di bawah navigasi sebagai tempat meletakkan widget.

Kelima aku menambahkan style, elemen demi elemen, kuletakkan di bawah kode modern normalize. Mulai dari layout, header, judul, deskripsi, menu, konten, semuanya, urut dari atas. Sebagian kode CSS aku mengambil dari tema WordPress biar rapi. Untuk tipografi aku menggunakan font Montserrat dan Inconsolata yang disediakan oleh Google Font.

Aku tetap memfungsikan mobile site Blogger supaya tetap ringan diakses melalui ponsel. Kalau cuma responsif resize menurutku loadingnya tetep berat karena gambar yang dimuat tetep ukuran besar tapi diperkecil. Beda dengan mobile site yang menyajikan gambar mini low quality.

Secara global sih sudah selesai. Paling tinggal perbaikan, penambahan, atau pengurangan sana sini. Seluruh perubahan ke depan akan kudokumentasikan di halaman ini.

Rencana template ini kubagikan gratis kalau sudah jadi 100%. Aku masih nguji dulu performa dan kecepatannya, apakah sudah SEO friendly, apakah sudah media social friendly, apakah sudah human friendly (UX), gimana tampilannya di hp jadul, internet explorer, opera mini, dan browser-browser high compressed lainnya, dan sebagainya.

Tapi kalau kamu memaksa pingin nyoba template setengah jadi ini, PM saja.

Changelog

Plusone.js

Aku menghapus plusone.js dengan cara mengganti tag penutup </body> menjadi &lt;!--</body>--&gt;&lt;/body&gt;. Soalnya berat, bikin skor tidak sempurna. Kekurangannya, beberapa widget menjadi tidak bekerja, seperti arsip, formulir kontak, menu di mobile site, dll.

Import webfont

Aku menghapus meta webfont, menggantinya dengan metode import. Tapi tidak murni import CSS, melainkan aku menyalin CSS dari webfont Google secara manual dan memasukkannya di dalam style. Kelemahannya, kalau dalemannya berubah (URL webfont berubah), bisa jadi webfont tidak muncul secara sempurna.

Breadcrumb

Aku memasang breadcrumb.

Update Skor

PageSpeed Insight 3 Maret 2018.

GTmetrix 3 Maret 2018.

Skor bagus gara-gara nggak ada gambar di beranda. Tapi yang terpenting adalah loading time bisa di bawah satu detik.

Percuma skor sempurna tapi loadingnya lebih dari 5 detik. Karena orang tidak butuh skor, melainkan delivery-nya, cepet apa lelet.

3 komentar: