I ♥ Ardianzzz’s Blog!

Fixed — SwisPress Header

2011-07-03T00:00:00-07:00

SwisPress adalah Wordpress (Twentyten) child theme yang dirilis oleh WPCharity¹. Ketika melihat SwissPress, saya langsung menyukainya. Simpel, proporsional dan swiss style². FYI, SwissPress lahir dari kolaborasi Daustralala³ dan Pakzam⁴.

Suatu kali saya mencoba SwissPress. Saya menjumpai sedikit masalah di bagian header. Bukan masalah besar yang berdampak pada usabilitas atau aksesibilitas, hanya masalah layout yang bergeser karena kondisi tertentu.

1. Ketika List Menu Cukup Banyak

Ketika kita menggunakan list menu yang cukup banyak, kita mendapati tampilan list menu menjadi dua baris — karena lebar yang tidak mencukupi. Hal ini menyebabkan teks logo tertekan ke bawah/melorot sehingga menempel pada border. Untuk lebih jelasnya dapat dilihat pada gambar 1.

Gambar 1. Masalah Header SwissPress

Hal tersebut terjadi karena tinggi div#header dipaten sebesar 120px. Untuk mengatasinya saya mengubah sedikit CSS seperti berikut:

/*-- CSS sebelumnya--*/
#header{
        padding: 0px;
        border-bottom: 4px solid #ddd;
        height: 120px;
}
/*-- CSS dimodifikasi --*/
#header{
        padding: 0px;
        border-bottom: 4px solid #ddd;
        padding-bottom:16px;
}

Untuk mengatasi float element, saya tambahkan clearfix menggunakan pseudo-element. Perlu dicatat bahwa cara ini tidak berlaku bagi IE7 ke bawah karena ~~belum~~ tidak mendukung pseudo-element.

#header:after {
        content:"";
        display:block;
        height:0;
        visibility:hidden;
        clear:both;
}

2. Ketika Teks Logo Terlalu Panjang

Saya juga mencoba testing dengan menggunakan teks panjang sebagai logo. Hasilnya adalah teks deskripsi menjadi melorot menekan garis batas bawah, sehingga garis pembatas — yang seharusnya dobel — menjadi terpisah. Untuk lebih jelasnya dapat dilihat pada gambar 2.

Gambar 2. Masalah Header SwissPress

Permasalahan tersebut disebabkan karena lebar teks logo didefinisikan otomatis, sehingga ketika terlalu panjang akan mengacaukan susunan grid. Untuk mengatasinya, saya menambahkan definisi lebar menjadi 450px.

/*-- CSS Sebelumnya --*/ 
#site-title{
	display: inline-block;
	width: auto;
	margin: 40px 100px 0 0;
}
/*-- CSS Dimodifikasi --*/
#site-title{
	display: inline-block;
	width: auto;
	margin: 40px 100px 0 0;
	max-width:450px;
}

Simpulan

Saya hanya kebetulan saja mengetahui masalah layout pada header SwissPress — kemudian menuliskannya disini. Selain pada bagian header, saya tidak/belum menjumpai masalah terkait desain antarmuka. SwissPress adalah theme yang bagus. Jika anda membutuhkan theme untuk blogging yang simpel, minimalis, dan berkarakter, saya merekomendasikan SwissPress.

Bagi yang menginginkan CSS SwissPress yang telah saya modifikasi, dapat melihat kodenya di https://gist.github.com/1062110.

¹ SwissPress — WPCharity.com.

² Desain Komunikasi Visual — Swiss — Wikipedia.com.

³ firmanfirdaus.com.

⁴ zam.web.id.

Artikel Blog Sebagai Portofolio

2011-07-01T00:00:00-07:00

Portofolio memegang peranan yang cukup besar dalam personal branding. Salah satunya, sebagai media untuk menunjukkan kemampuan dan expertise yang kita miliki. Kita biasa menjumpai webportofolio yang berisi kumpulan hasil kerja seorang webdesainer dalam bentuk screen capture dengan sedikit penjelasan atau live demo.

Artikel Sebagai Portfolio

Saya menjumpai beberapa portofolio yang tidak hanya menampilkan hasil kerja, tetapi juga menjelaskan proses rancang bangun dari awal hingga akhir. Sebuah proses branding yang sangat efektif karena orang tidak hanya mengetahui hasil pekerjaan tetapi juga mengetahui bagaimana desainer tersebut bekerja. Uniknya model portofolio semacam itu dibuat dalam bentuk artikel blog. Beberapa contohnya adalah sebagai berikut:

1. Designing UX Exchange (Usabilitypost.com)¹

Dmitry Fadeyev menjelaskan tentang proses rancang bangun interface UX Exchange². Pada artikel tersebut kita bisa melihat bagaimana Dmitri bekerja, mulai dari konsep desain, pembuatan wireframe, prototype, hingga hasil akhir.

2. Smashing Magazine—Realigned (Awayback.com)³

Meskipun “hanya” berupa kritik, tetapi Amrinder Sandhu mengemasnya dengan sangat menarik. Amrinder menunjukkan beberapa “kelemahan” dalam desain SmashingMagazine. Tidak hanya itu, Ia juga mengajukan konsep yang dapat digunakan sebagai solusi sekaligus menujukkan kapabilitasnya sebagai seorang desainer.

Simpulan

Portofolio dalam bentuk artikel bisa jadi sangat efektif untuk branding. Dengan tulisan/artikel, kita bisa menyampaikan informasi yang lebih jelas kepada orang lain. Kita bisa memberikan informasi yang lebih banyak dan jelas tentang siapa diri kita dan bagaimana kapabilitas kita dalam bekerja.

¹ Designing UX Exchange — Usabilitypost.com.

² UX Exchange — Situs tanya jawab, network dari Stack Exchange.

³ Smashing Magazine—Realigned — Awayback.com.

Kustomisasi Tag Del

2011-06-02T00:00:00-07:00

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

2011-05-24T00:00:00-07:00

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 Github

2011-02-28T00:00:00-08:00

Pada tulisan sebelumnya, saya menjelaskan tentang pergantian blogengine dari Textpattern ke webstatis. Saya menggunakan Jekyll sebagai static site generator. Kendalanya, layanan hosting yang saya sewa tidak support penggunaan SSH, jadi saya tidak bisa menginstall aplikasi Jekyll. Hal ini cukup merepotkan karena saya harus melakukan proses update secara manual, yaitu menggenerate file HTML kemudian menguploadnya via FTP. Cukup merepotkan memang…

Beberapa waktu terakhir ini, saya mulai mengenal & mempelajari penggunaan Git¹. Sayapun mulai melakukan praktek dengan bermain-main menggunakan Github . Salah satu fitur yang paling menarik bagi saya adalah Github Pages. Layanan ini memungkinkan pengguna untuk membuat halaman webnya/project sendiri. Hebatnya, secara default Github Pages menggunakan Jekyll sebagai generator web statis. Jadi yang perlu dilakukan adalah membuat template pages dan file-file berisi posting, meletakkannya di repositori dan Jekyll akan menyelesaikan semuanya secara otomatis dan cepat. Keren!

Blog ini telah sukses bermigrasi dari hosting lama ke Github. Layanan Github gratis, dengan satu syarat yaitu repositori yang kita buat bersifat publik/open source. Andapun dapat melihat source blog ini di https://github.com/ardianzzz/ardianzzz.github.com , kalau mau bisa juga didownload. :D

