1. Sidebar Lebih Lebar

Kesan pertama saat lihat #newtwitter adalah sidebar yang cukup lebar, ukuran sidebar yang tidak umum dipakai di web, biasanya satu sidebar hanya 25% dari lebar area web, tapi sidebar #newtwitter hampir 50% atau hampir seukuran konten utama (timeline), dan timbullah pertanyaan: “untuk apa sidebar selebar ini?”
contoh sidebar lebar di #newtwitter


2. Background sedikit

Lebar area konten di twitter lama fixed-with sehingga memberi space sangat banyak pda background, dan salah satu kelebihan twitter adalah kita bisa customize background sesuai keinginan, tapi di #newtwitter background punya space lebih sempit (asumsi untuk monitor ukuran 1024 x 768 px). Tentu ini akan banyak mengakibatkan perubahan aturan desain background, seperti yang pernah saya tulis sebelumnya
background old twitter tidak berlaku di #newtwitter


3. Fungsi Tersembunyi Space Kosong Sidebar

Ketika menjelajahi timeline saya baru sadar apa fungsi sidebar yang lebar. Misalnya (1) ketika avatar / nama user di timeline kita klik maka otomatis akan muncul mini-profile di sidebar; (2) ketika salah satu tweet kita klik icon “arrow” di pojok kanan atas maka akan muncul single tweet dengan semua konten yang berhubungan dengan tweet tersebut, siapa saja yang di mentions, reply dari tweet apa, dst; (3) kita bisa lihat video, foto dan media lain yang disebut dalam tweet, misalnya url youtube terlihat videonya, url twitpic terlihat fotonya, url foursquare terlihat map-nya, dll
contoh video di sidebar #newtwitter


4. Jawaban untuk Twitter Client

Sudah cukup lama kita kenal berbagai aplikasi twitter ketiga (twitter client) baik yang berbasis web atau yang berbasis desktop, kita tahu twitter client punya fitur lebih lengkap dari web twitter sendiri, dan mungkin #newtwitter ini adalah jawaban agar user bisa lebih banyak menghabiskan waktu di web resmi twitter daripada di aplikasi ketiga, mungkin dalam waktu kedepan twitter akan membuat aplikasi desktop.
contoh twitter client


5. Scrolling

Coba perhatikan timeline #newtwitter, scrolling cursor kebawah, saat di tweet terakhir pada halaman tersebut kita dekati maka otomatis loading tweets sebelumnya, tanpa perlu lagi kita klik tombol (button) “more” seperti pada twitter lama.

6. Tidak Ada Footer

yah karena timeline auto scrolling footer disini tidak diperlukan lagi, beberapa link yang sebelumnya ada di footer kini ditampilkan di bagian sidebar.

7. Golden Ratio

golden ratio #newtwitter by stopdesign

Satu hal yang membuat saya kagum adalah, ternyata #newtwitter didesain menggunakan acuan perbandingan “golden ratio”. Apa itu golden ratio? ini adalah istilah baru yang saya tau dalam hal dunia web desain, Tetapi ternyata ini ilmu lama yang sudah diaplikasikan pada bidang rancang bangun (arsitek), seni lukis, media cetak, dsb. pembahasan mengenai golden ratio, rencananya akan saya bahas dalam postingan selanjutnya.

hak cipta gambar milik masing-masing user di flickr
Tweet

Alasan utamanya adalah berkenaan dengan personal branding online, semakin lama dan semakin konsisten kita menggunakan avatar yang sama di berbagai layanan Web 2.0 ini, semakin mudah kita dikenali di internet. karena belum tentu kita bisa menggunakan “nama id” (username) yang sama.

Sebagai contoh, berikut adalah avatar utama saya, dan beberapa alternatif hasil modifikasi mengikuti tema tertentu:

1. ini adalah foto asli yang dimanipulasi pencahayaan di Adobe Photoshop, foto diambil sekitar tahun 2005 saat saya masih kuliah, yang mengambil foto adalah istri saya, menggunakan kamera saku  digital (IXUS EX-Z3). ceritanya saat saya pulang kerja, pakai kemeja biru dan topi pet hitam. Setting-nya di pintu dapur, tampak terlihat beberapa alat masak digantung :) (panci dan wajan).
2. Foto yang sama seperti di atas, dimanipulasi dengan menghilangkan background, mengganti dengan warna merah-putih, dan mengganti warna foto menjadi hitam putih. Avatar ini saya gunakan pada saat ramai di twitter kampanye “kami tidak takut” oleh hashtags #IndonesiaUnite, saat itu hampir semua anak indonesia mengganti avatarnya bertema merah putih
3. Foto yang digunakan juga masih sama, kali ini dimanipulasi menggunakan Adobe Photoshop dengan menghilangkan background (gambar wajan) mengganti dengan gambar texture batik indonesia, kemudian menghilangkan warna baju dan menggantinya dengan pola batik seperti pada background, agar terlihat seolah-olah memakai baju batik :). Avatar ini saya pakai saat ramai kampanye pengukuhan batik tulis Indonesia oleh Unesco
4. Masih menggunakan foto yang sama, dan manipulasi sederhana dengan menghilangkan background (karena masukan dan komentar dari beberapa teman), dan mengubah warna foto menjadi hitam putih. Avatar ini saya pilih sebagai avatar utama saat ini, di twitter, linkedin, di blog ini, di skype, di YM, di gTalk, di web portfolio, dll. alasannya karena warna hitam putih netral di berbagai aplikasi.

Mungkin tidak mudah memilih satu foto khusus untuk kita jadikan avatar utama :) tetapi apa salahnya mencoba? Tidak setuju dengan tulisan ini? silahkan mengisi form komentar :)

(2) @pakzam
since: 11 Desember 2009 | following: 200 | follower: 325 | listed: 42 | tweets: 1,475

keterangan: sekarang, ini adalah akun utama saya, kicauan dari akun ini saya tampilkan di web http://zam.web.id, akun ini untuk kepentingan personal, tema yang dibicarakan lebih bebas, tidak hanya masalah web desain, tapi juga soal pengalaman kecil sehari-hari dan untuk bertegur sapa dengan teman-teman online, terutama dari Indonesia (menggunakan bahasa Indonesia)

(3) @toekangweb
since: 27 Desember 2009 | following: 58 | follower: 89 | listed: 9 | tweets: 66

keterangan: akun ini mewakili weblog http://toekang.web.id, blog yang membahas seputar pekerja web Indonesia, profil mereka dan karya-karyanya. akun ini menggunakan bahasa Indonesia. diusahakan hanya follow akun yang berhubungan dengan pekerja web indonesia, mulai dari freelancer lokal, startup lokal, blog lokal, dan sebagainya

(4) @tookangweb
since: 17 Maret 2010 | following: 66 | follower: 22 | listed: 1 | tweets: 55

keterangan: akun ini saya buat tiga bulan sebelum peluncuran web http://tookangweb.com, akun ini memang sudah dipersiapkan untuk web tersebut, sebagai media publikasi, branding sekaligus komunikasi dari web tookangweb, penyedia wordpress theme gratis. Tema yang dipilih adalah “wordpress”, karena itu tiap post diusahakan berhubungan dengan wordpress, juga diusahakan hanya follow akun yang berhubungan dengan wordpress (berbahasa inggris)

Karena berbagai macam kebutuhan, tidak jarang satu orang memiliki lebih dari satu akun twitter. Mereka pasti memiliki alasan masing-masing. Berikut mungkin beberapa alasan untuk apa membuat banyak akun twitter:

1. Karena berganti nama id twitter
   contoh: @monikahalim mengantikan nama @halomomo
   @oDian menggantikan nama @dianarakeren
   sekarang mereka memakai nama baru, tetapi nama yang lama tidak dihapus, hanya ditutup dan diberi keterangan sudah ganti nama
2. twitter khusus untuk web/blog
   contoh: @jurusgrafis buatan @madeforyou
   @cmsthemenet buatan @andrayogi
   @wpgpl buatan @jauhari
   @tokokoo buatan @icreativelabs
   nama-nama twitter diatas dibuat khusus untuk web atau blog yang di dikelola sendiri diluar nama twitter personal yang mereka miliki
3. 2 twitter untuk 2 bahasa
   contoh:@aulia menggunakan bahasa inggris dan @auliamasna menggunakan bahasa indonesia
   @hafizrahman menggunakan bahasa inggris dan @hfz menggunakan bahasa indonesia
   dua akun twitter masing-masing dimiliki oleh satu orang yang sama dengan tujuan berbeda dan menggunakan bahasa berbeda
4. Akun twitter untuk proyek eksperimen (uji coba)
   contoh: @ibnutri memiliki piaraan twitter antara lain: @jam_gadang, @sholat_yuk, @wiki_bot, @digg_bot dll
   semua piaran tersebut dikelola oleh satu orang untuk melakukan eksperimen twitter API, tidak jarang @ibnutri membuat aplikasi twitter sesuai permintaan klien (kebutuhan pekerjaan)
5. Akun twitter tidak jelas (anonim)
   contoh: @melati_idol dan banyak twitter hantu yang lain
   entah siapa yang membuat akun twitter tersebut, namun ada kemungkinan pemilik akun tersebut juga memiliki akun twitter pribadi, karena terlihat sudah perpengalaman memakai twitter.
6. Akun twitter karena hashtags atau trending topic
   contoh: @alasanbuatputus dibuat dari hashtags #alasabuatputus
   @jamansd dibuat dari hashtags #jamansd
   kalau tidak salah @jamansd dibuat setelah hashtags #jamansd menjadi trending topic, begitu pula untuk @alasanbuatputus dibuat setelah #alasanbuatputus menjadi trending topic.
   sama dengan no.5 ada kemungkinan pemilik akun tersebut juga memiliki akun twitter pribadi, karena terlihat sudah perpengalaman memakai twitter.

Lalu apakah perlu kita membuat lebih dari satu akun twitter? kalau kita memang perlu dan bisa memelihara (update secara berkala) kenapa tidak?

Dan dua akun twitter atau lebih milik kita, tidak harus memiliki follow yang sama, beda akun twitter seharusnya juga beda timeline, kalau sama saja buat apa kita punya akun banyak? :)

sebelum diedit (before edit)

follow me on Twitter


< script src="http://twitter.com/javascripts/blogger.js" type="text/javascript">
< script src="http://twitter.com/statuses/user_timeline/zamdesign.json?callback=twitterCallback2&count=5" type="text/javascript">

Setelah dicek ada beberapa pesan error di web W3C sebagai berikut:

ada 4 error dan 4 peringatan, 1 error berasal dari line 8 (disini line 2) karena pemakaian kode < ul > tanpa menyertakan kode < li >, sedangkan error lainnya ada di line 12 (disini line 8) karena banyak memakai karakter tidak standart.

setelah diedit (after edit)

(follow @zamdesign)


< script src="http://twitter.com/javascripts/blogger.js" type="text/javascript" />
< script src="http://is.gd/bOh9D" type="text/javascript" />

line 8 (disini line 2) saya mengubah dari kode < ul > menjadi kode < div >, dan yang unik untuk trik di line 12 (disini line 8) saya menggunakan fasilitas short URL dari is.gd (kalian boleh menggunakan fasilitas short URL lainnya seperti bit.ly dan lain-lain) dan lihat hasilnya ternyata valid

