Tinjauan Blog RudyAzhar.com

Noted: Wednesday, September 1, 2010 at 23:03:55. Words count: 1121.
Last updated: Tuesday, January 8, 2013 at 23:55:17.

Setelah sedikit revisi kontras warna, blog Rudy Azhar siap ditinjau. Situs ini dikelola oleh Bang Rudy Azhar, pria yang tinggal di Medan – Sumatera Utara. Tampilan blog bermesin WordPress ini dimodifikasi sedemikian rupa dari tema ‘Neoclassical XL’. Memakai tipe dokumen XHTML 1.0 ‘Transitional’ dan beberapa fitur CSS3. Versi bergerak/mobil memakai pengaya (dalam hal ini ‘plugin’) MobilePress. Belum ada versi cetak atau moda ‘print’-nya.

Saya salut dengan pelbagai usaha keras Bang Rudy merombak tampilan dan fungsi blognya. Mulai dari penyederhanaan di beberapa sisi halaman, logo baru, hingga akhirnya melepas emotikon Kaskus.

Tinjauan ini sengaja dilakukan dengan kondisi tampilan gambar dinonaktifkan untuk memudahkan evaluasi aksesibilitas Web.

Sekilas pandang

Halaman depan blog menampilkan 7 judul tulisan terbaru tanpa ringkasannya.

Gambar 1. Kecuali menu bilah sisi/’sidebar’, tampilan ini serupa seperti versi bergeraknya.

Memberikan pengalaman atau ‘user experience’ yang tidak jauh berbeda antara versi desktop dan bergerak. Mempermudah ‘learning curve’ bagi pengguna dan pengunjung baru.

Logo judul blog memang tidak tampak saat tampilan gambar dinonaktifkan. Menurut saya, tidak terlalu bermasalah dari sisi fungsi. Masih ada tautan ‘Home’ untuk kembali ke halaman depan.

“Ini blog tentang apa? Mana ‘tagline’ atau deskripsi singkatnya?” Mungkin begitulah pendapat umum para pengunjung barunya. Di kode sumber ada baris

<div id="tagline">hanya blog untuk tempat berbagi</div>

Entah apakah tag <div> benar-benar dibutuhkan di sini.

Masalah klasik WordPress

Di beberapa tinjauan sebelumnya sempat saya singgung tentang atribut title yang relatif duplikatif. Hanya berisi teks yang serupa dengan teks ‘anchor’ atau sekadar pengulangannya. Ini masalah kronis di beberapa templat bermesin WordPress. Klasik dan kronis karena sistem ‘core’ WorPress itu sendiri penyebabnya. Silakan membaca ‘Web accessibility and title attribute of WordPress blog‘ (Dani Iswara .com). Di WordPress, solusinya memakai ‘plugin’ sejenis ‘remove title attribute’. Hati-hati memakainya.

Masalah klasik tombol ‘reply’ akan dibahas di subtopik khusus di bawah.

Kolom komentar

Di sini akan disorot tentang salah eja, peluang penambahan beberapa aksen tertentu, dan urutan ‘tasking’ terkait komentar yang kurang logis.

Kalimat “Apa yang ingin Kamu Tulis!”, sepertinya kurang tepat nada dan huruf kapitalnya, Bang. Baris kalimat “Nama (jangan terlalu Panjang!)(wajib)”, mestinya bisa diperingkas pemakaian tanda kurungnya.

Lihat kalimat berikut ini:

Jika Artikel diatas ada yang ingin Anda tanggapi dan Kritik, Silahkan Anda Tulis pada Kotak Komentar yang telah disediakan dibawah ini, mohon tidak mencantumkan link-link yang bersifat Advertising karena sistem komentar pada blog ini adalah No Follow. Terima Kasih

hanya ada satu titik. Saran saya, disesuaikan menjadi seperti di bawah ini:

Jika artikel di atas ada yang ingin Anda tanggapi dan kritik, silakan tulis pada kotak komentar yang telah disediakan di bawah ini. Mohon tidak mencantumkan tautan/’link’ yang bersifat iklan karena sistem komentar pada blog ini adalah ‘no follow’. Terima kasih.

Ada juga kalimat “hidup sehar dengan Nutrisi”. Ayo, di mana itu?
Salah eja sederhana yang lain, misalnya: Tagg.

