CSS Selector Cheatsheet

Selector Example Example description CSS
.class .intro Selects all elements with class="intro" 1
#id #firstname Selects the element with id="firstname" 1
* * Selects all elements 2
element p Selects all <p> elements 1
element,element div,p Selects all <div> elements and all <p> elements 1
element element div p Selects all <p> elements inside <div> elements 1
element>element div>p Selects all <p> elements where the parent is a <div> element 2
element+element div+p Selects all <p> elements that are placed immediately after <div> elements 2
[attribute] [target] Selects all elements with a target attribute 2
[attribute=value] [target=_blank] Selects all elements with target="_blank" 2
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word “flower” 2
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with “en” 2
:link a:link Selects all unvisited links 1
:visited a:visited Selects all visited links 1
:active a:active Selects the active link 1
:hover a:hover Selects links on mouse over 1
:focus input:focus Selects the input element which has focus 2
:first-letter p:first-letter Selects the first letter of every <p> element 1
:first-line p:first-line Selects the first line of every <p> element 1
:first-child p:first-child Selects every <p> element that is the first child of its parent 2
:before p:before Insert content before the content of every <p> element 2
:after p:after Insert content after every <p> element 2
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with “it” 2
element1~element2 p~ul Selects every <ul> element that are preceded by a <p> element 3
[attribute^=value] a[src^="https"] Selects every <a> element whose src attribute value begins with “https” 3
[attribute$=value] a[src$=".pdf"] Selects every <a> element whose src attribute value ends with “.pdf” 3
[attribute*=value] a[src*="w3c"] Selects every <a> element whose src attribute value contains the substring “w3c” 3
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent 3
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent 3
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent 3
:only-child p:only-child Selects every <p> element that is the only child of its parent 3
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child 3
:last-child p:last-child Selects every <p> element that is the last child of its parent 3
:root :root Selects the document’s root element 3
:empty p:empty Selects every <p> element that has no children (including text nodes) 3
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
:enabled input:enabled Selects every enabled <input> element 3
:disabled input:disabled Selects every disabled <input> element 3
:checked input:checked Selects every checked <input> element 3
:not(selector) :not(p) Selects every element that is not a <p> element 3
::selection ::selection Selects the portion of an element that is selected by a user 3

Kustomisasi Tag del

Mari kita berbicara sedikit tentang HTML. Anda tahu tag <del>?

Tag <del> menunjukkan bagian dokumen yang telah dihapus (deleted). Hampir semua browser menampilkannya dengan dekorasi “line-trough” untuk menunjukkan bahwa konten tersebut sudah dihapus.

Kita bicara masalah visual, line-through bisa jadi tampil baik-baik saja pada font berukuran kecil (bodycopy), tapi bisa jadi bermasalah pada font berukuran besar. Sederhana saja, tidak proporsional.

Kita bisa memberikan sedikit kustomisasi dengan menggunakan CSS Pseudo-element. Biar tidak bingung, boleh cek dulu demonya disini.

Kita bisa memulainya dengan mengatur class untuk tag <del>

del {
    text-decoration:none; /*-- menghilangkan "line-trough" -- */
    position:relative;
}

Untuk membuat seperti pada contoh no 3 kita perlu pseudo-element

del:before {
    content:"";
    display:block;
    width:100%;
    height:5px; /*-- ketebalan garis --*/
    background:rgba(255,0,0,0.5);
    position:absolute;
    top:0.5em;
}

Maka akan muncul garis merah setebal 5px, kita bisa mengkustomisasikan warna, ketebalan dan transparansinya. Kitapun bisa sedikit berkreasi dengan mengganti garis melintang biasa menggunakan tanda silang (contoh no 4).

del:before {
    content:"";
    display:block;
    width:100%;
    height:5px;
    background:rgba(255,0,0,0.5);
    position:absolute;
    top:0.5em;
    -webkit-transform: rotate(-3deg);
       -moz-transform: rotate(-3deg);
         -o-transform: rotate(-3deg);
}
del:after {
    content:"";
    display:block;
    width:100%;
    height:5px;
    background:rgba(255,0,0,0.5);
    position:absolute;
    top:0.5em;
    -webkit-transform: rotate(3deg);
       -moz-transform: rotate(3deg);
         -o-transform: rotate(3deg);
}

Sekarang tampilan tag <del> sepertinya sudah lebih menarik. Masih kurang menarik? Silahkan berkreasi. :D

Toto, Blogengine Terkecil

Toto adalah sebuah blogengine sederhana buah tangan Alexis Sellier yang juga populer sebagai pembuat less CSS preprosessor. Dengan jargon “git-powered, minimalist blog engine for the hackers of Oz”, Toto bisa dijadikan sebagai salah satu alternatif blog engine yang cukup menarik untuk digunakan.

Engine Toto “hanya” sebuah file rackapp dengan kode tidak lebih dari 300 baris, sangat simpel. Toto sangat ringan cepat dan tidak memerlukan database seperti MySQL dan semacamnya.Tulisan/posting akan disimpan dalam bentuk text file sehingga kita bisa menggunakan text editor favorit. Untuk mengakomodasi komentar, secara default Toto menggunakan Disqus.

Instalasi

Toto ditulis dalam bahasa Ruby, untuk itu pastikan anda telah menginstall Ruby & Rubygem. Untuk menginstall Toto, jalankan perintah berikut di Terminal:

$ sudo gem install toto

ps: Jika kita menggunakan RVM, tidak perlu memakai “sudo”

Setelah gem terinstall, kita bisa mengkloning Dorothy — template defaultnya Toto —

$ git clone git://github.com/cloudhead/dorothy.git myblog

Template Toto berada pada folder “templates” dengan susunan sebagai berikut:

templates/
|
+- layout.rhtml      # layout utama
|
+- index.builder     # atom feed layout
|
+- pages/            # pages (home, archive dsb) berada disini
   |
   +- index.rhtml    # default page
   |
   +- article.rhtml  # article page
   |
   +- about.rhtml

Dorothy sangat simpel dan mudah untuk dikustomisasi. Kita bisa mengedit semua file dalam folder “templates” untuk mendapatkan tampilan yang kita inginkan.

Membuat Tulisan Baru

Untuk memulai sebuah tulisan baru, caranya sangat mudah yaitu dengan menuliskan perintah berikut:

$ rake new

Kemuduian masuk ke direktori blog. Toto secara otomatis menggenerate text file dengan nama YY-MM-DD-judul-tulisan.txt kemudian buka file dan cermati:

title: Judul Tulisan
date: 1900/05/17

Once upon a time...

Dua baris pertama (YAML) berfungsi sebagai metadata, tidak usah diutak-atik kecuali bila perlu. Untuk menulis artikel, yang harus kita lakukan hanyalah mengganti tulisan “Once upon a time…” dengan tulisan yang diinginkan. Secara default, Toto menggunakan Markdown untuk mempermudah proses penulisan. Hal ini berarti kita masih bisa menggunakan plain HTML untuk menuliskan konten.

Menjalankan Toto di Server Lokal

Saya menggunakan Thin untuk menjalankan Toto. Pertama-tama install Thin melalui gem dengan perintah berikut:

$sudo gem install thin

Setelah terinstall, masuk ke direktori blog, kemudian jalankan Thin

$ cd myblog
$ thin start -R config.ru

Buka browser kemudian buka http://localhost:3000 dan voila!

Migrasi ke Webstatis

Sebenarnya sudah cukup lama saya berencana bermigrasi dari penggunaan CMS/webdinamis[1] ke webstatis[2]. Tetapi baru sekarang kesampaian karena terkendala beberapa kesibukan. Selain itu, kebanyakan generator webstatis yang saya jumpai dibuat dengan Ruby. Sehingga saya harus memeras otak untuk dapat menggunakannya. :D

Pada akhirnya saya menggunakan Jekyll[3], sebuah webstatic generator berbasis Ruby yang populer. Jekyll dibuat oleh Tom Preston-Werner[4] dan dikembangkan melalui Github — Jekyll juga digunakan sebagai engine pada Github Pages. Jekyll dapat diinstall melalui rubygem, dan dapat mengkonversi dokumen teks yang ditulis dengan Markdown, Textile, atau plain HTML menjadi konten web. Dengan Jekyll, kita bisa mengelola dokumen HTML yang banyak dengan lebih mudah.

Webstatis?