Tulisan ini hanya sekedar informasi saja. Saat ini saya belum bisa menjelaskan banyak tentang penggunaan Git & Github — saya sendiri belum begitu paham menggunakannya — Yang jelas, ini adalah metode blogging yang sangat-sangat simpel, praktis & menyenangkan. Happy blogging… :)

¹ Dasar Git — Progit.org

Migrasi ke Webstatis

2011-02-16T00:00:00-08:00

Sebenarnya sudah cukup lama saya berencana bermigrasi dari penggunaan CMS/webdinamis¹ ke webstatis². 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³, sebuah webstatic generator berbasis Ruby yang populer. Jekyll dibuat oleh Tom Preston-Werner⁴ 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…

¹ Dynamic Web Page — Wikipedia.

² Static Web Page — Wikipedia.

³ Jekyll, a blog aware, static site generator in Ruby .

⁴ Tom Preston-Werner .

Trik CSS, Pelindung Gambar 2

2010-12-25T00:00:00-08:00

Beberapa waktu lalu saya menulis trik pembuatan pelindung gambar dengan CSS. Saya membaca komentar yang menarik dari Fikri Rasyid seperti ini:

Haha, kepikiran juga sama teknik ini. Biar otomatis mungkin pake jQuery supaya dia nyelipin container sendiri ke image di area konten kali ya, jadi ngga usah ngedit satu2 markup imagenya.

Benar, kalau harus mengedit markupnya satu per satu bisa jadi merepotkan.

Kita bisa membuatnya menjadi otomatis tanpa harus menggunakan jQuery. Yaitu dengan menambahkan pseudo element. Berikut ini kode yang telah dimodifikasi:

div.imgwrapper {
position:relative;
width:100%;
}

div.imgwrapper img {
width:100%;
}

div.imgwrapper:after {
content:"";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:9; }

Mudah dan nggak pakai ribet. :D

CSS Transformasi

2010-12-24T14:40:45-08:00

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

Reflection

Normal	Horizontal	Vertical

Rotation & Scaling

Normal	Rotate	Scaling

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

Praktis, Penggunaan Google Font dengan WebFont Loader

2010-12-19T00:00:00-08:00

Berikut ini adalah penerapan praktis penggunaan Google Font API dengan WebFont Loader.

Sisipkan snippet berikut ini pada bagian head (sebelum tag </head>) atau pada akhir dokumen (sebelum tag </body>).

<script type="text/javascript">
      WebFontConfig = {
        google: { families: [ '<span style="color:#f00;">Tangerine</span>', '<span style="color:#f00;">Cantarell</span<' ] }
      };
      (function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
</script>

Untuk memilih font, ganti tulisan berwarna merah dengan font yang diperlukan. Kita bisa menggunakan 2 font atau lebih sekaligus. Perhatikan, penggunaan lebih dari 1 font dipisahkan dengan tanda koma.

Kita bisa mengatur tampilan halaman saat font sedang dimuat, saat font tidak aktif, dan saat font aktif sehingga bisa mereduksi efek tampilan teks saat font sedang dimuat (FOUT — flash of unstyled text). Hal ini akan membuat proses loading halaman akan terlihat lebih baik, terutama pada saat koneksi lemot. Caranya, sisipkan kode CSS seperti pada contoh berikut ini :

      .wf-loading p {
        font-family: serif; 
      }
      .wf-inactive p {
        font-family: serif
      }
      .wf-active p {
        font-family: 'Tangerine', serif
      }
      .wf-loading p {
        font-family: serif;
        font-size: 16px
      }
      .wf-inactive h1 {
        font-family: serif;
        font-size: 16px
      }
      .wf-active h1 {
        font-family: 'Cantarell', serif;
        font-size: 16px }

Kita juga bisa menggunakan Google’s AJAX APIs. Berikut ini snippetnya:

<script type="text/javascript" src="https://www.google.com/jsapi?key=<span style="color:#f00;">API-KEY</span>"></script>
<script type="text/javascript">
  google.load("webfont", "1");

  google.setOnLoadCallback(function() {
    WebFont.load({
      google: {
        families: [ 'Tangerine', 'Cantarell' ]
      }});
  }); </script>

Ganti API-KEY dengan kode API yang anda miliki. Jika belum punya bisa mendaftar di sini. Selamat mencoba.

Trik Fotografi, Membuat “Fake Miniature”

2010-12-18T00:00:00-08:00

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:

Buka Tilt-shift Maker kemudian upload foto yang dibutuhkan.
Atur focus size, defocus strength, & defocus gradient untuk menciptakan efek miniatur.
Gunakan opsi color enhancer atau bokeh enhancer untuk hasil yang maksimal.
Tekan tombol “Preview” untuk melihat hasilnya.
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:

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

Google Translate

2010-12-17T00:00:00-08:00

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, Pelindung Gambar

2010-11-27T00:00:00-08:00

Pernah mencuri konten? Uh, copy & paste tulisan mungkin tidak pernah, tapi bagaimana dengan gambar?

Kita tahu, mengambil gambar dari sebuah halaman web sangat mudah. Yang perlu kita lakukan adalah klik kanan, kemudian pilih “save as”. Yeah, satu gambar tercuri. :D

OK, saya tidak ingin gambar di blog saya dicuri bagaimana caranya?

Sayang sekali tidak ada cara yang benar-benar bisa membuat konten kita aman. Sama halnya dengan kasus copy & paste pada tulisan. Tetapi paling tidak kita dapat “sedikit” mempersulit user untuk mengambil gambar tersebut.

Berikut ini adalah trik lawas yang saya gunakan untuk sekedar melindungi gambar dari klik kanan. Bukan dengan cara membunuh fungsi klik kanan dengan JavaScript tetapi hanya menggunakan CSS.

Triknya adalah, dengan menambahkan layer transparan di atas gambar dengan CSS positioning. Sehingga user tidak dapat melakukan klik kanan pada gambar dengan semestinya. Berikut ini adalah contoh kodenya:

CSS:

div.imgwrapper {
position:relative;

width:100%;
}

div.imgwrapper img {
width:100%;

}

div.protector {
position:absolute;
top:0;

left:0;
width:100%;
height:100%;

z-index:9;
}

HTML:

<div class="imgwrapper">

  <img src="images/contohgambar.jpg" alt="" />
  <div class="protector" />

</div>

Cukup mudah bukan? meskipun tidak benar-benar melindungi gambar, minimal dapat menghalangi proses-proses pencurian instan yang dapat dilakukan oleh user.

Demo dapat dilihat di halaman ini. Update, metode pelindung gambar murni menggunakan CSS dapat dilihat disini. :)

Trik CSS, Balon Percakapan

2010-11-04T00:00:00-07:00

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.

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>

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.

Basa Basi

2010-09-30T00:00:00-07:00

“Saya tidak suka berbasa-basi. Tidak perlu panjang lebar dan bertele-tele. Langsung to the point saja…”

Pernah membaca tulisan yang diawali dengan kata-kata tersebut atau semacamnya? Yeah! itulah basa-basi paling menyebalkan di planet ini! Saya selalu berharap untuk tidak menggunakannya.

☺

