Suatu malam di bulan November, saya terbang di atas kampung halaman saya di Tucson, Arizona. Saya dikejutkan oleh tata letak kota ini yang seperti jaringan. Tucson adalah salah satu kota yang dibangun melalui perencanaan di Amerika Serikat tampak seperti kisi-kisi yang ditata dengan cermat oleh desainer (Gambar 1). Saya baru saja kembali dari London, justru sebaliknya keluar dari alam.
Gambar 1: Tucson, Arizona
Gambar 2: London
Saya sudah memikirkan artikel ini sejak lama. Pemandangan udara dari kedua kota ini mengingatkan saya pada desain web. Teknologi saat ini memungkinkan kita untuk secara bebas menerapkan desain berbasis grid, atau benar-benar keluar dari grid dampaknya terhadap desainer web. Tidak ada keraguan tentang dorongan ini, namun tantangan sebenarnya adalah bagaimana kita melepaskan pemikiran-pemikiran tertutup tersebut dan berpikir di luar jaringan.
nuansa kota
Jika Anda membandingkan perencanaan kota dengan desain web, persamaan keduanya menarik. Tata letak grid sangat bagus untuk membuat situs web yang dapat diprediksi dan mudah dinavigasi. Grid sangat bagus untuk membantu desainer merencanakan dan membuatnya mudah diakses oleh pengguna (Gambar 3).
Gambar 3: Ryan Brill
Di sisi positifnya, Tucson jelas merupakan kota yang mudah untuk dikunjungi, sedikit petunjuk arah atau peta jalan saja sudah cukup, penduduknya memberikan petunjuk arah kepada orang lain, cukuplah dikatakan, saya berada di sudut barat daya persimpangan Campbell Avenue dan Prince Road Di mana saja. Angkutan umum menuju ke selatan dan utara atau timur dan barat, sehingga sangat mudah untuk mengidentifikasi jalannya.
Di sisi lain, para desainer Tucson awalnya merencanakan perluasan terbatas, dan masalah muncul ketika kota tersebut berkembang melampaui batas yang direncanakan. Keterbatasan jaringan listrik di Tucson mencegah munculnya gaya komunitas atau lingkungan yang berbeda. Banyak penduduk Tucson merasa bahwa kota ini tidak memiliki pusat kota yang dinamis atau banyak lingkungan yang berbeda tidak perlu repot-repot mencarinya.
London berbeda, ini sebuah misteri. Saya tahu warga London sendiri bergantung pada pemandu kota untuk berkeliling. Sistem transportasi kota ini penuh tantangan, dan para pengemudi taksi harus lulus ujian khusus sebelum dapat bekerja. Pertumbuhan alami kota ini tidak menjadikannya tempat yang mudah untuk dikunjungi.
Namun, London penuh dengan distrik menarik dan lingkungan unik, serta pusat budaya dan lingkungan unik. Meski lebih sulit untuk bepergian, namun karena beragamnya selera, orang lebih bersedia menjadi salah satunya.
Metafora ini juga cocok untuk desain web yang cenderung natural. Bagaimana orang dapat dengan mudah menavigasi lorong-lorong yang berkelok-kelok tersebut? Di sisi lain, desain yang indah dapat dicapai dengan mendobrak kotak-kotak yang selama ini kita tinggali. Pada Gambar 4 Anda dapat melihat bagaimana melanggar aturan desain grid memungkinkan desain tetap dapat digunakan namun tetap terlihat berbeda.
Gambar 4: AIGA Los Angeles
Mitos Kode Grid
Sebagai orang yang lebih memperhatikan kode daripada desain, saya bingung menemukan bagaimana desain kita terpaku pada kode. Saya percaya bahwa tata letak tabel jangka panjanglah yang membuat kita menggambar dasar yang kokoh (Gambar 5). tata letak CSS terbaru, mudah untuk mengetahui alasannya.
Gambar 5: k10k
Tata letak tabel cocok dengan desain kisi. Kode tabel itu sendiri mereproduksi grid. Kita cukup mengisi sel dengan gambar, teks, dan elemen antarmuka untuk melengkapi desain kita (Gambar 6). Jika kita ingin menerapkan desain tidak terstruktur yang kompleks, kita perlu menggunakan banyak gambar dalam dokumen, sehingga menyebabkan keseluruhan dokumen menjadi membengkak.
Gambar 6: Pergeseran Berat
Tata letak tabel memiliki beberapa kelebihan, namun seperti perencanaan kota, kelebihan terkadang bisa berubah menjadi kerugian. Grid berbasis tabel memastikan semua sel di dalamnya teratur. Apakah Anda ingin semua kolom memiliki lebar yang sama? Terlalu sederhana, begitulah sifat tabel. Jaga jarak antar sel yang konsisten? Itu juga sangat mudah. Namun, bagaimana jika Anda tidak menginginkan struktur yang rapi ini? Sayangnya, Anda tidak bisa.
CSS mengubah semua itu, itulah sebabnya menurut saya kita belum belajar mendesain untuk Web. Kami, terutama mereka yang mempelajari CSS dari tata letak tabel yang sudah lama ada, baru mulai memahami betapa bermanfaatnya model visual CSS dalam keluar dari kebiasaan desain grid. Apakah tata letak CSSnya sempurna? Tidak, selain manfaat yang diberikan CSS, kita juga kehilangan sesuatu. Perluasan kolom adalah masalah besar untuk desain CSS, seperti halnya kesenjangan sel.
CSS tidak lebih dari tepi dan kotak, yang juga ditemukan dalam grid. Namun, perbedaan penting antara keduanya adalah bahwa CSS memungkinkan kita untuk memisahkan sebuah kotak dari lingkungan sekitarnya dan membuangnya sesuka hati (Gambar 7).
Gambar 7
Kita dapat menggunakan atribut position atau float untuk penentuan posisi, dan kita dapat menggunakan gambar ringan sebagai latar belakang. Oleh karena itu, ketika menggunakan Box, kita dapat mengimplementasikan tata letak grid dan tata letak non-grid dengan lebih efektif. Anda dapat melihatnya di Blood karya Dave Shea. Lihat contoh ini di Lust, salah satu dari banyak desain yang dia gunakan di CSS Zen Garden miliknya (Gambar 8).
Gambar 8: CSS Zen Garden: Nafsu Darah
Gambar 9 menunjukkan desain tidak terstruktur berbasis BOX yang digunakan dalam Blood Lust, dan juga menunjukkan cara menggunakan CSS dan BOX untuk mengimplementasikan grid tidak terstruktur yang independen.
Gambar 9
Setelah kita memahami kemampuan BOX, kita dapat dengan mudah menerobos batasan jaringan listrik. Desain yang sangat tidak terstruktur, bahkan bebas ditunjukkan pada Gambar 10.
Gambar 10: Universitas Kutztown: Departemen Desain Komunikasi
BOX ini diposisikan menggunakan CSS:
Gambar 11
Kodenya tidak hanya lebih bersih, tetapi juga lebih intuitif dan sederhana bagi desainer yang terbiasa dengan tata letak CSS. Desainnya juga intuitif, mudah digunakan, dan tidak konvensional.
Pandangan
Keindahan teknologi tata letak modern adalah kita memiliki lebih banyak pilihan untuk dipilih. Dengan menggunakan CSS kita dapat membuat desain yang mudah dikelola, ringan, kaya visual yang dapat berbasis grid jika kita mau, dan kita dapat dengan mudah memecah atau menghancurkan grid tersebut.
Hal ini membuka lebih banyak peluang untuk desain web kontemporer, dan kita tidak boleh melakukan kesalahan yang sama hanya karena kita lebih akrab dengan desain grid.
Bagi kita yang sudah lama terobsesi dengan tata letak meja, kesulitannya sangat besar. Bagi mereka yang telah menjadi desainer Web selama bertahun-tahun, ini berarti melepaskan diri dari apa yang selama ini mereka gunakan. Beberapa orang mungkin tidak menganggapnya sulit, namun kebanyakan orang akan menganggapnya menakutkan. Kita perlu mempelajari cara kerja model CSS dan memiliki keberanian untuk mengucapkan selamat tinggal pada aturan lama.
Dari para pendatang baru inilah kami berharap dapat melihat lebih banyak terobosan dalam stereotip desain, yang menganggap metode kami di masa lalu terasa aneh dan kaku.
Web semakin matang, cara kita mendesain pun berubah, dan kita memiliki lebih banyak inovasi dan kreativitas di hadapan kita. Kami tidak akan terpaku pada kota-kota terencana, kami dapat mencapai desain yang unik. Kami para desainer lama, dikombinasikan dengan pendatang baru saat ini, akan membuat Web berubah setiap harinya.
Penulis artikel ini:
Molly E. Holzschlag adalah penganjur dan penginjil standar Web yang terkenal. Buku terlaris dari lebih dari 30 bukunya adalah The Zen of CSS Design (Zen Web Design), yang ia tulis bersama Dave Shea. Molly adalah pakar yang diundang dalam kelompok kerja W3C dan mantan direktur Web Standards Project Group (WaSP). Molly bekerja dengan desainer, pengembang, praktisi, dan pengambil keputusan untuk mendorong Web yang berguna, indah, dan bermakna.
Nota bene
Ini adalah artikel yang diterbitkan di A LIST APART pada tahun 2005. Pada tahun 2005, tata letak CSS belum umum seperti sekarang, dan tata letak tabel telah membuat banyak orang kewalahan. Sebagai pakar senior di bidang Web, penulis Molly E. Holzschlag She juga merupakan pengguna jangka panjang tata letak tabel. Ketika CSS mendekati kematangan dan tata letak berbasis CSS menyegarkan, dia memiliki perasaan campur aduk tentang desain kisi berbasis tabel, seperti yang dapat dilihat dari artikel.
Namun, pada tahun 2009, ketika CSS telah menyebar luas dan tata letak CSS menjadi akrab, kita perlu memikirkan kembali desain grid. Apakah grid sudah mati, atau apakah tabel sudah jahat? Jawabannya tidak sesederhana itu. Tidak peduli bagaimana perubahannya, Web saat ini memiliki tujuan yang kekal. Selain aplikasi Web, misi Web yang selalu berubah adalah untuk mengekspresikan dan mengirimkan informasi dengan London. Namun, jika Anda seorang tukang pos, Anda akan memilih Tucson. Oleh karena itu, baik itu desain grid maupun desain natural, tidak ada kelebihan atau kekurangan yang mutlak. Desain grid lebih jelas dan rapi, sedangkan desain natural lebih elegan dan halus.
Dan tabel tidak seburuk yang dikatakan banyak orang. Perlu dicatat bahwa tabel saat ini bukan lagi tabel di masa lalu. BOX dapat digabungkan dengan CSS, dan tabel juga dapat digunakan kumpulan kombinasi dan interaksi organik. BOX, ketika Anda tidak memerlukan posisi sel yang tepat di dalamnya, tabel adalah wadah yang lebih sempurna daripada BOX, karena paling kompatibel dengan semua browser, tidak akan runtuh, dan panjangnya tidak akan berbeda, perilakunya lebih mudah memenuhi harapan, dan yang terpenting, ini adalah cara paling langsung bagi orang untuk mengatur berbagai hal.
Penulis asli Molly E. Holzschlag
Sumber terjemahan bahasa Mandarin: Situs web resmi COMSHARP CMS, penerjemah 35 kilometer.