Berharap dengan Kebijakan Blogger.com

Belakangan ini banyak denger bahwa Blogger.com mulai melakukan razia, menggusur blog yang bernaung dibawahnya, karena melanggar aturan atau TOS yang telah ditentukan.

Sebenernya gw cuek aja kalau blog ini ikut dirajia oleh blogger.com apabila memang blog ini dianggap melanggar TOS, seperti menghilangkan "navbar" dan lainnya yang gw anggap menggangu desain dan validasi blog ini.

Blogger.com mungkin marah, pikirnya udah dikasih fasilitas gratis masih ngelanggar lagi. Ngak tau terimakasih, hehhehe.

Tapi yang gw perhatiin, blog dengan konten yang senonoh, berlendir, atau apalah namanya yah memang menjadi target utama. Jadi gw curiga kalo ada blog yang di gusur, isinya apa yah? hehehheh. Tapi ada kemungkinan juga salah gusur jadi dianggap spam blog. Huh ngak tau deh.

Perkembangan blog dengan mesin blogger.com memang sedikit memperihatinkan, dan sebenernya gw udah malu pake mesin ini, apalagi ngebahas mesin ini ... huh.. Tapi dengan adanya kebijakan blogger melakukan penggusuran, menurut gw karena blogger.com sendiri juga udah malu, soalnya mesinnya dipake yang ngak-ngak.

Mungkin kalau bisa kebijakan Blogger.com, sedikit berharap, melakukan penggusuran khusus, untuk blog yang memang berlendir atau juga blog yang sekedar nembak keyword isinya postingannya, spam blog. Dari pada menggusur blog yang cuman menghilangkan navbar dan melakukan hack lainnya untuk pengembangan fungsi, desain dan validasi template blogger.

So kalau mau meningkatkan trafik belajar SEO yang bener dan memperbaiki isi konten. Sebab kayaknya trik seo beda ama trik spam.

tambahan:
maaf kalau ada komentar di blog ini yang di hapus, memang blog ini sangat egois untuk komentar yang sekedar lewat, kalau mau lewat, lewat aja ngak usah komentar, dan juga komentar yang bernada spam, kalo mau nyepam, nyepam di blog yang memang tukang nyepam juga donk.

Peace, kalau ada yang tersinggung maaf, soalnya gw juga udah tersinggung. hehehhe gaya.

Read More

CSS3 Mengurangi Penggunaan Image dan Javascript

Pengembangan teknis CSS3 semakin menakjubkan ternyata. Dengan adanya CSS3 dapat semakin mengurangkan penggungaan image dan javascript pada template kita. Seakan sekarang semua pengembang fokus ke CSS3 untuk menemukan hal baru baik dalam hal penampilan maupun efek yang dihasilkan. Sampai repot ngikutin pengembangannya.

Om Ipit mendokumentasikan beberapa teknik dari CSS3 di note.cahcepu.com Kategori CSS3, dan mencoba beberapa trik tersebut di Inilah Kehebatan CSS3.

Dokumentasi lainnya:

• CSS3 + Progressive Enhancement = Smart Design
• CSS3 Unleashed – Tips, Tricks and Techniques
• 50 Brilliant CSS3/JavaScript Coding Techniques
• 47 Amazing CSS3 Animation Demos

Nah ada postingan menarik yang mencoba membuat template menggunakan teknik sederhana dari CSS3 di Make Your Mockup in Markup. Mungkin jika dikembangkan beberapa teknik animasi dari CSS3 diatas akan semakin menarik lagi.

Dari dokumentasi diatas terlihat bahwa memang trik CSS3 semakin terus berkembang, mungkin saat ini ada teknik baru CSS3 yang sedang diposting :). Ayo siapa yang ingin ngembangin juga trik baru pake CSS3.

Read More

Typography Comment Spam

sumber gambar: Oodles of Comment Spam


sumber gambar: Can spam be art?


sumber gambar: Can We Work Together To Stop Comment Spam?


sumber gambar: Don’t Let Comment Spam Hurt Your SEO


sumber gambar:How We Beat Comment Spam


sumber gambar: WordPress How To: Tired of Comment Spam?


sumber gambar: The Scourge Of Blog Comment Spam

Read More

Mengenal Spam Blog dan Menghindarinya

Kita kadang tidak sadar selama ngeblog, telah melakukan teknik Spam dengan beberapa trik yang kita peroleh, karena kurang pemahaman, termasuk saya. Spam kurang lebih memiliki tujuan untuk meningkatkan trafik, posisi di mesin pencari, dan sebagainya, dengan cara yang kurang baik, baik secara on-page maupun off-page.

Untuk lengkapnya apa itu Spam bisa dibaca di link berikut dan beberapa tautan didalamnya (wikipedia.org):

• Spam in blogs
• Spam blog

Di artikel Spam blog-Controversy, bahkan blog yang bernaung di blogger.com jadi bernada miring.

Kegiatan Spam pun akhirnya menjadi musuh mesin pencari. Beberapa mesin pencari terus berbenah untuk menangkis kegiatan tersebut. Jadi mesti hati-hati menggunakan teknik seo yang tidak dianjurkan. Di tulisan Dhany, "Apakah Situs Web Anda Termasuk Spam?", bisa jadi referensi yang cukup baik untuk kita mengenal dan menghindari agar web atau blog anda tidak dianggap spam oleh mesin pencari. Beberapa artikel terkait SEO juga dipaparkan dengan baik oleh Dhany di blog tersebut.

Saya sempet bertanya tentang komentar yang tidak menggunakan nama, tapi menggunakan keyword tertentu, apakah dianggap spam. Menurut Dhany tidak masalah untuk mesin pencari, jadi lebih kerelaan dari si pemilik blog. Makanya terkadang kita melihat di sebuah blog diberikan tata cara untuk komentar di blognya. Dhany pun memiliki aturan untuk komentar blognya. Dan tentunya ada kode etik (walau bukan konvensi) untuk berkomentar. Seperti Dani, dalam tulisannya "Berkomentar di Blog untuk Memperkaya Konten" sepertinya menjadi hal yang mesti dibangun. Tapi tetap menurutnya, itu tergantung masing-masing, selalu ada hitam dan putih.

Read More

Dasar-dasar Aksesibilitas

Mau tahu tentang apa itu aksesibilitas, pengertian dan lainnya, baca: Dasar-dasar Aksesibilitas », di Web Standard Curriculum - Indonesia.

Lihat juga di daftar isi, kalau mau lengkap mengenai Kurikulum Standar Web.

Read More

Penempatan dan Modifikasi Tag h1: Contoh Kasus

Tag h1 merupakan tingkat heading tertinggi dari sebuah halaman weblog. Oleh karenanya tag h1 ini 'sering' menjadi pertimbangan penting dalam hal penempatannya. Apalagi ada 'anggapan' bahwa tag h1 ini terkait dengan SEO atau juga SERP, diluar perdebatan yang ada.

Secara default, template bawaan Blogger.com, seperti minima, tag h1 adalah judul blog, tag h2 adalah tanggal (date) dan tag h3 adalah judul postingan. Sedangkan theme default WordPress, tag h1 adalah judul blog dan tag h2 adalah judul postingan. Dua contoh kasus theme atau template bawaan dua mesin ini penempatan tag h1 nya sama antara halaman index dan halaman postingan atau 'single page' (pada WP).

Ada dua contoh kasus menarik menurut saya untuk diangkat disini, terkait penempatan tag h1 dan modifikasinya, baik itu dihalaman index maupun di halaman postingan, yaitu:

1. Thesis Theme (WordPress), dan
2. Accessites.org (WordPress)