Pengertian Sederhana Tentang Semantik Markup

2010-09-29T00:00:00-07:00

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

Semantic HTML, Wikipedia
Semantics and Sensibility, CSSWizardry.com
Semantik XHTML, Aksesibilitas, SEO, DaniIswara.net
Why You Should Use SEO Semantic Coding and Semantic Markup, BarryWise.com

Perlu Tidak Perlu, Validasi

2010-09-21T00:00:00-07:00

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

2010-09-05T00:00:00-07:00

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.

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? ☺

ﬂuﬀ

2010-08-13T00:00:00-07:00

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

How Little Do Users Read? (Useit.com)
Write for The Web (Useit.com)
The Difference between Fluff and Interesting Content (Freelance Folder.com)
Is Your Article Fluff? - Ten Ways to Tell (ezinearticles.com)
How to Fluff up a Paper to Make It Look Longer (Wikihow.com)
Fight The Fluff! (Rswarren.com)

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

2010-08-10T00:00:00-07:00

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

embali 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:

Judul atau identitas blog
Blog Post, sudah pasti sebuah blog pasti memiliki postingan di dalamnya.
Tanggal/alur waktu. Sebuah catatan/log disajikan secara berurut
Terdapat arsip
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

Minimum Viable Product, Wikipedia.
Minimum Viable Design, Drawar.
9 Minimum Viable Product WordPress Themes, Methodologist.

Multikolom

2010-08-07T00:00:00-07:00

ika beberapa tahun lalu kita membutuhkan JavaScript atau manipulasi div dengan properti float — dan tentu saja clear — untuk membuat multikolom, kini dengan CSS3 kita bisa membuatnya hanya dengan beberapa baris kode saja. Sangat praktis! Webdesainer manapun pasti senang dengan hal ini.

Ketika akan menggunakan multikolom, salah satu hal yang perlu diperhatikan adalah perilaku user saat membaca konten. User membaca konten web dari atas ke bawah — dengan menggulung layar — hingga selesai. Jika artikel multikolom tersebut cukup panjang/tinggi, user harus menggulung layar untuk membaca satu kolom, kemudian menggulung ke atas lagi untuk menyelesaikan kolom kedua, dan ketiga, sepertinya lebih melelahkan dan tidak menyenangkan.

Untuk lebih jelasnya dapat melihat gambar di bawah ini:

Contoh 1 (kiri). dapat dilihat bahwa user harus menggulung layar untuk membaca kolom pertama, kemudian kembali menggulung ke atas untuk melanjutkan kolom kedua.

Contoh 2 (kanan). Penataan konten yang baik memungkinkan user untuk membaca tiga kolom pertama tanpa perlu bolak-balik menggulung layar. Saya pikir contoh ini lebih baik daripada yang pertama.

Permasalahan kedua, tidak semua browser mendukung multikolom. Pada contoh 1, paragraf tampak baik-baik saja. Tetapi saat dilihat menggunakan browser yang tidak mendukung CSS multikolom, paragraf ditampilkan dalam bentuk satu kolom. Bayangkan jika kita menggunakan layout selebar 960px! paragraf yang terlalu lebar kurang nyaman untuk dibaca.

Penggunaan multikolom dapat sangat bermanfaat. Contohnya membagi paragraf dengan measure yang tepat pada layout yang lebar. Tetapi perlu diingat, penggunaan multikolom yang tidak tepat dapat berdampak negatif pada usabilitas. Contoh di atas terkait dengan ukuran layar dan kompatibilitas browser.

18px

2010-08-02T00:00:00-07:00

Berapa ukuran huruf blog ini? Coba tebak 18px? Hampir benar!

Blog ini menggunakan font dengan ukuran 1.125em. Jika ukuran font default browser anda 16px berarti ukuran font blog ini sama dengan 18px. Terlalu besar?

Mungkin beberapa dari anda akan menganggapnya terlalu besar, terlalu bold uh. Ya benar, hingga saat ini 18px bukan ukuran yang "wajar" untuk teks body pada sebuah web atau blog. Saya melihat kebanyakan teman-teman narablog menggunakan ukuran antara 12px–16px.

16px sudah cukup legible, lalu kenapa 18px?

Ah sepertinya lebih pada masalah ego, karena saya suka 18px maka saya menggunakan 18px! haha… jujur, Arial terlihat sangat jelek saat tampil dengan ukuran kurang dari 18px. Karena itulah beberapa waktu lalu saya menilih typeface serif untuk blog ini.

Sepertinya jawaban tersebut tidak begitu baik. Baiklah, saya akan mencoba menjelaskannya, beberapa poin dibawah ini mungkin adalah mitos-mitos desain usabilitas dari saya terkait penggunaan font 18px:

Font berukuran besar lebih readable meskipun belum tentu legible — lihat Typography: Readability and legibility (Wikipedia) — saya cukup mengujinya pada layar netbook 10″. Seperti membaca sebuah poster, menyenangkan!
Font lebih besar berarti daya tampung lebih kecil, benar? Ambil asumsi, jika kita memerlukan 300 kata dengan font 16px, kira harus memangkasnya menjadi 200 kata dengan font ukuran 18px. Hal ini berarti tulisan yang lebih fokus, lebih ringkas, dan usable.
Lebih fokus pada tulisan? Anda yang merasakan! Saya merasa 18px lebih menyenangkan untuk dipindai.
Ah ya, big typography, sempat dibahas di trend website 2010. :)

Mungkin poin-poin tersebut tidak relevan, dan pantas disebut hoax, mungkin juga anda setuju dan membenarkan. Tidak masalah, semua itu tergantung kesukaan saja — atau biasa kita sebut personal feel. Ah ya, kita tidak dapat mengakomodir keinginan semua user. Yang jelas anda dapat sedikit "menjauh" dari layar komputer, mungkin akan baik untuk kesehatan mata hehe…

Oh ya, sudahkah anda menginstall plugin readibility pada browser anda? Cobalah! :)

Minimalis

2010-07-27T00:00:00-07:00

Image credit: bbluesman

Apakah dengan tidak menggunakan banyak gambar — atau sama sekali tidak menggunakan gambar — pada layout web/blog dapat diartikan mengusung tema minimalis?

Saat ini desain web/blog minimalis/(simplicity design) sepertinya telah menjadi trend. Hal ini dapat kita lihat dari banyaknya web/blog yang mengusung tema minimalis, dengan permainan whitespace & padding yang lebih lebar untuk menciptakan kesan yang simpel & elegan.

Siapa yang tidak menyukai konsep desain tersebut? Dengan berfokus pada tipografi & konten, web/blog menjadi lebih nyaman untuk dibaca, lebih usable. Pengunjungpun tidak perlu dikejutkan dengan annoying modal boxes — versi terbaru dari annoying popup windows — atau diganggu dengan banner iklan yang bertebaran seperti sampah. User ingin membaca dan mereka dapat melakukannya dengan nyaman, sebuah konsep interaktivitas yang menyenangkan.

Jika konsep desain minimalis memiliki arti: simpel, elegan, mudah dan nyaman dibaca dan menyenangkan lalu bagaimana konsep desain yang tidak minimalis? Coba tebak, jika konsep “desain tidak minimalis” adalah negasi dari minimalis, berarti konsep tersebut memiliki arti: tidak simpel, tidak elegan, susah dibaca, tidak nyaman dan menyebalkan. Dengan kata lain, adalah konsep desain yang buruk.

