Hall of Fame Peretasan Desain Web

Kami desainer web selalu menjadi sekelompok licik. Jika ada tampilan atau fungsi tertentu yang perlu kami capai, kami biasanya dapat mengumpulkan solusi. Itulah yang terjadi bahkan ketika tidak ada standar atau alat khusus untuk memandu kita. Di sinilah konsep peretasan desain web berperan.

Peretasan adalah metode kreatif, seringkali tidak langsung untuk membuat situs web terlihat atau berfungsi dengan cara tertentu. Terkadang, mereka membawa konotasi negatif. Misalnya, tata letak berbasis tabel HTML dicemooh karena tidak dapat diakses oleh pembaca layar. Tapi tidak semua peretasan itu buruk.

Memang, mereka dikerahkan karena kebutuhan untuk mendorong amplop dari apa yang mungkin. Web selalu memiliki keterbatasan dan desainer telah menggunakan peretasan untuk mencoba dan menyiasatinya.

Dengan itu, mari kita lihat beberapa peretasan desain web yang paling berguna dan umum dari tahun-tahun sebelumnya, seperti yang terinspirasi oleh diskusi Twitter dengan sesama desainer. Meskipun mereka tidak selalu memegang lilin dengan standar yang kita miliki saat ini, mereka adalah aula petani di zaman mereka sendiri.

Tata Letak: Tabel HTML dan Float CSS

Pilihan pertama kami akan masuk ke hall of fame virtual ini bersama-sama. Meskipun penggunaan puncak masing-masing terpisah bertahun-tahun, mereka pada dasarnya digunakan untuk mencapai hal yang sama: tata letak multikolom.

Tabel HTML

Sebelum CSS muncul, halaman web awal adalah urusan satu kolom. Tidak ada padding atau margin, dan tidak ada cara standar untuk menempatkan konten dalam kolom horizontal. Yaitu, sampai beberapa jiwa yang giat memutuskan untuk menggunakan tabel untuk tujuan ini.

Tentu saja, tabel HTML dimaksudkan untuk menyimpan data tabular – bukan tata letak halaman. Tetapi mereka sebenarnya adalah cara yang efektif untuk menyelesaikan pekerjaan sampai CSS muncul.

CSS Mengapung

Tabel memiliki banyak kelemahan – termasuk masalah aksesibilitas yang disebutkan di atas. Mereka juga lambat untuk dirender di browser. Jadi, ketika float CSS diperkenalkan, itu dilihat sebagai pengubah permainan untuk desainer web.

Float bukanlah markup HTML, sehingga lebih mudah diakses dan dapat meningkatkan kinerja. Tiba-tiba, tata letak multikolom dimungkinkan melalui CSS dan dapat beradaptasi lebih baik dengan hal-hal seperti ukuran layar.

Namun, pelampung tidak membawa kami sampai ke tanah perjanjian. Jika Anda ingin kolom memiliki tinggi yang sama, peretasan clearfix tambahan harus diterapkan.

Masing-masing barang ini juga masih sangat berguna saat ini bila digunakan untuk tujuan yang dimaksudkan semula. Tapi untuk tata letak, hari-hari mereka untungnya sudah selesai.

Spasi Elemen: Spasi Tanpa Batas (   ) dan Spacer.gif

Desainer web yang berorientasi pada detail sering kali mencari cara untuk menempatkan elemen ruang ke piksel yang tepat. Sekali lagi, ini tidak begitu mudah pada hari itu. Dengan demikian, spasi tanpa putus ( ) dan spacer.gif digunakan untuk mendapatkan lebih banyak kontrol atas spasi.

Ruang Tanpa Melanggar (   )

Ingin menabrak elemen secara horizontal, tetapi tanpa memusatkan atau meratakannya ke kanan? Menambahkan beberapa ruang non-breaking akan berhasil.

Namun, itu bukan ilmu pasti. Ukuran sebenarnya dari setiap ruang tergantung pada keluarga font dan ukuran font. Dan bahkan memperhitungkan perbedaan itu, peretasan ini masih bisa terlihat berbeda tergantung pada browser dan OS yang digunakan pengunjung.

Spacer.gif

Peretasan spasi yang lebih akurat ini dilakukan dengan membuat gambar .GIF transparan (sering disebut spacer.gif ) dan menempatkannya ke dalam sebuah halaman. Aspek yang rapi adalah, karena ini adalah gambar transparan, desainer dapat mengatur tinggi dan lebar ke jumlah piksel berapa pun tanpa dampak negatif pada tampilan atau kinerja.

CSS membuat kedua peretasan ini menjadi usang. Tetapi tidakkah Anda tahu bahwa editor WordPress Gutenberg memiliki blok Spacer yang melakukan hal yang hampir sama? Itu hanya menunjukkan bahwa kebutuhan itu masih ada.

Tipografi: Teks Berbasis Gambar

Kebutuhan untuk yang satu ini cukup sederhana. Web awal pada dasarnya terbatas pada font yang diinstal pada sistem pengguna. Tentu saja, desainer tidak memiliki cara untuk mengetahui semua font yang dapat diakses pengguna – selain dari dasar-dasar seperti Times New Roman, Georgia, Arial, dan Helvetica.

