Teknik Web Jadul Yang Terlupakan

18 November 2023

Ketika web pertama kali memasuki kesadaran publik pada tahun 90an, web terutama berbasis teks dengan elemen desain minimal — bukan karena pilihan; teknologi untuk membangun pengalaman yang menarik tidak ada. Saat itu, gif bayi menari sedang menjadi tren.

Dan kemudian seseorang menyadari bahwa situs yang lebih menarik menghasilkan lebih banyak uang, dan teknologi pun semakin berkembang sejak saat itu.

Web saat ini merupakan pusaran persaingan kepentingan finansial, yang dikendalikan oleh bandwidth, area pandang, dan penggunaan browser. Namun untuk memahami bagaimana kita sampai di sini, kita perlu melihat kembali dari mana kita berasal.

Tabel untuk Tata Letak

Contoh klasik dari peretasan yang salah adalah penggunaan tabel untuk tata letak.

Karena tidak terpikir oleh siapa pun bahwa data perlu dirancang, tidak ada cara untuk memposisikannya. Tabel diperkenalkan ke spesifikasi HTML untuk menampilkan data tabular, namun tabel tampak seperti kisi tata letak desainer, dan berfungsi, jadi kami menggunakannya.

Ini mungkin terdengar gila sekarang, tetapi ada banyak hal yang mendukung peretasan asli:

Ini berhasil — sulit untuk memberi kesan kepada para desainer muda betapa rusaknya web awal. Tabel, tidak seperti yang lainnya, bekerja secara konsisten di seluruh browser.

Kurva pembelajaran yang dangkal - desain web semuanya dilakukan secara otodidak, dan tabel sangat mirip dengan kisi-kisi dalam desain cetak. Dan satu hal lagi yang perlu dipelajari.

Seperti yang akan Anda lihat di sisa postingan ini, sebagian besar teknologi web dimatikan oleh teknologi baru yang melakukan pekerjaannya dengan lebih baik. Dalam hal tabel, datanglah CSS, dan kode HTML yang kompleks dengan lusinan tabel bertumpuk sudah ketinggalan zaman.

Penyalahgunaannya oleh generasi desainer web memberikan reputasi buruk pada tabel—saya masih bertemu orang-orang yang dengan yakin memberi tahu saya bahwa elemen tabel sudah tidak digunakan lagi. (Tabel baik-baik saja, hanya saja tidak untuk tata letak.)

Teks sebagai Gambar

Kisah web adalah kisah para desainer yang diberi tahu “Tidak!” Dan tetap melakukannya. Tidak puas dengan penggunaan tabel untuk tata letak, desainer web era awal secara teratur menyematkan teks ke dalam gambar.

Pada masa itu, belum ada Google Font. Sebenarnya, tidak ada Google. Penyematan font bahkan belum terlihat. Halaman web menggunakan Arial, Times, Verdana, Courier, atau — favorit pribadi saya — Georgia.

Tidak ingin terhambat oleh sesuatu yang remeh seperti akal sehat, para desainer kehilangan kesabaran dengan kecepatan penyempurnaan tipografi di web dan mulai menyematkan teks dalam gambar. Dan bukan hanya judul; seluruh halaman web dirender sebagai gambar.

Pernah bertanya-tanya mengapa Photoshop memiliki semua efek emboss 3D tersebut? Itu untuk melayani desainer web tahun 90an yang bertekad untuk membuat teks mereka “pop.” Tentu saja sekarang kita tahu bahwa teks dalam gambar sangat buruk dalam hal aksesibilitas, memperlambat situs, dan tidak mungkin diperbarui. Dan kami juga mengetahuinya saat itu; kami hanya tidak peduli.

Sekali lagi, CSS menyelamatkan kita dari diri kita sendiri. Namun sebelum itu terjadi, kami sudah mulai memasukkannya. Kebutuhan obsesif kami untuk menggunakan huruf miring memberi jalan pada penerimaan bahwa situs tidak harus terlihat sama di setiap browser, dan web menjadi sedikit lebih waras.

