Web Tasarım Hack Onur Listesi

Biz web tasarımcıları her zaman kurnaz bir grup olduk. Elde etmemiz gereken belirli bir görünüm veya işlevsellik varsa, genellikle bir çözümü bir araya getirebiliriz. Bize rehberlik edecek belirli bir standart veya araç olmadığında bile durum böyledir. Web tasarım hack kavramının devreye girdiği yer burasıdır.

Hack'ler, bir web sitesinin belirli bir şekilde görünmesini veya çalışmasını sağlamak için yaratıcı, genellikle dolambaçlı yöntemlerdir. Bazen olumsuz bir çağrışım taşırlar. Örneğin, HTML tablo tabanlı mizanpajlar, ekran okuyucular tarafından erişilebilir olmadığı için haklı olarak alay edildi. Ancak tüm hack'ler kötü değildir.

Gerçekten de, mümkün olanın sınırlarını zorlama ihtiyacından dolayı konuşlandırılırlar. Web'in her zaman sınırlamaları olmuştur ve tasarımcılar bunları aşmak için hack'leri kullanmışlardır.

Bununla birlikte, tasarımcı arkadaşlarımızla bir Twitter tartışmasından esinlenerek, geçmiş yılların en kullanışlı ve yaygın web tasarımı tüyolarından bazılarına bir göz atalım. Bugün sahip olduğumuz standartlara mutlaka bir mum tutmasalar da, kendi zamanlarında ünlüler salonuydular.

Düzenler: HTML Tabloları ve CSS Floatları

İlk seçimlerimiz bu sanal şöhret salonuna birlikte girecek. En yoğun kullanımları arasında yıllar olmasına rağmen, temelde aynı şeyi gerçekleştirmek için kullanılıyorlardı: çok sütunlu düzenler.

HTML Tabloları

CSS olay yerine gelmeden önce, ilk web sayfaları tek sütunlu bir olaydı. Dolgu veya kenar boşlukları yoktu ve içeriği yatay sütunlara yerleştirmenin standart bir yolu yoktu. Yani, bazı girişimci ruhlar bu amaç için tabloları kullanmaya karar verene kadar.

Elbette, HTML tablolarının sayfa düzenlerini değil, tablo verilerini tutması gerekiyordu. Ama aslında CSS ortaya çıkana kadar işi halletmek için etkili bir yoldu.

CSS Yüzer

Tabloların birçok dezavantajı vardı - yukarıda belirtilen erişilebilirlik sorunları dahil. Ayrıca tarayıcıda oluşturmaları yavaştı. Bu nedenle, CSS şamandıraları tanıtıldığında, web tasarımcıları için bir oyun değiştirici olarak görüldü.

Kayan noktalar HTML işaretlemesi değildi ve bu nedenle daha erişilebilirlerdi ve performansı artırabilirdi. Birden çok sütunlu düzenler CSS aracılığıyla mümkün oldu ve ekran boyutu gibi şeylere daha iyi uyum sağlayabilirdi.

Ancak, şamandıralar bizi vaat edilen topraklara kadar götürmedi. Sütunların eşit yükseklikte olmasını istiyorsanız, ek bir düzeltme kesmesinin uygulanması gerekiyordu.

Bu öğelerin her biri, orijinal amaçları için kullanıldığında bugün de hala çok faydalıdır. Ancak düzenler için günleri çok şükür bitti.

Öğe Aralığı: Bölünemez Boşluklar (   ) ve Spacer.gif

Detay odaklı web tasarımcıları genellikle öğeleri tam piksele kadar yerleştirmenin yollarını aradılar. Yine, bu o zamanlar o kadar kolay değildi. Bu nedenle, boşluk bırakma üzerinde daha fazla kontrol elde etmek için bölünmeyen boşluk ( ) ve spacer.gif kullanıldı.

Bölünemez Boşluk (   )

Bir öğeyi ortalamadan veya sağa hizalamadan yatay olarak çarpmak mı istiyorsunuz? Birkaç bölünmeyen boşluk eklemek hile yapar.

Ancak, o kadar kesin bir bilim değildi. Her alanın gerçek boyutu, yazı tipi ailesine ve yazı tipi boyutuna bağlıydı. Ve bu farklılıkları hesaba katsa bile, bu hack, bir ziyaretçinin kullandığı tarayıcıya ve işletim sistemine bağlı olarak hala farklı görünebilir.

Spacer.gif

Bu daha doğru boşluk kesmesi, şeffaf bir .GIF görüntüsü (genellikle spacer.gif olarak adlandırılır) oluşturup bunu bir sayfaya yerleştirmekle geldi. Güzel yanı, şeffaf bir görüntü olduğu için tasarımcıların, görünüm veya performans üzerinde olumsuz bir etki yaratmadan yüksekliği ve genişliği herhangi bir piksel miktarına ayarlayabilmesiydi.

CSS, bu saldırıların ikisini de geçersiz kıldı. Ancak WordPress Gutenberg editörünün hemen hemen aynı şeyi yapan bir Spacer bloğuna sahip olduğunu bilmiyor muydunuz? Sadece ihtiyacın hala orada olduğunu gösteriyor.

Tipografi: Görüntü Tabanlı Metin

Bunun için ihtiyaç oldukça basitti. İlk web, esasen kullanıcının sistemine yüklenen yazı tipleriyle sınırlıydı. Elbette tasarımcıların, Times New Roman, Georgia, Arial ve Helvetica gibi temel özellikler dışında, kullanıcıların erişebildiği tüm yazı tiplerini bilmelerinin hiçbir yolu yoktu.