Dengan itu muncullah jenis keputusan yang mengerikan untuk membuat gambar penuh teks di Photoshop. Meskipun ini memungkinkan penggunaan hampir semua font, itu mengorbankan aksesibilitas. Selain itu, menggunakan gambar sebagai pengganti tag heading HTML juga membuang semantik halaman – berpotensi merusak SEO.

Tajuk dan Navigasi Lengket: Bingkai

Bingkai HTML mungkin lebih dulu, karena banyak tugas yang pernah kami gunakan sekarang dilakukan melalui CSS dan JavaScript.

Konsepnya cukup sederhana. Setiap "bingkai" individu dalam tata letak sebenarnya adalah halamannya sendiri. Ini adalah cara mudah untuk memisahkan header, footer, atau navigasi dari konten situs lainnya. Membuat perubahan pada navigasi, misalnya, berarti satu perubahan dalam satu file. Ini mirip dengan apa yang disertakan di sisi server, hanya dengan beberapa manfaat desain lain yang disertakan.

Yang utama di antara mereka adalah kemampuan untuk membuat header dan navigasi yang "lengket". Saat pengguna menggulir konten, mereka masih dapat dengan mudah menavigasi situs.

Teknik ini memenuhi tujuannya, tetapi jauh dari ideal. Itu tidak terlalu mudah beradaptasi dalam hal ukuran layar yang berbeda dan juga tidak terlalu bagus untuk SEO. Ada juga beberapa masalah keamanan tentang kemungkinan memuat bingkai dari URL jahat.

Pengoptimalan Gambar: Gambar Irisan

Pada hari-hari sebelum ketersediaan broadband secara luas, pengoptimalan gambar sangat penting. Bahkan gambar 50kb dapat membebani halaman dengan koneksi yang lambat.

Raksasa perangkat lunak Adobe memberikan solusi yang menarik. Dengan perangkat lunak ImageReady mereka, desainer dapat mengiris satu gambar menjadi beberapa bagian yang lebih kecil. Setiap irisan individu kemudian dapat dioptimalkan, secara teoritis membuatnya cepat diunduh.

Tapi itu tidak semua. Perangkat lunak kemudian dapat mengekspor irisan ke dalam tabel HTML. Dari sana, Anda dapat menyalin dan menempelkan HTML itu ke halaman Anda.

Masalah dengan teknik ini ada dua. Pertama, tata letak tabel dapat membutuhkan waktu ekstra untuk dirender – berpotensi mematikan pengoptimalan apa pun yang telah Anda capai. Kedua, itu bisa sangat menyakitkan untuk dipertahankan. Menambahkan item navigasi ke grafik header besar, misalnya, mungkin memerlukan memulai dari awal dengan set irisan yang sama sekali baru – sehingga memerlukan perubahan template.

Meskipun pengoptimalan gambar masih penting, untungnya broadband memungkinkan kita sedikit lebih leluasa dengan file besar. Meski begitu, Photoshop versi modern masih menawarkan pengirisan gambar dan ekspor HTML.

Menempatkan Internet Explorer: <!--[if IE]>

Sampai hari ini, masih tidak biasa mendengar desainer web (termasuk saya sendiri) mengutuk keberadaan Internet Explorer yang mantap. Warisannya tetap hidup, sebagian karena beberapa pengguna tidak mau menyerah begitu saja.

Karena itu, selamanya sepertinya kami meretas banyak kebiasaan dan batasan kepemilikan IE. Selama bertahun-tahun, itu termasuk menggunakan komentar bersyarat untuk mendeteksi pengguna IE dan menyajikan gaya alternatif.

Itu agak serbaguna karena Anda bisa menerapkan gaya ke semua versi IE <!--[if IE]> , atau menargetkan mereka yang menggunakan versi lama <!--[if lt IE 11]> . Anda juga dapat menggunakannya secara terbalik, mencari versi yang lebih besar dari atau sama dengan rilis tertentu <!--[if gte IE 10]> .

Microsoft pasti memiliki simpati terhadap perancang web, karena memungkinkan komentar bersyarat ini bekerja di IE. Untungnya, browser Edge baru mereka tidak memerlukan omong kosong seperti itu.

Peretasan Desain Web untuk Diingat

Peretasan di hall of fame kami tentu bukan satu-satunya yang digunakan oleh desainer web. Ada banyak solusi yang membantu kami melakukan hal yang tampaknya mustahil. Tetapi yang membedakan daftar ini adalah penggunaannya yang sangat besar dan, dalam beberapa kasus, dukungan dari perusahaan besar.

Dan mungkin hal terbaik yang bisa kami katakan tentang mereka adalah bahwa mereka berhasil. Kami menggunakan mereka sebagai alat untuk mencapai tujuan. Tentu, mereka mungkin telah disatukan oleh lakban yang berjumbai, tetapi membuat desain yang berpikiran tinggi itu benar-benar ditampilkan di browser terasa seperti pencapaian nyata.

Yang lebih baik lagi adalah mereka membantu membuka jalan bagi web saat ini. Sebagian besar item dalam daftar ini telah digantikan oleh standar HTML dan CSS, yang menguntungkan semua orang.