Website utama RA Mutiara Islam Kendari berjalan di Blogger, tetapi tidak memakai tema generik. Seluruh situsnya dibangun dari template yang ditulis sendiri, mencakup homepage, blog dinamis yang mendokumentasikan kegiatan sekolah sehari-hari, serta halaman khusus Kontak, Profil, dan Galeri. Lewat situs ini, sekolah yang sudah berdiri sejak 2006 dengan lebih dari 600 alumni bisa ditemukan oleh orang tua yang mencari informasi sekolah lewat pencarian.
Tampilan situs jadi yang bisa di-scroll, persis seperti yang dilihat pengunjung.
Desktop
Mobile
Pekerjaan seperti ini biasanya dibagi ke pengembang, desainer UI/UX, desainer grafis, dan pemasar. Di proyek ini, keempat keahlian itu dikuasai satu orang, jadi setiap keputusan datang dari orang yang memahami keseluruhan proyek, bukan hanya bagiannya sendiri.
16
standar yang terpenuhi, dari kode hingga pemasaran.
Dampak bisnis di sini diukur dari 5 area: Kehadiran, Kualitas, Kepercayaan, Konversi dan Pertumbuhan. Semuanya mencakup bagaimana bisnisnya ditemukan, dipersepsikan, dan direspons.
Gambaran lengkap dan profesional dalam satu kunjungan
Sebelum
Website sebelumnya sudah memuat hal dasar, tetapi program, jadwal, fasilitas, dan testimoni belum tersusun di satu tempat yang jelas, sehingga orang tua harus merangkai sendiri potongan informasinya.
Sesudah
Situs hasil pembaruan menyatukan semuanya di satu tempat, dibangun khusus untuk sekolah ini dengan palet warna, tipografi, dan tata letak sendiri untuk profil, galeri, dan kontak. Orang tua mendapat gambaran lengkap dan profesional soal sekolah dalam satu kunjungan, di perangkat apa pun.
Tiap proyek memanfaatkan kombinasi berbagai disiplin, begini gambarannya di proyek ini.
Tools dan teknologi yang digunakan untuk mewujudkan proyek ini.
Masalah yang muncul selama membangun proyek ini, dan hasil yang didapat dari menyelesaikannya.
Membangun di Dalam CMS Tanpa Build Pipeline
Blogger tidak mendukung proses build eksternal, jadi seluruh template harus ditulis dengan sintaks templating bawaan Blogger. Tailwind CSS yang sudah dikompilasi juga harus disuntikkan manual ke style block template setiap kali ada perubahan.
Menghindari Redirect Loop di Mobile
Blogger otomatis menambahkan parameter URL mobile, dan terus menambahkannya di setiap navigasi. Redirect satu halaman penuh untuk menghapusnya justru membuat halaman terus memuat ulang tanpa henti, jadi masalah ini diperbaiki dengan menulis ulang URL tanpa memuat ulang halaman.
Mencapai Skor Google PageSpeed Sempurna
Mendapatkan skor hijau di keempat kategori PageSpeed membutuhkan optimasi pemuatan gambar, JS, dan CSS yang cermat, ditambah keterbatasan bawaan template Blogger.
Memproduksi dan Menyematkan Testimoni Video
Rekaman mentah testimoni orang tua perlu diedit dulu sebelum bisa dipakai, lalu dipublikasikan dan disematkan dengan cara yang tidak memperlambat homepage.
Masalah teknis yang diperbaiki selama membangun proyek ini.
Tanpa redirect loop
Gambar di bawah 200KB
PageSpeed hijau di keempat kategori
Workflow penyuntikan CSS otomatis
Sebelum
Blogger otomatis menambahkan parameter untuk pengunjung mobile, dan perbaikan awal dengan redirect satu halaman penuh membuat pengunjung terjebak dalam reload tanpa henti.
Sesudah
URL kini ditulis ulang lewat history API bawaan browser, bukan redirect, sehingga parameternya hilang tanpa reload dan tanpa loop sama sekali.
Sebelum
Gambar beresolusi tinggi yang tersebar di seluruh situs, bukan hanya di satu bagian, berisiko memperlambat setiap halaman.
Sesudah
Setiap gambar di seluruh situs dikompres ke WebP dan dijaga di bawah 200KB, sehingga halaman tetap cepat tanpa penurunan kualitas yang terlihat.
Sebelum
Performa awal tidak konsisten di keempat kategori Google PageSpeed.
Sesudah
Optimasi berkelanjutan untuk pemuatan gambar, JS, dan CSS membuat keempat kategori jadi hijau semua.
Sebelum
Blogger tidak menyediakan cara untuk menjalankan proses build eksternal, jadi styling baru tidak punya cara untuk sampai ke template yang sedang live.
Sesudah
Script otomatis kecil mengompilasi Tailwind CSS terbaru dan menyuntikkannya langsung ke style block template, sehingga alur kerjanya tetap seperti proses build biasa meski ada keterbatasan Blogger.
