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