Peta Gambar

Tentu saja, jika Anda ingin memasukkan semua teks ke dalam gambar, Anda memerlukan cara untuk membuat teks tersebut dapat diklik. Isyarat: peta gambar.

Peta gambar adalah teknik dalam desain web yang memungkinkan Anda menentukan titik panas yang dapat diklik dalam gambar. Dengan begitu, seluruh menu Anda bisa berupa gambar, dan Anda bisa membuat beberapa area hit yang sesuai dengan tombol skeuomorfik yang Anda buat selama berhari-hari di Fireworks.

Peta gambar adalah solusi peretasan yang tidak memberikan manfaat apa pun selain memungkinkan kebiasaan buruk seperti menyematkan teks dalam gambar.

Untungnya, ketika kita beralih ke web yang lebih mudah diakses dan didukung oleh CSS, peta gambar tidak lagi memberikan manfaat apa pun, dan penggunaannya pun berkurang.

Direktori Web

Pada tahun 2023, web didorong oleh SEO; setiap keputusan besar tentang sebuah situs web melibatkan analisis strategis yang mendalam tentang bagaimana pilihan yang tersedia akan diterapkan di mesin pencari.

Namun di akhir tahun 90an, kita belum pernah mendengar tentang Alta Vista, apalagi Google. Jadi, ketika kami ingin pengguna menemukan situs baru yang kami buat, kami mempostingnya ke direktori web.

Direktori web seperti DMOZ adalah kumpulan tautan yang dikurasi manusia. Benar sekali, hanya ada sedikit situs web daring sehingga Anda dapat mencantumkan semuanya dalam beberapa lusin kategori. Bahkan ketika mesin pencari mulai muncul, Anda masih mengirimkan situs Anda ke direktori web karena mesin pencari memiliki kemampuan perayapan yang sangat terbatas, sehingga satu-satunya hal yang mereka jelajahi dengan teratur adalah direktori web.

Direktori web tidak mungkin dipertahankan saat ini, namun 25 tahun yang lalu, direktori tersebut menawarkan beberapa manfaat yang belum dapat dikalahkan oleh SEO:

Pengeditan manusia — direktori web diedit oleh manusia, artinya setiap situs yang ditampilkan telah diperiksa kualitasnya oleh orang sungguhan.

Kemampuan menjelajah — Anda tidak perlu mengetahui apa yang Anda cari di direktori web; Anda baru saja mengklik topik yang Anda minati. Itu seperti menu mega untuk web.

Kreativitas — mesin pencari menghargai konsistensi, dan manusia menghargai hal-hal baru. Desainer web tidak pernah lebih kreatif daripada saat Google tidak lagi menjadi masalah.

Peralihan dari direktori web ke mesin pencari sangat penting untuk kesehatan web seiring pertumbuhannya. Namun SEO masih berjuang untuk memenuhi jaminan kualitas yang sama dengan direktori web terbaik.

Bingkai

Di era sebelum CMS memperkenalkan template, inkonsistensi sangat mudah menyusup ke dalam situs web. Sebuah menu harus disalin dan ditempelkan ke setiap halaman statis, dan pembaruan apa pun harus dilakukan pada setiap halaman.

Bingkai memungkinkan desainer memuat bagian situs yang berbeda ke dalam wilayah halaman yang berbeda. Tiba-tiba, Anda dapat mengkodekan menu Anda satu kali dan memuatnya melalui bingkai ke setiap halaman di situs Anda. Bingkai yang ditawarkan:

Organisasi — itu agak OOP untuk HTML. Agak.

Kecepatan pengembangan — kode yang dapat digunakan kembali berarti waktu pengembangan yang lebih singkat dan konsistensi yang lebih baik.

Sayangnya, kekurangan bingkai jauh melebihi kelebihannya:

Kegunaan yang buruk — browser tidak pernah memahami frame, dan fungsi seperti bookmark tidak pernah diterapkan dengan benar.

Masalah SEO — perayap web kesulitan mengindeks bingkai dengan benar, sehingga seiring dengan semakin pentingnya SEO, situs berbasis bingkai pun menderita.

Masalah aksesibilitas — frame sangat buruk bagi browser ucapan. Sebenarnya, sebagian besar situs web awal sangat buruk dalam hal aksesibilitas, namun situs berbasis bingkai termasuk yang terburuk.

Blackhat dan keamanan — tidak selalu jelas dari mana konten bingkai ditautkan. Jika menurut Anda hot-linking gambar itu buruk, tunggu sampai seseorang menghubungkan seluruh situs Anda.

Kami masih menggunakan iframe di web, tetapi untungnya pendekatan frame asli telah dimatikan oleh CSS dan templat.

Flash & Skrip Tindakan

Flash tidak lain adalah sebuah wahyu ketika menjadi terkenal sekitar milenium. Awalnya dipasarkan sebagai alat animasi oleh Macromedia, versi 5-lah yang mengubah permainan dengan memperluas perintah dasar stop() dan play() ke dalam bahasa pengkodean lengkap yang disebut Actionscript.

Pada versi 6, Actionscript telah berevolusi menjadi bahasa pemrograman berorientasi objek dengan kekuatan yang sebanding dengan JavaScript modern.

Keberhasilan Flash berkat berbagai manfaatnya:

Browser-agnostic — Flash dijalankan di Flash player. Jadi, tidak masalah browser apa yang disukai pengguna Anda; situs Anda akan sama pada semuanya.

Desain cair — cikal bakal desain responsif, desain cair melihat desainer Flash menggunakan teknik yang memungkinkan halaman web diubah ukurannya dengan area pandang.

Grafik vektor — Flash menggunakan grafik vektor, memastikan situs tampak tajam (segaring tampilan 96ppi).

Penyematan font — gunakan font apa pun yang Anda suka; cukup sematkan garis besarnya.

Audio dan Video — media kaya mudah diterapkan di Flash, pada saat media tersebut tidak berfungsi di browser.

Komponen — cikal bakal plugin WordPress, komponen memungkinkan Anda memasukkan kode dari pengembang lain langsung ke proyek Anda.

Jelas sekali, ini adalah penemuan terbesar sejak tipe yang dapat dipindahkan; jangan sebutkan saja:

Masalah kinerja — Flash menghabiskan daya. Jika Anda cukup beruntung memiliki perangkat seluler (hanya sedikit orang yang memilikinya), maka satu situs dapat menguras baterai Anda hingga nol.

Masalah keamanan — ketika Adobe mengakuisisi Flash dari Macromedia, Adobe harus menutup biayanya dengan merilis lebih banyak fitur. Siklus pengembangan yang diperpendek mungkin telah menimbulkan satu atau dua kerentanan keamanan yang sangat kecil.

Masalah SEO — awalnya, Flash tidak diindeks oleh mesin pencari. Masalahnya terselesaikan dalam waktu (jika ingatanku) sekitar satu tahun, namun secara reputasi, Flash tidak pernah pulih.

Paku terakhir dalam peti mati Flash terjadi ketika Apple menolak mengizinkan Flash player dipasang pada iPhone yang masih baru. Mereka menyebutkan masalah kinerja dan keamanan, namun pada saat itu dipahami secara luas bahwa Apple khawatir Flash akan memungkinkan pengembang untuk menghindari rencana App Store Apple yang menguntungkan.

Ketika penyangkalan akhirnya berubah menjadi kenyataan, ungkapan paling umum yang terdengar di studio Flash di seluruh dunia adalah, “Hei, pernahkah Anda melihat jQuery ini?!”

jQuery

