KESALAHAN DESAIN TEMPLATE YANG PALING LAZIM DAN TIDAK DISADARI

Cobalah buka website, blog dan beberapa jenis blog melalui McBook, iPad atau iPhone tampilan website terkadang menjadi aneh, misalnya pada dua template yang dipakai oleh teman teman blogger yang saya jadikan contoh pada artikel kali ini adalah buatan para desainer template lokal yang sudah memiliki nama. Saya tahu ini versi gratis, namun juga ternyata kesalahan serupa terjadi pada template berbeli.
Perhatikan bentuk "search button" atau "tombol pencarian" yang saya tunjuk dengan panah warna merah. Tombol tersebut tampil sempurna hanya pada latop berbasis windows dan hape berplatform Android. Namun pada gambar diatas tampilannya menjadi aneh karena tombol tersebut berubah bentuk dan ukuran dari semestinya pada saat dibuka melalui McBook, iPad dan iPhone!
Sobat tahu bukan, pada salah satu list terdapat item: "ditampilkan melalui perangkat high end" dan perangkat high end itu digunakan diluar negeri dalam bentuk produk bermerek Apple. Wajar saja tampilan bisa menjadi nilai yang buruk terhadap website kita.
Saya mencoba menginspeksi elemen dan lalu mencoba merobah angka size tombol tersebut ternyata mengakibatkan tampilan pada perangkat Andorid dan Windows menjadi membesar dan tombolnya membengkak. Tentu saja bukan tugas user template memperbaiki tampilan template pihak ketiga yang sedang dia pakai bukan?

Sebenarnya kode HTML pencarian seperti contoh dibawah ini dapat diterima oleh semua perangkat dengan UI yang berbeda, ketika saya menerapkannya dan membukanya melalui iPad tampilannya tidak berbeda dengan tampilan pada PC windows:

<div class="topnav">

<a class="active" href="/">Beranda</a>

<a href="#about">Perihal blog ini</a>

<a href="#contact">Kontak</a>

<a href="#other">Lainnya</a>

<input type="text" placeholder="Search..">
</div>

Akan tetapi ketika saya mencoba memasukan link pencarian dan merubah kode yang di sorot warna kuning sebagai berikut:

<div class="topnav">

<a class="active" href="/">Beranda</a>

<a href="#about">Perihal blog ini</a>

<a href="#contact">Kontak</a>

<a href="#other">Lainnya</a>

<div id='bponavid'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' size='25' type='text' placeholder='cari...'/></form> 

</div>

Tampilan tombol menu pencarian berubah persis seperti gambar diatas pada perangkat iPad dan iPhone saya. Anda dapat mengabaikan size'25' pada kode diatas karena dia tidak akan merobah apa apa. Dan sekalipun anda mencoba merobah kode CSSnya.

Kemungkikan besar kesalahan ini terjadi pada saat pembuat template memodifikasi tampilan tombol tersebut dengan mencomot dan mencampur kode diluar aturan lazim.

Saya hanya ingin mengingatkan jika sobat mencoba membuat template tidak ada salahnya melihat tampilannya juga melalui perangkat yang berbeda beda, ada sekitar 2 lusin template yang dipakai teman teman blogger yang saya amati memiliki tampilan "cacat" seperti diatas.

Kok saya kepo sekali ya. Wajar dong karena saya sedang membuat dan mendesain tema tema web dan baru memulai mencoba belajar membuat template template blogger dan Wordpress.
Kesalahan bagai jerami kering yang hanyut dipermukaan air


Comments

  1. Kepoin template blog saya dong

    ReplyDelete
    Replies
    1. sudah, itu template yang bagus terutama yang nalagila sudah valid dan fix

      Delete
  2. Wah, kok hanya template Blogger dan Wordpress. Bisa nih, minta dibuatkan template Joomla.

    ReplyDelete
    Replies
    1. Mas Hendro saya gak ngerti Joomla baru coba buat akun hehehe

      Delete

Post a Comment

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP