Kalau Boleh Dianggap Cermin : Desain

Karena didepan cermin, bisa jadi kita tertawa-tawa sendiri, atau jadi bersyukur akan eloknya paras kita kemudian berdoa supaya di elokkan pula hati kita, atau malah mengutuk satu jerawat yang sebenarnya tidak terlalu bermasalah :). Apa yang akan kita telaah ini hanya satu dari sekian contoh survei yang dilakukan oleh smashingmagazine.com pada tanggal 24 Juli lalu, khususnya dalam menilai desain blog-blog besar, atau blog popular saja. Beberapa hari yang lalu tulisan tersebut saya baca, kemudian ingin rasanya saya sampaikan lagi pada kawan-kawan tentu dengan kapasitas dan segala kekurangan saya. Kalau boleh mengingatkan, ini sama sekali bukan sebagai parameter mana yang benar dan salah, mana desain yang bagus atau desain yang tidak bagus. Karena jika berbicara permasalahan desain terutama pada desain blog atau situs, maka kita akan lagi-lagi terbentur dengan persoalan selera dan juga konten atau isi blog tersebut. Ada baiknya jika desain untuk blog kawan-kawan terpadu dengan tujuan lain yang sedang ingin dicapai, misalnya kemudahan kita membaca tulisan, atau variabel lain yang rasanya akan semakin terdukung dengan desain yang baik pula. Tidak seluruhnya saya bawakan, maka lagi-lagi saya ingin kawan-kawan menjadikan tulisan saya ini sebagai prioritas paling akhir dari referensi mengenai desain terbaik untuk blog kawan-kawan yang mungkin akan jauh lebih baik.

Sample yang digunakan adalah 50 blog dari "Technorati’s Top 100". Melihat bagaimana pengambilan sample yang dilakukan oleh smashingmagazine.com ini, kita kemudian akan semakin menyadari bahwa hasil survei yang dilakukan tidaklah selalu berarti yang terbaik. Untuk itulah kenapa saya beri judul, "Kalau Boleh Dianggap Cermin : Desain". Silahkan disikapi saja dengan apa yang terlintas, tapi lagi-lagi harus ditanamkan sejak awal, bahwa ini bukan berarti adalah desain terbaik, semuanya kembali pada kita masing-masing. Karena tidak sedikit saya mendengar beberapa kawan-kawan yang sudah "kadung nya'ah", "kadung tresno", "jatuh cinta", katanya, pada templates yang sedang digunakan. Jika masih ingat dengan kuis televisi asal luar negeri "Family Feud" yang pernah diadaptasi di Indonesia, maka mungkin bisa ambil tulisan ini sebagai 'kesenangan' semacam itu saja.

Untuk yang menggunakan Blogger atau Blogspot, tentu mudah jika ingin sekedar 'mencomot' satu atau dua poin yang Blog-blog ini gunakan. Untuk yang menggunakan Wordpress (.com), mungkin ini bisa dijadikan bahan pertimbangan dalam memilih-milih template yang akan digunakan, dari templates yang sudah disediakan.

1. Layout
Berbicara tentang desain blog atau situs sekalipun, maka tidak akan terlepas jauh dari bagaimana kita mengelola layout atau tata letak, yang jika kawan-kawan menggunakan Blogger atau Wordpress(.Org) sebagai mesin blog, maka akan mudah kita melakukan modifikasi. Apakah menggunakan 2 kolom atau 3 kolom-lebih? Apakah diletakkan ditengah atau rapat kiri? Menggunakan fixed-layout atau mungkin fluid-layout?.

1.1. Jumlah kolom yang digunakan dalam templates.
Jika bicara berapa banyak kolom yang digunakan, maka akan kembali pada permasalahan filosofis, atau masalah 'selera' yang saya sebut diatas tadi. Jadi mungkin, berapa banyak jumlah kolom akan sangat bergantung dengan bagaimana isi dan apa saja yang ingin disajikan. Penggunaan layout dengan desain 2 kolom, dari hasil pengalaman sendiri akan memberi kontribusi konsentrasi yang besar terhadap isi posting itu sendiri, bukan pada "pernak-pernik" yang disematkan pada sidebar. Tapi sebaliknya, juga terkadang menyulitkan jika memang "pernak-pernik" itu sangat dibutuhkan.

