Artikel berikut merupakan terjemahan (dengan berbagai perubahan) dari artikel “A List Apart” berjudul “A Dao of Web Design”, dipublikasi pada 7 April 2000. Penulis artikel tersebut memulai artikel dengan membandingkan Zen dengan Tao dan kepopulerannya, mengakui bahwa mungkin ini hanyalah perumpamaan belaka, tapi menurutnya desain situs dapat lebih dipahami melalui Tao. Saya telah menyunting hasil terjemahan sedemikian rupa dengan maksud memudahkan pemahaman artikel ini.

Pada intinya, dia merasakan ada perbedaan antara media online sebagaimana kita ketahui dengan media online sebagaimana seharusnya. Perbedaan tersebut adalah antara media cetak dan media online. Media cetak adalah pendahulu dari media online dan sudah saatnya hubungan keduanya lebih dipahami dan media online menemukan jati dirinya.

Media yang sama dengan yang lama?

Banyak yang kita bisa pelajari dari menonton program televisi era awal. Televisi pada masa itu kadang dijuluki “radio dengan gambar” dan itu adalah deskripsi yang cukup akurat. Banyak saluran televisi mengikuti format saluran radio yang populer pada saat itu.

Dengan program yang menampilkan bintang tamu dan pembawa acara yang berbicara ke kamera, atau berita dengan pembaca berita berpakaian formal (ala TVRI kalau di Indonesia), menjadi jejak-jejak yang tersisa sementara media televisi tumbuh, sebuah refleksi dari media yang mendahuluinya.

Pikirkan juga video musik era awal, pada intinya hanya penampilan diri mereka memainkan musik. Terkekang.

Ketika media baru meminjam dari yang sudah ada, beberapa yang dipinjam itu memang masuk akal, tetapi banyak yang dipinjam adalah sesuatu yang tidak dipikirkan kembali, “ritual”, dan kadang mengekang media baru. Seiring jalannya waktu, media baru mengembangkan konsep-konsepnya sendiri, membuang konsep-konsep yang sudah ada yang tidak masuk akal.

Jika anda berkesempatan menonton drama televisi era awal, anda akan melihat contoh yang sangat mengena. Karena radio memerlukan suara yang deskriptif, yang menjelaskan kepada pendengar apa yang mereka tidak bisa lihat, drama televisi masa itu terkadang mempunyai deskripsi, menjelaskan kepada penonton, walau sebenarnya mereka bisa melihatnya. Hal itu adalah contoh yang sederhana tapi mengena ketika media baru tumbuh dari media yang sudah ada.

Media online adalah media baru, walau berkembang dari media cetak, dimana konsep-konsep, bahasa desain, dan kemampuan dari media cetak sangat mempengaruhinya, tapi terkadang terlalu terbentuk darimana dia berkembang. “Situs-Situs Menarik” biasanya adalah yang menjinakkan kebebasan media online, mengendalikan halaman-halaman seolah mereka terbuat dari kertas – “Percetakan Media Online”.

Hal ini memang alamiah, “tidak mudah membebaskan keyakinan yang didekap erat”, tapi saatnya untuk bergerak maju, untuk mengakui media online sebagai media tersendiri. Sudah saatnya untuk membuang ritual dari media cetak, dan menghadapi media online dengan alamnya tersendiri.

Bukan berarti kita seharusnya meninggalkan kebijakan dari beratus-ratus tahun media cetak dan beribu-ribu tahun media tulis. Tapi kita perlu mengerti yang mana yang cocok untuk media online, dan yang mana yang ritual belaka.

Mengendalikan halaman situs

Jika melihat beberapa grup desain situs, ada beberapa kata yang diulang-ulang. Pertanyaan demi pertanyaan, tentu saja, adalah “Bagaimana caranya?”. Tetapi di balik pertanyaan “Bagaimana caranya membuat situs saya tampak sama walau dibuka dimana pun?” dan “Bagaimana caranya membuat tulisan saya tampak sama di Windows dan Macintosh?” ada sebuah pertanyaan mendasar – “Bagaimana caranya saya mengendalikan apa yang dilihat pengguna?”. Benar sekali, kata “kendali” muncul berulang kali.

