Redesign Halaman Login Sisfo STMIK Nusa Mandiri

So, today I have spare time. Jadi daripada otak tidak terasah lebih baik melakukan sesuatu yang berguna buat otak. Ceritanya dulu saya pernah kuliah IT (jadi malu saya) di sebuah universitas swasta bernama STMIK Nusa Mandiri. Tiap kali mau ujian, mau lihat nilai, mau lihat jadwal dan segala macam keperluan kemahasiswaan lainnya saya harus melihat halaman ini:

Sebetulnya sudah bagus. Halaman ini mudah dipahami dan fungsional.

Namun dari segi usability (asek sok keren bgt ini yg nulis), halaman ini kurang baik. Pengumuman ditampilkan di bagian atas melalui mekanisme scroll vertikal. Kenapa kurang baik? Jika ingin melihat pengumuman yang relevan, user atau mahasiswa harus menunggu. Bagi yang paham mungkin bisa menekan control+U dan langsung melihat sourcenya. Tapi itu kan jadinya ga seru dan tujuan website sebagai penyedia informasi kurang kena sasaran.

Dari segi tampilan keseluruhan, rapi. Tapi saya akui website ini kurang kosmetik dan sedikit kaku. Kadang-kadang kalau lagi mau ujian online melihat tampilan putih ini suka stress. Atau ketika pengumuman ujian. Tampilan website ini kadang-kadang bikin deg-degan. Tapi yang lebih deg-degan lagi kalo ga bisa login sih… Eaaaa, maaf nggak nyindir loh.

Kemudian terakhir, penggunaan tag html dan kawan-kawannya. Siapa juga yang peduli sama kode, yang penting tampilan cantik. Bagi saya inner beauty sama pentingnya dengan outer beauty. Jadi kalau tampilan bagus tapi hati masih galau, mendingan nonton kuliah Shubuh dulu pagi-pagi. Nah jadi ceritanya page ini masih pakai tag
. Ugh please dehh, hari genee bikin layout pake table? Emang kenapa pake tabel? Gapapa juga, cuma itu jadinya… gini…

Jadi dalam rangka menghabiskan waktu, saya buat deh halaman login yang baru. Mungkin lebih bagus, mungkin juga lebih jelek. Baiklah, silakan dilihat:
Baca lebih lanjut

CSS atau table?

image

Kira-kira 10 atau 15 tahun yang lalu, menggunakan tabel (tag table) di dalam sebuah website adalah teknik populer yang digunakan hampir semua designer. Namun semuanya berubah ketika bangsa api menyerang. Setelah itu kemudian CSS (Cascading Style Sheet) datang memberi designer sebuah metode yang super fleksibel dalam mendisain sebuah halaman web. CSS memberikan designer kemudahan dalam melakukan pemeliharaan website.

Melalui CSS, informasi design (layout, typography, color) terpisah dengan HTML sehingga memungkinkan tampilan yang konsisten di seluruh halaman website. Selain itu file CSS yang diletakkan secara eksternal melalui link rel= akan di cache (disimpan) oleh browser sehingga akan menghemat bandwidth website tersebut. Kita semua tahu kalau web hosting di Indonesia pada pelit bandwidth.

Tapi kenapa dengan segala daya tarik dan keunggulan CSS, masih banyak web designer yang masih menggunakan table? Sebetulnya jawabannya banyak dan it’s complicated, seperti status anda dan mantan pacar anda. Melalui pengamatan subyektif namun tetap berusaha seimbang coba kita teliti penyebabnya.

Asal mula menggunakan Table

Sebelum table memiliki tag border=0, disain web sangat membosankan. Isinya cuma tulisan-tulisan dengan layout sederhana. Kemudian muncullah border=0 di table yang artinya menghilangkan garis table. Mendisain layout web yang kompleks menjadi mudah. Membuat sidebar? No problem. Header atau navigasi? Gampang. Footer yang keren? Ah apalagi itu, kecil. Konsep table begitu mudah dipahami oleh pemula sekalipun sehingga penggunaannya sangat populer. Tanpa table, mungkin juga lapangan pekerjaan web designer nggak bakalan ada.

Jadi kenapa table muncul duluan daripada CSS? Sebetulnya itu bisa dilihat dari pertama kali website dibuat. Pada awalnya website cuma untuk bagi-bagi hasil riset antara sesama ilmuwan. Ya tau sendiri lah, ilmuwan nggak terlalu penting sama disain, yang penting results. Hasil penelitian banyak menggunakan table untuk presentasi data.

Zaman dulu siapa yang nyangka kalau sekarang website jadi sumber hiburan utama buat sebagian orang? Dari mulai nonton film yang nggak bener sampe nulis status galau di jejaring sosial kesayangan kita semua. Dengan kebutuhan se-intens itu sangat wajar jika teknologi web berevolusi hingga menelurkan teknologi CSS.

Faktor Kenyamanan

Sebagai web designer, kita sudah tidak terhitung me-layout halaman web menggunakan table. Skill tersebut biasa dimiliki oleh seorang designer dan biasanya kebanyakan disainer sangat nyaman menggunakan table. Dengan menggunakan table, hasil akhir bisa langsung diprediksi atau dibayangkan di otak kita. Dengan menggunakan sedikit trick, seperti spacer gif, kita bisa menjamin bahwa website kita akan tampil konsisten di hampir semua browser dari browser tua hingga browser terbaru.