Minimalisme bukan berarti kita harus menggunakan CSS seminimal mungkin, kecepatan muat secepat mungkin, gambar sesedikit mungkin dan mengharamkan JavaScript. Minimalisme lebih menekankan pada manajemen tata ruang. Konsep desain minimalis bertujuan agar kita dapat memanfaatkan ruang yang ada secara optimal tanpa kehilangan fungsi, kegunaan dan estetika. Minimalisme adalah bagian dari konsep desain yang baik.

Bacaan

It Isn't Minimalism — Usability Post
Minimalism is Mandatory — Drawar

Tanda Baca

2010-07-17T00:00:00-07:00

Menulis artikel menggunakan berbagai macam tanda baca (special characters) mungkin terlihat sangat merepotkan. Minimal kita harus membuka charmap untuk membantu menuliskannya. Hal-hal semacam inilah yang — mungkin — membuat kita enggan untuk menggunakannya.

Bagaimanapun juga penggunaan tanda baca — yang baik & benar — sangat penting dalam menulis artikel. Bayangkan jika kita membaca sepuluh paragraf tanpa titik atau koma, akan sangat membingungkan bukan? Apalagi ketika kita hanya bisa mendengar dan dibacakan.

Tidak hanya untuk mendukung keterbacaan (legibility) penggunaan tanda baca yang benar sangat berpengaruh terhadap kualitas tipografi artikel tersebut. Beberapa contoh tanda baca yang sering digunakan — tetapi tidak umum seperti titik, koma, tanda seru & tanda tanya — dalam menulis blog antara lain:

“Smart” Curly Quotes

Dalam menulis tanda kutip, kita terbiasa menggunakan double straight quotes (") yang secara generik terdapat pada papan ketik. Tetapi, pengutipan yang baik adalah menggunakan double curly quotes (“ ”). Selain itu terdapat juga single curly quote (‘ ’) yang berfungsi untuk menulis kutipan di dalam kutipan. Closing single curly quote (’) digunakan sebagai apostrof. Kita dapat melihat perbedaanya:

"Tadi ibu berkata, 'Tolong ambilkan air' kepada saya".

“Tadi ibu berkata, ‘Tolong ambilkan air’ kepada saya”.

Bedakan penggunaan “quotes” dengan “prime” (′ ″). Prime biasanya khusus digunakan untuk menuliskan satuan waktu (menit & detik).

11′ 34″ (Sebelas menit tigapuluh empat detik).

Ampersand (&)

Terkadang kita terlalu banyak menggunakan kata “dan” sehingga kalimat menjadi kurang nyaman dibaca. Kita dapat menggunakan ampersand (&) untuk mengatasinya. Selain itu, ampersand dapat kita atur sedemikian rupa sehingga tampil lebih bergaya. Mungkin kecil, tetapi memberi nilai lebih pada kualitas tipografi.

Perlu diingat bahwa untuk menuliskan ampersand sebaiknya ditulis dalam bentuk entitas HTML karena dapat mengganggu validitas dokumen. Styling pada ampersand pernah saya tulis di blogspot dengan judul Sedikit Sentuhan Pada Ampersand.

Dashses

Sesuai namanya, tanda pisah (dashes) digunakan untuk memisahkan suatu kata atau kalimant. Terdapat berbagai macam tanda pisah antara lain:

a. Em dash (—)

Tanda dash yang memiliki panjang setara huruf “M”. Digunakan untuk membatasi penyisipan kata atau kalimat yang memberi penjelasan di luarbangun kalimat. contoh:

Penggunaan garis bawah dinilai tidak perlu — hey, ini jaman komputer, bukan mesin ketik — selain itu membingungkan karena dapat dikira sebuah pranala.

b. En dash (–)

Tanda pisah yang memiliki panjang setera huruf “N”. Digunakan di antara dua bilangan dengan arti “sampai dengan”. Contohnya sebagai berikut:

Penggunaan bandwith antara 10–20GB per bulan.

c. Hyphen (-)

Hyphen adalah tanda pisah yang terdapat secara generik pada papan ketik “qwerty”. Hyphen digunakan sebagai konjungsi dua kata dan untuk memenggal kata yang tidak selesai ketika berganti baris.

Gunakan tanda pisah sesuai dengan fungsinya masing-masing. Untuk tanda em dash, penulisan yang ideal adalah dengan menyisipkan spasi tipis — hair space,  . Hal ini akan sangat merepotkan — selain itu tidak kompatibel bagi IE6. Untuk mengatasinya, kita dapat memilih dengan menggunakan spasi atau tidak samasekali.

Perkalian (×) & Pembagian (÷)

Seringkali kita harus menulis simbol matematika seperti perkalian dan pembagian. Kasus yang paling sering terjadi adalah penggunaan huruf “x” (lowercase) untuk mengganti “×”. Contoh di bawah ini mungkin dapat menjelaskan bahwa mengganti “×” dengan huruf “x” sangat tidak efektif.

Resolusi layar WSVGA adalah 1024 × 600px.

Resolusi layar WSVGA adalah 1024 x 600px.

Ellipses

Ellipsis adalah tanda baca berbentuk tiga titik (…). Digunakan untuk menandai kalimat yang belum selesai — kita sering menjumpainya teritama pada fasilitas “Read more”. Mungkin tidak begitu kelihatan bedanya tetapi kata “ellipsis” sepertinya jauh lebih baik daripada “dot dot dot(s)”.

Daftar Tanda Baca

Tabel 1. Daftar Tanda Baca
Nama	Simbol	HTML	Numerik
Left Single Curly Quote	‘	‘	‘
Right Single Curly Quote	’	’	’
Left Double Curly Quote	“	“	“
Right Double Curly Quote	”	”	”
Minute	′	′	′
Second	″	″	″
Ampersand	&	&	&
Em dash	—	&	—
En dash	–	&ndash	–
Hyphen	-		-
Multiplication	×	×	×
Division	÷	÷	÷
Ellipses	…	…	…
Hair space

Simpulan

Mungkin kita kurang mempedulikan penggunaan tanda baca tersebut. Memang cukup merepotkan jika kita mengimplementasikan pada tiap artikel blog, tetapi itulah seni dalam tipografi. Tidak ada salahnya berusaha tampil “sempurna” dalam artian kita menggunakan kaidah-kaidah penulisan secara benar.

Saat ini teknologi mesin blog semakin canggih. Wordpress misalnya, secara otomatis mengkonversi straight quote menjadi curly quote — yang justru menimbulkan masalah dalam penulisan kode. Selain itu telah terdapat plugin-plugin seperti WP-Typography atau Typogrify untuk Textpattern. Kita bisa menggunakannya untuk mendukung kualitas tipografi pada web/blog yang kita kelola.

Daftar Bacaan

Berikut ini beberapa bacaan yang dapat bermanfaat untuk meningkatkan kualitas tipografi web/blog anda.

Tanda Baca (Wikipedia)
Typography quick tips (CSS Wizardry)
HTML Symbol Entities (W3School)
Punctuation on the Web (Safalra)
Opera Lebih Strict (Dani Iswara)

Pengunjung Memindai, Baru Membaca

2010-07-10T00:00:00-07:00

Saya membaca sebuah artikel yang sangat menarik dari Jacob Nielsen yang berjudul How Users Read on the Web. Tulisan tersebut menjelaskan sebuah hasil studi bahwa seseorang cenderung tidak membaca sebuah website tetapi memindainya (scanning). Dengan perbandingan 79% pengguna selalu melakukan pemindaian pada setiap halaman baru yang ditemui dan hanya 16% yang membaca kata demi kata.

Fakta yang menarik, tetapi tidak mengejutkan. Kita telah terbiasa dengan hal itu. Secara tidak sadar ketika kita mengunjungi sebuah blog untuk pertama kali, kita cenderung memindainya terlebih dahulu. Mungkin dimulai dari logo, konten, sidebar, hingga footer. Jika menarik, kita melanjutkan dengan membaca artikelnya. Tidak menarik, lupakan saja.

Scannability?

Pertanyaan mendasar yang mungkin timbul adalah, seberapa scannable-kah blog yang kita miliki? Dengan asumsi bahwa semakin scannable berarti semakin banyak yang tertarik untuk membaca, sebuah nilai plus untuk aksesibilitas & usabilitas. Dalam tulisannya, Jacob Nielsen menjelaskan bahwa sebuah web yang scannable hendaknya:

Menggunakan kata kunci yang disorot/highlighting text.
Menggunakan subjudul/headings yang berarti.
Satu ide per paragraf.
Menggunakan metode Piramida Terbalik/Inverted Pyramid, yang diawali dengan kesimpulan.
Setengah jumlah kata — saya mengartikannya sebagai bahasa yang efektif & efisien.

Selain hal-hal yag bersifat teknis tersebut, penggunaan bahasa juga dinilai sangat berpengaruh. Ketika pengguna menilai bahasa yang digunakan terlalu sulit dimengerti — terlalu tinggi sehingga memberikan beban kognitif pada pengguna — mungkin membuatnya malas untuk membaca lebih lanjut, poin minus untuk usabilitas. Anda dapat melihat contoh kasus yang lebih detail di website sumber.

Uji Eyetracking & Heatmap

Salah satu metode untuk menguji keterpindaian adalah menggunakan heatmap untuk memperkirakan aktifitas eyetracking yang dilakukan pengunjung. Saya menguji blog ini menggunakan fasilitas gratis dari Feng-GUI. Berikut ini hasilnya:

Gambar 1. Heatmap Halaman Konten.

Saya sengaja tidak menyoroti halaman secara penuh, hanya bagian yang pertama kali dilihat oleh pengguna saja. Dapat kita lihat bagian "terpanas" (berwarna merah dengan tanda nomor 1) diperkirakan sebagai "yang paling menarik" bagi pengguna dan berikutnya nomor dua & tiga. Sepertinya tampilan blog ini memang "terlalu dingin" tetapi saya cukup puas karena "titik-titik panas" tidak nyasar dan berada di tempat yang tepat.

Gambar 2. Heatmap Halaman Depan.

Ketika saya menguji keseluruhan halaman, terlihat bahwa titik terpanas terletak pada banner Internet Sehat yang terletak di bawah. Cukup menarik, karena kita tahu pengguna pasti memindai dari apa yang pertama kali ditemukan dan itu ada di bagian atas halaman dan bukan dari bawah.

Sepertinya terlihat bagus untuk pemasang iklan. Bayangkan jika saya memasang banner produk/web anda di sidebar atas, dapat dipastikan iklan anda mendapat urutan pertama dalam proses pemindaian yang dilakukan oleh pengunjung blog ini. Menarik? Tentu saja, apalagi jika saya hanya menyediakan satu space iklan saja. :)