:) ini adalah trik coba-coba yang akhirnya berhasil, dan saya sudah menggunakan trik ini di website zamdesign.

semoga bermanfaat

Jaka Panuluh, foto pada hari Senin, 12 April 2010

Detik demi detik

Istri mulai merasakan kontraksi rahim sejak pagi, sementara saya masih melakukan rutinitas harian seperti biasa: mengantar Jati sekolah, menemani Jalu bermain, kemudian bekerja di depan komputer, online chat melalui skype dengan teman-teman kerja iCreativeLabs di Bandung.

Sekitar pukul 9 saya sempat mengantar istri periksa ke bidan, Bidan berkata “ini masih kontraksi semu, silahkan balik ke rumah dulu, nanti segera kembali kesini kalau sudah keluar darah”. Masih “kontraksi semu” pembukaan saja belum, kami kembali pulang ke rumah, sampai di rumah istri masih merasakan kontraksi beberapa kali. Istri sempat membersihkan dan merapikan rumah, aktifitas untuk melupakan rasa sakit yang dialaminya.

Sekitar pukul 10 kami menelpon orang tua dan kedua mertua, mohon maaf atas semua kesalahan sebagai anak, dan mohon doa restu agar diberi kemudahan dalam persalinan nanti.

update status istri di facebook sebelum persalinan

Sekitar pukul 11 kami mulai memasukkan pakaian dan perlengkapan kelahiran dalam tas, Jati yang baru pulang sekolah dan melihat kami, merasa kaget dan senang, ia tidak menyangka kalau adiknya akan lahir pada hari itu.

Sekitar pukul 11.30 – 12.30 saya ke masjid sholat Jumat, dan tidak lupa berdoa kepada Allah supaya diberi kelancaran dan keselamatan untuk anak dan istri. kami masih ragu-ragu apakah memang hari ini persalinannya, menurut perkiraan dokter harusnya akhir bulan April. Dan biasanya istri mengeluarkan darah secara berkala sehari sebelum persalinan, tapi kali ini hanya sakit dan belum keluar darah.

pulang sholat jumat, istri menyempatkan update status facebook, mohon maaf kepada semua teman-teman dan mohon dukungan doa agar persalinan kami lancar. sepanjang hari itu istri menahan sakit, katanya tidak bisa menjelaskan dengan kata-kata bagaimana sakitnya, tidak hanya rahim, tapi seluruh tubuh, bahkan rasanya ini lebih sakit daripada saat persalinan Jati dan Jalu.

chat via skype teman-teman icreativelabs

15.30 setelah istri sholat Ashar, istri diam di tempat sholat sambil menahan sakit. Setelah istri beranjak dari tempat sholat, saat itu darah mulai keluar, saya menelpon taksi, tidak lama taksi datang mengantar kami ke bidan.

16.15 istri sudah di kamar bersalin, saya mendampingi di dalam, bidan berkata “ini sudah bukaan tujuh”. dengan segenap kekuatan dan doa, akhirnya istri berhasil melahirkan tepat pukul 16.25 seorang bayi laki-laki, Alhamdulillah lancar dan normal.

“Jaka Panuluh”

Kami ingin memberi nama yang tidak jauh dari nama anak kami pertama (Jati Pinatih) dan kedua (Jalu Pinilih), hanya terdiri dari 2 kata, diawali dengan huruf “J”, kata kedua diawali dengan huruf “P” dan diakhiri dengan huruf “H”, menggunakan bahasa jawa, singkat dan sederhana tetapi memiliki arti yang baik. Rencana pemberian nama depan “Jaka” sudah kami siapkan jauh hari sebelum kelahiran. Sedangkan nama belakang “Panuluh” awalnya saya dengar dari ibu mertua, lalu saya cari arti nama tersebut di internet. Saya menemukan nama vokalis band Letto: “Sabrang Mawa Damar Panuluh (Noe)“  nama pemberian Emha Ainun Najib (orang tua Noe), kalau tidak salah artinya adalah: “menyebrangi api cahaya penerang” mungkin “api cahaya penerang” maksudnya adalah “ilmu pengetahuan” artinya bisa menjadi: “mengarungi lautan ilmu pengetahuan”.

Agak sulit mencari arti kata “panuluh” di internet, saya akhirnya menemukan arti dari kata dasarnya “suluh” yaitu: “terang”. dalam bahasa Jawa kata “suluh” mendapat awalan “Pa-” kemudian frasa “s” luluh menjadi “n” = “Panuluh”, artinya “pembawa terang / pemberi terang / penerang / penunjuk jalan”.

Kami ucapkan banyak terimakasih untuk teman-teman atas semua perhatian, ucapan dan doanya. Saya percaya jika doa semua teman di twitter, di facebook, dan di kantor icreativelabs ikut membantu dalam kelancaran proses persalinan istri saya. semoga Allah mengasihi dan menyayangi kita semua :)

ucapan dan doa dari teman-teman di twitter

ucapan dan doa teman-teman di facebook

Background twitter sifatnya fixed (tidak bergerak saat scroller browser digeser), dan posisinya menempel pada bagian pojok kiri atas browser. Sedangkan bagian konten utama twitter terletak tepat di tengah browser, dengan ukuran lebar 763 pixel. Background akan terlihat menyesuaikan ukuran browser, karena itu kita perlu mengetahui bebeberapa batasan ukuran dan jenis gambar sebelum kita membuatnya. Setidaknya untuk saat ini ada empat jenis background twitter: background profil, background satu gambar penuh, background gradasi, dan background gambar berulang (texture / pattern).

