Day Milovich
Sebelum memilih theme, tentukan bagaimana konsep web yang akan kamu buat. Desain menyesuaikan fungsi, bukan sebaliknya. Saya melakukan banyak modifikasi, mematikan beberapa fitur, agar lebih sesuai untuk konsep Sak Jose. Catatan ini bukan tutorial. Hanya cerita di balik pembuatan Sak Jose.
Tipografi, Keterbacaan, dan Style
Web ini akan lebih banyak memuat artikel panjang. Saya mengandalkan tipografi. Apakah jika tanpa gambar, content saya masih bisa dibaca orang?
Theme Bimber 7.5.1 memakai kombinasi 3 font yang sangat saya sukai: SpartanMB (untuk heading H1-6), Poppins (untuk Subtitle), dan Roboto (untuk body text).
SpartanMB tidak ada di Google Fonts, namun downloadable (dari 1001Fonts atau FontsSquirrel). Secara default, kombinasi font ini diterapkan pada card “Original 2018)” bawaan Theme Bimber dari Bring the Pixel.
Banyak kawan saya berkomentar, SpartanMB itu aneh, kurang bagus, dan “perlu diganti”. Ada opsi penggantian dari Dashboard, namun saya suka font ini.
Subtitle tadinya pakai opacity 0.7, saya ganti menjadi 0.9 agar tidak terlalu grey. Trik menarik, kamu tidak perlu ubah warna, cukup opacity kamu ubah.
Untuk menaikkan keterbacaan, jarak antar-karakter (kerning) pada Subtitle dan Category, saya atur ke 0.1pt.
Heading (H1-5) memakai leading (jarak antarbaris) 1.4 agar lebih terbaca, termasuk body text dan paragraf di artikel sedikit saya kurang, ke 1.4 : )
Untuk link, saya hanya menambahkan style font-size:700; agar lebih kelihatan.
Saya suka style link SmashingMagazine, namun, target saya pemakai mobile, nggak terlalu banyak dekorasi di link.
Accent color dan alternative color, untuk button dan warna Category, saya memakai warna Instagram dan Twitter.
Hex color Instagram yang saya pakai: #dd2a7b – rgb (221,42,123). Sedangkan untuk warna Twitter: #00acee – rgb (0,172,238).
Untuk skema Dark, bawaan theme Bimber, belum saya sentuh.
Saya memakai logo berbasis tipografi, dengan font buatan saya sendiri. Saya membuatnya dengan aplikasi Pixly untuk Android, merancang huruf per huruf, kombinasinya, dan saya terapkan ke banyak kata dan kalimat populer.
Embed Content
Baru disebut web dengan tampilan modern, salah satu ukurannya, jika bisa memuat content beragam.Theme Bimber bisa.
Kalau mau menampilkan video YouTube, twit, status Facebook, Instagram, tinggal sisipkan URL maka akan ditampilkan di dalam content. Gunakan screenshot hanya jika terpaksa.
Yang terpenting, tidak perlu memasukkan “embed code”, cukup menyisipkan URL, agar tidak ribet.
Bahkan ada fitur yang bisa menjadikan embed code sebagai featured image, jika mau.
Singkatnya, untuk urusan menyisipkan content dari tempat lain, hanya perlu menyisipkan URL, akan tampil responsive, dan cepat.
Pola Interupsi
Tidak semua orang membaca secara skimming. Saya membutuhkan “pattern interrupt”, agar perhatian orang “terganggu” oleh penyela, dan mau membaca sampai selesai. Bukan iklan. Bukan permintaan subscribe. Tulisan panjang akan saya sela dengan subtitle, quote, kotak berwarna lembut, dan sorotan (highlight) pada kalimat.
Saya perlu menambahkan “box” dengan background warna tipis dan border 1px. Fungsinya, untuk menempatkan data tambahan, misalnya informasi film atau buku, untuk.tulisan berjenis resensi.
Karena tidak selalu dipakai dalam tulisan, tidak perlu saya jadikan sebagai .css tambahan. Saya sisipkan langsung ketika mau menulis.
<div style="margin: 0 0 15px; overflow: hidden; padding: 15px; background-color: #fef5c4; border: 1px solid #FADF98;">teks di dalam kotak</div>
Sedangkan untuk.membuat highlight pada kata atau kalimat, kodenya semacam ini:
<span style="background-color: #effd5f;">teks dengan highlight warna lemon</span>
Jadinya akan seperti ini:
Kalimat bisa diberi sorotan berwarna, agar lebih diingat pembaca.
Tinggal sentuh tab “Text” ketika sunting tulisan, kemudian sisipkan code tadi.
Saya juga ubah property gambar dan caption, agar lebih “kelihatan”. Jauh berbeda dari aslinya.
Plugin Seperlunya
Gunakan plugin atau masukkan .css, jika dan hanya jika kamu akan selalu memakainya di setiap Single Post dan Page. Jika tidak, kamu akan ribet melakukan asinkronisasi, pengubahan urutan eksekusi, dan pengecualian lain. Tepatnya, harus tahu cara kerja kode dan bagaimana suatu halaman dipanggil.
Jangan sembarangan install plugin kalau tidak tahu cara kerjanya. Plugin bukanlah segalanya.
Theme Bimber punya fitur bawaan dari plugin. Mau pasang slot iklan (dalam bentuk kode iklan atau image), ada plugin AdAce. Bisa .enampilkan trending, pilihan editor, newsletter dari MailChimp, WooCommerce (kalau punya product, bisa untuk online shop), Facebook Comment, dan Social Login (agar bisa register dengan akun medsos), dan menampilkan feed Instagram dan halaman Facebook.
Saya nonaktifkan semua fitur di atas, karena terlalu intrusif dan belum perlu. PhotoMix juga belum saya pakai.
Andalan: Snax dan MediaAce
Fitur yang saya sukai, mengapa saya memilih theme Bimber adalah Snax dan MediaAce.
Plugin Snax merupakan front uploader. Kamu bisa coba kesaktian Snax. Hanya perlu register pemakai, setelah itu, kalau mau posting tinggal klik tombol “Add Post” (saya ganti menjadi “Tulis Cerita”), kemudian tinggal memilih jenis posting. Tumblr yang paling duluan melakukan ini. Bahkan #hashtag juga berasal dari Tumblr. Setelah pilih jenis posting, silakan menulis. Tidak ada “gangguan” berupa tampilan dashboard atau field yang penuh trik SEO.
Kamu mau upload apa? Setiap jenis content memiliki interface berbeda. Story, Personality Test, Trivia, Image, Embed, dan Link. Snax adalah jawaban terbaik yang ada, jika kamu punya beberapa penulis dalam website.
Saya tahu SEO. Beberapa tulisan saya di Page 1 Google, yang ada di media lain. Satu hal yang menjadi catatan: saya tidak perlu plugin untuk berada di halaman Google. Mungkin saya akan memakai Rank Math, bukan Yoast Plugin.
Saya tidak menulis untuk Google. Tidak memakai cara-berpikir Google. Tulisan saya di Sak Jose, tidak untuk kepentingan komersial, tidak untuk traffic. Saya hanya punya 50 orang, yang menjadi “massa kritis”, inti yang akan membelah menjadi banyak. Obsesi saya sejak awal, ini hanyalah media perbincangan yang mengisi obrolan ketika saya bertemu kawan-kawan saya, pembaca pada umumnya. Hanya 50 orang, kalau terjadi perbincangan, bagi saya jauh lebih berharga daripada pembaca pasif. Target saya sepenuhnya manusia, bukan mesin pencari. Manusia yang menghargai perbincangan, tema-tema pinggiran.
Saya memakai Telegram, yang punya platform blog anonymous. Tidak ada yang semudah mengetik di Telegra.ph atau Graph. Kalau pakai Snax, kemudahan ini bisa kamu lakukan, dengan markdown yang lebih baik. Kamu bisa tambahkan category (rubrik), tags (kata-kunci terkait), dan featured image (gambar utama).
Snax membuat profile pemakai, seperti Medium. Orang punya koleksi bacaan, bookmark, memberikan vote (jempol), dan bisa baca-nanti.
Theme Bimber memiliki kecepatan posting seperti Telegraph atau Graph, dengan markdown yang lebih baik, dan bisa kelola profile user sebagus Medium.
Batas karakter saya naikkan untuk menulis dari Snax, dari 7200 ke 9999. Kalau 9999 karakter dibagi 7 (rata-rata, per kata 7 karakter), hasilnya 1428 kata. Ini berarti, ada 1428 spasi. Kalau begitu, perhitungan akhirnya menjadi begini: batas 9999 karakter, dikurangi 1428 spasi, hasilnya 8571 karakter, kemudian dibagi 7 karakter, hasilnya 1224 kata.
Sudah memadai untuk menuliskan artikel opini dan sematan dari content lain seperti link, YouTube, image, dll.
Untuk artikel panjang, sebaiknya mencapai 1800 kata (tanpa spasi), namun sekali.lagi, saya tidak beradaptasi untuk Google.
Akismet Anti-Spam. Ini plugin selalu saya aktifkan. Seperti tagline di Akismet, “Ingatkah kamu pada hari ketika hidupmu tanpa spam? Fitur komentar bawaan WordPress, selalu saya aktifkan “manually approved”. Saya lebih suka memasang kotak komentar Disqus, yang praktis, kaya-fitur, dan aman.
Classic Editor. Mau pakai Gutenberg editor, sebenarnya bagus, tetapi interface kurang simple.
G1 Social juga bawaan theme Bimber. Fungsinya, menghubungkan icon media sosial, yang ditampilkan di bagian bawah dan menu share, ke akun media sosial saya. Semua akun itu aktif.
Untuk urusan optimasi gambar, Bimber punya Media Ace. Ini fitur yang sangat saya sukai.
Seperti kita tahu, secara default, WordPress menduplikat 1 image menjadi 3. Large, medium, dan thumbnail. Dan tidak terkompresi. Apa yang terjadi jika theme memiliki banyak opsi tampilan (yang) menampilkan dimensi gambar secara berbeda? Bisa sampai 7 duplikat. Ini yang menyebabkan space hosting cepat penuh. Media Ace mengatasi ini dengan 1 langkah mudah. Setelah saya memperoleh tampilan yang saya inginkan, opsi tampilan yang tidak saya butuhkan kemudian saya “Deactivate”. Jadi, image yang akan dibuat secara otomatis, oleh WordPress, hanyalah image yang sudah kamu tentukan di Media Ace. Selain itu, Media Ace punya fitur “regenerate thumbnail”. Hanya gambar yang benar-benar terpakai yang akan tersimpan.
Photo Mix. Plugin ini cocok untuk bikin meme dan foto viral, dengan pilihan kolase yang bagus. Plugin ini bisa menggabungkan 2 foto ke dalam kolase, penambahan sticker, dan teks. Sangat pas untuk Quiz dan komparasi (before-after atau versus).
Gambar utama (featured image), di theme ini, saya pilih ratio 16:9, dengan dimensi 800x450pxl. Harus terkompresi, tanpa kehilangan-kualitas, dan disimpan sebagai cache di CDN (content delivery network).
Optimasi Gambar
Masalahnya, saya lebih sering memakai Android dalam menulis.
Berikut ini, proses yang saya pakai untuk pemasangan gambar utama, dari Desktop atau dari Android.
Pertama, mencari Image. Saya memotret, dengan Android. Atau cari image di website. Kalau download, akan saya beri nama sesuai webnya, untuk memudahkan pemberian credit foto. Ingat, tidak semua image boleh kamu pasang di website hanya karena kamu beralasan sudah mencantumkan credit.
Berikutnya, pastikan kamu pasang di ukuran terkecil dan dimensi yang pas. Crop jika perlu. Tetap pakai ratio 16:9. Kalau di Android, tinggal Edit > Crop > pilih 16:9. Jangan di bawah ukuran 800x450pxl.
Kalau mau crop, resize, dan compress, file .jpg atau .png, bisa memakai iloveimg.
Untuk Android, saya rekomendasikan Media Editor & Compressor premium dari AC Market.
Setelah siap, rename dengan keyword yang kamu muat dalam postingan dan credit foto.
Setelah itu, upload ke Media Library, berikan caption, alt, dan description.
Gambar siap dipakai sebagai Featured Image di tulisan.
Sekarang, banyak layanan online gratis, tanpa perlu register, dan bisa menuntaskan pekerjaan.
Yang jelas, gambar perlu memakai ukuran sekecil mungkin (saya memakai rata-rata 56KB) dengan dimensi yang tidak perlu di-crop di plugin. Loading akan cepat dan hosting tidak cepat penuh.
Plugin Lain
WP Subtitle. Saya suka subtitle (subjudul). Ini bisa muncul di bawah judul, sebagai perpanjangan, teaser, atau menjadi teks yang akan muncul di halaman depan atau di pencarian Google (sebagai ganti Excerpt).
WPBakery Page Builder. Plugin ini sebagai jawaban untuk membuat tata-letak halaman, hampir sama fungsi dengan InDesign untuk Majalah. Tanpa menyentuh code. Bisa mempercantik halaman sesuai selera kamu.
Nanti saya akan kembangkan lebih lanjut, lebih fokus ke pengembangan content.
Perubahan theme Bimber bisa diatur dari Dashboard > Customize.
Sangat mudah, efisien, dan nggak ribet. Hanya saja, memang fiturnya sangat banyak. Gunakan sesuai kebutuhan kamu.
Waktunya Posting
Setelah semua siap, barulah saya memulai posting. Di manapun, kapanpum, asalkan ada koneksi internet, saya bisa menulis dan posting dengan cepat.
Jangan dirikan rumah di atas tanah sewaan. Jangan posting gagasan dan foto keren kamu, hanya di media sosial atau blog. Buatlah website sendiri.
Jika kawan-kawan ingin membuat website seperti ini, saya bisa mengerjakan dari awal sampai siap-posting. Termasuk masalah perawatan dan troubleshooting terkait website. [dm]