Aksesibilitas dan Desain

2010-07-07T00:00:00-07:00

Saya merasakan adanya kecenderungan bahwa aksesibilitas web hanya diperuntukkan bagi penyandang disabilitas, pengguna screen reader misalnya. Padahal kita tahu, arti sesungguhnya adalah keteraksesan. Hal ini menyebabkan seolah-olah aksesibilitas menjadi sesuatu yang termarginalkan, yang tidak terlalu penting dan tidak diperhatikan dalam desain sebuah website.

Desain web, kira-kira apa yang kita pikirkan saat membaca/mendengar istilah tersebut? XHTML? CSS? JavaScript? atau Photoshop? Mungkin yang paling umum adalah menyangkut desain antarmuka sebuah website (front end) yang tak lebih dari desain grafis semata. Jika merujuk pada KBBI daring, istilah desain berarti kerangka bentuk/rancangan. Ketika kita menerapkannya pada desain sebuah web apakah rancangan tersebut "hanya" mencakup pada desain grafis saja? Saya rasa tidak. Ketika kita memandang desain web adalah sebuah sistem, kita tidak dapat melepaskan aksesibilitas (dan usabilitas) di dalamnya. Saya berpendapat bahwa tujuan dari desain antarmuka adalah untuk menunjang aksesibilitas dan usabilitas, bukan sebaliknya.

Gambar 1. Lynx Web Browser

Dengan kata lain, desain antarmuka yang baik melahirkan aksesibilitas dan usabilitas web yang baik. Imbasnya adalah user yang terakomodir semakin banyak, yang berarti peluang mendapatkan trafik yang lebih tinggi lebih besar—terdengar seperti yang diharapkan oleh pengelola website. Contoh kasus adalah situs jejaring sosial semacam facebook & twitter yang menyediakan versi mobile. Hal ini disebabkan karena banyak pengguna situs tersebut yang memakai mobile browser yang rata-rata tidak aksesibel pada beberapa JavaScript. Versi mobile memungkinkan facebook & twitter tidak “kehilangan” penggunanya saat mereka sedang tidak menghadap komputer—dan sepertinya justru versi mobile inilah yang lebih diminati karena lebih aksesibel.

Dari contoh di atas dapat kita simpulkan bahwa penerapan aksesibilitas tidak hanya bermanfaat bagi user tetapi juga untuk penyedia konten. Jadi, aksesibilitas menjadi salah satu poin yang penting dalam desain web. Tidak hanya “sekedar sarana untuk memfasilitasi penyandang disabilitas” tetapi lebih umum, lebih fleksibel, lebih tepatnya Aksesibilitas Itu Untuk Semua (Dani Iswara). Jika anda adalah seorang desainer/pengembang web tetapi tidak tahu tentang hal tersebut, mungkin sekarang adalah saat yang tepat untuk mencari tahu.

Font Stack

2010-06-20T00:00:00-07:00

Meskipun seni tipografi tidak sekedar memilih dan menggunakan font, tetapi tidak dapat dipungkiri bahwa pemilihan font adalah hal yang diutamakan. Tidak mungkin kita menggunakan font dari keluarga cursive seperti Comic Sans MS & Monotype Corsiva untuk menyusun sebuah laporan ilmiah.

Ketika membuat desain sebuah blog, akan sangat menyenangkan jika kita bisa menggunakan koleksi font yang kita sukai. Saya sangat menyukai font dari keluarga serif seperti Constantia & Palatino. Mungkin anda berbeda, lebih menyukai sans-serif semacam Helvetica atau Calibri.

Pengertian Font Stack