Hey bung, ini tahun 2011! Jaman web 2.0, jaman web yang interaktif! Oh dear, penggunaan webstatis mungkin terkesan seperti kembali ke era Geocities… Tetapi saya memiliki beberapa alasan kenapa kembali pada teknologi webstatis:

1. Security

Saya tidak lagi khawatir dengan pembobolan admin area atau injeksi database. Sederhana saja, karena saya menyajikan dokumen HTML statis. Hal ini berarti tidak ada admin area ataupun database! Kalau mau membobol blog ini harus melewati admin panel hosting yang tentu saja memiliki tingkat keamanan yang lebih baik daripada CMS yang saya kelola sendiri.

2. Kecepatan

Halaman web disajikan tanpa harus memanggil perintah dari server atau koneksi database! Semuanya disajikan dalam bentuk dokumen HTML yang langsung dicache oleh browser. Hal ini yang membuat webstatis memiliki keunggulan pada kecepatan muat — tanpa plugin super cache atau semacamnya tentunya. Sayapun tidak was-was dengan server yang overload. :D

3. Keamanan Data

Dengan Jekyll, saya menulis konten dalam bentuk dokumen teks, mengkonversi menjadi dokumen HTML kemudian meletakkannya di server hosting via ftp. Kalaupun terjadi sesuatu dengan server hosting yang membahayakan data, saya tidak perlu khawatir karena semua data masih ada di komputer lokal.

4. Interaktivitas

Thanks to JavaScript karena bisa menyajikan konten web dinamis pada halaman statis. Pada blog ini, saya memanfaatkan trackback dari twitter untuk mengganti kotak komentar. Kita juga masih bisa memanfaatkan layanan dari Disqus atau IntenseDebate.

5. Unik

Yeah, bolehlah sedikit “tampil beda”. :D

So long, Textpattern…

Update

Saat ini blog ini tidak lagi menggunakan Jekyll tetapi Toto, the tiniest blogging engine in Oz!

CSS Transformasi

Kita bisa melakukan rotasi, refleksi dan scaling dengan CSS. Perhatikan contoh berikut:

Reflection

Normal Horizontal Vertical
normal transformed transformed

Rotation & Scaling

Normal Rotate Scaling
normal transformed transformed

Kode

Berikut ini adalah kode CSS yang digunakan pada contoh di atas:

Flip Horizontal

-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);

Flip Vertical

-webkit-transform: matrix(1, 0, 0, -1, 0, 0);
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
-o-transform: matrix(1, 0, 0, -1, 0, 0);

Rotasi

-webkit-transform: matrix(0, -1, 1, 0, 0, 0);
-moz-transform: matrix(0, -1, 1, 0, 0, 0);
-o-transform: matrix(0, -1, 1, 0, 0, 0);

Scaling

-webkit-transform: matrix(1.5, 0, 0, 1.5, 0, 0);
-moz-transform: matrix(1.5, 0, 0, 1.5, 0, 0);
-o-transform: matrix(1.5, 0, 0, 1.5, 0, 0);

Ok, i see… Tapi apa maksud dari angka-angka tersebut?

Yeah, itu adalah matrix transformasi. Untuk lebih jelas tentang linear transformation matrices, bisa melihat contohnya di Wikipedia.

Simpulan

Transformasi menggunakan CSS ini memang masih dalam tahap eksperimental. Kemungkinan hanya disupport oleh browser bermesin Webkit, Gecko, dan Presto terbaru. Saya pikir transformasi dengan matrix ini lebih baik daripada sekedar CSS rotation.

Selamat belajar matematika. ;)

Thanks: mir.aculo.us

Trik Fotografi, Membuat “Fake Miniature”

Membuat foto fake miniature tidak susah. Kita tidak perlu lensa-lensa yang mahal atau kamera terbaru — setahu saya pada Nikon D3000 atau Canon IXUS terbaru memiliki mode untuk menciptakan fake miniature — untuk melakukannya. Yang kita butuhkan adalah foto/gambar yang tepat dan sedikit olah digital.

Gunakan Foto Yang Tepat

Maksudnya adalah, foto yang hendak diedit hendaknya memenuhi kriteria foto miniatur. Yang penting diperhatikan adalah sudut pengambilan gambar. Biasanya, foto yang bagus adalah foto yang diambil dari sudut yang tinggi (high angle) untuk menciptakan efek miniatur yang bagus. Berikut ini adalah contoh foto yang akan dijadikan foto miniatur.