Di balik semua ini adalah keyakinan bahwa desainer adalah pengendali (pikirkan sejenak istilah “tukang pixel”). Desainer ingin menimpa keinginan pengguna, dan pilihan-pilihan yang mereka buat tentang apa yang mereka lihat (salah satunya dengan “menetapkan” ukuran tulisan). Desiner ingin menghiraukan perbedaan dimana situs dibuka, disebabkan oleh detil layar yang berbeda (salah satunya Macintosh dengan 72 titik per inci, dibandingkan dengan standar Windows 96 titik per inci). Desainer mengetahui semuanya dan tidak akan mentoleransi selain apapun harus tampil sama sempurna ke pixel, dengan apa yang tampil di komputer mereka sendiri.

Tentu saja, ini pembesaran masalah, tapi tidak jauh dari kenyataan. Contoh yang sangat mengena adalah banyak yang kecewa ketika mendapati bahwa mempelajari CSS tidaklah seperti mempelajari “Percetakan Media Online”. Jika anda pengguna Mac, anda mungkin menyadari beberapa situs besar terlalu berlebihan menggunakan CSS sehingga membuat halaman mereka susah dibaca. Besar kemungkinan mereka menggunakan poin sebagai satuan ukuran tulisan. Di balik semua pilihan ini adalah filosofi “desainer adalah pengendali”.

Darimana ide ini datang? Hal ini datang dari media cetak. Pada media cetak, desainer adalah dewa. Percetakan adalah industri yang berkembang dari “apa yang anda lihat adalah apa yang ada dapatkan” (What You See Is What You Get – disingkat WYSIWYG) dan banyak desainer situs didasari keyakinan dan praktik dari ritual media cetak. Sebagai desainer kita perlu memikirkan kembali peran ini, untuk melepas kendali, dan mencari hubungan baru dengan halaman situs.

Mengapa hal tersebut penting?

Mungkin ketidakmampuan untuk “mengendalikan” sebuah halaman adalah batasan, kesalahan dari media online. Jika kita datang dari dunia WYSIWYG, insting awal kita adalah untuk berpikir demikian. Memang itu adalah respon awal kita dan sebuah keyakinan yang berlangsung lama. Tapi tidak lagi terasa hal tersebut sebagai batasan, tapi sebuah kekuatan dari media yang baru.

Mari kita lihat hal ini dari sudut pandang yang berbeda. Fakta bahwa kita bisa mengendalikan halaman sebuah kertas sebenarnya adalah batasan dari media tersebut. Anda bisa berpikir – kita bisa menetapkan ukuran tulisan – atau anda bisa berpikir lain – ukuran tulisan tidak bisa diubah. Anda bisa berpikir – dimensi halaman bisa dikendalikan – atau – dimensi halaman tidak bisa diubah. Ini adalah fakta-fakta sederhana dari media tersebut.

Hal-hal tersebut tidak semestinya fakta yang bagus, terutama untuk pembaca. Jika penglihatan mata pembaca tidaklah sebagus orang kebanyakan, kemungkinan besar pilihan yang desainer buat adalah terlalu kecil untuk dibaca tanpa kaca pembesar. Jika pembaca berada di ruang yang terbatas, di kereta untuk pergi kerja, di pesawat terbang, lembar koran terlalu besar. Sedikit yang bisa dilakukan pembaca terhadap hal ini.

Kendali yang para desainer kenal di media cetak, dan kadang didambakan di media cetak, sederhananya adalah batasan dari media cetak. Kita seharusnya mengakui fakta bahwa media online tidak dibatasi batasan yang sama dan membuat desain untuk fleksibilitas ini. Tapi sebelumnya, kita harus menerima aliran yang ada.

Mudah diadaptasi = mudah diakses

Fleksibilitas yang dimaksud adalah “kemudahan adaptasi”. Semua yang telah dibicarakan dari tadi dapat dirangkum menjadi: “halaman-halaman yang mudah diadaptasi”. Buatlah halaham yang mudah diakses, apapun layar, peramban situs, atau perangkat pengguna anda putuskan – atau memang terpaksa – pakai untuk mengakses halaman anda.

Ini berarti halaman-halaman yang jelas dibaca apapun ukuran atau detil layar, atau jumlah warna (dan ingat juga bahwa halaman-halaman mungkin dicetak, atau dibaca dengan perangkat lunak pembaca atau peramban braille – perangkat lunak untuk orang buta). Ini berarti halaman-halaman yang dapat beradaptasi dengan keperluan pembaca, yang penglihatan kurang sempurna, dan yang menginginkan membaca halaman-halaman dengan tulisan yang besar.