• 58% menggunakan layout 3 kolom atau lebih
  (TalkingPointsMemo, CopyBlogger, Mashable, Lifehacker),
• 42% menggunakan layout 2 kolom
  (Zen Habits, GigaOM, Google Blog, Seth Godin, Boing Boing).

1.2. Margin atau jarak tepi. Ditengah atau Rapat-Kiri ?
Karena semakin banyak pengguna internet yang menggunakan resolusi tinggi untuk komputernya, maka memposisikan kolom-kolom layout yang seimbang antara margin atau jarak tepi kanan dan kiri menjadi pilihan yang lebih sering digunakan.

• 94% dari blog-blog ini menggunakan centered-layout.

1.3. Fixed atau Fluid (elastis/flexibel)
Mungkin ini yang cukup aneh khususnya untuk saya, karena ternyata dominasi fixed layout cukup tinggi, dibanding layout yang elastis atau mengikuti lebar browser yang digunakan.

• 92% blog menggunakan fixed-layout,
• 8% menggunakan fluid layout atau paduan antara fixed-layout dengan elemen halaman fluid-layout.
  (Engadget, Smashing Magazine, Gigazine, Coorks dan Liars).

1.4. Lebar layout (fixed)
Jika memang layout tidak flexibel lebih banyak digunakan, maka selebar apa yang digunakan blog-blog ini. Jelas ini adalah sebuah pertimbangan yang harus dipikirkan baik-baik. Memang benar, bahwasannya penggunaan layar monitor ber-resolusi tinggi sudah kian banyak digunakan. Tapi sampai sebesar apa?

• 56% berlebar 951 – 1000px
  (ars technica, Lifehacker, TechCrunch, ProBlogger, A List Apart, TMZ, Wired, GigaOM, Joystiq, Zenhabis, Copyblogger, Consumerist, Slashfilm),
• 20% berlebar 901 – 950px
  (Huffington Post, BoingBoing, TreeHugger, Dooce, Blogoscoped, SearchEngineLand),
• 15% berlebar 801 – 900px
  (Neatorama, Kottke, DailyKos, Perezhilton, TUAW, Yanko Design, Scobleizer),
• 9% berlebar ≤ 800px
  (PostSecret, Seth Godin, Google Blog, BeppeGrillo.it).

1.5. Perbandingan luas area ISI posting dengan lebar keseluruhan. (fixed-layout)
Seberapa banyak lahan yang kita gunakan untuk isi posting atau isi utama blog kita?. Tentu secara kasar, kita akan menjawab tentu isi posting harus lebih di dominasikan ketimbang yang lainnya, misalnya sidebar. Kita ambil sebuah contoh blog yang terlihat pada gambar disamping kanan ini. Boingboing.net menggunakan 550px dari keseluruhan lebar layout 870px. Ini berarti prosentase isi terhadap lebar layout, perbandingan antara isi posting dengan sisanya adalah sampai dengan 63%. Memang akan agak aneh sekaligus mengganggu jika memaksakan kombinasi terbalik. Salah-salah malah mungkin pembaca tidak sanggup mengerti dimana letak isi yang sebenarnya. Atau jika memang ingin melakukan kombinasi, maka ada baiknya tetap ada satu posting yang lebih ditonjolkan dari isi lain. Mengabaikan kenyamanan pembaca (-dalam hal desain), tentu juga akan juga serta merta menurunkan nilai estetikanya.