1. background profil
   background profil biasanya berisi mengenai biografi singkat, foto diri, dan beberapa link seperti personal website, email dan alamat jejaring sosial. Tetapi semua link tersebut tidak bisa di-klik, karena hanya sebuah background. Biasanya tempat profil ini di sebelah kiri backgound, kadang ada juga yang ditempatkan di sebelah kanan background tetapi kurang lazim, karena tidak akan terlihat dalam beberapa perbedaan ukuran resolusi layar.
   

   from balkhis

2. background satu gambar penuh
   background satu gambar penuh biasanya foto, atau gambar artwork yang berukuran besar memenuhi layar browser. Gambar besar ini akan terlihat bergeser sesuai ukuran resolusi layar, karena bagian tengah tertutupi area utama twitter, sedangkan background tidak bisa center.
   

   from balkhis

3. background gambar pojok kiri atas
   background gambar pojok kiri ini lebih aman karena gambar tidak harus memenuhi layar browser, cukup di bagian pojok kiri atas saja, biasanya bisa berisi profil, atau gambar objek atau permainan gradasi warna. Karena gambar tidak penuh, maka pada bagian kanan dan bawah gambar harus memiliki warna yang sama dengan warna background twitter, agar terlihat menyatu.
   

   from balkhis

4. background gambar berulang (texture / pattern)
   background gambar berulang biasanya cukup menggunakan gambar kecil, lalu gambar tersebut di-load ulang horizontal maupun vertikal (dengan mengaktifkan option “tile”) Sehingga gambar memenuhi background sebagai pattern. Contoh pattern bisa dilihat disini,
   

   from flickr

Ukuran Optimal
Ukuran optimal background bisa dilihat di resolusi 1280×1024 pixel. Di resolusi ini setidaknya ada ruang di bagian kanan dan dikiri area utama, masing-masing berukuran 250 pixel.

Ukuran minimal
setidaknya background minimal bisa terlihat bagus di resolusi layar 1024×768 pixel.

Ukuran Maksimal
ukuran maksimal gambar bisa di ukuran layar 1600×1200 pixel, atau kalau ingin lebih besar bisa membuat ukuran 1920×1200 pixel atau bisa lebih besar lagi sampai 2560×1600 pixel tidak lebih dari itu.

Branding
jika ingin menampilkan logo di background, ukuran lebar logo kurang dari 122 pixel bisa terlihat aman di resolusi 1024×768 pixel, tapi ukuran itu akan terlihat kecil di resolusi yang lebih besar, ukuran lebar logo kurang dari 212 pixel terlihat cukup di single post twitter (di resolusi 1024×768 pixel) juga terlihat cukup di halaman profil (di resolusi 1280 pixel keatas).
Jarak dengan bagian top bisa menggunakan 10-12 pixel (sejajar dengan logo twitter) atau menggunakan jarak 66 pixel (sejajar dengan area utama twitter). Jika menggunakan text di background sebaiknya memakai ukuran font agak besar, karena sebagai gambar, font akan berkurang kualitas ketajamannya.

Ukuran file
gambar background dengan ukuran dibawah 100 KB akan lebih cepat ditampilkan, ukuran 300 – 400 KB sudah cukup berat, jika memang mengharuskan gambar besar, jangan sampai melewati 800 KB.

Jenis format File
Twitter menerima: format file GIF, JPG, dan PNG

Cara Mengganti Background Twitter
silahkan cek disini

*adaptasi bebas dari 99designs

Ada juga yang membagi menjadi tiga, yaitu desainer (khusus mockup interface), slicer (khusus XHTML/CSS), programmer (khusus PHP, AJAX, dst). Tujuan dari pembagian ini adalah agar web developer lebih fokus terhadap kemampuan masing-masing. Misalnya seorang programmer tidak lagi memikirkan tampilan web, ia hanya fokus dengan bagaimana script berjalan. Dan XHTML/CSS slicer hanya memikirkan bagaimana hasil mock up di implementasikan sampai tahap cross-browser.

Beberapa waktu yang lalu saya coba menulis pertanyaan melalui update status (twitter, facebook, dan plurk) ternyata banyak teman yang memberikan jawaban. berikut ini pertanyaan dan jawaban-jawabannya:

Pertanyaan buat teman-teman web designer: Kalian lebih telaten mana (1) saat bikin mockup PSD/PNG atau (2) saat coding XHTML/CSS ?

by jeffcouturier @flickr

1. taufikn: @zamdesign coding..
2. playgroundpilot: @zamdesign sama2 aja menurut saya, Pak…tapi saat coding lebih membutuhkan perhatian khusus soal detail :)
3. sirio: @zamdesign kalau rio lebih suka CSSinnya mas :D
4. ayahshiva: @zamdesign Lebih milih XHTML dan CSS
5. armono: @zamdesign Dua2nya harus di-telaten-i. Sama2 penting :) re: design atau coding
6. cizkah: @zamdesign maksudnya telaten gimana ni? Betah gitu? Sama aja si keduanya. Deg2an dan excite stiap mulainya.
7. TheLifeDesign: @zamdesign No 2. Soalnya kalo mockup cuma buat sketch awal aja, kerjaan yang sebenernya ya saat coding :-)
8. unwinged: @zamdesignn saat coding
9. kevinosmond: @zamdesign setuj ama @armono. Tp gw spend lebih lama di design hehe. Dua2nya mempengaruhi satu sama lain
10. andisaleh: @zamdesign Coding, tantangan konversinya di situ apalagi tuk layout yang aneh-aneh. Tetep… IE6 sux
11. alitmahendra: @zamdesign saya lebih telaten yang ke 2 mas, selain karena temen2 saya ndak suka ribet di Xhtml/CSS, biasanya mockup PSDnya masih mentah :)

Jawaban teman-teman di Facebook:

1. Rio Purnomo: *ngacung* saya pak! kalau saya lebih mahir coding HTML+CSS :D
2. Aidil Muladha: Bikin mockup ajah, cssnya males.
3. Hafiz Rahman: Yang pertama :P
4. Hendra Hoedojo: mock up
5. Fikri Rasyid: wah, saya mah bisanya yang kedua saja :P
6. Suwahadi Net: coding coding…
7. Richard Fang: mock up pastinya! :D
8. Endah Caressa: saya males coding mending PSD nya ajah =))
9. Yofie Setiawan: berimbang nih…
10. Deny Sri Supriyono: lebih senang terima transferan, zam :d lebih cepet xhtmlizing.
11. Micko Henry: yang pertama :)
12. Didats Triadi: saya telaten ngirim invoice aja deh. :D
13. Gigih Budi Abadi: psd, soalnya nggak bisa xhtml/css
14. Arief Jfrx: both. klo lagi bosan dengan coding, ya cari job design. vice versa
15. Abi Wildan: pilih yang nomor satu aja

Jawaban teman-teman di Plurk:

1. Aryo: [says] keduanya
2. kai-hansen: sudah lupa mockupnya lbh seru codingnya, soalnya males ngeload PS, kecuali terpaksa :D
3. icha saja: [asks] Mockup tu pa?Q masih pemula,kl css q lom mahir,hax main insting,wkwk…

Yang memilih Mock Up (PSD/PNG): Aidil Muladha, Hafiz Rahman, Hendra Hoedojo, Richard Fang, Abi Wildan, Micko Henry, Endah Caressa (7 orang)

Yang memilih Coding (XHTML/CSS): taufikn, sirio (Rio Purnomo), ayahshiva, TheLifeDesign, unwinged, andisaleh, alitmahendra, Fikri Rasyid, Suwahadi Net, kai-hansen, Deny Sri Supriyono (11 orang)

Yang memilih keduanya: playgroundpilot, armono, cizkah, kevinosmond, Arief Jfrx, Gigih Budi Abadi, Aryo (7 orang)

Jawaban lain: Didats Triadi, Yofie Setiawan, icha saja (3 orang)

Dari hasil perbandingan perhitungan jawaban diatas, terlihat yang memilih coding XHTML/CSS lebih banyak, sedangkan yang memilih Mockup PSD jumlahnya sama dengan yang memilih dua-duanya. Tentu saja jawaban ini belum mewakili teman-teman web desainer di Indonesia semuanya. Tetapi paling tidak hal ini bisa menjadi contoh kecil saja, atau bisa juga mempermudah kita untuk mencari siapa teman kita yang akan kita bagi projek, sesuai dengan minat mereka masing-masing :)

Terimakasih untuk semua teman yang memberikan jawaban. Bagaimana dengan kalian? ada yang ingin memberi jawaban lain?

kaos twitter

Namun jika kita lihat dari sisi lain “twitter ternyata lebih menarik daripada facebook”. Saya yakin suatu saat semua orang bosan dengan facebook, dan itu mulai terlihat sekarang, banyak teman tidak aktif lagi bermain facebook, tidak seperti masa awal booming.

Anehnya saya belum melihat orang aktif twitter yang merasa bosan dengan twitter, dan lebih aneh ternyata ada orang-orang yang sangat aktif di twitter tetapi tidak punya akun facebook

Apa saja yang menarik dari twitter? dan apa saja yang membedakannya dengan facebook?

1. Hanya 140 karakter

Update status twitter hanya dibatasi 140 karakter (huruf, angka, simbol, atau spasi) sedangkan update status di facebook awalnya dibatasi 160 karakter kini dinaikkan menjadi 420 karakter. Karena di twitter hanya 140 karakter, maka kita harus menulis yang singkat dan perlu saja, apalagi kalau menyertakan tautan (link) kita benar-benar harus berpikir untuk memilih dan menyingkat kata. Sedangkan di facebook update status bisa panjang, bisa jadi satu paragraf, mungkin bisa menulis satu lirik lagu penuh :). Akhirnya kalau update status di facebook tidak usah bingung memilih dan menyingkat kata, tidak heran update status di facebook kadang ada yang terkesan bombastis :D.



semua 140 karakter

2. No threaded comment

Di facebook cara membalas update status adalah dengan menuliskan komentar yang muncul di bawah update status tersebut, begitu seterusnya secara berurutan (threaded). Di twitter beda, cara membalas update status adalah dengan menulis update status baru dengan menyertakan @namaorang yang dibalas. Ini yang membuat twitter menjadi istimewa. Bayangkan jika ada seseorang menulis update status hanya ditujukan  untuk kita, tulisan itu diposting di halamanya, tentu tweet tersebut jadi lebih berkesan, kita jadi sungkan jika tidak me-reply. Karena itu di twitter user harus lebih aktif “menyapa” supaya dapat banyak tweet balasan :) (Cara reply menggunakan simbol “@” baru-baru ini juga ditiru oleh facebook)

3. Followings dan followers

Di twitter, kalau kita ingin mengikuti update status seseorang, harus menjadi “follower” tanpa “meminta” pertemanan (kecuali untuk yang mengaktifkan privacy). Jika di-follow, kita tidak harus membalas menjadi follower dia. Jadi timeline hanya berisi update status orang-orang yang kita pilih saja. Jika suatu saat tidak suka, kita bisa unfollow orang tersebut, otomatis update statusnya tidak ada dalam timeline kita.

Di facebook, semua teman bisa membaca update status kita. Sebaliknya, kita juga bisa membaca update status semua teman kita itu. Tidak dibedakan apakah teman akrab / dekat, atau teman yang belum kenal sekalipun. Update status semua teman muncul di beranda kita, sulit mengatur supaya di beranda hanya muncul update status orang-orang yang kita pilih, mungkin caranya hanya dengan “memutuskan pertemanan”.