Mendesain halaman yang mudah diadaptasi adalah mendesain halaman yang mudah diakses. Dan mungkin janji terbesar dari media online, yang belum tercapai, adalah kemudahan informasi untuk diakses, apapun kesulitan-kesulitan yang ada. Itu adalah keyakinan yang penting dari Komite W3C (Standar Media Online), dan menjadi sesuatu yang penting dari desain situs, dengan halaman-halaman media online akan diminta oleh hukum untuk memberikan akses tanpa pandang bulu, sebagaimana desain bangunan di seluruh dunia memerlukan adanya kemudahan akses ke bangunan.

Terdengar mustahil, mendesain halaman tanpa pandang bulu. Mungkin sekarang masih berupa aspirasi, dengan peramban situs yang masing berantakan dan banyak perangkat, yang akan kita pakai untuk mengakses media online, masih baru atau belum muncul. Tapi banyak yang kita bisa lakukan sekarang yang akan membangun fondasi untuk halaman-halaman yang beradaptasi ke keinginan dan keperluan pengguna, sehingga mudah diakses.

Cara seharusnya

Jadi apa yang bisa dilakukan untuk mendesain demi kemudahan adaptasi, sehingga mudah untuk diakses? Sebelumnya, ada beberapa cara berpikir yang mungkin berguna. Lalu ada beberapa saran praktis tentang langkah-langkah yang bisa diambil untuk menghindari halaman anda tidak mudah diakses.

Pertama, pikirkan apa yang halaman anda lakukan, bukan apa tampak mereka. Biarkan desain anda mengalir dari apa yang halaman tersebut berikan ke pengguna anda, daripada sebuah ide bagaimana tampak halaman tersebut yang anda inginkan. Biarkan bentuk mengikuti fungsi, daripada mencoba membuat sebuah desain dan membuatnya “bekerja”.

Kunci dari idea ini adalah memisahkan isi dan penampilan. Anda mungkin sudah mendengarnya beberapa kali, tapi mungkin ini adalah langkah yang paling penting yang anda bisa lakukan.

Mari kita lihat sebuah contoh sederhana. Pada sebuah halaman ada beberapa tulisan yang dimiringkan. Mengapa? Mungkin untuk penekanan. Mungkin untuk kutipan. Mungkin kata dalam bahasa asing. Pada percetakan tradisional, bentuk mengikuti fungsi. Kelebihan dari percetakan media online adalah kita bisa membuat itu tersurat apa yang tersirat dari apa yang tampak di halaman. Jika alasan untuk miringnya tulisan adalah penekanan, mengapa menandai halaman anda dengan elemen <i>? Gunakanlah <em>, sehingga peramban situs selain yang ada di PC dapat menangani elemen tersebut lebih tepat.

Pada skala yang lebih besar, jangan gunakan HTML untuk penampilan. Tidak ada <font> atau <b>, <i> dan elemen-elemen lain jika untuk penampilan. Jika HTML memberikan elemen yang tepat, gunakanlah. Jika tidak, gunakan kelas (salah satu penanda di CSS). Tentu saja, gunakan CSS untuk informasi penampilan situs anda. Saatnya untuk melihat ke masa depan, tidak terpaku ke masa lalu.

Jika anda menggunakan CSS dengan benar, untuk memberikan penampilan pada sebuah halaman, dan anda tidak menggunakannya untuk menyampaikan isi, maka halaman anda akan “tampak” bagus di peramban situs apapun, di masa lalu atau masa depan. Peramban situs yang tidak mendukung CSS hanya menampirkan halaman yang terlihat sedikit biasa saja. Kekhawatiran terbesar kita adalah peramban yang mempunyai dukungan CSS yang penuh kesalahan. Saat ini itu menjadi isu. Tidak lama lagi, tidak terlalu menjadi isu. Untuk sekarang, anda dapat membatasi diri anda ke bagian CSS yang didukung cukup baik, dan masih mempunyai efek penampilan yang lebih banyak daripada menggunakan HTML (penulis artikel asli ini membuat kumpulan tulisan-tulisannya yang membahas lebih lanjut tentang hal tersebut).

Dalam prakteknya, ada beberapa hal yang anda seharusnya dan tidak seharusnya lakukan ketika mendesain CSS yang akan memberikan dampak dalam kemudahan adaptasi halaman anda. Garis besarnya, jangan bergantung pada aspek apapun dari CSS dapat bekerja semestinya, sehingga halaman anda mudah diakses. Unit pasti, seperti pixel dan poin, mesti dihindari (jika hal itu mengejutkan anda, akan dijelaskan nanti), dan warna perlu digunakan secara hati-hati, dan jangan pernah bergantung padanya.

TULISAN