• 96% menghabiskan lebih dari setengah (50%) lebar keseluruhan untuk isi posting.
  
  (kecuali: CopyBlogger (48%), SlashFilm (48%),
• 54% menghabiskan 50 – 60% lebar layout untuk isi posting.
  (Mashable, Lifehacker, Kottke, Blogoscoped, A List Apart, BoingBoing, DailyKos, TreeHugger, Scobleizer, Problogger, TUAW, bits.blogs.nytimes.com)
• 46% menghabiskan 60 – 70% lebar layout untuk isi posting.
  (ars technica, TechCrunch, GigaOM, Dooce, Zenhabits, CNN Political Ticker, CrunchGear)
• maka nilai rata-ratanya adalah 58% dari keseluruhan lebar layout dipergunakan untuk isi posting oleh blog-blog ini.

2. Tipografi
Setelah layout, kita akan beranjak pada sudut pandang tipografi sebuah desain blog. Sebuah sudut pandang memilih dan menata huruf dengan pengaturan penyebarannya pada keseluruhan ruang layout, sehingga menciptakan kesan tertentu yang membantu menolong pembaca tentu masih dalam kerangka kenyamanan pembacaan.

2.1. Pengaturan kombinasi tema warna
Apakah "hitam diatas putih", ataukah sebaliknya. Sebagai analisis tambahan, pernah mybloop.com menggunakan layout berlatar gelap. Pada suatu waktu, saya yang juga ikut 'numpang' file disana "dihadiahi" layout baru dari mybloop. Penjelasan mereka, "Supaya tampak lebih profesional, dibanding dengan latar gelap (hitam)". Entah sejauh mana kebenaran pendapat itu, tapi terlihat juga dari yang terjadi pada blog-blog yang sedang kita amati ini.

• 98% dari top-blog ini menggunakan teks gelap diatas latar putih atau terang.

Hanya postsecret.blogspot.com yang menggunakan kombinasi sebaliknya. Tapi lagi-lagi saya katakan, itu tidak berpengaruh meninjau topik yang dibawakan oleh postsecret juga saling bersesuaian dengan kombinasi wana seperti ini.

2.2. Banyaknya karakter huruf per-baris.
Untuk menjaminkan kenyamanan pembacaan, tentu banyaknya karakter dalam satu baris pada posting, juga cukup penting jika diperhatikan. Tentu kenikmatan membaca tulisan dengan jumlah karakter (termasuk spasi, titik, koma, dan sebagainya) yang terlalu banyak dalam satu barisnya, akan lebih merepotkan dibanding dengan yang lebih sedikit. Tapi terlalu pendek, juga akan menyebabkan tulisan terus terlalu 'menjulur' ke bawah, yang bisa jadi akan membuat pembacaan menjadi lebih merepotkan.

Dalam melakukan penghitungan jumlah karakter, smashing magazine menggunakan seting standar browser yang disertakan pada style-sheet masing-masing blog. Dan hasil yang didapat adalah sebagai berikut.

• 10% menggunakan 65-74 karakter per-baris
  (PostSecret, Beppegrillo, Perez Hilton, Scobleizer, Blogoscoped),
• 18% menggunakan 75-84 karakter per-baris
  (Dooce, Blogs.nytimes.com, Joystiq, CopyBlogger, TUAW, Slashfilm),
• 34% menggunakan 85-94 karakter per-baris
  (Lifehacker, Huffington Post, Kottke, ars Technica, Huffington Post, BoingBoing, Seth Godin, Treehugger, Problogger),
• 18% menggunakan 95-104 karakter per-baris
  (Mashable, ReadWriteWeb, Smashing Magazine, Google Blog, A List Apart, Search Engine Land),
• 16% menggunakan lebih dari 105 karakter per-baris
  (Engadget, TechCrunch, GigaOM, Wired, TMZ).

Dan yang cukup menarik. Tidak satupun blog-blog tersebut menggunakan justified text-alignment (seperti blog saya ini :p ), 100% blog menggunakan left text-alignment atau teks rapat kiri.

2.3. Font pada body-text dan ukurannya
Keterbatasan font standar terutama ketika sebuah tulisan harus online, juga akan membuat pilihan pemakaian font akan cukup sempit. Bagaimana dengan top 50 kita ini?.

• 34% menggunakan Verdana (sans-serif) untuk body-text
  (A List Apart, Kottke, TUAW, CopyBlogger, Dooce, ars technica, TechCrunch, Smashing Magazine),
• 24% menggunakan Lucida Grande (sans-serif, included with Mac OS X)
  (Zenhabits, Mashable, Lifehacker, CrunchGear, Thinkprogress),
• 18% menggunakan Arial (sans-serif)
  (ReadWriteWeb, Engadget, Google Blog, CNN Political Ticker),
• 14% menggunakan Georgia (serif)
  (Scobleizer, GigaOM, Wired, BoingBoing, Huffington Post),
• 6% menggunakan Trebuchet MS (sans-serif)
  (Andrew Sullivan, Seth Godin, Postsecret),
• Helvetica Neue (ProBlogger) dan Times New Roman (TPM) hanya digunakan oleh kedua blog ini.

Sedang untuk ukuran (bila menggunakan satuan 'em' maka dikonversi kemudian dibulatkan).

• 34% blog menggunakan 12px
  (SearchEngineLand, TUAW, Mashable, ars technica, Engadget, Smashing, DoshDosh, TreeHugger),
• 30% blog menggunakan 13px
  (Consumerist, CopyBlogger, Zenhabits, Valleywag, Lifehacker, Huffington Post, BoingBoing, Seth Godin, Google Blog),
• 14% blog menggunakan 14px
  (TPM, GigaOM, Wired, ReadWriteWeb, Gigazine, ProBlogger),
• 12% blog menggunakan 11px
  (A List Apart, Kottke, Neatorama, Dooce, TechCrunch, Dailykos),
• 4% blog menggunakan 15px
  (Scobleizer),
• sisanya menggunakan ukuran 10px, 16px dan 17px.

2.4. Font pada Headline-text atau Judul Posting dan ukurannya
Terakhir akan kita tinjau ukuran dan font apa yang banyak digunakan oleh blog-blog top ini untuk menghias judul tulisan di blog mereka.

• 30% blog menggunakan Arial (sans-serif)
  (CNN Political Ticker, Scobleizer, TPM, Crooksandlliars, Joystiq, Dooce, PerezHilton, ReadWriteWeb, Engadget, Google Blog, TreeHugger),
• 22% menggunakan Georgia (serif)
  (A List Apart, Andrew Sullivan, Blogs.nytimes.com, GigaOM, Wired, Huffington Post, BoingBoing),
• 8% menggunakan Lucida Grande (sans-serif)
  (Tuaw, ThinkProgress, Lifehacker, Crunchgear),
• 8% menggunakan Helvetica (sans-serif)
  (Zenhabits, Mashable, ars technica, Smashing Magazine),
• 6% menggunakan Verdana (sans-serif)
  (Blogoscoped, Neatorama, DailyKos),
• 6% menggunakan Trebuchet MS (sans-serif)
  (Slashfilm, Postsecret, Seth Godin),
• 4% menggunakan Helvetica Neue (sans-serif)
  (CopyBlogger, ProBlogger),
• Sisanya adalah Calibri (SearchEngineLand), American Typewriter (Valleywag), Lucida Sans Unicode, Franklin Gothic Medium, Tahoma (TechCrunch) dan tanpa headline sama sekali (Kottke) yang digunakan masing-masing untuk satu blog saja.

Untuk ukuran yang dipakai adalah sebagai berikut :

• 24% menggunakan 20-22px
  (BoingBoing, PerezHilton, Blogoscoped, Google Blog, TechCrunch, ReadWriteWeb),
• 22% menggunakan 23-25px
  (CopyBlogger, ProBlogger, Lifehacker, Mashable),
• 22% menggunakan 17-19px
  (Tuaw, Scobleizer, TreeHugger, A List Apart, Gizmodo),
• 16% menggunakan 14-16px
  (YankoDesign, Dailykos, ars technica, Seth Godin),
• 6% menggunakan 26-29px
  (Engadget, GigaOM, Wired, Dooce),
• 0% menggunakan 10-13px untuk judulnya.

Ya, seperti itulah yang bisa tersampaikan oleh saya. Sekiranya kawan-kawan ingin sekedar bercermin, dipersilahkan bagi yang ingin. Atau jika setelah membaca kemudian lelah, silahkan istirahat sejenak pejamkan mata 2 menit, lalu lanjutkan perjalanan aktifitas kawan-kawan. :)