Disini saya menggunakan fasilitas dari addons firefox Web Developer untuk melihat penempatan heading di halaman dua theme / weblog tersebut. Caranya adalah dengan mengklik dibagian toolbar Information (icon tanda seru) dan kemudian klik View Document Outline dihalaman yang kita ingin teliti.

Penempatan tag h1 Thesis Theme

Thesis Theme merupakan salah satu theme WP yang banyak direkomendasikan dengan berbagai kelebihannya. Bisa dikatakan theme ini adalah theme framework yang sempurna karena fasilitas dan detilnya, termasuk masalah penempatan h1 nya yang berbeda antara halaman index dan postingan.

Bacaan terkait mengenai kelebihan "theme thesis":

1. Trik Membuat Level Heading Blog WordPress Lebih SEO-friendly
2. Perkenalan Thesis Theme

1. Pada Halaman Index


Hasil View Document Outline


Bila dilihat pada halaman index 'Thesis Theme', penempatan tag h1 adalah pada judul deskripsi blog, lajimnya adalah pada judul blog. Sedangkan judul blognya sendiri menggunakan tag p (paragraph). Dan judul postingan menggunakan tag h2.

2. Pada Halaman Postingan / Artikel


Hasil View Document Outline


Nah disini yang menarik, ketika di halaman postingan, tag h1 yang sebelumnya berada di judul deskripsi blog pada halaman index, kini di halaman postingan tag h1 menjadi di judul postingan. Sedangkan judul deskripsi menjadi tag p.

Hasil dari View Document Outline, h2 [Missing Heading] seperti gambar diatas, tag h2 ini mungkin bisa digunakan sebagai sub judul postingan, sehingga tetap memiliki hirarki heading yang baik.

Modifikasi tag h1 Accessites.org

Untuk situs ini yang menarik adalah dalam hal modifikasi tag h1 pada judul blog.

Situs Accessites dot org terdiri dari para ahli standar web, aksesibilitas, desainer, pengembang web / blog dan pemerhatinya. Mereka mempunyai misi untuk memberikan penghargaan Universal Design Award kepada web yang memenuhi kriteria tertentu. Sekaligus membuktikan bahwa situs web / blog yang aksesibel sebenarnya tidaklah membosankan atau hanya mengedepankan teks saja. (Dani Iswara dot net di Kriteria Universal Design Award dari Accessites.org)

1. Pada Halaman Index


Hasil View Document Outline


Pada halaman index situs Accessites.org ini mungkin terlihat lajim, penempatan tag h1 nya tersebut pada judul blog yang ditutupi image dengan trik css. Tapi di tag h1 tersebut selain judul blog juga ditambahkan judul deskripsi blog. "Accessites.org" adalah judul blognya, dan "The Art of Accessibility" adalah judul deskripsi blognya. Sedangkan tag h2 juga lajim penempatannya yaitu pada judul postingan.

2. Pada Halaman Postingan


Hasil View Document Outline


Nah yang menarik di situs accessites.org ini ketika dipostingan. tag h1 nya memang tetap di judul blog, tapi yang sebelumnya judul blog di tambah dengan judul deskripsi, maka di postingan ini judul blog ditambah dengan judul postingan (lihat 'view document ouline' diatas). Accessites.org adalah judul blognya dan Law Office of Lainey Feingold adalah judul postingannya. Ini modifikasi yang menarik menurut saya. Untuk tag h2 sama juga yaitu di judul postingan.

Penutup

Demikian dua contoh penempatan dan modifikasi tag h1 yang mungkin bisa dipertimbangkan diterapkan di blog anda. Tapi jangan tanya saya mana yang lebih baik. :)

Untuk pengguna blogger.com, trik modifikasi dapat di pelajari di Trik Tag Heading Judul Postingan Berbeda di Halaman Index dengan di Postingan: Kasus Blogger. Sip thanks.

Read More

>>>>>>>>> 2010

Belakangan ini mulai muncul web desain bergaya blogazine yang membutuhkan kreatifitas lebih, tapi dipertanyakan kebergunaannya.

Belakangan ini mulai muncul postingan yang mencoba mengoreksi kebergunaan, tapi dipertanyakan masalah kreatifitas desainnya.

Belakangan ini mulai muncul blog yang mengajak agar web aksesibilitas tidak terlihat membosankan. tapi kurang mendengung.

Belakangan ini javascript framework seperti jQuery dan Mootools makin bergairah, tapi dipertanyakan kebergunaanya dan aksesibilitasnya.

Belakangan ini blog mulai dilirik sebagai pendulang dolar, tapi terkadang penempatan iklannya menggangu pembaca.

Belakangan ini postingan bergaya 'round up' mulai menjamur, tapi dipertanyakan dari sisi pencerahan.

Kini telah hadir HTML 5 yang memcoba agar struktur elemen lebih baik, tapi baru efektif tahun 2012.

Kini telah hadir pengembangan CSS 3 yang lebih kaya dengan stylenya, tapi belum semua browser mendukung.

Lalu seperti apakah wajah pengembangan weblog di tahun 2010 ?

Read More

Redesign yang Kesekian Kali

Template blog ini akhirnya dirombak lagi, meninggalkan blog hitam yang sebenernya berat untuk diganti. Tapi untuk memenuhi mengoreksi blogger template ku, walau masih belum sempurna, tapi diusahakan nyerempet kesana.

Pada template ini yang masih menggunakan HTML 5 dengan "classic blogger template" dan CSS3 terutama penggunaan jasa @font-face di blogger, dibuat lebih sederhana, dengan navigasi yang sederhana juga. Karena bermain sederhana akhirnya fungsi jQuery pun dipangkas.

Ada dua blog yang menginspirasi blog ini, bisa dikatakan nyontek (jangan ditiru ngak bagus), walau tidak sepenuhnya (tapi kok hampir mirip?). Terus terang masih agak sulit menemukan karakter sendiri, seperti blog yang hitam dulu.

Kedua blog tersebut bergaya grid, sehingga terlihat tertata rapih. Yaitu:

• Substraction
• 5thirtyone

Penutup

Karena masih terinspirasi blog lain maka karakter blog ini tidak kuat lagi. Yah ngak apa-apa deh. Soalnya dua blog itu begitu mempesona belakangan ini. Selain itu untuk dapat memenuhi beragam konvensi dan keberlakuan masih jauh. Tapi tetap mempertahankan template blogger ini untuk masalah validasi pada halaman utama blog, valid HTML 5, dan untuk CSS 3 ada 1 error dari bawaan blogger.

Kalau ada masukan silahkan, tapi jangan banyak-banyak yah, hehheeh. Masalahnya cape juga gantinya. :)

Sip demikian.

Read More

Sebenarnya Kita Menulis Untuk Siapa?

Dalam tulisannnya Pandu Truhandito sempat menyitir bahwa:

Karena SEO ditujukan untuk search engine, maka kita harus menulis untuk search engine juga
- the on-page optimization fallacy -

di tulisannya yang berjudul The On-Page Optimization Fallacy

Nah, kita yang sering melakukan praktek SEO apakah selama ini demikian, menulis hanya untuk kepentingan mesin pencari?

Merangkai sebuah kalimat sesuai kepentingan kata kunci yang ingin kita tembak agar mesin pencari memberikan posisi yang baik untuk kata kunci kita tersebut. Jadi bukan merangkai kalimat untuk kepentingan pembaca, agar pembaca dapat memahami sesuatu yang anda tawarkan atau anda share, sehingga pembaca merasa mendapatkan wawasan baru atau pencerahan.

Saya pernah melakukan seperti kutifan diatas. Misal saya saat ini meriview tulisan Pandu. Tapi dalam riview tersebut, saya juga berusaha menembak kata kunci dalam tulisan.