Biasanya Windows, Macintosh, atau sistem lain hanya mempunyai beberapa tipe tulisan terpasang. Ada sedikit persamaan antara tipe tulisan yang terpasang di berbagai sistem ini. Dengan banyak peramban situs, dan akan lebih banyak di masa depan, pembaca akan bisa memutuskan tipe tulisan yang mereka inginkan untuk melihat halaman situs. Dengan CSS, anda bisa menyarankan beberapa tipe tulisan dan merangkum berbagai kemungkinan. Tetapi jangan bergantung pada sebuah tipe tulisan tersedia walau tipe tulisan tersebut sering dijumpai.

Lebih penting adalah ukuran tulisan. Mungkin ada sadar bahwa tipe tulisan yang sama, dengan ukuran poin yang sama, pada Macintosh “tampak lebih kecil” daripada kebanyakan Windows. Singkatnya, ini dikarenakan perbedaan detil layar yang mana Macintosh adalah 72 titik per inci, sementara Windows adalah 96 titik per inci. Akibatnya signifikan. Hal ini mengaransi kemustahilan tulisan tampak sama antara sistem Macintosh dengan sistem Windows. Tapi jika anda mengakui filosofi kemudahan adaptasi, hal ini tidak berarti.

Apa? Jika anda masih perduli bagaimana pastinya halaman media online tampak ini adalah pertanda anda masih tidak berpikir tentang halaman yang mudah diadaptasi. Salah satu isu kemudahan akses yang paling signifikan adalah ukuran tulisan. Tulisan kecil lebih susah untuk dibaca. Untuk kita yang mempunyai penglihatan yang bagus, akan mengagetkan bahwa ada persentase signifikan populasi yang kesulitan membaca tulisan di bawah 14 poin, yang tercetak kertas. Layar lebih susah dibaca daripada kertas, karena detil mereka yang lebih rendah.

Apakah itu berarti ukuran poin yang seharusnya kita gunakan adalah 14 poin? Itu tidak membantu orang-orang yang penglihatannya lebih tidak bagus. Jadi berapa ukuran poin minimum yang kita seharusnya gunakan? Tidak ada. Jangan gunakan poin. Hal ini akan membiarkan pembaca untuk memilih ukuran tulisan yang sesuai dengan mereka. Hal yang sama untuk pixel. Karena perbedaan detil layar, sebuah pixel pada sebuah sistem bukanlah sebuah pixel pada sistem lainnya.

Anda masih bisa menyarankan ukuran tulisan yang lebih besar untuk judul dan elemen-elemen lainnya. CSS menyediakan beberapa cara untuk menyarankan ukuran tulisan sedemikian rupa untuk membantu kemudahan adaptasi. Kita akan melihat pada salah satu cara untuk mendapatkan idenya.

Dengan CSS anda dapat menerapkan ukuran tulisan sebagai persentase dari ukuran elemen pendahulunya. Sebagai contoh, judul terletak di elemen <body>. Jika anda tidak memasang ukuran untuk tulisan di di <body>, maka tulisan <body> akan mempunyai ukuran tulisan yang dipasang pembaca sebagai ukuran awal. Kita telah membantu kemudahan adaptasi halaman kita, dengan tidak melakukan apapun!

Anda mungkin berkata “tapi tulisannya terlihat terlalu besar” jika dibiarkan begitu saja. Buatlah lebih kecil, tapi di peramban situs anda. Pembaca anda juga akan mempunyai opsi untuk membuatnya lebih besar maupun lebih kecil di peramban situs mereka, tergantung dengan selera mereka atau keperluan mereka.

Kita bisa membuat judul dan elemen-elemen lain kelihatan lebih besar dengan menerapkan bahwa <h1> seharusnya 30% lebih besar daripada <body>, <h2> seharusnya 25% lebih besar, dan seterusnya. Sekarang, berapapun ukuran yang pembaca pilih untuk tulisan utama, judul dan sub-judul akan berukuran lebih besar dari isi, sesuai proporsi. Demikian halnya dengan tulisan yang perlu dibuat lebih kecil daripada tulisan utama, walau hal ini bisa mengarah ke situasi dimana tulisan menjadi terlalu kecil untuk bisa dibaca, jadi gunakanlah secara hati-hati.

Kita telah melakukan sedikit hal sebenarnya, hanya hindari menggunakan ukuran pasti pada tulisan, gunakan ukuran proporsi untuk judul, dan kita telah membuat halaman-halaman kita lebih mudah diadaptasi dan lebih mudah diakses.

