Web siteleri, günümüzde her ne kadar yeni koşullara kolayca uyarlanabiliyor olsa da, bu seviyeye gelmemiz biraz zaman aldı. Modern tasarımcılar için “uyumluluk”, iyi bir tasarımın en kayda değer etmenlerinin başında geliyor. Ne de olsa artık hepimiz, çok çeşitli ekran boyutlarına sahip mobil ve masaüstü cihazlar arasında sık sık geçiş yapıyoruz. Dolayısıyla web sitelerinin de bunu takip etmesi gerekiyor.
Bununla birlikte uyumlu web sitelerine geçiş, tabii ki de tek gecede olmadı. Yıllar içinde, “uyumlu web tasarımı” kavramına inceden inceye ayarlar yaparak, nihayetinde bugün bulunduğumuz aşamaya ulaşmayı başardık.
Bu gönderimizde ise uyumlu web tasarımı tarihini mercek altına alarak, tüm hatlarıyla anlatıyoruz. Hazırsan başlayalım!
Web Tasarımı “Nerede” Başladı?
Konuya ilk web sitelerinin oluşturulduğu zamandan bahsederek giriş yapalım: Öncelikle hiç kimse, bir dizi ekrandaki “uyumluluk” hakkında herhangi bir endişe duymuyordu. Tüm siteler aynı şablonlara uyacak şekilde tasarlanıyor ve geliştiriciler tasarım, sayfa düzeni veya tipografi gibi faktörlere çok fazla zaman harcama gereğinde bulunmuyordu. Şu an aşina olduğumuz ve bir sitenin başarısı için vazgeçilmez olan kullanıcı deneyimi veya arayüzü benzeri kavramlara yoğunlaşmak içinse, biraz daha süre geçmesi gerekecekti
Basamaklı Stil Sayfaları olarak literatürümüze giren CSS (Cascading Style Sheets) teknolojisi daha geniş ölçekte benimsenmeye başladığında bile, çoğu geliştiricinin içeriği farklı ekran boyutlarına uyarlama konusunda kaygılanmasına pek de gerek yoktu. Ancak yine de, farklı monitör ve tarayıcı boyutlarıyla çalışmanın birkaç yolunu bulmuşlardı.
Akışkan Sayfa Düzenleri
İlk zamanlarda geliştiricilerin kullanabileceği iki temel seçenek bulunuyordu: sabit genişlikli (fixed-width) veya akışkan (liquid veya fluid) sayfa düzenleri.
Sabit genişlikli sayfa düzenlerinde, eğer ki kullandığın ekran ile sitenin oluşturulduğu ekran aynı çözünürlükte değilse, tasarım büyük olasılıkla düzgün bir şekilde çalışmayacaktı. Buradan, ilgili bir örneği inceleyebilirsin.
Buna alternatif olarak, Glenn Davis tarafından icat edilen akışkan sayfa düzenleri ise, uyumlu web tasarımının devrim niteliğindeki ilk örneklerinden biri olarak kabul edildi.
Akışkan düzenler, farklı ekran çözünürlüklerine ve tarayıcı boyutlarına uyum sağlayabiliyorlar. Fakat bununla birlikte, web sitesindeki içeriklerin sayfadan taşması veya metinlerin genellikle daha küçük ekranlarda tasarlanandan farklı görülmesi hala olası.
Çözünürlüğe Bağlı Sayfa Düzenleri
2004 yılında Cameron Adams tarafından kaleme alınan bir blog yazısında, tarayıcı penceresi boyutuna bağlı olarak stil sayfalarını değiştirmek için JavaScript’i kullanmanın yeni bir yöntemi tanıtıldı. Şimdilerde “çözünürlüğe bağlı sayfa düzenleri (resolution-dependent layouts)” olarak bilinen bu yöntem, her ne kadar geliştiricilerin daha fazla çalışmasını gerektirse de web sitesi tasarımları üzerinde daha ince ve hassas kontrollere izin vermekte.
Temel olarak çözünürlüğe bağlı sayfa düzenleri, CSS kesme noktalarının (breakpoints) ünlü olmadan önceki erken bir sürümü olarak işlev görüyordu. Dezavantajları ise, geliştiricilerin her hedef çözünürlük için farklı stil sayfaları oluşturması ve tüm tarayıcılarda JavaScript’in çalışmasını sağlama almasıydı.
O dönemlerde ön planda olan çok sayıdaki tarayıcı içinden, tarayıcı seçenekleri arasındaki farkları sadeleştirmenin bir yolunu sunan jQuery ise git gide daha popüler hale gelmeye başladı.
Mobil Alt Alan Adlarının (Subdomain) Yükselişi
Çoğu mobil cihazın internet erişimine sahip olması ile çözünürlüğe bağlı tasarım konseptlerinin hayatımıza girmesi, hemen hemen aynı zamanlara denk gelmişti. Şirketler akıllı telefonları için tarayıcılar oluştururken, geliştiricilerin bir anda bunları da hesaba katması gerekiyordu.
Mobil alt alan adlarının hedefi, kullanıcıların masaüstünde görüntüledikleri bir sitenin aynısını, herhangi bir veri ve işlev kaybı olmadan akıllı telefonlar üzerinden de kullanıcılara sunmaktı. Fakat gerçekte, bu ikisi birbirinden tamamen farklı uygulamalardı.
Biraz karmaşık da olsa, bir mobil alt alan adına sahip olmanın getirdiği çeşitli avantajlar bulunuyordu. Örneğin geliştiriciler, özellikle SEO’yu mobil cihazlara hedefleyebiliyor veya çeşitli mobil sitelere daha fazla trafik çekebiliyordu. Ancak bu durum, geliştiricilerin aynı web sitesinin iki farklı varyasyonunu idare etmesini gerektirdi.
Apple’ın ilk iPad’ini piyasaya yeni sürdüğü zamanlarda, pek çok web tasarımcısı bir web sitesine her cihazdan erişim sağlamak için hala bu eski moda ve kullanışsız stratejiye güveniyordu. 2000’lerin sonlarına doğru geliştiriciler, mobil siteleri daha erişilebilir hale getirmek için genellikle bir dizi hileye başvuruyorlardı. Örnek vermek gerekirse, basit sayfa düzenlerinde bile esnek görüntüler (flexible images) için “maksimum genişlik: 100%” hilesi kullanılıyordu.
Neyse ki Ethan Marcotte, A List Apart sitesinde “Uyumlu Web Tasarımı” terimini ortaya attı ve her şey değişmeye başladı. Bu yazı, John Allsopp’un web tasarımının mimari ilkeleri keşfine dikkat çekti ve her cihazda iyi bir performans gösteren, her şeyi tek bir çatı altında toplayan all-in-one web sitelerinin de önünü açmış oldu.
Uyumlu Web Tasarımında Yeni Bir Çağ
Marcotte’nin makalesi, geliştiricilerin uyumlu bir web sitesi oluştururken dikkate alması gereken üç önemli bileşeni lanse etti: akıcı ızgaralar, esnek görüntüler ve medya sorguları.
Akışkan Izgaralar (Fluid Grids)
Akışkan ızgaralar kavramı, web sitelerinin mevcut ekran boyutuna bağlı olarak büyüyüp küçülebilen, çeşitli esnek sütunları benimsemesi gerektiği düşüncesini ortaya çıkardı.
Bu kavram, mobil cihazlarda bir veya iki esnek içerik sütununun tanıtılması anlamına gelirken, masaüstü cihazların ise daha geniş alanlara sahip olması sebebiyle genellikle daha fazla sütuna ev sahipliği yapabileceği anlamını taşımakta.
Esnek Görüntüler (Flexible Images)
Esnek görüntüler, içerikler gibi görüntülerin de içinde bulundukları akışkan ızgara ile birlikte büyüyüp küçülebilmesi gerektiği fikrini ortaya attı. Yukarıda da bahsettiğimiz gibi, daha önce geliştiriciler bunu etkinleştirmek için “maksimum genişlik” hilesini kullandılar.
Eğer ki bir görüntüyü bir kapsayıcıda (container) tutuyorsan ve kapsayıcın uyumluysa, görüntünün belirlediğin sayfa sınırından taşması çok olası. Ancak, “maksimum genişliği” %100’e sabitlersen, görüntünün ana kapsayıcısıyla yeniden boyutlandırılmasını sağlayabilirsin.
Medya Sorguları (Media Quaries)
“Medya sorguları” fikri, 2010’da tanıtılmış olmasına rağmen 2 yıl sonra W3 (World Wide Web) önerisi olarak resmiyette yayınlanana kadar yaygın olarak benimsenmeyen CSS medya sorgularına atıfta bulundu. Özünde medya sorguları, medya türü (baskı, ekran vb.) ve medya özellikleri (yükseklik, genişlik vb.) gibi seçeneklere dayalı olarak tetiklenen ve farklı cihazlar ve ekran boyutları için farklı stiller belirlemeye yarayan bir CSS özelliği.
Bu sorgular o zamanlar daha basit olsa da, geliştiricilerin temel olarak günümüzde uyumlu tasarımda kullanılan araçlardan biri olan basit bir tür kesme noktası (breakpoint) uygulamasına izin verdi. Kesme noktaları, web sitelerinin tarayıcı penceresine veya cihaz genişliğine göre düzenini veya stilini ne zaman değiştirdiğini ifade ediyorlar.
Medya sorgularının günümüz geliştiricilerinin beklediği şekilde çalışmasını sağlamak içinse, genellikle Viewport Meta etiketlerinin kullanılması gerekiyor.
Mobil Öncelikli (Mobile-First) Tasarımların Yükselişi
Marcotte’nin Uyumlu Web Tasarımını tanıtmasından bu yana, geliştiriciler bu fikri mümkün olduğunca etkili bir şekilde uygulamak için yeni yollar üretip üzerinde çalışmaya devam ediyorlar. Artık çoğu geliştirici, masaüstü veya mobil cihaz kullanıcılarının ihtiyaçlarını dikkate almak arasından bir seçim yaparak iki kategoriye ayrılıyor. Eğilim ise ikincisine doğru giderek hızlanıyor.
Mobil öncelikli tarama çağında sıfırdan bir web sitesi tasarlarken, çoğu geliştirici doğal olarak en iyi seçeneğin mobil öncelikli olduğuna inanıyor. Mobil tasarımlar genellikle çok daha basit ve minimalist bir yapıya sahip, bu durum da mevcuttaki web tasarım trendlerinin çoğuna kolayca uyum sağlıyor!
Mobil öncelikli seçenekle ilerlemek, web sitesinin ihtiyaçlarını öncelikle mobil perspektiften değerlendirmek anlamına geliyor. Masaüstü ve tabletler için sayfa düzenleri oluşturmaya başladığında ise, kesme noktalarını kullanarak stillerini normal bir şekilde yazabilirsin. Bunun yerine masaüstü öncelikli yaklaşımı seçtiysen, kesme noktası seçimlerinle bunu sürekli olarak daha küçük cihazlara uyarlaman gerektiğini unutmamalısın.
Uyumlu Web Tasarımının Geleceğini Keşfetmek
Uyumlu web tasarımı henüz kusursuz değil. Hala, tüm cihazlarda aynı deneyimi sunamayan o kadar çok site var ki! Dahası, AR (Augmented Reality – Artırılmış Gerçeklik) kulaklıklar ve akıllı saatler gibi yeni nesil cihaz ve teknolojilerin de gelişimiyle, uyumlu tasarımın bunlara nasıl adapte edileceğini bulmak gibi yeni yeni zorluklar da ortaya çıkmaya devam ediyor.
Ancak, geçmişten günümüze web tasarımının gelişimine bakacak olursak ne kadar yol kat ettiğimizi görebiliriz!