tampilan twitter

4. Tanpa konfirmasi

Di Twitter, Jika tidak mengaktifkan privacy, maka semua orang bisa membaca update status kita, termasuk orang yang belum punya akun twitter. Semua orang juga bisa follow tanpa harus meminta konfirmasi dari kita. Mungkin alasan ini yang membuat beberapa artis, selebritis, politikus, mentri, sampai presiden punya twitter. Akun mereka biasanya di follow oleh ribuan orang. Kalau di facebook tentu repot mengkonfirmasi satu-persatu permintaan teman yang jumlahnya puluhan ribu :).

5. No game No quiz

Sebenarnya layanan resmi dari twitter hanya update status tanpa aplikasi lain seperti foto, video, dan lain-lain. Jika di twitter bisa melakukan itu adalah karena bantuan aplikasi di luar twitter. Karena hanya update status, maka pembicaraan di twitter akan lebih fokus dan menarik, misalnya ketika ada musibah gempa, berita di twitter akan terasa lebih aktual. Sementara di facebook pada saat yang sama (saat terjadi gempa) masih terlihat orang-orang yang sibuk main game (contoh: mafia wars, pet society dan lain-lain), atau muncul juga laporan quiz-quiz yang kurang penting.

Baru-baru ini facebook telah mengeluarkan versi lite dimana tidak memunculkan game dan quiz di beranda kita. (merasa tersaingi twitter?)



facebook lite no quiz no game

6. Hashtags (#) dan Trending Topic

Hashtags dipakai untuk menandai topik tertentu dalam pembicaraan di twitter, simbol yang digunakan adalah “#”. Dengan menggunakan hashtags, update status bisa dikelompokkan berdasarkan topik dalam hasil pencarian. Beberapa contoh hashtags yang pernah menjadi Trending Topic: #indonesiaunite, #jamansd, #mbahsurip, #pengakuan, #alasanbuatputus, #jokoanwar, dan lain-lain.



contoh postingan tweet

Trending topic adalah topik-topik yang sedang ramai dibicarakan oleh tweeps, biasanya ditampilkan 10 list di sidebar kanan timeline. Trending topic bisa bermanfaat bagi corporate branding dalam target pemasaran mereka, bisa pula bermanfaat bagi politikus untuk melihat isu-isu aktual, dan bermanfaat untuk siapa saja dalam mengikuti trend global, contoh: rilis film terbaru. Dan masih banyak manfaat lainnya.

Hashtags dan Trending topic ini belum ada di facebook

7. Banyak tools dan aplikasi pendukung

Coba lihat timeline twitter kita, postingan tweet berasal dari macam-macam tools atau aplikasi, misalnya: tweetdect, ubertwitter, tweete, hahlo, twitpic, twhirl, twitterfox, dan lain-lain kalau disebutkan bisa ratusan :) salah satu contoh list aplikasi / tools pendukung twitter silahkan cek disini.

Dan aplikasi tersebut bisa dipakai dari bermacam-macam platform: mulai web, mobile, Blackberry, iPhone, dan lain-lain. Kadang di beberapa aplikasi malah memiliki fitur yang lebih lengkap, lebih kompleks, lebih canggih daripada akses lewat web twitter itu sendiri. Misalnya di web twitter tidak ada fasilitas RT (retweet) tapi di aplikasi lainnya ada, di twitter tidak bisa upload foto, tapi kita bisa upload foto di twitpic. dan lain-lain. Sangat fleksibel. Lalu apakah facebook memiliki tools/aplikasi pendukung sebanyak twitter? jawabannya adalah: “tidak” :)



aplikasi twitter di iPhone

8. Posting bersama berdasarkan group / minat

Satu hal lagi yang belum ada di facebook adalah group posting, atau postingan orang banyak yang muncul dalam satu akun twitter. Contohnya: @infoll info lalu lintas jabotabek dan seluruh Indonesia, @lagimakan postingan yang berhubungan dengan aktifitas makan-minum, @pasartwit postingan yang berhubungan dengan jual, beli, sewa (pasar) @alasanbuatputus postingan gokil yang pernah menjadi trending topic, @ayosholat postingan yang berhubungan dengan aktifitas sholat, dan lain-lain.

Grup-grup tersebut memiliki fungsi dan karakteristik masing-masing, ada yang informatif, kuliner, gokil, pasar, sampai religius, semuanya ada (dan masih banyak grup lainnya)

9. Mudah ditampilkan di Web / Blog

Postingan twitter bisa kita tampilkan di web / blog, baik berupa widget juga bisa diintegrasikan bersama postingan konten. Postingan twitter juga memiliki RSS feed, sehingga data mentah dari twitter bisa flexibel di tampilkan dimana saja. Sebaliknya, update status di facebook belum bisa ditampilkan di web/blog dalam bentuk text. bisa ditampilkan tapi dalam bentuk image bersama widget facebook badge, tentunya sangat terbatas pengaturannya.

Ada sangat banyak plugin pendukung twitter untuk CMS WordPress *mungkin jumlahnya mencapai puluhan atau ratusan, silahkan cek sendiri :)*. Sedangkan plugin twitter untuk CMS Joomla sudah mencapai 69 plugin (berdasarkan hasil pencarian).

10. Banyak free icon

Burung berwarna biru adalah salah satu contoh icon paling popular untuk twitter, ada juga icon huruf “t” kecil yang diambil dari logo twitter. Icon-icon tersebut sangat banyak kita temui. Kita bisa download secara gratis, dan kita bisa memakainys sebagai banner atau button atau icon di website kita.