STRUKTUR

Marjin, lebar halaman, identasi, dan sebagainya adalah berbagai aspek dari desain halaman yang bisa membantu kemudahan baca. Media online memberikan kesulitan untuk desainer pada setiap hal tersebut. Layar peramban situs bisa diubah ukurannya, sehingga mengubah ukuran halaman. Perangkat media online yang berbeda-beda (TV online, monitor dengan detil yang tinggi, HP / Tablet), mempunyai ukuran layar minimal dan maksimal yang berbeda-beda. Sebagaimana ukuran pasti pada tulisan, struktur halaman yang pasti bisa mengarah pada masalah kemudahan akses pada media online.

Sebagaimana dengan tulisan, akspek struktur pada halaman bisa didesain menggunakan persentase untuk menciptakan halaman yang mudah diadaptasi. Marjin bisa diterapkan sebagai persentase lebar dari elemen yang mempunyainya.

Menggunakan persentase (dan nilai-nilai relatif lainnya) untuk menerapkan struktur halaman pada CSS secara otomatis menciptakan halaman yang mudah diadaptasi. Dengan jendela layar membesar dan mengecil, struktur dari elemen beradaptasi untuk menjaga proporsi yang sama, maka struktur halaman secara keseluruhan beradaptasi. Pembaca bisa memilih ukuran layar sebagaimana yang mereka perlukan.

Marjin, identasi, dan aspek-aspek struktur lainnya bisa juga diterapkan relatif dengan tulisan yang mereka punyai, menggunakan unit em untuk menerapkan marjin, identasi, dan aspek-aspek struktur lainnya. Anda bisa terapkan:

p	 {margin–left: 1.5em}

Hal tersebut menerapkan marjin kiri dari paragraf seharusnya 1.5 kali tinggi tulisan paragraf tersebut. Jadi, ketika pengguna mengatur ukuran layar mereka untuk membuat sebuah halaman lebih mudah dibaca, marjin tersebut akan meningkat sesuai proporsi, dan jika mereka membuatnya lebih kecil, marjin tersebut akan beradaptasi kembali.

WARNA

Media online sebagian besar lebih bewarna daripada halaman cetak. Warna lebih murah di media online. Warna bisa berupa hiasan, bisa membantu menerapkan identitas visual, dan bisa mempunyai nilai praktek (merah mungkin membawa perhatian ke informasi yang lebih penting). Tapi warna mempunyai kesulitan untuk kemudahan akses juga.

Tahukah kamu bahwa di banyak negara (jika tidak semua) orang yang mempunyai kebutaan warna merah-hijau tidak bisa mempunyai lisensi pilot? Karena, mengesampingkan kemampuan lainnya, informasi peringatan kebanyakan disampaikan menggunakan merah untuk bahaya dan hijau untuk keamanan. Sangat disayangkan warna peringatan tidak mudah diadaptasi.

Apakah halaman situs anda mengecualikan orang dengan cara yang sama? Sangat disayangkan, karena dalam waktu dekat hampir semua peramban situs akan menyediakan cara yang mudah untuk pembaca mengganti warna elemen sebuah halaman situs, dengan CSS untuk pengguna, yang bisa menimpa CSS anda (anda sekarang bisa melakukan ini di kebanyakan peramban situs modern).

Bagaimana caranya untuk menghindari masalah tersebut? Gunakan CSS, daripada elemen HTML seperti <font>. Hindari juga terlalu bergantung pada kombinasi layar untuk menyampaikan arti.

Sebuah perjalanan

Merubah cara pemikiran dan bertindak tidaklah mudah. “Tidak mudah membebaskan keyakinan yang didekap erat”. Tetapi perlahan-lahan terlihat apa yang kita terima saja perlu dipikirkan ulang. Dari pengalaman dan percakapan yang beredar bertahun-tahun ini, banyak yang mendekap erat keyakinan tersebut, dan perlu memikirkannya kembali juga.

Sekarang adalah waktu untuk media online tumbuh lebih daripada asalnya di media cetak. Tidak untuk meninggalkan banyak kebijakan dan pengalaman, tapi untuk juga menetapkan arahnya sendiri yang pas.

Kekuatan media online terbesar sering dilihat sebagai keterbatasan, sebuah kekurangan. Tapi alamiah untuk media online mempunyai fleksibilitas, dan menghasilkan halaman, dengan fleksibilitas, mudah diakses untuk semua.

Perjalanan dimulai dengan melepas kendali dan menjadi fleksibel.