Hal redaksional berupa salah eja mungkin sepele. Tapi ini bisa menunjukkan keseriusan seseorang terhadap detail sekecil apapun. Profesionalitas? Bukankah bisnis juga membutuhkan kesungguhan, Bang? :)

Baris deteksi peramban dan sistem operasi, misal menggunakan GNU IceCat 3.6.8 pada Arch Linux, masih berpeluang diberi aksen tertentu via CSS. Jika memakai ‘plugin’ WP-UserAgent, ada tag ‘custom’ yang bisa dipakai, lalu tambahkan ‘class’ tertentu.

Tombol ‘reply’ kurang logis. Jika diklik, langsung melompat ke kolom isian komentar. Padahal pengunjung baru mungkin belum mengisi kotak isian identitas. Solusinya saat ini, urutan kotak isian komentar diubah. Tag textarea mendahului input lainnya. Silakan baca tulisan lawas di Dani Iswara .Net berjudul The lack of WordPress threaded comments.

Urutan tidak logis ini terjadi juga pada penempatan kotak isian untuk berlangganan balasan komentar via surat elektronik/surel. Sebaiknya pilihan itu ditempatkan sebelum tombol ‘kirim komentar’. Kalimatnya bisa lebih informatif jika seperti ini: “Notify me of followup all comments via e-mail”. Tergantung juga pada fungsi yang ditawarkan oleh fitur tambahan atau ‘plugin’ masing-masing.

Struktur, fungsi, dan semantik

Bukan hanya yang tampak oleh mata, bagian yang terdengar telinga pun ikut dievaluasi. Kode sumber XHTML dan CSS juga tidak luput ditelisik.

Blog rudyazhar.com belum memiliki menu ‘skip to main content’. Tidak ditemukan fitur kotak pencarian. Fitur langganan tulisan terbaru via surel juga belum ada. Mungkin Bang Rudy punya alasan tersendiri untuk hal-hal tersebut.

Judul tulisan di halaman tunggal/’single post’ tidak berupa tautan yang bisa diklik. Perlu tidaknya, ini memang menimbulkan perdebatan. Pendapat saya untuk hal ini bisa dilihat di tulisan ‘Another reason for self linking post title‘ (Dani Iswara .com). Intinya, tautan aktif atau ‘self-linking’ di judul tulisan itu masih perlu. Tapi tidak untuk ‘self-linking’ di konten yang cenderung mengecoh pengguna!

Tag <label> tidak disertakan mendampingi textarea. Ini terkait semantik dan aksesibilitas bagi pengguna pembaca layar komputer/’screen reader’. Untuk pengingat, logika sederhananya, jika tag input diberi label, mengapa textarea tidak?

Di mana lokasi label untuk tiap tag input identitas pengomentar? Ada pertentangan antara kebergunaan dan aksesibilitas di sini. Label di kanan ‘input’ tampak lebih nyaman dilihat mata. Tapi, lebih aksesibel dan logis jika label terbaca lebih dulu oleh pembaca layar komputer. Pernah saya tulis di ‘Label left align followed by input field’ (Dani Iswara .Net).

Beberapa bentuk ‘listing’ yang memakai CSS list-style-image seperti di halaman arsip blog rudyazhar.com berpeluang kehilangan kebergunaan struktur ketika gambar tidak ditampilkan.

Bagaimana dengan tanda baca titik dan koma di akhir tiap tag li, perlukah? Setelah meninjau Odiogo—suatu layanan ‘podcast’ gratis, saya menganggap tanda baca jeda itu perlu. Lengkapnya ada di ‘Accessibility review of Odiogo‘ (Dani Iswara .com).

Halaman 404 cukup informatif. Judulnya OOPs! Lookout for that banana peel!. Tampak biasa saja? Jika bukan singkatan, mengapa kata “OOPs” ada huruf kapitalnya? Silakan membaca pendapat saya di Aksesibilitas Web Huruf Kapital (Dani Iswara .com).
Di halaman tersebut saya juga menemukan kalimat Try searching using the form in the sidebar. Bang Rudy mungkin lupa mengeditnya.

Identifikasi bahasa belum disertakan di deklarasi

<html xmlns="http://www.w3.org/1999/xhtml" lang="...?">

Ini berguna bagi pembaca layar komputer untuk mengidentifikasi dialek bahasa konten.

Ada duplikasi tag