Katakan kata kuncinya "SEO" dalam review kali ini. Maka saya akan mengemas tulisan riview ini dengan menebarkan kata kunci SEO, dan tiap kata kunci SEO saya berikan link ke blog saya atau artikel ini.

Akibat tulisan tersebut memang dikemas untuk kepertingan SEO, maka, sebenarnya porsi riviewnya lebih kecil dibanding kata kunci tembakannya tersebut. Akibatnya tulisan kurang mengalir dengan baik, karena memang tulisannya dibuat untuk kepentingan mesin pencari.

Menurut Pandu, kutipan diatas tersebut sebenarnya menyesatkan dan kesalahan yang fatal.

Sebab akhirnya kualitas sebuah konten yang menjadi perhatian utama pembaca. Agar pembaca betah untuk membaca dan menelusuri blog kita lebih dalam.

Kalau konten menjadi pertimbangan utama. Waktu pembaca masuk keblog kita lewat mesin pencari tidak bergegas pergi. karena pembaca bukan mesin yang hanya menelusur tanpa penilaian kualitas sebuah konten.

Pasti anda pun seperti demikian. Ketika memasukan kata kunci di mesin pencari, seperti Google. Kemudian anda masuk kesebuah halaman. Pasti sering langsung menekan tanda silang [x] di tab halaman tersebut. Karena anda merasa didalam halaman tersebut hanya berupa judul dengan taburan kata kunci.

Sip, menurut saya blog pandutruhandito.com bisa di jadikan salah satu referensi utama untuk masalah SEO. Tampaknya Pandu menguasai bidang SEO dan memang spesialisasinya. Tulisannya enak dibaca dan penjelasannya ilmiah tidak teknis.

Read More

Belajar Kritis dan Memilah Sebuah Tren

Perkembangan dunia blog begitu pesat. Berbagai macam coba ditawarkan ke kita. Mulai dari konsep desain, javascript, trik CSS, dan sebagainya. Sebagai referensi dan media belajar hal tersebut cukup baik. Tapi tentunya kita akhirnya mesti memilah-milah mana yang pas untuk diterapkan. Baik itu di blog yang kita gunakan maupun web yang kita bangun untuk klien. Anda tentunya memiliki pertimbangan dalam memilahnya, baik berdasarkan ketentuan aksesibilitas, kebergunaan, standar web, atau apapun, menurut pegangan sikap anda.

Belakangan ini mulai muncul artikel-artikel menarik, yang mencoba kritis terhadap perkembangan dunia blog. Saya menemukan 3 artikel yang mencoba kritis. Artikel tersebut bisa jadi bahan pertimbangan kita, untuk mulai kritis atas apa yang ditawarkan, baik secara teknis maupun konsep.

Smashing Magazine Killed The Community (Or Maybe It Was Me)

Artikel ini cukup menggegerkan kalangan Blogger (atau gw doang, kan gw bukan blogger). Tulisannya langsung menusuk tanpa tedeng aling-aling. Mencoba mengkritisi konsep blog yang belakangan ini hanya berisi daftar list (list mania), seperti halnya 'Smashing Magazine' yang menjadi pusat perhatian.

Gaya daftar list ini memang sedang di tiru oleh banyak blog, dan saya termasuk didalamnya. Apabila kita melihat perkembangan gaya daftar list ini, akhirnya kita menemukan ada keseragaman artikel antar tiap blog. Misal blog A me-list "10 desain blog minimalis yang menarik", kemudian blog B juga melakukan hal yang sama tapi dengan judul yang berbeda walau isinya hampir sama, seperti "10 terbaik desain weblog bergaya minimalis". Nah akhirnya ada kemandulan kreatifitas disana, dan terkesan sekedar mengejar setoran.

Model atau gaya daftar list pun akhirnya hanya bisa dijadikan bahan inspirasi. Sebab tidak ada tulisan yang mencoba menjelaskan sesuatu didalamnya atau mengajak diskusi. Akhirnya terjadi kemandekan diskusi, bahkan ilmu atau wacana. Jadi kita hanya bisa berkomentar "great list, thanks". Walau ada 100 komentar intinya tetap "list yang menarik".

Anti-inspiration

Artikel ini sebagai ungkapan pribadi sipenulis. Dia menjadi anti terhadap inspirasi. Menurutnya memang banyak hal yang menarik bisa diperoleh di situs galery web desain sebagai inspirasi. Tapi apakah kita mengalami kemajuan jika kita mencontoh atau mengembangkan inspirasi yang kita peroleh dari hasil kerja orang lain (meniru).

Sipenulis tampaknya mulai mencari orisinalitas sebuah desain, yang tidak terpengaruhi inspirasi, tapi dia yang menjadi inspirasi.

Saya pun menoleh. Memang beberapa template weblog memiliki desain yang hampir mirip, mungkin mereka saling terinspirasi, atau salah satu ada yang terinspirasi. Jadi kita sering menilai "... oh template ini seperti template ini yah?".

Tapi menurut saya sangat sulit untuk mendapatkan originalitas sebuah desain, atau apapun, sebab kita tidak bisa menghindar untuk saling mempengarahui atau dipengaruhi, lewat apapun. Jadi tinggal kita saja mengolah bagaimana desain kita menjadi berbeda (walau tidak orisinal tapi tidak meniru habis).

No CSS Reset

Artikel ini menjadi perdebatan seru. Seru banget :). Sebab artikel ini mencoba memberikan argumen sekaligus mengkritisi Reset CSS, terutama Reset CSS hasil pengembangan Eric Meyer. Dan Eric Mayer pun membuat tulisan untuk merespon, berjudul Crafting Ourselves (gosif banget sih gw).

Snook tidak menggunakan Reset CSS, memiliki alasan yang logis. Garis besarnya:

• Reset CSS hanya membebani ukuran file CSS.
• Perbedaan tampilan antar browser tidak menjadi masalah baginya (misalnya ukuran pixel h1), dia senang dengan elemen render secara default.

Nah anda bebas memilih, menggunakan Reset CSS agar tampilan di semua browser dapat konsisten, atau tanpa reset CSS seperti Snook yang suka perbedaan tampilan di semua Browser. Kalau saya tergantung, kadang saya menggunakan reset jika memang diperlukan, dan bahkan saya membuat sendiri untuk Reset CSS template blogger :).

Penutup

Menurut saya ketiga penulis tersebut mencoba menjadi kritis dan memilah, tidak ingin menjadi kegenitan untuk mengikuti tren yang berkembang tanpa coba dicerna.

Read More

Trik Kreatif Meningkatkan Trafik

Yup ini trik kreatif. Trik yang membutuhkan kreatifitas yang perlu selalu diasah dan kemauan serta kerja keras. Jadi maksud dari kreatifitas disini bukan mengakali atau mengemas sesuatu dengan akal-akalan untuk meningkatkan trafik.

Trik meningkatkan trafik ini bukan dari pengalaman pribadi (masih jauh). Ini coba saya tarik kesimpulan atau menelaah dari beberapa blog populer yang memang memiliki trafik yang baik.

Mengaca dari Blog Populer

Jika kita melihat atau 'mengaca' dari blog populer yang ada. Tentunya kita mengakui, bahwa si pemilik blog memang berusaha agar selalu menyajikan konten yang bermutu, yang dibutuhkan banyak orang, apapun bentuknya. Kuncinya disana. Nah itu tidak mudah, membutuhkan usaha keras. Jadi kita 'jangan kecewa' melihat trafik blog kita yang ngak naik-naik, apabila kita sadar, bahwa kita belum mampu menyajikan secara serius sesuatu yang bermutu. Lihat kembali kebelakang apa tujuan kita ngeblog.

Saya coba mengambil contoh pada pengguna blog mesin Blogger saja. Kalau mengambil contoh mesin lain lebih repot, banyak bener yang populer.