Flash mengajari para desainer bahwa mereka tidak hanya dapat membuat kode tetapi juga bahwa pengkodean dapat menyempurnakan desain mereka. Sayangnya, alternatif terdekat untuk Actionscript adalah JavaScript (keduanya didasarkan pada ECMAScript) JavaScript awal tahun 2000an JavaScript benar-benar payah.

Dan kemudian, datanglah jQuery. jQuery adalah perpustakaan yang mengabstraksi JavaScript menjadi sesuatu yang masuk akal.

Kesederhanaan — JavaScript membutuhkan 18 baris kode, jQuery mengelolanya menjadi dua.

Kompatibilitas lintas-browser — jQuery mengatasi ketidakkonsistenan antar browser, sehingga kami tidak perlu menulis versi kode khusus browser.

AJAX — salah satu tugas yang paling menantang untuk diterapkan di vanilla JavaScript adalah AJAX. jQuery membuatnya sederhana, merevolusi cara kami memuat data di halaman HTML.

Manipulasi DOM — jQuery membuat manipulasi DOM menjadi sederhana, memungkinkan semua jenis interaksi kompleks yang sebelumnya hanya realistis di Flash.

jQuery masih bersama kami dan digunakan di banyak proyek. Banyak orang akan mengatakan kepada Anda bahwa itu terlalu besar. Ukurannya sebenarnya hanya sebuah gambar yang sangat kecil, namun seperti yang telah kita lihat, reputasi buruk sulit untuk dihilangkan.

Untuk banyak tugas, jQuery telah digantikan oleh kerangka kerja yang lebih modern seperti Vue, Angular, dan React. Namun, tantangan terbesar bagi jQuery adalah vanilla JavaScript, yang telah menyatukan dan memperkenalkan kode modern yang terinspirasi oleh contoh kumpulan jQuery.

AMP

Teknologi terakhir kami di masa lalu adalah Accelerated Mobile Pages (AMP). Diperkenalkan pada tahun 2015, tujuannya adalah untuk meningkatkan kinerja situs web di perangkat seluler.

AMP bekerja dengan mengurangi jumlah HTML, CSS, dan JavaScript yang tersedia bagi desainer. Hal ini memaksa para desainer untuk menahan diri, yang berarti:

Waktu muat lebih cepat — kode yang disederhanakan berarti AMP dapat disajikan lebih cepat di perangkat seluler.

Peningkatan SEO — pada awalnya, Google lebih menyukai situs AMP dalam hasil penelusuran selulernya, sehingga menawarkan keuntungan yang jelas bagi situs mana pun yang mengadopsi pendekatan ini.

Namun yang buruk melebihi yang baik:

Keterbatasan — alih-alih mengoptimalkan situs, AMP hanya membatasinya. Pembatasan terhadap apa yang dapat dilakukan di AMP membuat situs menjadi tidak menarik.

Google — tidak ada yang mengatakan bahwa AMP adalah upaya Google untuk menguasai infrastruktur web dengan menciptakan web dua tingkat. Tidak ada yang mengatakan itu. Tidak ada seorang pun.

AMP menemui akhir (tidak resmi) ketika Google tunduk pada tekanan dan mulai mengindeks semua situs di penelusuran seluler, yang secara efektif menghapus satu-satunya manfaat yang diberikan AMP.

Apa berikutnya?

Teknologi web apa yang akan kita lihat pada akhirnya nanti? Tentu saja, hari-hari JPG yang sederhana sudah tinggal menghitung hari; React terlihat agak panjang; gaya sebaris harus dikutuk.

Yang kita tahu pasti adalah tidak ada teknologi yang sempurna, dan ketika teknologi baru hadir, teknologi tersebut akan menggantikan teknologi sebelumnya.

Siapa tahu, bahkan mungkin HTML tidak akan bersama kita selamanya…

Simon Sterne, Web Designer Depot

Anda membutuhkan jasa pembuatan website? Hubungi kami sekarang untuk membantu anda dalam merencanakan website terbaik yang mendukung bisnis anda.