Diperbarui 12 November 2017 oleh Dani Iswara
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
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.
26 tanggapan untuk “Tinjauan Blog RudyAzhar.com”
saya masih bingung tentang elemen div pada navigation Bli…
makasih banyak udah ditinjau, walau saya lihat masih banyak yang perlu dibenahi.
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.
Bang Rudy Azhar,
Coba lihat kode sumber di ‘single post’. Ada elemen
<div class="navigation">
di atas kolom isian komentar (di atas dan bawahcommentlist
) yang masih kosong, hanya dekoratif. :)Ardianzzz,
Ini juga ‘by request’ dengan persyaratan tertentu.
Menurut saya, melihat detail karya orang lain itu untuk saling mengoreksi.
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.
Dari sisi saya, blog Bang Rudy Azhar ini tergolong yang berat loadnya. Masalahnya memang di koneksi internet saya. Huhuhu…
indam,
Terima kasih apresiasinya.
Yang
border-bottom
itu memang disengaja dengan sadar, maaf. :)ganda,
Saya pun serupa. Koneksi Internet merayap wajib disiasati.
Salah satu contoh tinjauan di situs Practical eCommerce dari sisi pengguna pembaca layar komputer.
@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 dengansans-serif
yang digunakan… ;)Ardianzzz,
Terima kasih masukannya. Dulu memilih memakai yang standar untuk
list-style
karena tidak ingin menambah ukuran CSS.dani,
owh disengaja toh. Awalnya saya berpikir kalau ini cuma di opera mini.
Themes ini bernilai lebih karena fleksible.
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.
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.
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.
[…] nama, email & alamat situs. — Hal ini jadi tidak logis — Dan setelah blog RudyAzhar ini ditinjau oleh Bli Dani maka urutannya saya buat logis, yaitu Kolom isian komentar saya letakkan diatas kolom isian […]
Bang Rudy,
Terkait WP-PageNavi, apa mungkin bisa menerapkan trik seperti tulisan Pakde Harry ini ya (Senarai Navigasi Previous-Next-Post; side22.com)?
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.
iskandaria,
Saya malah hanya dapat GPRS/EDGE. Tapi berkat menonaktifkan beberapa fitur, jadi kecepatan akses bukanlah keluhan lagi.
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.
[…] 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 […]
Setelah saya periksa rudyazhar.com, saya tidak ada mengalami apa yg agan-agan keluhkan. Seperti proses loadnya lama.
Sandro Yosua,
Bang Rudy sudah melakukan beberapa perombakan yang dianggapnya perlu.
Saya suka theme mobilenya bli Dani…
Cepat saat diakses
Sandro Yosua,
Terima kasih apresiasinya.
Sebenarnya itu bukan murni tema bergerak. Hanya beberapa pengoptimalan di sisi CSS. :)
Om, saya juga mau dong di tinjau blog saya, saya baru belajar buat theme wp sendiri.. mohon tinjauannya ya om..
Dicky Syaputra,
Maaf, sementara ini saya cuti nge-review dulu ya.. :)