Membangun sebuah weblog tidak sekedar enak dilihat secara desain (subyektif). Tapi perlu ada perhitungan lain. Baik itu aksesibilitas maupun usability (kebergunaan). Namun semua itu sebuah pilihan. Sebab kita tidak dapat membuat sebuah weblog yang dapat memenuhi atau mewakili semua pihak.
Saya memberi judul "Mengoreksi Blogger Template Ku" pada tulisan ini, sebagai sentilan untuk mengingatkan saya sebagai pengguna Blogger. Ada beberapa hal dasar yang perlu diperhatikan. Hal-hal tersebut adalah:
Warna
Pada warna, hal dasar yang perlu diperhatikan adalah tingkat kontras antara 'background' dan 'foreground' (warna latar belakang dan teks). Dimana kita mempertimbangkan semua kalangan dapat dengan mudah membaca tulisan kita. Pertimbangan pemilihan warna kontras yang baik ini sebagai bagian dari "Accessibility" (di W3C).
Untuk mendapatkan warna yang baik tingkat kontrasnya, anda dapat menggunakan tools/perangkat Colour Contrast Checker (di Snook.ca). Kemudian anda dapat mengecek keseluruhannya dengan AccessColor (di Accesskeys.org) atau addons/pengaya Firefox yang bernama Colour Contrast Analyser.
Penggunaan "Alt Attribute"
Penggunaan Attribute Alt (di Wikipedia) sebagai deskripsi image/gambar ini sangat penting. Terutama bila image tidak dapat terbaca untuk kondisi tertentu, seperti pada seorang tuna netra. Bahkan bermanfaat bagi search engine/mesin telusur Internet.
Selain itu, penggunaan 'Alt Attribute' ini untuk memenuhi syarat validasi W3C. Setidaknya apabila kita selalu menggunakan
alt pada tiap image-non-dekoratif, tidak akan menambah jumlah error/galat yang telah kita miliki.Contoh:
<img alt="tutorial membuat template" src="http://domain/images/template.jpg" width="..." height="..." />Untuk kasus blogger,
alt pada image belum terisi, dan biasanya script img dari picasa itu saya ubah menjadi:<a href="http://deconstructioncode.blogspot.com/2009/10/blogger-indonesia-accessiblity-dan.html">
<img alt="Accessiblity - Usability" src="http://4.bp.blogspot.com/_dfnTVAxeWMI/SsxinGC5-qI/AAAAAAAACfg/u4ynptTvd6Q/s400/Accessiblity-Usability.gif"/>
</a>"Link Text"
Dalam penulisan, kita sering merujuk sebuah artikel dengan link/pranala/taut. Baik itu internal maupun eksternal. Nah, penulisan 'link text' ini yang perlu dipertimbangkan best practice-nya. Saya menyadur Web Guidelines - Naming Files, Subdirectories, and Links dari panduan web Universitas Texas untuk contoh berikut:
Buruk: Untuk informasi tentang HTML, klik di sini
Baik: Untuk informasi tentang HTML, lihat Belajar HTML
Lebih baik: Lihat Belajar HTML untuk informasi selengkapnya.
Selain itu Link Text perlu dibedakan secara jelas dengan teks biasa. Bisa menggunakan warna yang berbeda dan/atau underline/garis bawah. Termasuk perlakuan terhadap
a:hover, a:focus dan a:active. Untuk kondisi tertentu, penggunaan underline dan border lebih baik, terutama untuk seorang yang buta warna. Kemudian masalah 'dotted border' saat 'link focus', idealnya tidak di hapus dengan trik CSS seperti
* {outline:none}. Karena sangat penting perannya bagi pengguna Internet yang hanya menggunakan 'keyboard' dengan menggunakan fungsi TAB.Navigasi
Dalam Usability (di Wikipedia), masalah navigasi menjadi salah satu hal penting. Dengan navigasi yang baik pada weblog, penggunjung akan mudah menjelajah tiap halaman dengan cepat, tanpa merasa gagap, atau terjebak. Terjebak? Misal pada beberapa 'Free Blogger Template' saya ada link 'ads' yang seakan itu adalah navigasi :).
Mungkin dengan adanya Sitemap akan semakin menambah baik fungsi navigasi dari weblog kita.
Navigasi sebaiknya tetap berbasis teks. Jika berupa gambar, gunakan 'atribut alt' dengan tepat. Khusus untuk 'skip links', disarankan memakai kata 'skip to main content', agar lebih dimengerti oleh screen reader. Beberapa panduan menyarankan, jika pranala sebelum konten utama berjumlah lebih dari 5 buah, sebaiknya sertakan 'skip links'. Bermanfaat bagi pengguna 'keyboard', 'screen reader', dan yang menonaktifkan Cascading Style Sheet (CSS).
Cek Tampilan Weblog di Semua Browser
Ada beragam jenis browser/peramban. Diantaranya yang populer yaitu Firefox, Internet Explorer, Opera dan Chrome. Untuk itu kita perlu memastikan bahwa 'template' kita dapat tampil sempurna di semua browser, terutama yang populer tersebut. Ada beragam cara untuk mengecek tampilan 'template' kita di browser, selain manual, yaitu menggunakan aplikasi atau tools online/daring yang tersedia, seperti: IETester dan BrowserShots.
Kecepatan Tampilan Weblog
Ketika kita membuka Weblog, kita harus memastikan seberapa cepat weblog tersebut tampil. Perhitungannya tentu semakin cepat weblog kita tampil semakin baik. Dan ini berkaitan dengan koneksi Internet kita. Intinya jangan biarkan para pengunjung merasa jenuh ketika mengarungi weblog kita. Ada beberapa hal yang dapat mempengaruhi kecepatan tampil blog kita, yaitu image, javascript, flash, dan pengkodean yang tidak baik.
Pada kasus blogger, 'widget' bisa memperlambat loading (sebab menggunakan javascript yang disimpan diluar/ekternal file). Untuk itu gunakan 'widget' sesuai kebutuhan, jangan mengumbar widget.
Tools kompres:
- Image: Smush.it
- Javascript: Packer
- CSS: CSS Compressor
Nah untuk melihat tingkat kecepatan tampil weblog, dapat menggunakan addons/pengaya Firefox YSlow. Dengan menggunakan addons ini anda dapat melihat juga ukuran masing file/berkas yang anda miliki.
"White Space"
White space (di Wikipedia) atau disebut juga ruang negatif itu berkaitan dengan komposisi ruang template kita. Seberapa baik tertatanya. Baik itu spasi tulisan dan jarak antar kolom atau elemen sehingga template kita telihat rapih dan ada jedah sehingga pengunjung nyaman untuk melihat halaman dan membacanya. Lebih jelasnya anda dapat mempelajari 'Whitespace' (di Alistapart.com) yang ditulis oleh Mark Boulton.
Typography
Typography (di Wikipedia) adalah seni penggunaan type. Jadi typography tidak sekedar penggunaan jenis font/huruf yang indah tapi juga berkaitan dengan 'rhythm' (di Sitepoint.com) .
Dalam kasus platform Blogger, contoh pada template Minima, ada masalah dengan hirarki heading (H1-H6). Dimana kita melihat heading
H2 digunakan pada 'sidebar' dan 'date' sedangkan H3 pada judul postingan, ini terbalik.Idealnya, judul postingan adalah H2, sub-judul menjadi H3. Atau pada halaman artikel, judul adalah H1 dan sub-judul adalah H2 (ini bisa juga berkaitan dengan SEO, tapi ini masih bisa diperdebatkan). Masalah hirarki heading ini menjadi bahasan semantik (lihat juga: Guide to Semantic Use of HTML Elements).
Selain penggunaan ukuran font (font-size) pada kode CSS,
line-height dan letter-spacing juga memiliki peranan penting dalam 'typography'. Dengan Baseline Rhythm Calculator bisa menjadi pilihan alternatif untuk membantu typography pada weblog kita. Anda dapat melihat A guide to Web typography dan Web Typograhy sebagai bahan belajar dan inspirasi.
Penggunaan Bahasa
Bahasa baku tampaknya menjadi lazim, jika kita memang ingin webblog kita terbaca dengan baik untuk warga negara lain. Misal dengan menggunakan google translate, sebagai media penerjemah. Jadi Bahasa yang kita gunakan bukan sekedar bahasa yang 'berbui'. Kalau bisa menjelaskan secara singkat kenapa tidak, bukan sekadar menembak keyword/kata kunci tertentu (ini pilihan, bukan kewajiban).
Cek Validasi HTML dan CSS
Sebaiknya kita mengecek validasi weblog, baik itu X/HTML maupun CSS. Memang Blogger ada masalah besar di sana, tetapi semestinya kita sedikit mengurangi error pada dua hal tersebut.
Cek validasi HTML : W3C HTML Validation Service.
Cek validasi CSS : The W3C CSS Validation Service.
Membedakan Antara Media Screen, Print dan Handheld (Media Queries)
Penjelasan detilnya dapat anda lihat di Bedakan antara Media Screen dan Print - CSS
Penutup
Beberapa hal diatas tentunya belum memenuhi secara keseluruhan (dan saya belum menjalankan secara maksimal), masih banyak lagi persoalan yang perlu diperhatikan. Mungkin masalah SEO? Yang belum dikupas disini. Jika anda berkenan silahkan menambah beberapa point yang menurut anda penting dan terlupakan disini.
Sebagai pertimbangan, anda dapat melihat dua blog berikut, bagaimana mereka mempersiapkan weblognya:
- Surprise! Your semantic, accessible, search engine friendly WordPress theme is none of the above.
- Site Help
---
Makasih banyak kepada Dani Iswara atas beberapa koreksi dan masukannya.
0 comments:
Posting Komentar