Nah jika saya menyebutkan Blogger Buster tentu sebagai besar pengguna blogger langsung tahu. Dengan cepat kita menyebut pemiliknya adalah Amanda Fazani, yang selalu menyajikan tutorial yang bermanfaat mengenai pengembangan mesin blogger. Jadi Blogger Buster sudah memiliki karakter yang kuat, dan itu sebanding dengan kerja keras si pemilik blog dengan perjalanan waktu yang panjang. Siapa yang tidak mengakui Amanda sebagai 'salah satu' pelopor di dunia hack khusus mesin blogger. Dengan karakternya yang kuat, blog tersebut tidak saja memperoleh trafik dari mesin pencari tapi juga hasil rekomendasi.

Mesin blogger dengan segala keterbatasnnya ini membutuhkan banyak hack agar mesin ini dapat bersaing dengan mesin lainnya. Ini sebenarnya bisa jadi 'celah' kalau kita menguasai bidang tersebut. Belakang yang mulai dikenal dengan hasil hacknya adalah Aneesh dan Abu Farhan. Mereka berdua memberikan tutorial baru hasil pengembangan dari tutorial sebelumnya yang ada untuk mesin blogger, seperti 'Page Navigation', Related Posts', dan lainnya. Mereka berdua akhirnya dengan cepat populer, karena memang tutorialnya sangat berguna dan diminati banyak pengguna blogger, dan ini langsung berkaitan dengan meningkatnya trafik pada blog mereka. Bahkan Amanda merekomendasikan kedua blog tersebut.

Tapi kita jangan terjebak bahwa hanya dunia tutorial hack blogger saja yang bisa mengangkat trafik, banyak hal lainnya. Satu contoh lagi, misal kita suka mengoprek 'template'. Itu juga bisa jadi media kita. Kali ini sedikit subyektif, tapi menurut saya blog ini memiliki kualitas 'Free Template' yang bermutu. Dante Arujo, saya rasa cukup banyak yang kenal. Kalau kita perhatikan tiap template yang dibuat, terlihat dibuat dengan serius dan matang. Ngak salah kemudian templatenya banyak di review oleh beberapa blog, dan itu lagi-lagi terkait langsung dengan trafik yang akan diperoleh. Bahkan templatenya yang terakhir BloggerTube menjadi fenomenal, hasil kerjasama dengan Aneesh dan Abu Farhan, yang semakin membuat mereka bertiga semakin dikenal. Lihat komentar pada artikel tersebut, terakhir yang saya lihat berjumlah 370 komentar, menakjubkan.

Refleksi dan Mencari Peluang

Nah hal diatas hanya dua contoh, yaitu 'tutorial hack' dan 'free template', yang bisa kita jadikan pertimbangan. Banyak 'peluang' yang sebenarnya bisa kita ambil bukan hanya dua contoh itu saja. Itu kembali tergantung masalah ketertarikan kita.

Jadi, tampaknya mesti menggali kemampuan atau ketertarikan kita dimana (refleksi), jika kita memang ingin serius di dunia blogger, dan itu yang perlu kita asa. Bukan sekedar mengikuti trend. Kalau sekedar mengikuti trend, kita akan banyak bersaing dengan banyak blogger yang juga mengejar trend tersebut. Dan itu pun ngak akan bertahan lama. Kita tidak mendapatkan apa-apa disana. Otak dan kreatifitas kita tidak diajak bermain. Demikian pula kalau sekedar comot, bukan trafik yang kita dapat tapi cemooh.

Kalau memang kita telah menemukan, katakan karakter yang akan dibangun. Kita tidak perlu pusing lagi memikirkan masalah SEO yang tidak pernah ada habis dan tidak ada ujungnya. Jadi jangan kita mengejar SEO, biar search engine yang mengejar blog atau artikel kita. Sebab kalau dilihat, blog populer tersebut juga ngak mengunakan trik SEO yang macem-macem, standar aja. Mereka lebih mengandalkan pada konten yang berkualitas.

Penutup

Saya menggunakan kata 'kita' diatas maksudnya termasuk saya. Walau saya ngeblog cuman iseng untuk belajar dan mencari sesuatu yang bermanfaat dari hal yang saya sukai seperti desain, itu aja. Maaf saya tidak banyak menyebutkan blog populer lainnya, seperti blog Indonesia, yang sebenarnya banyak membantu saya belajar. Karena kuatir bisa jadi konflik karena unsur subyektifitas. Tapi tentunya anda pun punya blog lain, yang menurut anda populer, yang bisa jadi bahan belajar dan cerminan bagaimana dia mengelola blognya sehingga menjadi populer dan memiliki trafik yang baik. Tapi 'menurut saya' trafik bukan segalanya yang menentukan kualitas blog yang kita punya.

Atau anda lebih tertarik meningkatkan trafik seperti yang gaya ini 97 Ways to Build Traffic Without Resorting to Dumbass List Posts. Huh... banyak banget... ngapalin aja susah... hehehehe.

Sip Demikian.

---
lihat juga:
Bloggers: How Often Should You Really Post?

Read More

Mengenal Blogazine ? Masa Depan Blog Post ?

"The death of the boring blog post?"

Wow... ini hal baru yang menarik, apapun pertentangan yang ada. Menurut saya ini perlu dihargai dan diacungin jempol sebagai sebuah gagasan baru yang mencoba melawan kebosanan.

Konsep "blogazine" coba diperkenalkan dan ditawarkan sebagai alternatif untuk menggantikan "blog post" jika dianggap sudah mulai 'membosankan ?', oleh Paddy Donnelly pada tulisannya di Smashing Magazine.

Dalam postingan itu pun 'Smashing Magazine' memberikan kebebasan (ruang khusus) pada sipenulis untuk membuat postingannya bergaya "Blogazine".

Penulis mencoba mereview beberapa blog berikut, yang menurutnya pionir dalam hal "Blogazine":

1. Jason Santa Maria



2. Gregory Wood



3. Dustin Curtis



Blog diatas memang sangat kreatif. Gaya "Blogazine" sangat kental. Layaknya sebuah majalah, tiap halaman memiliki layout dan warna yang berbeda.

Memang konsep "Blogazine" sangat membutuhkan kreatifitas tinggi, dan waktu luang yang banyak. Bukan hanya isi artikelnya, tapi juga untuk membangun layout yang menarik. Tidak seperti halnya "blog post" yang statis (tradisional).

Paddy Donnelly yang memiliki blog di http://blog.iampaddy.com/ memang terlihat sepertinya suka yang berbau berbeda (kreatif ?).

Di twitter Paddy Donnelly menulis:

"Web design must be the most open-minded industry. In what other industry do direct competitors share their ideas and work online so often?"

Kita bisa terima atau tidak pemikirannya tersebut, sebuah pilihan. :)

Apapun itu yang ditawarkan "Blogazine" menurut saya ini sebuah penyegaran, walau nanti hanya sebagai sebuah wacana.

Entah bagaimana dilihat secara 'aksesibilitas' dan 'kebergunaan' menilai konsep "Blogazine" tersebut. Apakah akan dipertentangkan ? Lihat pada komentar di artikel tersebut, sangat beragam. Baik itu yang suka maupun yang menentang.

Lebih lengkapnya mengenai "Blogazine" baca langsung The death of the boring blog post? soalnya saya ngak bisa bahasa inggris. :)

Untuk bahan insipirasi membuat postingan lebih bergaya seperti Blogazine: 20 Extraordinary Blogs With Unique Post Designs

Pembahasan terkait: Entering the art direction arena

---
sekedar iseng nulis doang :)

Read More

Menggembangkan Weblog Berbasis Grid System