<meta name="generator" content="WordPress 3.0.1" />

Terkait dengan keamanan, ada yang menyarankan untuk menghilangkan tampilan informasi versi ini.

Apakah bagian/elemen <div class="navigation"> akan dimanfaatkan, atau lupa dihapus?

Elemen .yellow yang memuat info Gravatar sebaiknya dibuat sama lebar dengan kolom isian komentar. Misal pengaturan padding:12px dan width:97% mungkin membantu. Beberapa cara penulisan CSS masih berpeluang diringkas.

Entah apakah tag <div> yang cenderung ‘div-itis’—‘infeksi’ div—di ‘threaded comment’ memang dibutuhkan. Akan menjadi ‘article-itis’ di HTML5?

Untuk aksesibilitas Web yang maksimal, fitur ‘javascript’ onmousedown pada “kutip” sebaiknya disertai onkeydown bagi pengguna papan ketik (‘keyboard’, ‘keypad’).

Perkakas penguji aksesibilitas semiotomatis achecker.ca memberi peringatan sejenis ini, Repair: Replace your b (bold) elements with em or strong. Saya tidak setuju sepenuhnya karena belum menemukan sumber tepercaya terkait rekomendasi dimaksud untuk tipe dokumen XHTML. Pemakaian tag ini terkait juga dengan tag XHTML di kolom komentar (Dani Iswara .com). Mana yang sudah dianggap usang/’deprecated’, mana yang didefinisikan ulang di HTML5. Layak menjadi perhatian bagi yang berminat mengganti doctype blognya. Atau, serahkan pada ‘plugin’ dan pengaturan functions.php saja?

Tinjauan ini disesuaikan dengan Evaluasi Weblog Mandiri versi saya (Dani Iswara .com).

Silakan koreksi dan tambahannya.

Dani Iswara, [myfirstnamelastname]@gmail.com.

unEssential.

