Redesain Weblog Satu Kolom

April 26, 2009 – 03:11 by Dani Iswara. Words count: 536.
Last updated: Thursday, November 5, 2009 at 19:14.

Tiap desain web/blog beserta fiturnya biasanya memiliki dasar, konsep, dan maksud tertentu. Walau kadang hanya berdasarkan kesukaan pemilik/pengelolanya. Pun redesign blog menjadi satu kolom seperti sekarang ini.

Konsep umum yang mencoba dipakai:

  • standar web (semantik XHTML, CSS),
  • aksesibilitas,
  • kebergunaan (‘usability’).

Alasan tentang konsep tersebut, tentu saja karena kemudahan pemeliharaan dan penggunaan.

Desain satu kolom ini saya sebut kompak minimalis.

Mengapa satu kolom?

Alasan menggunakan satu kolom:

  1. Tidak ingin repot dengan versi ‘mobile’ (lihat Konsep Web versi Mobile di Dani Iswara .Net)
    • Penggunaan float dan display di CSS bisa dikurangi.
    • Walau tidak harus, blog versi desktop dan ‘mobile’ akan memiliki antarmuka serupa tanpa plugin atau teknik lain.
  2. Mengurangi ‘hacks’ CSS (terutama untuk Internet Explorer 6).

    Untuk iPhone bisa saja menggunakan semacam

    <link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

    Sementara tidak saya gunakan. Mengapa harus ada perlakuan spesial yang tidak standar untuk perangkat tertentu?

Bagian header

‘Skip links’ masih ‘visible’. Setidaknya ada juga kata-kata atau kalimat yang mewakilkan isi blog ini di bagian ‘header’ atau ‘above the fold’–bagian penting yang tampak seperti pada lipatan koran, tanpa harus menggulung/’scroll’ ke bawah. Entah dari judul blog, ‘tagline’/semboyan, atau deskripsinya.

Jika ada pengunjung yang tersasar ke blog Dani Iswara .Net, lalu membaca deskripsinya, mungkin akan cepat memutuskan untuk melanjutkan atau tidak penelusurannya di blog ini.

Bagian navigasi

Fitur navigasi, pencarian, langganan ‘feed’, dan ‘breadcrumb’ juga saya tampilkan di ‘above the fold’.
Penelusuran berdasarkan kategori & tags ada di halaman Categories and Tags.

Bagian konten

Cukup menyajikan tulisan, tanggal (pemuatan dan pembaruan), kategori, tag, dan taut jumlah komentar.

Tiga taut ‘post meta data’ terakhir sengaja ditampilkan di akhir tulisan sebagai pilihan. Jika tertarik dengan isi tulisan, silakan lanjutkan membaca atau berkomentar. Jika tidak, silakan telusuri:

  • ‘Related/Random Posts’,
  • manfaatkan fasilitas pencarian,
  • atau buka arsip.

Bagian komentar

Urutan komentar tersusun semantik sebagai ‘ordered list’ (ol, li), tidak lagi div-itis seperti dulu.

Plugin ‘Browser Sniff’ masih terpasang untuk sekadar melihat peramban yang berkunjung. Karena saya jarang meninjau statistik blog ini. ‘Google analytics’ pun tidak. :)

Fitur ‘reply to comment’ juga belum sempat saya aktifkan.

Plugin antispam model matematika akhirnya saya pasang kembali. Mengingat jumlah spam semakin meningkat. Ratusan spam dalam hitungan hari bukanlah hal yang mudah untuk menyeleksi ‘false positive’ diantaranya.

Bagian sidebar

Pada desain weblog satu kolom, pemakaian nama ’sidebar’ mungkin kurang tepat semantiknya. :)
Bagian yang ada di bawah konten ini cukup saya isi dengan 5 tulisan terkini saja. Agar tidak harus menggulung ke bawah terlalu banyak, khususnya pada laman/halaman awal.

Bagian footer

Dulu saya sempat memasang berbagai taut untuk validasi dan pengecek XML, XHTML, CSS, Semantik, status mobileOK, dan sebagainya.