Bununla Photoshop'ta metinle dolu görüntüler oluşturmak için korkunç bir karar geldi. Bu, hemen hemen her yazı tipinin kullanılmasına izin verirken, erişilebilirlik pahasına geldi. Ayrıca, bir HTML başlık etiketi yerine bir resim kullanmak, sayfanın anlamını da bozarak SEO'ya zarar verme potansiyeline sahiptir.

Yapışkan Başlıklar ve Gezinme: Çerçeveler

HTML çerçeveleri belki de zamanlarının ötesindeydi, çünkü bir zamanlar onları kullandığımız görevlerin çoğu artık CSS ve JavaScript aracılığıyla yapılıyor.

Konsept oldukça basitti. Bir düzen içindeki her bir "çerçeve" aslında kendi sayfasıydı. Bu, bir üst bilgi, alt bilgi veya gezinmeyi sitenin geri kalan içeriğinden ayırmanın kolay bir yoluydu. Örneğin, navigasyonda değişiklik yapmak, tek bir dosyada tek bir değişiklik anlamına geliyordu. Sunucu tarafı içeriklerinin yaptığına benzer, yalnızca diğer bazı tasarım avantajları dahil.

Bunların başında “yapışkan” başlıklar ve gezinme oluşturma yeteneği geliyordu. Kullanıcı içerikte gezinirken sitede kolayca gezinebilir.

Bu teknik amacına hizmet etti, ancak ideal olmaktan uzaktı. Farklı ekran boyutları açısından çok uyumlu değildi ve SEO için de çok iyi değildi. Ayrıca, kötü niyetli bir URL'den potansiyel olarak bir çerçeve yükleme konusunda bazı güvenlik endişeleri vardı.

Görüntü Optimizasyonu: Dilimlenmiş Görüntüler

Geniş bandın yaygınlaşmasından önceki günlerde, görüntü optimizasyonu hayati önem taşıyordu. 50 kb'lık bir görüntü bile, yavaş bir bağlantıda bir sayfayı ağırlaştırabilir.

Yazılım devi Adobe, ilginç bir çözüm sundu. Tasarımcılar, ImageReady yazılımlarıyla tek bir görüntüyü herhangi bir sayıda küçük parçaya bölebilir. Her bir dilim daha sonra optimize edilerek teorik olarak indirilmeleri hızlı hale getirilebilir.

Ama hepsi bu değil. Yazılım daha sonra dilimleri bir HTML tablosuna aktarabilir. Buradan, bu HTML'yi kopyalayıp sayfanıza yapıştırabilirsiniz.

Bu teknikle ilgili sorun iki yönlüydü. İlk olarak, tablo düzeninin oluşturulması fazladan zaman alabilir ve elde ettiğiniz tüm optimizasyonları potansiyel olarak ortadan kaldırabilir. İkincisi, bakımı gerçek bir acı olabilir. Örneğin, büyük bir başlık grafiğine bir gezinme öğesi eklemek, tamamen yeni bir dilim kümesiyle yeniden başlamayı gerektirebilir ve bu nedenle şablon değişiklikleri gerektirebilir.

Görüntü optimizasyonu hala önemli olsa da, geniş bant neyse ki bize büyük dosyalarla biraz daha fazla hareket alanı sağlıyor. Buna rağmen, Photoshop'un modern sürümleri hala görüntü dilimleme ve HTML dışa aktarma sunuyor.

Internet Explorer'ı Yerleştirme: <!--[if IE]>

Bu güne kadar, web tasarımcılarının (ben dahil) Internet Explorer'ın inatçı varlığını lanetlediğini duymak olağandışı değil. Mirası, kısmen bazı kullanıcılar bundan vazgeçmeyecekleri için yaşıyor.

Bu nedenle, sonsuza dek IE'nin birçok özel tuhaflığı ve sınırlaması etrafında yolumuzu hackliyormuşuz gibi görünüyor. Uzun yıllar boyunca, IE kullanıcılarını tespit etmek ve alternatif stiller sunmak için koşullu bir yorum kullanmayı içeriyordu.

Stilleri tüm IE <!--[if IE]> sürümlerine uygulayabilmeniz veya daha eski sürümleri <!--[if lt IE 11]> kullananları hedefleyebilmeniz açısından biraz çok yönlüydü. Ayrıca, belirli bir sürümden daha büyük veya ona eşit <!--[if gte IE 10]> sürümleri arayarak, bunu tersten de kullanabilirsiniz.

Microsoft, bu koşullu yorumların IE'de çalışmasını sağladığı için web tasarımcılarına biraz sempati duymuş olmalı. Neyse ki, yeni Edge tarayıcıları böyle saçmalıklara ihtiyaç duymuyor.

Hatırlanması Gereken Web Tasarım Hileleri

Web tasarımcıları tarafından kullanılan sadece şöhret salonumuzdaki hack'ler değildi. Görünüşte imkansız olanı yapmamıza yardımcı olan sayısız geçici çözüm var. Ancak bu listeyi diğerlerinden ayıran şey, büyük kullanımları ve bazı durumlarda büyük şirketlerin desteğidir.

Ve belki de onlar hakkında söyleyebileceğimiz en iyi şey işe yaradıklarıdır. Onları bir amaç olarak kullandık. Elbette, koli bandı yıpranarak bir arada tutulmuş olabilirler, ancak bu yüksek fikirli tasarımın gerçekten bir tarayıcıda işlenmesini sağlamak gerçek bir başarı gibi hissettirdi.

Daha da iyisi, web'in bugünkü haline giden yolu açmaya yardımcı olmalarıdır. Bu listedeki öğelerin çoğu, herkesin yararına olan HTML ve CSS standartlarıyla değiştirildi.