Kita menginginkan sebuah blog tampil dengan font Cambria, tetapi seperti yang kita ketahui, tidak semua OS terinstal font tersebut. Hal ini menyebabkan pengunjung akan melihat “penampilan yang berbeda” pada blog kita. Pada kode CSS, kita sering mendapati penggunaan beberapa font dalam bentuk list yang dipisahkan tanda koma yang disebut dengan font stack.

Font stack berfungsi untuk mengakomodir user yang tidak memiliki font tertentu pada komputernya. Jika OS tidak mampu mengidentifikasi font urutan pertama akan beralih pada urutan kedua dan seterusnya hingga pilihan terakhir jatuh pada generik serif pada komputer tersebut. Oleh karena itu sebaiknya kita tidak sembarangan dalam menentukan urutan dan memilih font yang digunakan.

Contoh sederhana adalah ketika saya menggunakan kombinasi Cambria & Georgia pada artikel Tipografi, beberapa pengguna GNU/Linux melihat perubahan pada layout. Hal ini disebabkan karena Cambria tidak terdapat pada GNU/Linux kebanyakan sehingga artikel ditampilkan dengan Georgia. Hal ini membuktikan kombinasi yang buruk pada font stack menyebabkan degradasi pada kualitas desain.

Implementasi

Michael Tuck dalam tulisannya 8 Definitive Web Font Stacks memberikan beberapa contoh CSS font stack dengan prioritas Windows fonts, Mac fonts, Linux fonts, universal, generic. Berikut ini adalah kedelapan contohnya:

1. Times New Roman-based

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

2. Modern Georgia-based serif

font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

3. Traditional Garamond-based serif

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

4. Helvetica/Arial-based sans serif

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

5. Verdana-based sans serif

font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

6. Trebuchet-based sans serif

font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

7. Impact-based sans serif

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

8. Monospace

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Kesimpulan

Penggunaan font stack sangat penting terutama untuk mendukung desain (tipografi) sebuah web/blog. Kombinasi font stack yang baik membuat web/blog tampil konsisten baik pada Windows, Mac maupun GNU/Linux.

Tipografi

2010-06-11T00:00:00-07:00

Membuat desain tipografi untuk sebuah website mungkin tidak semudah yang dibayangkan. Banyak sekali pakar tipografi yang menyatakan bahwa tipografi tidak sekedar memilih font dan menggunakannya, tipografi adalah komponen visual dari kata-kata tertulis (Butterick, 2010).

Penerapan tipografi yang baik sangat bermanfaat dalam desain sebuah web/blog. Tipografi yang baik membawa keteraturan dan meningkatkan keterbacaan (Wagner, 2009). Hal-hal yang harus diperhatikan dalam membuat desain tipografi web yang baik mungkin cukup banyak. Tetapi dalam membuat tulisan pada sebuah blog kita tidak harus menggunakan semuanya. Beberapa poin yang menurut saya penting adalah ukuran, spasi, dan konsistensi penulisan. Berikut ini tips singkat mengenai pembuatan desain tipografi untuk sebuah paragraf.

1. Ukuran

Ukuran font yang terlalu kecil mejadikan tulisan lebih sulit untuk dibaca, tetapi penggunaan ukuran besar belum tentu efektif―terutama untuk pengguna layar kecil semacam mobile browser. Penggunaan ukuran relatif―misal em― mungkin lebih efektif daripada ukuran absolut―misal px―karena lebih fleksibel. Menurut Reichenstein (2006), ukuran 100% adalah standard tulisan yang mudah dibaca untuk sebuah website.

Selain ukuran font, lebar paragraf juga harus diperhatikan. Paragraf yang terlalu lebar dapat membuat pembaca cepat bosan dan lelah. paragraf yang lebar berarti mendominasi layar, selain itu pandangan mata harus bergeser cukup jauh saat berganti baris.

Paragraf dengan ukuran yang terlalu sempit dapat menyebabkan alokasi ruang menjadi tidak efisien. Penggunaan kata yang panjang―Tanpa ada pemenggalan kata―dapat merusak desain layout. Usahakan menggunakan lebar paragraf yang cukup, tidak terlalu lebar/sempit.

Tidak ada aturan baku yang mengharuskan penggunaan ukuran lebar tertentu. Menurut Boulton (2005), aturan yang baik untuk lebar paragraf adalah sebanyak 52-78 karakter termasuk spasi.

2. Spasi

Spasi menjadi hal yang sangat penting dalam menulis sebuah paragraf. Spasi dapat berarti jarak antar karakter (huruf), jarak antar baris, & jarak antar paragraf yang semuanya harus kita atur sedemikian rupa sehingga tulisan menjadi lebih nyaman dibaca.

Untuk spasi antar karakter―Biasa disebut kerning―mungkin tidak perlu diatur ulang lagi, tetapi untuk spasi antar baris dan antar paragraf sebaiknya kita perhatikan. Kita tahu tulisan yang terlalu rapat jaraknya terasa kurang nyaman untuk dibaca. Selain itu, spasi yang proporsional memberikan nilai estetika sendiri.

Dalam mengatur spasi, yang penting untuk diperhatikan adalah ritme vertikal (jarak dan susunan teks yang menurun). Menurut Rutter (2006) ritme vertikal ditentukan oleh tiga faktor yaitu ukuran font (font size), tinggi (line height) dan margin/padding. Saya sendiri merekomendasikan untuk menggunakan spasi sebesar 1,5―Menurut saya ideal, tidak terlalu rapat dan tidak terlalu longgar.

3. Konsistensi

Konsistensi penulisan menjadi hal yang sangat penting agar tidak membingungkan pembaca. Ada baiknya jika kita mengikuti standar penulisan. Sebagai contoh, sudah seharusnya istilah asing dicetak miring, tautan lebih baik memiliki ciri yang konsisten―Misalnya menggunakan garisbawah & warna berbeda, dan yang terpenting adalah jangan menggunakan font yang cempuraduk. Misalnya kita menggunakan typeface serif untuk paragraf pertama kemudian sans-serif untuk paragraf berikutnya. Contoh lain―yang mungkin lebih buruk―adalah menggunakan font-font dekoratif yang susah dibaca.

4. Implementasi

Saya telah menerapkan teori-teori tersebut pada blog ini. Seperti yang anda lihat, paragraf dalam blog ini menggunakan font tipe serif 1em, dengan lebar 560px, 1.5 spasi. Secara teknis, CSS yang saya gunakan untuk paragraf kurang lebih seperti contoh berikut:

html {
font-size:100%; 
}

body {
font-family:Cambria, Georgia, serif;
font-size:1em; 
}

a, a:visited {
color:#333;
text-decoration:underline; 
}

a:hover, a:focus {
color:#600;
text-decoration:underline; 
}

p {
line-height:1.5em;
margin:1.5em 0;
padding:0;
width:560px; 
}

5. Kesimpulan

Saya tidak membahas penggunaan typeface atau font disini. Ketiga hal tersebut (ukuran, spasi & konsistensi) saya pikir adalah dasar-dasar yang harus diperhatikan dalam membuat desain tipografi sedangkan masalah pemilihan font cenderung subyektif menurut kesukaan masing-masing―Tidak ada gunanya berdebat mana yang lebih baik antara serif dengan sans-serif ;).