Tilt-shift maker

Tilt-sift maker adalah tools online yang dapat memanipulasi pemilihan fokus untuk menciptakan efek foto miniatur. Tools ini gratis dan tidak perlu diinstall. Berikut ini metode pembuatan foto fake miniature:

  1. Buka Tilt-shift Maker kemudian upload foto yang dibutuhkan.
  2. Atur focus size, defocus strength, & defocus gradient untuk menciptakan efek miniatur.
  3. Gunakan opsi color enhancer atau bokeh enhancer untuk hasil yang maksimal.
  4. Tekan tombol “Preview” untuk melihat hasilnya.
  5. Tekan tombol “Get Full Size” untuk mengunduh gambar.

Berikut ini adalah hasil akhir yang didapatkan:

Menggunakan Pengolah Gambar

Selain menggunakan Tilt-shift Maker, kita juga dapat menggunakan pengolah gambar semacam Photoshop atau GIMP. Berikut ini adalah beberapa tutorial yang bisa digunakan:

  1. Tilt-Shift Photography With the GIMP
  2. A Better Fake Tilt Shift with the Gimp
  3. Tilt-Shift Photography Photoshop Tutorial
  4. Tilt Shift Photoshop Tutorial: How To Make Fake Miniature Scenes

Catatan:
Foto Desa Tlogodlingo, Gondosuli, Lereng Gunung Lawu. Diambil menggunakan Canon PowerShot A530.

Google Translate

Beberapa waktu lalu saya membaca tweet dari Pak Zam yang berbunyi:

menurut Google Translate, Bahasa Inggrisnya “kota malang” adalah “urban poor” :( http://twitpic.com/3gbco5 @infomalang

Menarik! Saya langsung membuka Google Translate, mencobanya, dan benar! Google menerjemahkan frase “kota malang” adalah “urban poor”.

Kemudian saya melanjutkan dengan mengganti susunan hurufnya (menggunakan huruf kapital) menjadi “Kota Malang” dan voila! Google menerjemahkannya dengan benar, “Malang City”.

Contoh di atas menjelaskan bahwa penggunaan huruf kapital dapat berpengaruh pada tata bahasa. Mesin semacam translator atau screen reader — yang berguna untuk membantu menyampaikan informasi — bisa melakukan kesalahan sehingga mengganggu penyampaian informasi.

Bisa disimpulkan bahwa penggunaan huruf kapital yang benar memiliki peran penting dalam penyampaian informasi.

Trik CSS, Balon Percakapan

Saya ingin membagi sedikit trik CSS sederhana yaitu membuat balon percakapan dengan CSS. Sebelumnya, pastikan anda mengerti cara menggunakan CSS dan teknik positioning dengan CSS. Sudah banyak tutorial semacam ini, jadi pastikan juga anda belum pernah menjumpai trik ini sebelumnya.

border-element

Kita mulai dengan menciptakan bentuk segitiga dengan menggunakan permainan border pada elemen div. CSS yang digunakan kurang lebih sebagai berikut:

 .segitiga {
      width:0;
      border-top:solid 20px #f00;
      border-right:solid 20px #ff0;
      border-bottom:solid 20px #0ff;
      border-left:solid 20px #00f; 
 }

Jika dilihat, kita mendapati 4 buah segitiga di sana (gambar no. 1). Kita hanya butuh sebuah saja, jadi kita hilangkan 3 segitiga lainnya (gambar no. 2). Pada contoh ini, saya menghilangkan sisi samping dan bawah. Caranya dengan mengubah kode warna menjadi transparan.

 .segitiga {
      width:0;
      border-top:solid 20px #f00;
      border-right:solid 20px transparent;
      border-bottom:solid 20px transparent;
      border-left:solid 20px  transparent; 
 }

Horray! kita mendapatkan sebuah segitiga! Pertanyaannya adalah untuk apa segitiga ini? Yeah, sebuah trik CSS menjadi tidak berguna jika tidak diterapkan pada web yang sesungguhnya. Saya menggunakannya untuk membuat balon percakapan (gambar no. 3). Caranya sangat mudah, kita hanya sedikit bermain-main dengan CSS positioning saja. Berikut ini contohnya:

 .balon {
      position:relative;
      width:250px;
      background:#f00;
      padding:20px;
 }

 .segitiga {
      width:0;
      border-top:solid 20px #f00;
      border-right:solid 20px transparent;
      border-bottom:solid 20px transparent;
      border-left:solid 20px  transparent;
      position:absolute;
      bottom:-40px; /* ukuran sebesar 2 kali tebal border */
      left:50px; 
 }

Dengan contoh kode HTML sebagai berikut:

 <div class="balon">
      Ini adalah balon percakapan yang dibuat dengan CSS, tanpa menggunakan gambar.
      <div class="segitiga"></div>
 </div>

</div>

Akhirnya jadilah sebuah balon percakapan yang sederhana. Tentu saja kita bisa menambahkan border-radius atau box-shadow untuk menciptakan tampilan yang lebih baik lagi.

Demo:

Ini adalah balon percakapan yang dibuat dengan CSS, tanpa menggunakan gambar.





Pengertian Sederhana Tentang Semantik Markup

Secara sederhana, pengertian semantik markup pada dokumen (X)HTML adalah makna yang terdapat pada sebuah tag (kode). Seperti yang kita tahu, setiap tag HTML memiliki makna dan fungsinya masing-masing. Contohnya adalah <p> untuk membuat blok paragraf, <ol>, <ul>, dan <dl> untuk membuat listing dan sebagainya. Untuk lebih lengkap tentang makna dan fungsi kode tersebut dapat melihat referensinya di w3schools.

Perhatikan contoh berikut:

<p>1. Contoh pertama</p>
<p>2. Contoh kedua</p>
<p>3. Contoh ketiga</p>
<ol>
    <li>Contoh pertama</li>
    <li>Contoh kedua</li>
    <li>Contoh ketiga</li> 
</ol>

Maksud penulisan kode di atas sama, yaitu membuat listing. Akan tetapi struktur kodenya berbeda. Pada contoh pertama menggunakan blok paragraf sedangkan pada contoh kedua menggunakan ordered list. Contoh kedua lebih baik karena semantik, ordered list ditulis menggunakan markup ordered list <ol> dan bukan menggunakan tag lainnya — seperti <p>, <div>, atau <span>

Selain struktur dokumen menjadi lebih baik, penggunaan markup yang semantik tentu memiliki manfaat lain. Baik orang yang normal maupun penyandang disabilitas yang menggunakan pembaca layar pasti lebih mudah membedakan antara listing & paragraf, heading & konten, kuotasi & preformatted text, kode dan sebagainya.

Yeah, jika anda belum menggunakan markup yang semantik, mungkin sekarang adalah saat yang tepat untuk memulainya. Validasi dokumen bisa jadi tidak berarti tanpa disertai dengan penulisan kode yang semantik. ☺

Daftar Bacaan

Perlu Tidak Perlu, Validasi

Sebelumnya saya mohon maaf jika tulisan ini menambah — satu lagi — polusi informasi di dunia maya. Seperti kita tahu bahwa tulisan seputar pertanyaan dan pernyataan tentang penting-tidaknya validasi dokumen telah banyak beredar baik di kalangan narablog lokal maupun luar.

Kembali kepada pertanyaan tentang perlu tidaknya validasi, ada tiga jawaban yaitu perlu, tidak perlu, dan tidak tahu/tidak peduli. Jawaban saya, perlu atau tidak semuanya tergantung pada situasi dan kondisi yang ada. Validator hanyalah alat bantu yang dapat digunakan untuk mempermudah pemeriksaan dokumen. Kesalahan penulisan tag adalah hal yang biasa. Kita mungkin sering lupa memberikan tag penutup atau salah tulis (typo). Permasalahan semacam inilah yang penting untuk diperhatikan. Coba perhatikan contoh kode berikut ini:

<p>Ini adalah paragraf pertama…</p>
<p><a href="#"><img src="images.jpg" alt="" /></p>
<p>Ini adalah paragraf kedua… </p>

Kode tersebut tidak valid, terlihat bahwa tidak ada penutup untuk tag <a>. Kira-kira apa yang akan terjadi? Ya benar! Paragraf kedua akan ditampilkan sebagai hyperlink, tidak sesuai dengan yang kita inginkan.

Khusus untuk kasus Blogspot — dan juga Tumblr — saya menilai validasi memang tidak perlu dipaksakan. Mungkin beberapa fitur seperti kotak komentar dan navbar memang menggunakan kode-kode yang tidak valid, tetapi hal tersebut tidak menjadi masalah besar. Yang perlu diperhatikan adalah bagian konten, karena disinilah tempat terjadinya error dokumen yang lebih banyak dapat terjadi. Jangan sampai kasus salah penulisan kode terdapat pada konten yang anda tulis sehingga menyebabkan gangguan pada penyampaian informasi.

Saya ingin menggarisbawahi bahwa pemahaman kita tentang penulisan dokumen HTML jauh lebih penting daripada sekedar validasi dokumen oleh validator. Bukan masalah perlu/penting tidaknya, tetapi sebagai jaminan bahwa kita menyajikan konten dengan baik, menggunakan struktur dokumen yang baik, dan yang terpenting adalah penyampaian informasi dengan baik.

Ah ya, validasi/standard itu baik.

Generic Font

Beberapa waktu lalu saya menulis sedikit referensi tentang font stack.

Penggunaan font terkadang menjadi masalah tersendiri. Kita pasti ingin menggunakan font yang bagus untuk mendukung tampilan dan keterbacaan. Akan tetapi hal tersebut sulit terealisasi karena terkendala kompatibilitas sistem operasi. Tidak semua OS memiliki font yang kita gunakan.

Saya tidak berbicara masalah font embedding. Saya ingin membahas masalah kontrol dari sisi pengguna. Jika beberapa waktu lalu diperlukan JavaScript untuk mengubah ukuran font, sekarang tidak lagi karena browser modern telah memiliki fungsi tersebut.

i love dingbat!

Ok, saya tahu semua itu, Lalu apa hubungannya dengan penggunaan font pada desain web?

Good question! Hubungannya adalah, jika kita bisa memberikan kontrol pada user untuk mengatur ukuran font kenapa tidak memberikan keleluasaan untuk memilih font yang diinginkan? Bukan, bukan dengan CSS switcher a la jQuery, tetapi sesuai dengan setelan browser.

Generic font? bagaimana dengan CSSnya?

Inilah poin yang menarik, kita tidak perlu menuliskan font yang spesifik pada CSS. Cukup serif, sans-serif, monospace atau tidak perlu samasekali. Biarkan user menyetting browser mereka dan memilih font yang disukainya berikut ukurannya.

Hey, terdengar seperti “menonaktifkan CSS” bagi saya?

Haha, tidak juga, CSS nonaktif sux. Pengaturan tata letak tetap sesuai dengan tempatnya. Kita tidak dapat melupakan measuring & kerning untuk mendapatkan legibilitas yang maksimal. Yang dilakukan user hanyalah memilih font dan ukuran yang dibutuhkan.

Oh begitu, lalu bagaimana dengan layoutnya? Ukurannya pasti kacau!

Ha, inilah yang terpenting. Konsekuesinya kita harus meninggalkan satuan absolut seperti pixel dan beralih menggunakan satuan relatif — terutama em dan percent. Tujuannya agar layout tetap konsisten meskipun ukuran font yang digunakan berbeda-beda.

Menarik! Mari kita coba…

Yup! anda bisa memulainya dari halaman ini, ubahlah setelan font default pada browser. Sangat mudah bukan? ☺

fluff

Seringkali saya menjumpai penggunaan kalimat-kalimat pembuka yang berlebihan pada sebuah artikel. Tidak jarang, narablog menggunakan dua hingga tiga paragraf pembuka dalam menulis artikel. Setelah dibaca lebih lanjut, ternyata tulisan tersebut hanya berisi beberapa baris kode saja.

Tidak ada yang salah, hanya terlalu banyak fluff dalam tulisan tersebut. Fluff dapat diartikan sebagai tulisan yang — hampir — tidak berarti. Baca dan lupakan! Seorang pemindai/fast reader mungkin akan membaca beberapa kalimat pertama sebelum akhirnya memindai seluruh halaman. Jika terlalu banyak fluff pada kalimat pembuka dapat menyebabkan pengunjung malas untuk membaca lebih lanjut, nilai minus dari sisi usabilitas.

Mungkin kita berpikir bahwa penambahan fluff akan membuat tulisan kita terlihat panjang, berisi dan layak disebut artikel bermutu. Boleh saja anda berpendapat seperti itu, tetapi perlu diingat bahwa sebagian besar pengunjung memindai baru — mungkin —membaca. Saya telah menjelaskannnya pada tulisan Pengunjung Memindai, Baru Membaca beberapa waktu lalu. Kita bisa mengambil asumsi bahwa tidak semua orang memiliki waktu atau kemampuan untuk berlama-lama membaca tulisan pada sebuah blog. Wajar jika banyak blogwalkers yang kemudian meninggalkan komentar sekenanya karena mereka memang tidak membaca.

Saran saya, jangan menggunakan fluff — secara berlebihan — dalam tulisan karena dapat menyita waktu pengunjung. Ringkasan (summary) memang diperlukan, tetapi kita bisa membuatnya seringkas mungkin, fokus & seimbang dengan kapasitas pokok bahasan. Kita harus ingat bahwa kualitas tulisan dinilai dari banyak faktor, bukan hanya dari kuantitas kata yang digunakan.

Bacaan

Catatan

Banyak aktivis aksesibilitas yang menyarankan penggunaan fitur tautan langsung menuju konten (skip to content). Kali ini saya menyarankan untuk menambahkan tautan langsung menuju pokok tulisan (skip the fluff). Khusus bagi anda yang masih menyukai konsep tulisan dengan pembukaan yang panjang, lebar dan tentu saja tinggi.

Minimum Viable Blog

Tulisan ini masih berhubungan dengan tulisan saya tentang desain blog minimalis.

Kembali pada konsep blog minimalis. Saya beranggapan bahwa konsep blog minimalis akan lebih masuk akal jika dijelaskan dengan konsep Minimum Viable Product (MVP). Secara sederhana, pengertian MVP adalah produk dengan fitur yang minimalis tetapi dalam batas-batas kelayakan untuk digunakan. Kita memandang blog adalah sebuah produk. Jadi, Minimum Viable Blog (MVB) adalah sebuah konsep desain blog yang menekan penggunaan fitur seminimal mungkin, tanpa mengorbankan usabilitas.

Lalu bagaimana kriteria Minimum Viable Blog itu?

Definisi sebuah blog adalah sebuah catatan online yang diperbaharui secara berkala dengan penyajian konten secara berurutan berdasarkan waktu. Sehingga dapat kita asumsikan fitur-fitur esensial dari sebuah blog meliputi:

  1. Judul atau identitas blog
  2. Blog Post, sudah pasti sebuah blog pasti memiliki postingan di dalamnya.
  3. Tanggal/alur waktu. Sebuah catatan/log disajikan secara berurut
  4. Terdapat arsip
  5. Memiliki kotak komentar — menurut beberapa sumber, sebuah blog harus memiliki kotak komentar.

Pada perkembangannya, teknologi mesin blog menjadi semakin canggih. Fiturnya semakin lengkap dan semakin mudah digunakan. Saat ini, kita bisa menambahkan fitur-fitur tambahan bahkan tanpa harus mengerti dengan kode HTML atau PHP. Terdapat banyak pilihan widget, plugin atau modul buatan pihak ketiga yang bisa diinstal dengan sekali klik. Mungkin kita sering keasyikan dalam mengelola widget dan plugin tersebut sehingga tidak sadar kalau blog telah menggelembung dengan banyak fitur yang sebenarnya tidak dibutuhkan.

Akan muncul pertanyaan, mengapa harus MVB? Jawaban saya adalah karena kebutuhan. Membaca layar komputer berbeda dengan membaca buku. Kebanyakan orang lebih betah membaca buku karena dapat memposisikan diri dengan lebih mudah dan nyaman. Hal yang paling penting adalah, buku tidak memiliki sidebar apalagi popup iklan!

Saya tidak membicarakan masalah estetika desain antarmuka, tetapi lebih pada fungsi dan kebergunaan. Tujuan konsep MVB lebih kepada mengurangi distraksi (gangguan fokus) yang disebabkan oleh fitur-fitur yang tidak perlu, dan bukan sekedar untuk mempercepat loading blog semata.

Bacaan