Archive

Archive for November, 2009

Website dengan user interface yang kurang baik

November 30, 2009 8 comments

Hmmm, sebenarnya ga enak juga nge-judge website orang dengan istilah “ugliest website/website terburuk”, karena saya juga belum tentu bisa membuat website dengan UI (User Interface) yang baik. Namun berhubung ini adalah tugas kuliah, maka dengan “sangat terpaksa” saya harus menulisnya.

Bermodal googling dengan keyword “ugliest website“, peringkat teratas ternyata jatuh kepada website www.havenworks.com, namun ternyata saya kalah cepat karena sudah di “ambil” oleh saudara ihsanrama (Note: tugas ini tidak memperbolehkan 2 orang me-review website yang sama). Setelah sedikit “bersusah payah”, akhirnya saya menemukan website lain yang tidak kalah “buruk” nya dengan website tersebut, yaitu yvettesbridalformal.com.

Berikut adalah screenshot dari website tersebut:

Screenshot yvettesbridalformal.com

Screenshot yvettesbridalformal.com

Beberapa komentar saya tentang website ini antara lain:

  1. Tidak jelas isi dari website ini tentang apa, setelah “berputar-putar” cukup lama barulah saya tahu bahwa website ini berisi tentang penyewaan/pembuatan baju, seperti baju pengantin dan lain-lain. Seharusnya ini bisa diletakkan di title atau header dari website untuk mempermudah visitor/pengunjung.
    .
  2. Tidak jelas mana header, mana menu navigasi, mana content, ini tentunya membingungkan user.
    .
  3. Warna dasar yang sangat beragam, kalau saya tidak salah, dalam pembuatan website pilih 2 atau maksimal 3 warna dasar saja.
    .
  4. Full color, sangkin banyak nya warna, sama sekali tidak ada white space.
    .
  5. Background yang “aneh”, entah apa maksudnya background seperti itu, menurut saya lebih baik kalau di beri warna putih saja.
    .
  6. Peletakan menu yang “amat sangat” berantakan (menurut saya), seharusnya menu-menu tersebut di grouping/kelompokkan, dan diberi satu warna.
    .
  7. Scroll ke bawah yang terlalu panjang, dan scroll ke kanan yang seharusnya dihindari.
    .
  8. Terlalu banyak gambar, memang benar bahwa “satu gambar bisa lebih berarti dari 100 kata”, tetapi kalau terlalu banyak gambar rasa nya tidak bagus juga, apalagi tidak dijelaskan maksud dari gambar itu sendiri. Dan juga loading website menjadi sangat berat.
    .
  9. Background sound, tidak jelas maksudnya, yang pasti hal ini kurang lazim dalam penggunaan website.
    .
  10. Last but not least, setelah pada point-point sebelumnya saya “mencaci maki” website ini, khusus untuk point terakhir, saya akan memberikan pujian untuk website ini, yaitu “Model nya yang lumayan cakep”, hehehe…

Sekian review dari komentator website amatir ini, kalau ada kurang/lebih mohon ditambahi/dikurangi.

Categories: Kuliah

Fix CSS 2 column height problem with jquery

November 10, 2009 5 comments

Take a look for “normal” CSS 2 column example here.

Normal CSS 2 Column

Normal CSS 2 Column

Now, the question is “What if the main/leftside is shorter than the sidebar?”, then you’ll get something like this.

CSS 2 Column Different Height

CSS 2 Column Different Height

That’s the problem, the div (left and right) doesn’t know and cover each other, it’s different with Tables layout. But don’t worry, it can be fix with little jQuery trick by compare each side height.

Here’s the code:

<script language=”javascript”>
$(document).ready(function() {

// CSS height fix
var left = $(“div#main”).height();
var right = $(“div#sidebar”).height();

if(left > right)
$(“div#sidebar”).height(left);
else
$(“div#main”).height(right);

});
</script>

The final result is here.

CSS 2 Column jQuery Fix

CSS 2 Column jQuery Fix

Categories: Tips 'n trick Tags: ,