Silahkan cek di: hongkiat, geeksuck, atau google :)



ikon twitter populer

Rujukan tulisan:
@talktowinta, @hyoori, @salsabeela, @bellamy, @cizkah
Jika ada yang kurang tolong ditambahkan di komentar yah :) Terimakasih. follow @pakzam

by trovster @flickr

Berikut rekap pertanyaan 1-10 (sesi 1) beserta jawabannya:

Pertanyaan 1 #zam gmn ya caranya bikin layout yg kolomnya sama tinggi pake css? @rizkysyazuli

• cara1 buat <div> sbg wrap dan <div> dalam <ul><li> sbg col. wrap display:table <ul> display:table-row <li> display:table-cell @rizkysyazuli
• keuntungan cara1 cukup sederhana tapi kekurangannya tidak bisa berjalan di IE7 apalagi IE versi dibawahnya @rizkysyazuli
• cara 2 mengakali tinggi kolom <div> menggunakan background image di wrap background-repeat: repeat-y; (repeat vertical) @rizkysyazuli
• keuntungan cara 2 cukup mudah kekurangan hanya bisa untuk kolom yg dibedakan warna oleh image dan tidak berlaku di fluid width @rizkysyazuli
• cara3 buat container <div> bertumpuk sebanyak jumlah kolom <div> masing2 kolom beda background dan tiap container meneruskan @rizkysyazuli
• cara3 semua <div> baik container maupun kolom float:left untuk container diberi jarak right: sesuai lebar kolom masing2 @rizkysyazuli
• keuntungan cara 3 bisa berjalan di semua browser kekurangannya agak ribet @rizkysyazuli
• cara 4 menggunakan jQuery dimana setiap <div> dalam container dibuat otomatis sama tingginya @rizkysyazuli
• keuntungan cara4 ok di semua browser kekurangan sulit mengatur <div> dlm <div> maupun <div> untuk clear:both ganti dgn <span> @rizkysyazuli

pertanyaan 2 #zam Sebenernya seberapa penting sih kita pake xhtml/css valid itu? @alitmahendra

• 2a) sangat membantu dalam cross-browser dan cross-platform. XHTML/CSS valid mengurangi jumlah error dan bug @alitmahendra
• 2b) bagus untuk SEO. Struktur XHTML/CSS yang valid dan rapi lebih mudah ter-index oleh mesin pencari @alitmahendra
• 2c) mempercepat loading halaman dan menghemat space hosting. XHTML/CSS valid meminimalisasi tag-tag yg tdk perlu @alitmahendra
• 2d) memudahkan dalam maintain dan redesain. Struktur XHTML/CSS valid dan rapi mudah dipelajari perlu terutama dalam kerja tim @alitmahendra
• 2e) lebih profesional dan mampu bersaing. web developer dengan karya web yg valid XHTML/CSS akan memiliki nilai lebih @alitmahendra

Pertanyaan 3 #zam Sebagai web designer, apakah kita harus “strict” dengan web accesibility? @fanari

• 3a) seharusnya YA karena web designer termasuk dalam bagian proses pembuatan dan penyajian web secara utuh @fanari
• 3b) Tapi kenyataannya aksesibilitas web dalam dunia desain web (lokal) mungkin masih sebatas wacana @fanari
• 3c) masih sulit mencari website di Indonesia yang sudah aksesibel untuk orang-orang dengan keterbatasan pancaindera @fanari
• 3d) salah satu contohnya http://mitranetra.or.id oleh Eko Ramaditya Adikara http://ramaditya.com Blogger tunanetra yg multi talenta @fanari
• 3e) web designer dituntut XHTML/CSS valid juga harus ingat kode aksibilitas (rel, nofollow, title, tag, alt, dll) http://w3.org/WAI @fanari
• 3f) terus terang ini PR untuk web designer (termasuk saya) karena mengakses serta berinteraksi dgn website adalah hak semua manusia @fanari

pertanyaan 4 #zam ada cara lain agar div kontainer ga lepas kalo div didlm pake float selain diberi div clear:both dbwh? @alitmahendra

• 4a) ada 3 cara untuk clearing float. Cara 1 membuat <div> kosong dengan CSS clear: both setelah kolom *cara lama /cara umum* @alitmahendra
• 4b) cara 2 pakai overflow: hidden di container tapi di beberapa browser mengharuskan adanya tag width atau height @alitmahendra
• 4c) cara 3 pakai tag :after CSS pseudo-class misalnya .clearfix:after{ tapi untuk IE7 / IE6 harus menambah tag hasLayout @alitmahendra

pertanyaan 5 #zam web usability. saya sering dengar itu. tapi apa itu sebenarnya dan contoh konkretnya bagaimana? @bocahmiring

• 5a) web usability, definisi istilah secara bahasa: kemudahan penggunaan web atau kebergunaan web @bocahmiring
• 5b) web usability = bagaimana membuat pengunjung mudah mengetahui/memahami semua pesan yang ada di dalam website @bocahmiring
• 5c) contoh: untuk icon play music tombolnya segitiga menghadap ke kanan, bukan ke kiri @bocahmiring
• 5d) contoh: tatak letak form login username di kiri/atas. dan password di kanan/bawah kalau dibalik bisa bingung dan salah isi @bocahmiring
• 5e) contoh: daftar list text mudah dibaca jika dalam format <ol>, <ul>, <li> bukan format <p> dan banyak contoh lainnya @bocahmiring

pertanyaan 6 #zam Gimana cara slicing yang enak dari file PDF? @hfz