Menggembangkan weblog atau template berbasis "Grid System" adalah salah satu alternatif untuk mempermudah penempatan dalam pembagian kolom. Sebagai kerangka tata letak halaman, supaya terlihat seimbang dan tertata rapih.

Ragam Jenis Framework dan Tool untuk Menggembangkan Grid

Ada beraga jenis tools dan framework yang dapat memandu anda mengembangkan desain weblog berbasis grid. Mulai dari yang kompleks seperti Blue Print dan 960 Grid System, sampai yang sederhana seperti The 1KB Grid dan Simple-css-grid.

Lihat Ultimate Guide To Grid-Based Web Design: Techniques and Tools lebih lengkapnya.

Prinsip Dasar Menggembangkan Desain Weblog Berbasis Grid

Prinsip dasar membangun desain grid adalah keseimbangan antar kolom berdasarkan rasio, yaitu:

1. Lebar Keseluruhan Layout

Lebar keseluruhan layout ini yang pertama perlu anda pastikan sebagai kerangka. Standart saat ini mungkin lebar yang tepat digunakan adalah 960 pixel (berdasarkan pertimbangan jenis monitor dan resolusi yang digunakan).

Lebar Keseluruhan Layout berdasarkan grid itu = Jumlah Kolom+ Lebar Kolom+Jarak antar Kolom.

2. Jumlah Kolom

Lajimnya kita dapat membuat jumlah kolom dalam suatu layout yaitu: 9, 10, 12, 14 atau 16. Jumlah kolom ini sebagai kerangka pembagian ruang elemen seperti Header, Post, Sidebar dan Footer.

3. Lebar Kolom

Masalah lebar tiap kolom ini berkaitan dengan jumlah kolom yang anda tentukan, atau sebaliknya. Lebar tiap kolom bisa 40, 60, atau 80 pixel.

4. Jarak antar Kolom

Jarak antar kolom ini adalah ruang terbuka, bisa sebagai pembatas tiap kolom. Lebar jarak antar kolom ini standarnya 10 atau 20 pixel.

Gambar dibawah adalah contoh Penerapan Grid System. Jumlah Kolom: 12, Lebar Kolom: 60px, Jarak antar Kolom: 20px, Lebar Layout keseluruhan: 960px.



Empat hal diatas bisa menjadi dasar kerangka grid. Namun untuk masalah detilnya anda dapat mengembangkan sendiri tanpa terpatok ukuran standar diatas.

Mark Boulton dalam Five Simple Steps to designing grid systems, menjelaskan mengenai sistem grid secara lengkap.

'Subtraction.com' : Contoh Kreatif Penerapan Grid

Membangun Weblog atau template yang berbasis grid, sebenarnya tidak perlu menggunakan jasa seperti framework atau tool grid. Anda dapat mengembangkannya sendiri dengan kemampuan teknik CSS.

Subtraction.com, bisa kita jadi contoh atau inspirasi untuk mengembangkan sistem grid yang menarik, tidak terlihat kaku. Blog yang bermain warna putih dan hitam ini sudah sangat populer untuk masalah grid, banyak sudah yang mereviewnya.



Lihat bagaimana desain grid yang diterapkan pada template yang merapat kekiri ini. Pembagian komposisi kolom yang menarik pada artikel untuk tanggal, judul, dan jumlah komentar.

Halaman berikut ini Grid Computi, mengambarkan bagaimana blog tersebut mengembangkan sistem grid di blognya.



Kreatifitas sipengembang desain berbasis grid tersebut yang membuat blog diatas terlihat elegan.

Penutup

Grid system hanyalah sebuah kerangka atau acuan desain weblog atau template agar terdapat keseimbangan ruang. Anda bebas mengembangkan desain berbasis grid sesuai kreatifitas anda.

Pada blog code-code-an ini, desain awalnya tidak menggunakan kerangka grid. Dengan bantuan gridfox blog ini mencoba menerapkan, walau terlihat tidak sempurna, dibanding template yang dari awal sengaja dibangun dengan kerangka grid.

'Screenshoot' (klik gambar untuk memperbesar).


Tambahan: Grid system juga bisa diterapkan dengan lebar berdasarkan fluid. lihat Fluid 960 Grid System

---
Lihat juga:

• Kerangka CSS Blueprint Mempermudah Pengembangan Weblog
• Video Tutorial: Template Minima dengan Grid
• Blogger Template dengan Grid System
• Semuanya Tentang "Grid System"

Read More

Kenapa Takut Mengumbar Link Eksternal di Postingan?

Tulisan kita di blog terkadang tidak murni hasil pemikiran sendiri. Terutama yang berbau ilmiah. Sehingga dalam tulisan itu perlu memberikan link rujukan atau link eksternal(Wikipedia) di postingan apabila kita mengutif atau ingin memberikan sumber bacaan yang relevan. Sama seperti halnya sebuah buku, ada daftar pustaka atau 'footnote', untuk menjelaskan sumber hasil pemikirannya.

Link Eksternal Sebagai bentuk Penghargaan dan Kredibilitas Tulisan

Sebuah link eksternal/rujukan pada blog, atau daftar pustaka pada buku, itu sebagai bentuk penghormatan atau penghargaan atas usaha atau pemikiran seseorang. Selain itu untuk menghindari tulisan kita tidak disebut hasil plagiat atau pada blog mungkin disebut copas (copy, paste). Sebenarnya sebuah rujukan ini bisa mencerminkan kualitas hasil tulisan. Sebuah buku yang baik terkadang dapat dilihat dari daftar pustakanya.

Dalam blog, untuk masalah rujukan yang selanjutnya saya sebut link eksternal ini lebih kompleks. Ada tata cara yang perlu diperhatikan, lihat 'Link Text' untuk lebih lengkapnya. Intinya sebuah rujukan itu adalah sebuah link aktif, yang apabila diklik akan menuju halaman yang terkait. Bukan sekedar berupa text atau url tanpa link aktif. Ini adalah persoalan etika ngeblog (belum ada konvensi), seperti dijelaskan dalam 'Trekking Panduan Etika Blog' kejujuran sebuah konten atau kredibilitas.

Yup. Sebuah kejujuran sebuah nilai yang mahal.

Dilema SEO dengan Etika

Nah ada dilema disini (kalau bisa dikatakan begitu). Ketika SEO mulai diperkenalkan (ngak tau kapan diperkenalkan). Ada keenganan pada postingan untuk membuat link eksternal (aktif), apalagi mengumbarnya. Logika SEO nya, link eksternal akan memperkuat blog yang dirujuk dari pada yang merujuk di search engine. Logika inilah yang menurut saya (bisa diperdebatkan) dipergunakan dengan tidak benar, sehingga mengabaikan nilai etika.

Tidak benar digunakan? Begini:

1. Kenapa takut kita memberikan link eksternal, jika tulisan kita tersebut adalah pengembangan dari hasil tulisan orang lain. Jadi si pembaca mengetahui letak perbedaan dan pengembangannya, sehingga bisa ada diskusi didalamnya.
2. Kenapa takut kita memberikan link eksternal, jika tulisan kita itu memang secara sengaja mengutif hasil usaha atau pemikiran seseorang. Jadi pertanggung jawaban hasil kutif/copas itu tetap dipenulis utamanya bukan di kita. Misal kita mencopas sebuah tutorial tertentu tanpa memberikan link eksternal sumber aslinya. Apakah anda dapat menjelaskan dengan baik jika hasil copas anda itu kemudian di komentar ada yang menanyakan hal yang detil mengenai script yang dipakai?
3. dll.

Contoh Sederhana sebagai Perbandingan

Lewat contoh berikut ini mungkin akan dapat lebih jelas kenapa kita tidak perlu takut membuat link eksternal aktif.