Sebenarnya tujuannya hanyalah untuk evaluasi. Mengingat tidak semua taut tersebut bisa mudah dipasang di pelbagai peramban. Seperti di ekstensi Web Developer-nya Firefox. Lihat menambahkan validator dan ‘checker’ di Web Developer.

Bagian catatan kaki/’footer’ akhirnya saya redesain sedemikian rupa. Sehingga hanya kata-kata tersisa saat ini yang tercetak di ‘footer’, saat halaman blog dicetak ( ctrl+p ).

Redesain tanpa akhir

Tidak ada yang sempurna. Desain blog ini akan selalu dalam versi beta. Mungkin berubah sewaktu-waktu, kadang ‘error’ sekonyong-konyong. :)

Warna dominan sepertinya masih akan seputar varian hitam, biru, abu, dan putih.

Desain satu kolom ini belum saya coba di pelbagai peramban selain Firefox 3.x, Opera 9.x, dan Konqueror 3.5.x yang rutin terpakai.

Salah satu kekurangannya, desain satu kolom ini terkesan boros ruang di layar berukuran lebar.

Saran lainnya akan ditampung… :)

Entah kenapa, ‘trackback/pingback’ internal otomatis blog ini sudah berfungsi lagi…

Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.

Posted in category: Web Designs
Tags: , ,
42 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Redesain Weblog Satu Kolom by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