Mudah digunakan oleh Pemula

Salah satu faktor dunia web menjadi begitu sukses adalah rendahnya tingkat kesulitan untuk pemula. Atau pendek kata, siapapun bisa mempelajari HTML dengan cepat. HTML adalah bahasa yang sederhana untuk dipelajari dan tidak terlalu ketat dalam penggunaan kodenya. Ditambah lagi, banyak tools dan IDE yang bisa membuat table secara otomatis hanya dengan mengklik icon-icon. Keadaan ini membuat disain website menjadi sangat mudah untuk siapa saja. Bahkan anak kecil juga bisa membuat website menggunakan Frontpage.

Bandingkan design berbasis table dengan design berbasis CSS. Sebetulnya syntax di CSS sangat mudah digunakan. Kita tidak butuh diploma atau sarjana untuk belajar CSS. Namun begitu, beberapa konsep di CSS sangat sulit ditangkap. Dampai saat ini pun untuk floating dan positioning saya masih meraba-raba dan melakukan trial and error. Kira-kira untuk memahami CSS secara mendalam dan kompeten butuh waktu 6 hingga 12 bulan. But then again I could be wrong.

Kemudian masalah selanjutnya adalah browser support. Setelah beberapa lama menggunakan CSS, kita jadi tahu browser mana yang bisa apa, dan bug apa saja yang ada di browser anu. Tapi yang nyebelinnya, bugnya banyak banget, terutama di Internet Explorer lama. Dulu saya seharian pernah membuat stylesheet khusus untuk IE6 (damn you IE6). Bagi pemula, bug di browser ini benar-benar bikin stress. Jadi bagi sebagian orang CSS bukan solusi melainkan masalah baru.

Tapi secara unik, keahlian menggunakan teknik-teknik CSS menjadi populer diantara para web professionals. Ketrampilan ini yang membedakan antara profesional dengan para amatir yang biasanya asal tempel website menggunakan wizard atau visual editor asal tampilan bener. Tapi kalo dipikir lagi, kecuali kita seorang designer atau programmer web, jarang-jarang orang view source sebuah website hanya karena curious cara bikinnya gimana.

Beberapa hal lebih mudah menggunakan table

Pasti para disainer di luar sana pernah menulis super rumit kode CSS untuk melakukan sesuatu yang jika digunakan dengan table sangat sangat mudah. Contoh soal, mendisain form. Mendisain layout form dengan table sangat mudah, layout jauh lebih rapi dan yang jelas cepat. Mungkin kita bisa juga menggunakan CSS, tapi setelah floating kiri floating kanan padding kiri padding kanan margin atas margin bawah, form nggak jadi-jadi juga. Jika anda menyukai tantangan dan ahli, CSS mungkin menyenangkan, tapi jika anda cuma orang biasa yang dikejar target oleh pak boss, lebih baik kembali menggunakan table.

Jika anda paham dan penuh kesabaran, anda akan bisa melakukan hal-hal menggunakan CSS sebagai pengganti table. Lebih lama lah pastinya, tapi pasti bisa. Begitu terbiasa menggunakan CSS, table dan spacer gif hanyalah cerita lama yang cuma bisa dikenang.

Another Small Project Built With Foundation

Banyak framework yang tersedia membuat disain semakin mudah. Baru-baru ini saya menggunakan Foundation untuk membangun template wordpress. Sebetulnya saya suka yang hitam, tapi rekan kita maunya yang putih dan mungkin saja beliau mewakili seluruh user yang suka background putih and I think everyone would agree that white is always neutral, so no argument there.

Kalo mau liat yang sudah di porting ke wordpress ada di http://beritatrans.com.

Draft Hitam with Foundation

Draft Putih with Foundation

Dummy Picture With Placehold.it

Ketika sedang mendisain sebuah website dan malas mengetik konten teks biasanya kita menggunakan lorem ipsum generator di lipsum.com. Disitu kita bisa kopi paste teks yang sudah ada atau meng-generate (ini bahasa Indonesianya apaan yak?) teks baru supaya terlihat acak.

Jadi bagaimana dengan gambar? Ada nggak dummy picture yang bisa meng-generate (beneran, bahasa Indonesianya meng-generate apaan yak?) gambar secara online? Daripada kita nyiap-nyiapin gambar terus diresize-resize di photoshop atau di paint atau di editor lainnya, kan enak kalau ada boongannya.

Ada nih namanya placehold.it (klik aja, kebuka di window baru kok). Cara pakainya juga gampang.

Di HTML, tag untuk menampilkan gambar adalah <img src="path_to_picture" alt="" />, jadi misalnya <img src="http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc7/428307_10150611788629825_772169824_8887549_1575063058_n.jpg" /> akan menghasilkan gambar sbb:

Nah dengan menggunakan placehold.it kita cuma perlu mengganti path gambarnya menjadi <img src="http://placehold.it/300x250" /> sehingga hasilnya seperti ini:

atau ukuran yang lain misalnya <img src="http://placehold.it/250x250" />

Super gampang, okay go crazy lah kalo gitu sama kotak-kotak abu-abu itu untuk bikin contoh layout ke client. Tapi placehold.it cuma bisa berfungsi kalo ada koneksi internetnya loh (ehh, sapa tau ada yang nanyain).