Saya mengambil contoh Speckyboy yang mengambil konsep blog majalah desain.

Lihat ke tiap artikelnya, blog tersebut bisa memberikan link eksternal aktif sampai lebih dari sepuluh, bahkan tanpa atribut rel="nofollow". Kenapa blog tersebut berani mengumbar link eksternal, apakah dia tidak takut secara SEO dia akan lemah (jika merujuk logika SEO diatas) ?

Nah disinilah letak profesionalitas dari blog tersebut:

1. Artikel yang disajikan adalah hal yang bermutu atau sangat berguna bagi pembacanya.
2. Link eksternalnya didalam artikel tersebut adalah link yang memang berkualitas/relevan dan sebagai penghargaan blog tersebut terhadap link rujukannya agar si pembaca dapat mempelajari lebih dalam disana.

Dengan dua hal diatas, membuat artikel blog tersebut di hargai oleh si pembacanya, yang akhirnya kualitas artikel tersebut kemudian banyak di bookmarks. Selain itu blog tersebut juga dapat penghargaan balik dari siempunya blog yang mendapat link darinya. Jadi ada trafik timbal balik yang alami disana.

Lebih spesifik lagi lihat dua alamat berikut, yang mengangkat tema 'free theme' atau 'template':

1. 50 Surprisingly Amazing Themes for Blogger, dan
2. 25 Free High Quality WordPress Themes for Professional Blogging

Mana yang lebih profesional di dua artikel tersebut dalam penyajiannya, maupun link eksternalnya?
Tentunya artikel Speckyboy. Dia sangat menghargai siempunya template. Dengan memberikan link aktif ke pembuat template, dan tidak memberikan link download langsung, tapi ke artikelnya.

Jadi selain memberi penghargaan atas siempunya template, juga menghindari tanggung jawab jika ada pertanyaan seputar template tersebut. Tidak memberikan link download langsung pun untuk menghindari 'broken link', seperti free template yang disimpan di tempat gratisan yang suatu saat bisa hangus akunnya.

Penutup

Kalau ada pertanyaan 'kenapa takut mengumbar link eksternal?' saya jawab tidak usah takut, selama memang link eksternal itu memang diperlukan dan berkualitas, serta sebagai penghormatan atau penghargaan terhadap usaha atau pemikiran seseorang. Ini terkait dengan persoalan moral/etika.

Kalau ada pertanyaan 'mengumbar link eksternal akan melemahkan blog secara SEO?' Saya jawab relatif, selama link eksternal itu digunakan dengan tepat. Lihat Speakyboy apakah blognya secara SEO lemah? SEO itu melihat kualitas konten, baik itu yang dirujuk maupun yang merujuk. SEO itu lebih senang dengan blog yang beretika dari pada hasil copas.

---
catatan: tulisan ini sebagai refleksi, berupa sindiran atas diri sendiri.

Read More

Sitemap Ku di Blogger

'Sitemap' atau daftar isi merupakan bagian penting dalam hal navigasi, agar pengunjung dapat menjelah dengan baik di blog kita. Blog ini yang menggunakan 'template classic' sangat membutuhkan 'Sitemap' tersebut. Karena tidak memiliki 'widget' arsip, seperti halnya 'template XML' di Blogger.

Kini telah banyak jenis 'Sitemap' yang dikembangkan untuk Blogger. Salah satunya 'Sitemap' yang dibuat Abu Farhan yang berjudul 'Table of Contents Categorized by Dates (by Archived) for Blogger'. 'Sitemap' tersebut yang kemudian digunakan untuk blog ini dengan sedikit modifikasi tampilannya.

Karena ingin membuat tampilan 'Sitemap' kearah samping (horizontal), maka diputuskan menggunakan alamat baru, khusus untuk 'sitemap' ini. Alamat 'sitemap' tersebut: http://deconstructioncode-sitemap.blogspot.com/.

Pada template 'Sitemap' ini pun menggunakan 'template classic', dan difungsikan secara statis. Jadi seluruh source aslinya dihapus dan digantikan dengan source baru yang hanya berupa CSS dan HTML, serta Javascript 'Sitemap'.

Keseluruhan 'source' yang digunakan di 'Sitemap' ini adalah:

<!DOCTYPE html>
<html lang="en-ID">
    
<head>
    
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Daftar Isi Code-code-an</title>
<link href="http://lh4.ggpht.com/_dfnTVAxeWMI/StRF0PyfQcI/AAAAAAAACig/JujEkhm566E/s800/favico.gif" rel="icon" type="image/x-icon"/>
<link href='http://lh4.ggpht.com/_dfnTVAxeWMI/StRF0PyfQcI/AAAAAAAACig/JujEkhm566E/s800/favico.gif' rel='icon' type='image/vnd.microsoft.icon'/>

<style type="text/css">
 *{margin:0; padding:0;}