26 comments to "Tinjauan Blog RudyAzhar.com"

  1. Rudy Azhar

    saya masih bingung tentang elemen div pada navigation Bli…

    makasih banyak udah ditinjau, walau saya lihat masih banyak yang perlu dibenahi.

  2. ArdianZzZ

    Sebenarnya saya kurang suka mengomentari desain blog orang, tetapi ini kan review jadi bolehlah. :)

    Saya melihat dari desain interface, desain tidak cukup clear. Masalahnya klasik, penggunaan padding, spasi, dan ukuran-ukuran yang tidak konsisten dan sepertinya kurang tepat sasaran.

  3. dani

    Bang Rudy Azhar,
    Coba lihat kode sumber di ‘single post’. Ada elemen <div class="navigation"> di atas kolom isian komentar (di atas dan bawah commentlist) yang masih kosong, hanya dekoratif. :)

  4. dani

    Ardianzzz,
    Ini juga ‘by request’ dengan persyaratan tertentu.
    Menurut saya, melihat detail karya orang lain itu untuk saling mengoreksi.

  5. indam

    Wow, salut atas koreksinya ‘bener-bener hampir sempurna’.

    Btw, komentar di blog ini agak sulit buat tulis komentar, form inputan name, email, url nampak tidak terlihat. Disitu hanya ada border-bottom.

    Browser yang saya gunakan operamini 4.2.

  6. ganda

    Dari sisi saya, blog Bang Rudy Azhar ini tergolong yang berat loadnya. Masalahnya memang di koneksi internet saya. Huhuhu…

  7. dani

    indam,
    Terima kasih apresiasinya.

    Yang border-bottom itu memang disengaja dengan sadar, maaf. :)

    ganda,
    Saya pun serupa. Koneksi Internet merayap wajib disiasati.

  8. dani

    Salah satu contoh tinjauan di situs Practical eCommerce dari sisi pengguna pembaca layar komputer.

  9. ArdianZzZ

    @Dani, hehe bener saya setuju. Sekedar curhat, saya pernah menjumpai kritik desain layout pada sebuah blog, eh si pemilik blog bilang tidak mengerti HTML & CSS.

    Kalau diminta, saya sendiri dengan senang hati untuk mengoreksi sesuai dengan prespktif pribadi saya. :)

    Saran untuk unessential side, itu list-style nya diganti dengan yang square, biar matching dengan sans-serif yang digunakan… ;)

  10. dani

    Ardianzzz,
    Terima kasih masukannya. Dulu memilih memakai yang standar untuk list-style karena tidak ingin menambah ukuran CSS.

  11. indam

    dani,
    owh disengaja toh. Awalnya saya berpikir kalau ini cuma di opera mini.
    Themes ini bernilai lebih karena fleksible.

  12. Rudy Azhar

    Bli Dani,
    Oh iya, memang sebenarnya untuk menampilkan komentar yang banyak alias WP-Pagenavi untuk komentar.

    ArdianZzZ,
    saya minta blog saya juga ditinjau dari sudut Desain Interface juga kalau bisa, tidak perlu dibuat sebuah tinjauan di blog ArdianZzZ, dikirim lewat email juga saya sangat senang menerimanya.

  13. ardianzzz

    Mas Rudy, mungkin ada baiknya jika desain yang akan ditinjau sudah benar-benar final dari sudut pandang Mas Rudy. Pendapat & kritik yang masuk dapat menjadi bahan revisi.

  14. Rudy Azhar

    ArdianZzZ,
    menurut saya sih saat ini udah final, yang saya rubah hanya backgroundnya saja yang lain masih seperti yang dulu kecuali yang udah ditinjau Bli Dani diatas.

  15. Optimasi pada area komentar | blog Rudy Azhar

    […] nama, email & alamat situs. — Hal ini jadi tidak logis — Dan setelah blog RudyAzhar ini ditin­jau oleh Bli Dani maka urutan­nya saya buat logis, yaitu Kolom isian komen­tar saya letakkan diatas kolom isian […]

  16. dani

    Bang Rudy,
    Terkait WP-PageNavi, apa mungkin bisa menerapkan trik seperti tulisan Pakde Harry ini ya (Senarai Navigasi Previous-Next-Post; side22.com)?

  17. iskandaria

    Blog RudyAzhar.com tergolong berat ketika diakses menggunakan koneksi modem USB saya (dengan jaringan 3G). Kecepatan tampilnya agak lama, terutama ketika diakses pertama kali atau ketika cookies/cache sudah dihapus. Jika cookies/cache belum dihapus sih tidak begitu lama.

  18. dani

    iskandaria,
    Saya malah hanya dapat GPRS/EDGE. Tapi berkat menonaktifkan beberapa fitur, jadi kecepatan akses bukanlah keluhan lagi.

  19. Harry

    Rayimas…
    Offtopic… saya hanya ingin minta maaf dengan pertanyaan saya pada sesi komentar sebelumnya. Ternyata tanda-baca full-stop untuk mengakhiri heading dan atau pranala dalam senarai, sedikit kurang nyaman di telinga. Ya… saat si Sam melafalkan Headings list dan Links list pada Fangs, tanda baca ‘titik’ benar-benar di baca ‘dot’. Tapi heading yang di akhiri dengan ‘colon’, atau di apit ‘carik pareren’ masih di tolerir. Uurgh… saya sudah terlanjur malas kalau harus menyunting tulisan-tulisan yang sudah uzur. Maaf, belum mencoba dengan JAWS.

  20. Punctuation usability for screen reader - Unessential Side - Tidak Penting

    […] Harry, owner of side22.com, leaving comment on my review post of Rudy Azhar’s blog. He said that Fangs—screen reader emulator—will be read the full-stop in the list items […]

  21. Sandro Yosua

    Setelah saya periksa rudyazhar.com, saya tidak ada mengalami apa yg agan-agan keluhkan. Seperti proses loadnya lama.

  22. dani

    Sandro Yosua,
    Bang Rudy sudah melakukan beberapa perombakan yang dianggapnya perlu.

  23. Sandro Yosua

    Saya suka theme mobilenya bli Dani…
    Cepat saat diakses

  24. dani

    Sandro Yosua,
    Terima kasih apresiasinya.
    Sebenarnya itu bukan murni tema bergerak. Hanya beberapa pengoptimalan di sisi CSS. :)

  25. Dicky Syaputra

    Om, saya juga mau dong di tinjau blog saya, saya baru belajar buat theme wp sendiri.. mohon tinjauannya ya om..

  26. dani

    Dicky Syaputra,
    Maaf, sementara ini saya cuti nge-review dulu ya.. :)

Leave comment


All XHTML markups will be held for moderation. Keep on topic, please.