Web Tasarımının Evrimi: Kısıtlar Değişti, Sorun Aynı Kaldı

Web tasarımının tarihi genelde bir ilerleme hikâyesi olarak anlatılır: çirkin tablolardan zarif ızgaralara doğru istikrarlı bir yürüyüş. Bu anlatı yanıltıcı. Her dönemin tasarım dili, o dönemin en sıkı kısıtından doğdu; bant genişliği, tarayıcı uyumsuzluğu, ekran çeşitliliği. Kısıtı görmezseniz trendi taklit edersiniz, mantığını değil.

Dar bant estetiği

İlk web sitesi 1991'de Tim Berners-Lee'nin elinden çıktığında sayfada metin ve bağlantıdan başka bir şey yoktu. Bunun sebebi zevk değil, imkândı.

90'ların ortasında tipik bağlantı 56k modemdi. Teorik tavanı saniyede yaklaşık 7 kilobayt, pratikte daha azı. 100 kilobaytlık bir sayfa, en iyi ihtimalle on beş saniyeden fazla bekleme demekti. Tasarımcıların GIF paletlerini 16 renge düşürmesi, arka planı tek küçük görselden döşemesi, düzeni tabloyla kurması hep bu aritmetiğin sonucudur. Tablo düzeni kötü bir fikir değildi; CSS henüz güvenilir biçimde çalışmadığı için elde kalan tek fikirdi.

Flash'ı öldüren şey teknik değildi

2000'ler tarayıcı savaşlarının en verimsiz dönemiydi. Aynı sayfayı Internet Explorer 6, Netscape ve erken Firefox'ta aynı gösterebilmek, tasarımdan çok arkeolojiye benziyordu. Flash bu yüzden tuttu: tarayıcıyı atlayıp kendi çalışma ortamını getiriyordu, yani uyumluluk sorununu çözmüyordu, sorunun etrafından dolaşıyordu.

Çöküşü de aynı mantıkla geldi. Apple 2010'da iOS'ta Flash'ı hiç desteklemeyeceğini açıkladı, mobil trafiğin payı büyüdükçe eklenti gerektiren her deneyim erişilemez hale geldi ve Adobe 2020 sonunda desteği tamamen bıraktı. Flash daha kötü bir teknoloji olduğu için değil, dağıtım kanalını kaybettiği için gitti. Aynı test bugünün her yeni çerçevesi için de geçerli: kullanıcının cihazına girmek için özel bir izne ihtiyaç duyuyorsa ömrü kısadır.

Responsive tasarım bir düzen tekniği değil, bir öncelik kararıdır

Ethan Marcotte 2010'da A List Apart'ta responsive web design terimini ortaya attığında esnek ızgara ve medya sorgularından bahsediyordu. Sektörün büyük kısmı bunu yalnızca teknik reçete olarak aldı ve asıl kısmı atladı: dar ekranda neyin kalacağına karar vermek, geniş ekranda da neyin gereksiz olduğunu söyler.

Buradan, hâlâ her yerde tekrarlanan bir tavsiyenin yanlışlığı çıkar. "Mobil öncelikli tasarla" ile "mobilde gereksiz içeriği gizle" aynı listede yer alamaz, çünkü ikincisi masaüstü öncelikli düşüncenin kalıntısıdır. Üstelik teknik olarak da beklendiği gibi çalışmaz: bir <img> etiketini display:none ile gizlersen tarayıcı görseli çoğu durumda yine indirir, sadece çizmez. Kazandığını sandığın bayt masada durmaktadır. Mobilde gizlediğin şeyi masaüstünde de sil; ikisinde de gerekliyse iki yerde de göster. Gerçekten cihaza göre farklı yük istiyorsan bunun yolu CSS ile saklamak değil, picture ve srcset ile tarayıcıya hangi kaynağı alacağını baştan söylemektir.

Bugünün kısıtı ölçülüyor

2020'lerin farkı, kullanıcı deneyiminin artık tartışma konusu değil metrik olması. Google'ın Core Web Vitals seti üç şeyi sayıya çeviriyor: en büyük içerik parçasının ne zaman göründüğü (LCP), sayfanın okuma sırasında altından kayıp kaymadığı (CLS) ve bir tıklamaya ne kadar geç cevap verdiği (INP, Mart 2024'te FID'nin yerini aldı).

Bu metriklerin asıl etkisi sıralama değil, tartışmayı bitirmesi oldu. Kayan düzenin rahatsız edici olup olmadığı eskiden zevk meselesiydi; şimdi alan reklamı yüklenirken başlığı aşağı iten şablonun CLS değeri var ve o değer herkesin ekranında aynı. Tasarım kararının maliyeti ilk kez tasarımcıyla geliştirici arasında ortak bir birime çevrildi.

Cam, kabartma ve okunabilirlik

Görsel trendler bu tabloda en kısa ömürlü katman. Yumuşak gölgelerle kabartma etkisi veren yaklaşımın adı sıkça yanlış yazılıyor: doğrusu neumorphism, yani yeni skeuomorphism. Neuromorphic bambaşka bir şey, yapay sinir ağları için tasarlanan çip mimarisini anlatır.

İsimden daha önemlisi ikisinin de aynı yerden sakatlanması. Kabartmalı düğmelerde de buzlu cam panellerde de öğe ile arka plan arasındaki fark eriyor. Bir efekti benimsemeden önce metnin kontrast oranını ölç; WCAG'ın normal metin için istediği 4,5:1 eşiğini geçemiyorsa elindeki tasarım değil, okunmayan bir yüzeydir. Koyu mod da bu yüzden bir renk tercihi değil ikinci bir tema: her ikonun, her kenarlığın, her devre dışı düğmenin iki paletle de sınanması gerekir.

Dönemleri belirleyen şey

Tarihin şekli, tasarımcıların zevkinden çok o yıl neyin pahalı olduğuna bakılarak okunabilir.

Dönem	En sıkı kısıt	Doğurduğu tasarım dili
1995	Bant genişliği	Tablo düzeni, 16 renk GIF, döşemeli arka plan
2005	Tarayıcı uyumsuzluğu	CSS hack'leri, Flash içine kaçış
2012	Ekran çeşitliliği	Esnek ızgara, kırılma noktaları, dokunma hedefleri
2024	Ölçülen deneyim	Performans bütçesi, kaymayan düzen, erişilebilirlik denetimi

Sıradaki kısıtın ne olacağını bilmiyoruz, ama bulma yöntemi değişmedi: yeni bir tasarım akımı gördüğünde hangi maliyeti düşürdüğünü sor. Cevap veremiyorsan o akım bir çözüm değil, süstür ve süslerin ömrü kısadır.