Mungkin kita telah dimanjakan dengan teknologi embedded font―Semacam Cufón, SiFR, @font-face―yang memungkinkan untuk menggunakan font yang bagus dan kita sukai, tetapi tanpa penggunaan ukuran, spasi dan konsistensi penulisan yang baik saya rasa tidak akan melahirkan desain tipografi yang baik. Saya setuju dengan pendapat bahwa desain tipografi tidak hanya sekedar memilih dan menggunakan font saja. Kita dapat membuat desain tipografi yang baik meskipun “hanya” menggunakan font standar untuk web semacam Verdana atau Georgia.

6. Referensi

Boulton, M., 2005, The Personal Disquiet of Mark Boulton:Five Simple Steps to Better Typography, [online], (http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography, diakses tanggal 11 Juni 2010)

Butterick, M., 2010, Typography For Lawyer:What Is Typography?, [online], (http://www.typographyforlawyers.com/?p=23, diakses tanggal 11 Juni 2010)

Reichenstein, O., 2006, Information Architects:The 100% Easy-2-Read Standard, [online], (http://informationarchitects.jp/100e2r/, diakses tanggal 11 Juni 2010)

Rutter, R., 2006, 24 Ways:Compose to a Vertical Rhythm, [online], (http://24ways.org/2006/compose-to-a-vertical-rhythm, diakses tanggal 11 Juni 2010)

Wagner, M., 2009, Webdesigner Depot:5 Simple Ways to Improve Web Typography, [online], (http://www.webdesignerdepot.com/2009/03/5-simple-ways-to-improve-web-typography/, diakses tanggal 11 Juni 2010)

Lima Menit

2010-06-06T00:00:00-07:00

Pernahkan kita menghitung berapa waktu yang kita perlukan untuk membaca artikel sebuah blog? Sebuah pertanyaan yang tidak penting, tetapi secara tidak sadar mungkin kita telah mengalokasikan “sejumlah waktu” untuk membaca sebuah blog pada saat blogwalking. Entah itu 5 menit, 10 menit, atau bisa juga 15 menit.

Seseorang mungkin memiliki kecenderungan untuk membaca artikel blog dengan cepat. Fast reading tidak menjadi masalah jika artikel yang ada hanya 3 paragraf dan tak lebih dari 200 kata, cukup untuk dibaca dalam waktu kurang dari lima menit. Tetapi bagaimana dengan artikel yang panjangnya hingga 10 paragraf?

Secara logika sederhana, jika kita memerlukan 3 menit untuk membaca artikel sepanjang 3 paragraf berarti kita memerlukan 9,9 menit untuk membaca 10 paragraf. Yang menjadi masalah adalah ketika secara tidak sadar kita selalu membaca sebuah blog selama ±5 menit, maka kita akan membaca sebuah artikel selama ±5 menit tidak peduli sepanjang apapun artikel tersebut. ;)

Hal ini menjadi sebuah tantangan tersendiri bagi narablog untuk mendesain artikel-artikelnya. Narablog harus memikirkan bagaimana membuat artikel yang efektif dan efisien, menggunakan tata bahasa yang bagus, & tidak bertele-tele sehingga dapat dicerna dengan baik dalam waktu lima menit atau bahkan kurang.

Berﬁkir Positif

2010-06-01T00:00:00-07:00

Komentar yang bermutu & diskusi yang berbobot, itu adalah hal yang cenderung diinginkan oleh narablog. Saya melihat akhir-akhir ini banyak sekali narablog yang menulis artikel tentang masalah komentar dalam blog mereka. Hampir semua membahas masalah yang sama yaitu tentang bagaimana etika dalam berkomentar, komentar yang tidak berguna, dan masih banyak lagi hal-hal negatif terkait dengan komentar. Beberapa diantara mereka mengeluhkan tentang banyaknya komentar yang tidak baik, cenderung oportunitis, dan mencari backlink semata.

Saya yakin sebagai seorang experienced blogger kita telah mengetahui masalah klasik tersebut. Pertanyaan yang mungkin timbul adalah siapa yang patut disalahkan? Seperti yang telah saya tulis dalam artikel sebelumnya tentang membaca & diskusi, menyalahkan pemberi komentar adalah langkah yang paling mudah diterapkan. Ujung-ujungnya, narablog menjadi lebih ketat dalam memoderasi komentar-komentar yang masuk dan hal ini berdampak negatif pada user experience.

Menyalahkan pemberi komentar adalah sebuah keputusan yang kurang bijaksana. Marilah kita sedikit melakukan evaluasi terhadap blog yang kita kelola. Mungkin kita telah merasa berhasil membuat sebuah blog dengan konten dan desain yang bagus, tetapi perlu diingat bahwa yang bisa menilai apakah blog kita bagus atau tidak adalah pengunjung/user. User mungkin memiliki pandangan yang berbeda tentang kualitas sebuah blog. Jika mereka tidak suka dengan konsep blog yang kita tawarkan kitalah yang seharusnya berbenah.

Saya berpendapat bahwa daripada kita menimpakan kesalahan kepada pengunjung atas “komentarnya yang tidak bermutu” dan harus repot-repot memoderasi semua komentar yang masuk, akan lebih baik jika kita berusaha meningkatkan kenyamanan user dalam mengakses, membaca & berkomentar di blog kita. Kita bukan user, kita tidak tahu apa yang mereka pikirkan jika tidak bertanya. Ketika saya menulis tentang kritik blog, komentar-komentar yang masuk didominasi dengan kritik terhadap blog ini. Hal ini justru menguntungkan bagi saya karena mendapatkan tes usabilitas secara gratis. Saya jadi sedikit banyak tahu apa yang diinginkan user pada blog ini—Sekali lagi saya ucapkan terimakasih :).

Sudah saatnya kita lebih memperhatikan preferensi pengunjung/user dan mencoba mengakomodasi seluruh kebutuhannya. Anda membaca blog ini, anda adalah user, anda adalah konsumen blog ini. Anda berhak menyatakan pendapat anda tentang blog ini. Selama komentar dari anda tidak melanggar norma dan etika, saya rasa itu adalah masukan yang positif.

Kritik

2010-05-28T00:00:00-07:00

Interaktivitas menjadi salah satu hal yang menarik dalam sebuah blog. Karena dengan adanya interaktivitas, blog menjadi lebih hidup. Dalam berinteraksi lewat dunia blog, kita tidak dapat terlepas dari perbedaan persepsi yang melahirkan kritik . Kritik bisa jadi lebih berharga daripada pujian. Saya rasa dengan mengatakan “Anda lebih baik tidak menggunakan tulisan berwarna biru dengan background merah” akan lebih bermanfaat bagi pengelola blog daripada sekedar ucapan “Nice info, keep posting sob!” dsb.

Koreksi & kritik yang masuk secara langsung maupun tidak langsung berpengaruh terhadap perkembangan blog. Mungkin kita telah mengumpulkan puluhan referensi untuk menulis & membangun sebuah blog, tetapi perlu kita ingat bahwa ilmu pengetahuan itu luas, opini dan fakta bisa berubah sejalan dengan kemajuan teknologi & peradaban. Seperti halnya pada kehidupan sosial, kita membutuhkan orang lain untuk menjadi lebih baik.

Kita menginginkan apresiasi dan bagaimanapun bentuknya, kritik adalah apresiasi. Sebagai blogger, komentar/tanggapan yang bagus akan sangat menyenangkan, tetapi tidak menutup kemungkinan kita mendapatkan kritik yang tajam dari pembaca. Mungkin kita tidak merasa senang saat menerima kritik, tetapi apa yang bisa dilakukan jika memang begitu adanya? Saya rasa tidak ada selain introspeksi, belajar dari kesalahan dan membuat sesuatu yang lebih baik lagi.

Kritik yang baik adalah kritik yang obyektif. Secara pribadi, saya tidak mempermasalahkan bahasa/majas yang digunakan apakah ironi, peyorasi atau bahkan sarkasme. Asalkan kritik tersebut bersifat obyektif, saya rasa akan sangat bermanfaat bagi pengembang blog. Tetapi sebagai seorang blogger yang berpengalaman (experienced blogger) sudah seharusnya kita tahu batas-batas etika saat memberikan sebuah kritik.

Untuk blog ini, saya berusaha memberikan pengalaman blogging yang bagus pada Anda sebagai pengunjung/pembaca. Tidak hanya dengan penyajian artikel tetapi juga dari usabilitas dan desain. Saya tahu dan menyadari bahwa hal tersebut belum dapat saya penuhi, terlebih lagi blog ini masih baru dan masih membutuhkan banyak pembenahan. Untuk itu saya akan mengapresiasi segala macam kritik apapun bentuknya karena saya menyadari bahwa saya membutuhkannya.

Membaca dan Diskusi

2010-05-26T00:00:00-07:00

Membaca adalah kegiatan yang hampir selalu kita lakukan dalam blogreading & blogwalking. Selain artikel/konten utama, kolom komentar adalah tempat yang sangat menyenangkan karena di situlah pusat interaktivitas berada. Kebanyakan blogwalker menyampaikan pendapatnya pada kotak komentar yang bisa menjadi diskusi yang menyenangkan, mengharap kunjungan balik semata hingga spam yang menyebalkan.

Berdiskusi seputar topik artikel mungkin adalah hal yang paling kita harapkan. Tetapi kenyataanya, kotak komentar kita dipenuhi oleh komentar-komentar yang —dapat dikatakan— tidak/kurang menyenangkan, entah itu dari visitor yang mengharap backlink atau mungkin berbau spam. Komentar-komentar tidak bermutu hasil fast reading mungkin menjadi sangat menjengkelkan karena seolah-olah tidak menghargai artikel itu sendiri.

OK, saya rasa cukup curhatnya & saya pikir tulisan-tulisan keluh-kesah semacam itu telah banyak di blogsphere Indonesia. Pertanyaannya adalah mengapa hal tersebut bisa terjadi? Mungkin jawaban yang termudah adalah dengan mengambil asumsi bahwa blogger Indonesia —terutama newbie— memang suka melakukan hal seperti itu. Selain karena belum mengerti dunia blog, mereka beharap dengan blogwalking dapat meningkatkan jumlah pengunjung pada blog.

Apakah itu yang terjadi? Bisa jadi. Tetapi bagaimana dengan diri kita sendiri? Kita mengharapkan banyak kunjungan, komentar, & diskusi yang menyenangkan. Tetapi apa yang telah kita lakukan untuk mencapainya? Berikut ini mungkin beberapa pertanyaan yang —saya rasa— penting untuk direnungkan: wizard

Apakah topik yang kita usung sesuai dengan tema blog?

Dunia blogsphere Indonesia didominasi oleh blog-blog yang bersifat personal —terlalu personal—yang dapat diisi dengan sesuka hati oleh pemiliknya. Tidak menjadi masalah, tetapi menurut saya, konsistensi dan fokus adalah hal yang penting dalam menulis sebuah blog.

Apakah artikel kita cukup menarik untuk dijadikan bahan diskusi?

Sebuah pertanyaan yang umum, artikel yang tidak menarik untuk dibaca dapat dipastikan tidak menarik menjadi bahan diskusi. Membuat sebuah artikel mungkin sangat sulit bagi sebagian orang. Mungkin saja artikel yang bagus menjadi tidak menarik dibaca karena terlalu panjang misalnya.

Bagaimana perasaan pengunjung saat membaca blog kita?

Reading Experience mungkin menjadi salah satu hal yang terpenting. Saat membaca sebuah tulisan/blog pengunjung memiliki penilaian keseluruhan pada blog tersebut.

Kita memandang sebuah blog tidak hanya dari tulisan/artikel yang disajikan, tetapi juga desain. Artikel yang bagus dapat menjadi sia-sia tanpa didukung desain yang baik.

Pengunjung berhak menginginkan artikel yang bagus, berbobot, nyaman dibaca & menyenangkan. Begitu juga kita boleh berasumsi bahwa jika pengunjung merasa senang saat membaca blog kita, dapat dipastikan feedback yang diterima juga menyenangkan seperti yang kita harapkan.

Bagaimana dengan pendapat anda? Saya rasa introspeksi diri jauh lebih bermanfaat daripada sekedar mencaci.

I ♥ Ardianzzz’s Blog!

Fixed — SwisPress Header

1. Ketika List Menu Cukup Banyak

2. Ketika Teks Logo Terlalu Panjang

Simpulan

Artikel Blog Sebagai Portofolio

Artikel Sebagai Portfolio

1. Designing UX Exchange (Usabilitypost.com)1

2. Smashing Magazine—Realigned (Awayback.com)3

Simpulan

Kustomisasi Tag Del

Toto, Blogengine Terkecil

Instalasi

Membuat Tulisan Baru

Menjalankan Toto di Server Lokal

Migrasi ke Github

Migrasi ke Webstatis

Webstatis?

1. Security

2. Kecepatan

3. Keamanan Data

4. Interaktivitas

5. Unik

Trik CSS, Pelindung Gambar 2

CSS Transformasi

Reflection

Rotation & Scaling

Kode

Flip Horizontal

Flip Vertical

Rotasi

Scaling

Simpulan

Praktis, Penggunaan Google Font dengan WebFont Loader

Trik Fotografi, Membuat “Fake Miniature”

Gunakan Foto Yang Tepat

Tilt-shift maker

Menggunakan Pengolah Gambar

Google Translate

Trik CSS, Pelindung Gambar

CSS:

HTML:

Trik CSS, Balon Percakapan

Basa Basi

Pengertian Sederhana Tentang Semantik Markup

Daftar Bacaan

Perlu Tidak Perlu, Validasi

Generic Font

ﬂuﬀ

Bacaan

Catatan

Minimum Viable Blog

Bacaan

Multikolom

18px

Minimalis

Bacaan

Tanda Baca

“Smart” Curly Quotes

Ampersand (&)

Dashses

Perkalian (×) & Pembagian (÷)

Ellipses

Daftar Tanda Baca

Simpulan

Daftar Bacaan

Pengunjung Memindai, Baru Membaca

Scannability?

Uji Eyetracking & Heatmap

Aksesibilitas dan Desain

Font Stack

Pengertian Font Stack

Implementasi

1. Times New Roman-based

2. Modern Georgia-based serif

3. Traditional Garamond-based serif

4. Helvetica/Arial-based sans serif

5. Verdana-based sans serif

6. Trebuchet-based sans serif

7. Impact-based sans serif

1. Designing UX Exchange (Usabilitypost.com)¹

2. Smashing Magazine—Realigned (Awayback.com)³