body { background:#333; color:#fff; font-family: Verdana, "Bitstream Vera Sans", sans-serif;font-size: 75%; border-top:8px solid #222}
a:link { color:#fff; text-decoration:none;}              
#daftarisi {float:left; width:8000px; margin-left:20px}
#daftarisi h1 { font-family:georgia,serif; font-size:72px; font-weight:normal; letter-spacing:5px; color:#111; text-shadow:1px 1px 1px #444; padding-top:20px}
#daftarisi h2 { font-family:georgia,serif; font-size:42px; margin:0 40px 30px}
#daftarisi h2 a {color:#ddd !important; font-weight:normal; letter-spacing:6px}
#daftarisi h2 a:hover {color:#999 !important}
#daftarisi h3 {font-family:"Adobe Caslon Pro","Hoefler Text",Georgia,Garamond,Times,serif; font-size:18px; letter-spacing:4px; padding-bottom:10px}
#daftarisi h3 a {color:#CF2626 !important;}
#daftarisi li { text-indent: -20px; list-style:none; padding-bottom:8px; margin-left:20px}
#daftarisi li a {line-height:18px; }
#daftarisi li a:hover { background:brown}
#Wtoc {padding-bottom:20px; font-size:10px; color:#CF2626 !important;}
.toc {float:left; width:300px; margin:0 20px 20px 0; padding-right:10px; border-right:1px solid #444}
</style>
        
</head>
<!-- <body><div></div> -->
<body>
<div id='daftarisi'>
<h1>Daftar Isi</h1>
<h2><a title="Home Page" href="http://deconstructioncode.blogspot.com/">Code-code-an</a></h2>
<p><small>Catatan: Gunakan "Control F" (pada keyboard) untuk mempercepat pencarian.</small></p>
<br/>
<script type="text/javascript" src="http://blogspotcode.googlecode.com/files/di.js"></script>
<script src="http://deconstructioncode.blogspot.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>
</body>
</html>

Read More

Mengoreksi Blogger Template Ku

Membangun sebuah weblog tidak sekedar enak dilihat secara desain (subyektif). Tapi perlu ada perhitungan lain. Baik itu aksesibilitas maupun usability (kebergunaan). Namun semua itu sebuah pilihan. Sebab kita tidak dapat membuat sebuah weblog yang dapat memenuhi atau mewakili semua pihak.

Saya memberi judul "Mengoreksi Blogger Template Ku" pada tulisan ini, sebagai sentilan untuk mengingatkan saya sebagai pengguna Blogger. Ada beberapa hal dasar yang perlu diperhatikan. Hal-hal tersebut adalah:

Warna

Pada warna, hal dasar yang perlu diperhatikan adalah tingkat kontras antara 'background' dan 'foreground' (warna latar belakang dan teks). Dimana kita mempertimbangkan semua kalangan dapat dengan mudah membaca tulisan kita. Pertimbangan pemilihan warna kontras yang baik ini sebagai bagian dari "Accessibility" (di W3C).

Untuk mendapatkan warna yang baik tingkat kontrasnya, anda dapat menggunakan tools/perangkat Colour Contrast Checker (di Snook.ca). Kemudian anda dapat mengecek keseluruhannya dengan AccessColor (di Accesskeys.org) atau addons/pengaya Firefox yang bernama Colour Contrast Analyser.

Penggunaan "Alt Attribute"

Penggunaan Attribute Alt (di Wikipedia) sebagai deskripsi image/gambar ini sangat penting. Terutama bila image tidak dapat terbaca untuk kondisi tertentu, seperti pada seorang tuna netra. Bahkan bermanfaat bagi search engine/mesin telusur Internet.

Selain itu, penggunaan 'Alt Attribute' ini untuk memenuhi syarat validasi W3C. Setidaknya apabila kita selalu menggunakan alt pada tiap image-non-dekoratif, tidak akan menambah jumlah error/galat yang telah kita miliki.

Contoh:

<img alt="tutorial membuat template" src="http://domain/images/template.jpg" width="..." height="..." />

Untuk kasus blogger, alt pada image belum terisi, dan biasanya script img dari picasa itu saya ubah menjadi:

<a href="http://deconstructioncode.blogspot.com/2009/10/blogger-indonesia-accessiblity-dan.html">
<img alt="Accessiblity - Usability" src="http://4.bp.blogspot.com/_dfnTVAxeWMI/SsxinGC5-qI/AAAAAAAACfg/u4ynptTvd6Q/s400/Accessiblity-Usability.gif"/>
</a>

"Link Text"

Dalam penulisan, kita sering merujuk sebuah artikel dengan link/pranala/taut. Baik itu internal maupun eksternal. Nah, penulisan 'link text' ini yang perlu dipertimbangkan best practice-nya. Saya menyadur Web Guidelines - Naming Files, Subdirectories, and Links dari panduan web Universitas Texas untuk contoh berikut:

Buruk: Untuk informasi tentang HTML, klik di sini
Baik: Untuk informasi tentang HTML, lihat Belajar HTML
Lebih baik: Lihat Belajar HTML untuk informasi selengkapnya.

Selain itu Link Text perlu dibedakan secara jelas dengan teks biasa. Bisa menggunakan warna yang berbeda dan/atau underline/garis bawah. Termasuk perlakuan terhadap a:hover, a:focus dan a:active. Untuk kondisi tertentu, penggunaan underline dan border lebih baik, terutama untuk seorang yang buta warna.

Kemudian masalah 'dotted border' saat 'link focus', idealnya tidak di hapus dengan trik CSS seperti * {outline:none}. Karena sangat penting perannya bagi pengguna Internet yang hanya menggunakan 'keyboard' dengan menggunakan fungsi TAB.

Navigasi

Dalam Usability (di Wikipedia), masalah navigasi menjadi salah satu hal penting. Dengan navigasi yang baik pada weblog, penggunjung akan mudah menjelajah tiap halaman dengan cepat, tanpa merasa gagap, atau terjebak. Terjebak? Misal pada beberapa 'Free Blogger Template' saya ada link 'ads' yang seakan itu adalah navigasi :).

Mungkin dengan adanya Sitemap akan semakin menambah baik fungsi navigasi dari weblog kita.

Navigasi sebaiknya tetap berbasis teks. Jika berupa gambar, gunakan 'atribut alt' dengan tepat. Khusus untuk 'skip links', disarankan memakai kata 'skip to main content', agar lebih dimengerti oleh screen reader. Beberapa panduan menyarankan, jika pranala sebelum konten utama berjumlah lebih dari 5 buah, sebaiknya sertakan 'skip links'. Bermanfaat bagi pengguna 'keyboard', 'screen reader', dan yang menonaktifkan Cascading Style Sheet (CSS).

Cek Tampilan Weblog di Semua Browser

Ada beragam jenis browser/peramban. Diantaranya yang populer yaitu Firefox, Internet Explorer, Opera dan Chrome. Untuk itu kita perlu memastikan bahwa 'template' kita dapat tampil sempurna di semua browser, terutama yang populer tersebut. Ada beragam cara untuk mengecek tampilan 'template' kita di browser, selain manual, yaitu menggunakan aplikasi atau tools online/daring yang tersedia, seperti: IETester dan BrowserShots.

Kecepatan Tampilan Weblog

Ketika kita membuka Weblog, kita harus memastikan seberapa cepat weblog tersebut tampil. Perhitungannya tentu semakin cepat weblog kita tampil semakin baik. Dan ini berkaitan dengan koneksi Internet kita. Intinya jangan biarkan para pengunjung merasa jenuh ketika mengarungi weblog kita. Ada beberapa hal yang dapat mempengaruhi kecepatan tampil blog kita, yaitu image, javascript, flash, dan pengkodean yang tidak baik.

Pada kasus blogger, 'widget' bisa memperlambat loading (sebab menggunakan javascript yang disimpan diluar/ekternal file). Untuk itu gunakan 'widget' sesuai kebutuhan, jangan mengumbar widget.

Tools kompres:

• Image: Smush.it
• Javascript: Packer
• CSS: CSS Compressor

Nah untuk melihat tingkat kecepatan tampil weblog, dapat menggunakan addons/pengaya Firefox YSlow. Dengan menggunakan addons ini anda dapat melihat juga ukuran masing file/berkas yang anda miliki.

"White Space"

White space (di Wikipedia) atau disebut juga ruang negatif itu berkaitan dengan komposisi ruang template kita. Seberapa baik tertatanya. Baik itu spasi tulisan dan jarak antar kolom atau elemen sehingga template kita telihat rapih dan ada jedah sehingga pengunjung nyaman untuk melihat halaman dan membacanya. Lebih jelasnya anda dapat mempelajari 'Whitespace' (di Alistapart.com) yang ditulis oleh Mark Boulton.

Typography

Typography (di Wikipedia) adalah seni penggunaan type. Jadi typography tidak sekedar penggunaan jenis font/huruf yang indah tapi juga berkaitan dengan 'rhythm' (di Sitepoint.com) .

Dalam kasus platform Blogger, contoh pada template Minima, ada masalah dengan hirarki heading (H1-H6). Dimana kita melihat heading H2 digunakan pada 'sidebar' dan 'date' sedangkan H3 pada judul postingan, ini terbalik.

Idealnya, judul postingan adalah H2, sub-judul menjadi H3. Atau pada halaman artikel, judul adalah H1 dan sub-judul adalah H2 (ini bisa juga berkaitan dengan SEO, tapi ini masih bisa diperdebatkan). Masalah hirarki heading ini menjadi bahasan semantik (lihat juga: Guide to Semantic Use of HTML Elements).

Selain penggunaan ukuran font (font-size) pada kode CSS, line-height dan letter-spacing juga memiliki peranan penting dalam 'typography'. Dengan Baseline Rhythm Calculator bisa menjadi pilihan alternatif untuk membantu typography pada weblog kita.

Anda dapat melihat A guide to Web typography dan Web Typograhy sebagai bahan belajar dan inspirasi.

Penggunaan Bahasa

Bahasa baku tampaknya menjadi lazim, jika kita memang ingin webblog kita terbaca dengan baik untuk warga negara lain. Misal dengan menggunakan google translate, sebagai media penerjemah. Jadi Bahasa yang kita gunakan bukan sekedar bahasa yang 'berbui'. Kalau bisa menjelaskan secara singkat kenapa tidak, bukan sekadar menembak keyword/kata kunci tertentu (ini pilihan, bukan kewajiban).

Cek Validasi HTML dan CSS

Sebaiknya kita mengecek validasi weblog, baik itu X/HTML maupun CSS. Memang Blogger ada masalah besar di sana, tetapi semestinya kita sedikit mengurangi error pada dua hal tersebut.

Cek validasi HTML : W3C HTML Validation Service.
Cek validasi CSS : The W3C CSS Validation Service.

Membedakan Antara Media Screen, Print dan Handheld (Media Queries)

Penjelasan detilnya dapat anda lihat di Bedakan antara Media Screen dan Print - CSS

Penutup

Beberapa hal diatas tentunya belum memenuhi secara keseluruhan (dan saya belum menjalankan secara maksimal), masih banyak lagi persoalan yang perlu diperhatikan. Mungkin masalah SEO? Yang belum dikupas disini. Jika anda berkenan silahkan menambah beberapa point yang menurut anda penting dan terlupakan disini.

Sebagai pertimbangan, anda dapat melihat dua blog berikut, bagaimana mereka mempersiapkan weblognya:

1. Surprise! Your semantic, accessible, search engine friendly WordPress theme is none of the above.
2. Site Help

---
Makasih banyak kepada Dani Iswara atas beberapa koreksi dan masukannya.

Read More

Blogger Indonesia yang Membahas Accessiblity dan Usability

Selama ini saya merasa malu, setelah sekian lama, ternyata ada yang saya lupakan (atau tidak pernah tahu sebelumnya) yaitu persoalan "Accessibility" dan "Usability".

Pengertian "Accessibility", kurang lebih:

Web aksesibilitas berarti bahwa para penyandang cacat dapat melihat, memahami, navigasi, dan berinteraksi dengan Web, dan bahwa mereka dapat memberikan kontribusi ke Web. Web aksesibilitas juga memperhatikan orang tua dengan kemampuan berubah akibat penuaan. What is Web Accessibility

Pengertian "Usability", kurang lebih:

Web usability adalah sebuah pendekatan untuk membuat situs web mudah digunakan oleh para pengunjung tanpa memerlukan pelatihan khusus apapun. Pengguna harus dapat menjelajah ke tiap halaman dengan mudah dan dapat berinteraksi dengan baik. Web usability

Karena baru mau belajar mengenai persoalan Web "Accessibility" dan "Usability" yang diperkenalkan oleh Dani lewat artikel di blognya, saya melakukan pencarian di google dengan kata kunci tersebut, tapi ternyata memang sangat terbatas pembahasan soal diatas dalam bahasa Indonesia dan ditulis oleh blogger Indonesia (entah mengapa, apa sebagai besar seperti saya ?).

Sementara ini hanya beberapa Blogger Indonesia yang membahas Web "Accessibility" dan "Usability" yang saya dapat, untuk bahan belajar (saya):

Accessibility:
- Be Accessibility King ?
- Mitos Aksesibilitas Web-Blog

Usability:
- Posts Tagged ‘kebergunaan’
- tag usability blog Bakawan
- Tips Dasar Meningkatkan Usability Pada Website

Bagaimana detil dari penerapan "Accessibility" dan "Usability" di blog, lihat di blognya Dani di Site Help.

Kesimpulan Sementara:
Web "Accessiblity" dan "Usability" adalah hal yang ideal dalam membangun sebuah web/blog, namun tentunya itu sebuah pilihan bagi pembuat weblog itu sendiri, sebab terkadang memang sering sulit untuk memenuhi keseluruhan prinsip/syaratnya, seperti pada platform Blogger pada format penulisan HTML dan CSS bawaan bloggernya tidak valid. Tapi, jika kita dapat memenuhi semua syarat dari "Accessiblity" dan "Usability", web/blog kita akan terlihat profesional dan para pengunjung merasakan sesuatu yang bermanfaat.

---
lihat juga artikel menarik tentang "Accessiblity" dan "Usability":
- What does Accessibility mean?
- Interview with Web Usability Guru, Jakob Nielsen
- 15 Helpful Website Usability Facts & Guidelines
- UT Austin Web Publishing Guidelines

Read More

Mootools Pengantar Dasar Banget

Apa itu Mootools

Mootools, yang beralamat di mootools.net, merupakan framework Javascript atau JavaScript libraries, sama seperti halnya jQuery, yang sangat familiar bagi para pengembang web untuk memberikan sentuhan khusus seperti effect atau animasi.

"MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API."

Mootools dan jQuery

Hasil pengembangan mootools sebagian besar memang sama dengan jquery, seperti plugin slider, acoordion, dan lainnya, tapi masing-masing memiliki kelebihan sendiri. Bahkan keduanya dapat kita sandingkan bersamaan antara mootools dengan jQuery, lihat : Mengatasi Konflik Antara jQuery Dan MooTools.

Jika anda membutuhkan script mootool dapat di peroleh di:

Download MooTools 1.2.3

kemudian masukan script tersebut menjadi:

<script type="text/javascript" src="mootools.js"></script>

atau di

Google AJAX Libraries API , yang tidak perlu anda download, tapi langsung mengambil link scriptnya seperti:

http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js

menjadi:

<script src='http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js' type='text/javascript' ></script>

Jika anda ingin melihat demo dasar dari pengembangan mootools, dapat dilihat di:MooTools Demos. atau hasil pengembangannya lihat di label mootools.

atau mau tau perbedaan lebih lanjut mengenai Mootools dan jQuery: jQuery vs MooTools

Read More

Web dan Semiotika

Web dan Semiotika ?

1. Icons, Symbols and a Semiotic Web

"The web is full of signs. Think about it"

2. THE SEMIOTICS OF THE WEB*

"Web pages are attractive and full of meaningful information - or so they seem. Surfing on the Web is worth the hours spent waiting in front of the computer while data is transmitted from the other side of the planet, or spent wandering through useless information on uninteresting subjects. Our purpose here will only be to use semiotics to analyse the Web as a communication tool and determine what classical concepts are reified in it."

3. The Semiotic Web: Don’t forget the user amongst all the semantics

"The Semantic Web enhances the reliability and efficiency of automated information re-use"

:: apa itu Semantic: Semiotics for Beginners

Read More

Semuanya Tentang "Typography"

Permainan "Typography" menjadi bagian penting dalam sebuah desain. Begitu pula dengan desain blog atau website, pada perkembangannya sudah mulai memperhatikan aspek "Typography", sebab type atau huruf juga menjadi bagian penting didalamnya.

Berikut ini pengertian "Typography"

"Typography" (Tipografi) merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

Dikenal pula seni tipografi, yaitu karya atau desain yang menggunakan pengaturan huruf sebagai elemen utama. Dalam seni tipografi, pengertian huruf sebagai lambang bunyi bisa diabaikan. (wikipedia)

Artikel tentang "Typography":

1. 8 Simple Ways to Improve Typography In Your Designs

2. A Guide to Web Typography

3. 10 Principles For Readable Web Typography

4. 6 Ways To Improve Your Web Typography

5. The Elements of Typographic Style Applied to the Web

Lebih lanjut blog/atau web yang membahas tentang "Typography":

AisleOne

i love typography

Tool untuk membantu desain "Web Typography"

50 Useful Design Tools For Beautiful Web Typography

Tempat untuk memperoleh inspirasi konsep desain "Typography":

Typesites

Fantastic Typography Blogs For Your Inspiration

Video tentang "Typography"

1. Typography Styles

2. Sessions - Fundamentals of Typography: Anatomy of Type

3. Typographics - Vancouver Film School (VFS)



4. Graphic Design: The Forgotten Web Standard

Free Template dengan konsep "Typography":

1. Free WordPress Theme: WP Typo

demo:


2. Free Typographic XHTML/CSS-Layouts For Your Designs

-----------
:: lihat juga: 101 Typography Resources for Web Designers

Read More