42 Responses to post titled: Redesain Weblog Satu Kolom

  1. Comment by gdenarayana on April 29, 2009 at 19:38:50
    using Mozilla Firefox 3.0.1 on Windows XP

    kel bareng sik bli ngae ane one column…aluh lan sing repot misi sidebar :)

  2. Comment by d3ptzz on April 29, 2009 at 20:42:42
    using Mozilla Firefox 3.0.8 on openSUSE Linux

    simple tapi menarik… bagus mas…

  3. Comment by Dani Iswara on April 29, 2009 at 20:59:01
    using Mozilla Firefox 3.0.9 on Gentoo Linux

    gdenarayana,
    ya..utk nambah variasi koleksi theme-nya bli wayan tuh.. :)

    d3ptzz,
    nuwun, ben gampang ngopeni, mas.. :)

  4. Comment by Helda on April 30, 2009 at 00:52:42
    using Mozilla Firefox 2.0.0.12 on Windows XP

    Tambah-tambahnya lumayan susah, Dok.
    Saya dapat yg puluhan.
    :mrgreen:

    Satu kolom memang simpel, apik wae.

  5. Comment by Dani Iswara on April 30, 2009 at 06:21:36
    using Mozilla Firefox 3.0.9 on Gentoo Linux

    Helda,
    iya nih, sori..sengaja diacak, biar ngga gampang ketebak si spammer.. :( ntar liat-2 hasilnya dl..baru masang soale..

  6. Comment by Deddy on May 1, 2009 at 19:02:21
    using Google Chrome 1.0.154.59 on Windows XP

    Pengen ganti themes juga nih. Konsep sih sudah ada, tp lg males utak atik css. hehehe… btw, tampilan 1 kolomnya fresh nih! keren!

  7. Comment by Dani Iswara on May 1, 2009 at 20:32:19
    using Mozilla Firefox 3.0.9 on Gentoo Linux

    Deddy,
    tq ded, punyamu dah bagus gitu, ngga usah dikulik lg deh :)

  8. Comment by Cahya on May 1, 2009 at 21:04:33
    using Mozilla Firefox 3.0.10 on Windows Vista

    He he…, sering edit HTML harus siap-siap sering dapat pesan “error” :)

    Hah…, koq pakai hitung-hitungan sih sekarang buat nulis…, untung ga pakai hitungan integral yang berlipat-lipat :D

  9. Comment by Dani Iswara on May 2, 2009 at 01:19:20
    using Mozilla Firefox 3.0.9 on Gentoo Linux

    Cahya,
    tp pesan error saya itu krn postingan sedang dikirim lalu Inet lelet..jd baru setengah page yg ter-save..

    itu jg salah satu alasan ngga maenan web 2.0 ala facebook :)

    maaf, terpaksa pake antispam..pernah make yg otomatis spt wp-spam-free, tp kinerja server jd nambah trus ditegur ama adminnya, tp itu versi plugin yg lawas..entah skrg..

    nerima spam ratusan dlm hitungan harian, trus kadang ada yg komentar normal ketangkep akismet, nyari false positive diantara ratusan komen tentu sangat menyakitkan! :)
    kl jawabannya 1-20 kan dah biasa..acak dikit lah..

  10. Comment by jenggo on May 2, 2009 at 03:33:41
    using Mozilla Firefox 3.0.8 on GNU/Linux

    Simple as usual.. Dari pertama berkunjung hingga sekarang tetep mempertahankan ciri khasnya.. Sip tenan..! Ahahaha..
    btw, bagi2 info aja nih mas..
    Klo mau punya statistik mirip google analytic pake Piwik (piwik.org) ajah mas, “jalannya” diserver kita sendiri..

  11. Comment by Dani Iswara on May 2, 2009 at 07:43:52
    using Mozilla Firefox 3.0.9 on Gentoo Linux

    jenggo,
    bukannya mempertahankan sih, mas..tapi emang cuman segitu aja mampunya :D
    makasi info piwik-nya, open source lagi..

  12. Comment by a! on May 2, 2009 at 23:47:48
    using Mozilla Firefox 3.0.10 on Windows XP

    kaget juga pas liat tampilan baru blog ini. maklum, suwe ora jamu. hehehe..

    satu kolom agak aneh, dok. mungkin karena belum biasa saja sih. lagian juga karena jd tidak ada tambahan lain di sidebar.

    but, blog jd keliatan lbh langsing. lebih seksi. lebih menggairahkan. :D

  13. Comment by Dani Iswara on May 3, 2009 at 06:46:28
    using Mozilla Firefox 3.0.10 on Gentoo Linux

    a!,
    pokoknya polos aja dah dulu..yg penting kontennya, bos :)

  14. Comment by riesurya on May 6, 2009 at 23:21:55
    using Mozilla Firefox 3.0.10 on Windows XP

    dokumentasi changelognya mengilhami untuk segera menyelesaikan redesain situs saya jg (biar keliatan diupdate…meski templatenya :D ).

    secara umum saya tidak merasa “tersesat” dengan desain baru ini – masih berasa citarasa mas Dani nih :)

  15. Comment by Dani Iswara on May 6, 2009 at 23:55:33
    using Konqueror 4.1.3 on openSUSE Linux

    riesurya,
    tq pak, iya ya..jd kayak changelog..pokoknya ini akan tetep versi beta.. :D nyicil..

  16. Comment by riesurya on May 16, 2009 at 18:26:44
    using Mozilla Firefox 3.0.10 on Windows XP

    Baru liat lagi dan ngeh (apa pas kemarin-2 blom nyadar ya) . bannernya cool tuh. deskriptif banget ‘Dokter ngeBlog’ :D

  17. Comment by Dani Iswara on May 16, 2009 at 19:58:14
    using IceWeasel 3.0.9 on Debian GNU/Linux

    riesurya,
    blm nemu ide lain, pak..sementara itu dulu lah..sekadar aja ada :D

  18. Comment by rismaka on June 23, 2009 at 02:30:52
    using Mozilla Firefox 3.0.10 on Windows XP

    Penggunaan float dan display di CSS bisa dikurangi.

    Mas, Memangnya ada pengaruhnya dari segi tampilan atau performa?

  19. Comment by rismaka on June 23, 2009 at 02:33:36
    using Mozilla Firefox 3.0.10 on Windows XP

    Kenapa tidak memakai wp-stats aja mas jengg? Toh dijalankannya di server juga, dan tidak memakan resource.

  20. Comment by rismaka on June 23, 2009 at 02:53:24
    using Mozilla Firefox 3.0.10 on Windows XP

    Menurut saya, plugin “browser sniff” memang cukup bagus, tampilannya pun oke.
    Usability-nya? Hmm mungkin di sisi admin sangat penting.
    Tapi apakah penting juga bagi pengunjung? Hmm itu subjektif.
    Dari segi performa? Hmm seperti “kutu” yg beranak pinak sejalan dengan banyaknya komentar. Banyak komentar » banyak logo/gambar dan avatar » banyak HTTP request » boros bandwidth » animasi tab-bar yg berputar terus » pusing :D

    Mungkin memang kembali lagi ke falsafah hidup: hidupngeblog itu pilihan

  21. Comment by rismaka on June 23, 2009 at 03:00:50
    using Mozilla Firefox 3.0.10 on Windows XP

    Satu lagi dok, cuma info, plugin “quiz” (yg saya pakai di blog saya) ternyata cukup efektif menghalangi spam biarpun pertanyaannya itu statis.

    Saya udah set pertanyaan gampang (misal 45+1+1=47), tapi herannya masih ada blogger yg protes, katanya bikin capek ngisinya, kayak anak TK, bla bla bla… :D

  22. Comment by Dani Iswara on June 24, 2009 at 10:21:08
    using Mozilla Firefox 3.0.11 on Gentoo Linux

    rismaka,
    cuman masalah kompatibilitas di layar kecil aja kayaknya.

  23. Comment by Dani Iswara on June 24, 2009 at 10:24:10
    using Mozilla Firefox 3.0.11 on Gentoo Linux

    rismaka,
    benar, pengaruh ke request juga. tapi karena kecenderungannya cuman IE dan fx, windows, linux, biar ada fun-nya aja lah. :) toh bisa di-disable images-nya.

  24. Comment by Dani Iswara on June 24, 2009 at 10:25:04
    using Mozilla Firefox 3.0.11 on Gentoo Linux

    rismaka,
    saya masi akan make plugin antispam matematika ini.

  25. Comment by basuki sutjijanto on June 29, 2009 at 13:37:45
    using Mozilla Firefox 3.5 on Windows XP

    pak mau nanya nich :
    untuk nanpilkan tulisan ini :

    using Mozilla Firefox Mozilla Firefox 3.0.10 on Gentoo Linux Gentoo Linux

    pake plugin pa pake bhs program…
    thanks

  26. Comment by Dani Iswara on June 30, 2009 at 04:31:13
    using Mozilla Firefox 3.0.11 on Gentoo Linux

    basuki s,
    pake plugin browser sniff-nya pak priyadi.net. :) ada beberapa yang sejenis.

  27. Comment by Cahya on August 27, 2009 at 01:12:29
    using Mozilla Firefox 3.5.2 on Windows Vista

    Saya bertanya-tanya, mengapa web satu kolom mesti memangjang ke bawah? Kenapa tidak ke samping ya? :D

  28. Comment by Dani Iswara on August 27, 2009 at 09:18:19
    using Mozilla Firefox 3.5.2 on Gentoo Linux

    Cahya,
    sepertinya memang ada alternatif lain dengan memanfaatkan fitur paging.

    memanjang? mungkin karena: itulah yang mampu dibaca perangkat mobile. daripada harus scroll horisontal? :)

    untuk desktop, setidaknya 1024px dianggap umum. walau ada kebiasaan pengguna berlayar 1024px atau lebih tapi non-maximized window seperti saya. :D

  29. Comment by Cahya on August 27, 2009 at 09:38:29
    using Mozilla Firefox 3.5.2 on Windows Vista

    Pada awalnya saya pikir hanya karena kebiasaan, kita kan niru sistem barat sana, di mana tulisan dari kiri ke kanan kemudian turun ke bawah, akhirnya ke bawah jadi tambah panjang.

    Namun sepertinya sistem tradisional kita juga, pembuatan lontar juga demikian, dari kiri ke kanan kemudian turun ke bawah, sama halnya dengan sistem pembacaannya.

    Namun kan ada tuh negeri-negeri yang punya riwayat nulis dari atas ke bawah kemudian ke kanan, kaya tanah Tiongkok. Namun sehingga kadang kita bisa kita lihat di film kolosal kalau dokumen kuno mereka menggulungnya ke samping, bukan ke bawah/atas. Tapi saya malah ga pernah lihat aplikasi halaman web seperti ini (kalau video game sih banyak).

    :D

  30. Comment by Dani Iswara on August 28, 2009 at 11:43:08
    using Mozilla Firefox 3.5.2 on Gentoo Linux

    Cahya,
    umumnya di web dikenal ltr–left to right– dan rtl–right to left– (seperti di Arab).

    sependek yang saya tahu, menulis sejenis huruf kanji di web bisa memanfaatkan anotasi Ruby.

    model vertikal bisa memanfaatkan SVG–Scalable Vector Graphics– (lihat di mencoba SVG). :)

  31. Comment by Cahya on October 18, 2009 at 17:22:12
    using Mozilla Firefox 3.5.3 on Windows Vista

    Saya lihat di blog Bli Dani ada beberapa perubahan dalam desain ya?

    Seperti sistem bagi tulisan hanya terlihat Share on Facebook | Share on Twitter, ada tujuan khusus ga Bli?

    Kemudian untuk identifikasi peramban juga sudah tidak pakai ikon lagi :)

  32. Comment by Dani Iswara on October 18, 2009 at 20:39:24
    using Mozilla Firefox 3.5.3 on openSUSE Linux

    Cahya,
    kayaknya cuman penyegaran aja sekalian mengurangi plugin. sekadar have fun kok.. :)

  33. Comment by Cahya on October 18, 2009 at 22:56:34
    using Mozilla Firefox 3.5.3 on Windows Vista

    Jadi tambah minimalis :)

  34. Comment by aldy on November 23, 2009 at 05:54:42
    using Mozilla Firefox 3.5.5 on Windows XP

    saya cari-cari link donlod-nya mas, siapa tahu disebarkan secara gratis untuk umum. Udah lama saya tertarik dengan template model punya mas dani ini. Kirain aja mas dani nggak keberatan berbagi *ngarep mode on*

  35. Comment by Dani Iswara on November 26, 2009 at 01:30:38
    using Mozilla Firefox 3.5.5 on openSUSE Linux

    aldy,
    ngga tega baginya, masih banyak tambal sulamnya. :)

  36. Comment by aldy on December 13, 2009 at 19:01:39
    using Mozilla Firefox 3.5.5 on Windows XP

    Replay yang kemarin, sekarang saya sudah punya yang satu blog seperti milik mas dani, well tentu saja tidak 100%, kan nggak boleh, tetapi navigasi yang saya anggap perlu saya implementasikan. Mohon saran dan pendapatnya.

  37. Comment by Dani Iswara on December 13, 2009 at 20:36:13
    using Mozilla Firefox 3.5.5 on openSUSE Linux

    aldy,
    nanti saya lihat ke sana. pasti menarik kalo mas aldy yang bikin. :)

  38. Comment by Cahya on January 17, 2010 at 14:26:36
    using Mozilla Firefox 3.5.7 on Windows Vista

    Ikutan satu kolom ah… :D