• 6a) file mockup PDF memang sangat tidak direkomendasikan, seharusnya PSD (hasil Adobe Photoshop) atau PNG (hasil Macromedia Fireworks) @hfz
• 6b) kemungkinan kita (terpaksa) menerima PDF karena: (1) revisi di tengah jalan (2) klien tidak mau tahu (banyak di GetAFreelancer.com) @hfz
• 6c) Buka pakai Acrobat Reader view 100% – PrintScreenSysRq – copy paste ke Adobe Photoshop (cara tradisional) @hfz
• 6d) @ Photoshop pakai Rectangular Marquee (M) untuk menentukan jarak lebar/tinggi space, margin, padding dll serta untuk cropping image @hfz
• 6e) pakai Type Tool (T) untuk menulis 1 karakter atau 1 kata sekedar sebagai pembanding untuk memastikan ukuran dan jenis font @hfz
• 6f) pakai Eyedropper Tool (I) untuk menggambil komposisi warna RGB dari text, gambar maupun elemen lainnya @hfz
• 6g) tetap buka PDF di Acrobat Reader utk select text dan copypaste agar tidak mengetik ulang (AR 7.0 support *tdk berlaku utk graphic*) @hfz

Pertanyaan 7 #zam enaknya Web usability atau aksesibilitas Web dulu ya? Web yang aksesibel umumnya akan usable atau sebaliknya? @daniiswara

• 7a) Itu tergantung orientasi pembuatan web sejak awal untuk apa Penentuan prioritas masing2 menentukan proses design selanjutnya @daniiswara
• 7b)contoh: web yg dibuat untuk tunatera lebih prioritas accessible daripada usable sedangkan web pada umumnya mungkin sebaliknya @daniiswara
• 7c) Idealnya semua website harus usable, navigasi yg mudah dan sederhana, text yg mudah dibaca, tata letak tidak membingungkan @daniiswara
• 7d) Idealnya semua web harus accessible, baik di semua browser, semua platform, dan bisa dibaca device untuk yg disable/difable @daniiswara
• 7e) nyatanya jgn jauh2 bahas soal cross platform dan cross device soal cross browser saja web designer banyak terjebak soal IE6 @daniiswara
• 7f) web accessible belum tentu usable dan web usable belum tentu accessible karena alat ukurnya berbeda. atau perlu riset dulu? @daniiswara
• 7g) contoh web yg bagus design layoutnya (secara visual dan usable) belum tentu bisa diakses (accessible) baik di semua device @daniiswara
• 7h) tapi scr markup mgkn web accessible umumnya akan usable krn standart coding web accessible lebih strict daripada web usable @daniiswara

pertanyaan 8 #zam Pernah pake css framework? Sebaiknya pilih yg mana? Kasih rujukan dong. standarisasi yang pas untuk kerja tim :) @armono

• 8a) Pernah. dan masih pakai CSS framework 960 Grid System http://960.gs @armono
• 8b) rekomendasi 960.gs krn selain XHTML/CSS juga menyediakan file template PSD/PNG dll sebagai acuan Mockup. Cocok untuk kerja tim @armono
• 8c) dan setahu saya teman2 juga pakai 960.gs seperti @madeforyou, @didats, @halomomo, @jauhari, @icreativelabs dan lain-lain @armono
• 8d) di web http://960.gs kita lihat banyak contoh web popular dengan design bagus-bagus pakai 960.gs misalnya http://woothemes.com @armono
• 8e) didukung oleh GridFox http://is.gd/4exxN Addons Firefox yang bisa kita jadikan view-tester di browser sesuai acuan kolom2 960.gs @armono
• 8f) Selain itu sebenarnya ada banyak: Blueprint, YUI Grids, YAML dll tapi maaf belum bisa review karena belum mencoba satu-satu :) @armono

pertanyaan 9 #zam hows your opinion about css framework? @kakilangit

• 9a) CSS framework dibuat untuk mempermudah dan mempercepat proses pembuatan web (konversi PSD/PNG ke XHTML/CSS) @kakilangit
• 9b) lebih cepat karena CSS framework menyediakan paket kode standart, jadi tidak perlu mengetik kode yg sama berulang-ulang @kakilangit
• 9c) Ada cukup banyak CSS framework yang bisa kita download gratis, kita tinggal pilih mana yang sesuai dengan selera/cara kita @kakilangit
• 9d) Hati-hati salah memilih CSS framework bisa membuat pekerjaan slicing jadi lebih lama Tidak semua cocok dengan kebutuhan kita @kakilangit

pertanyaan 10 #zam kalo saya mau buat desain 1 kolom. kira2 butuh grid kayak gitu gak? @kusaeni

• 10a) Grid system (CSS framework) memang lebih dibutuhkan untuk pembuatan website multi kolom (misal: blog magazine style) @kusaeni
• 10b) namun Grid system tidak hanya menyediakan pengaturan kolom, juga mengatur Typography, Form, CSS Reset dan lain-lain @kusaeni
• 10c) karena itu Grid system dlm web 1 kolom bisa dimanfaatkan utk pengaturan tata letak banner, blockquote, list dalam kolom, dll @kusaeni
• 10d) Pada prakteknya, paket kode dalam Grid System / CSS Framework boleh kita kostumasi sesuai project yang sedang kita tangani @kusaeni
• 10e) Tapi keputusan terakhirnya ada di tangan webdesigner sendiri apakah lebih mudah menggunakan Gid system atau tidak :) @kusaeni

Terimakasih untuk semua teman-teman yang bersedia mengajukan pertanyaan serta beberapa teman yang ikut membantu sharing. Saya masih membuka sesi kedua tanya jawab ini dengan tema yang sama. pertanyaan sesi kedua ini dibatasi 10 pertanyaan, dan mungkin berlaku untuk sesi-sesi selanjutnya. silahkan untuk teman-teman yang sudah berniat mengajukan pertanyaan tapi belum sempat bertanya :) saya tunggu