Trackbacks/Pingbacks

  1. Pingback by Pertanyaan seputar Desain Weblog - Dani Iswara .Net on October 1, 2009 at 14:25:25
    using WordPress abc

    [...] Memudahkan tampilan antarmedia yang memiliki ukuran layar berbeda. Misalnya desktop dengan pelbagai resolusi hingga layar kecil. Selengkapnya di Alasan Redesain Weblog Satu Kolom. [...]

  2. Pingback by Web Blog Navigation Menu - Dani Iswara .Net on November 14, 2009 at 02:12:03
    using WordPress abc

    [...] the other reasons for my one column design, in bahasa Indonesia (Dani Iswara [...]

  3. Pingback by 17 Artikel Tentang Redesign dan Realign Website :: Om Ipit on November 23, 2009 at 00:08:45
    using WordPress 2.7.1

    [...] Tiap desain web/blog beserta fiturnya biasanya memiliki dasar, konsep, dan maksud tertentu. Walau kadang hanya berdasarkan kesukaan pemilik/pengelolanya. Pun redesign blog menjadi satu kolom seperti sekarang ini… Selengkapnya [...]

  4. Pingback by Redesign Artistic Single Snow White Column : Bhyllabus on January 17, 2010 at 14:47:22
    using WordPress 2.9.1

    [...] ini kebetulan mirip dengan tulisan “Redesain Weblog Satu Kolom”, mungkin karena banyak ide-nya berasal dari sana (aih…, belakangan ini tidak kreatif sekali [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Search Engine Friendly URL may not be Usable on Result Pages
‹‹ Newer entries: Kontras Warna Halaman Web