Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sitenin görünümünü ve sayfaların yüklenirken nasıl davrandığını planlar: hazır tema ile özel tasarım arasında hangi ölçütlere göre seçim yapıldığı, sayfa yüklenirken öğelerin yer değiştirmesinin nasıl önlendiği, ziyaretçi yazıları büyüttüğünde sayfa düzeninin nasıl korunduğu ve çerez bildiriminin tasarımının sayfa kullanımını nasıl etkilediği.
Web Tasarım İşinde Hazır Tema mı Özel Tasarım mı Kullanılacağına Nasıl Karar Verilir?
Hazır tema, birçok site için hazırlanan ve yönetim panelinden uyarlanan bir şablon paketidir. Sayfa düzenleri, renkler, yazı tipleri ve örnek içerik paketle birlikte gelir. Özel tasarım ise yalnızca tek bir site için çizilen ve o siteye göre kurulan şablonlardan oluşur. Web tasarım işinde bu iki yol arasındaki seçim, işe başlamadan yazılan bir ihtiyaç listesine göre yapılır.
İhtiyaç listesi sitenin sayfa türlerini ve işlevlerini sıralar. Sayfa türleri ana sayfa, hizmet sayfası, blog yazısı, iletişim ve yasal metinlerdir. İşlevler ise iletişim formu, randevu alma, çok dilli yapı, site içi arama ya da çevrim içi ödeme olabilir. Her satıra o sayfada bulunacak bölümler de yazılır. Hazır tema bu listenin her satırı için ayrı ayrı denenir.
Web tasarım sürecinde bir temanın uygunluğu deneme kurulumunda görülür. Tema, arama motorlarına kapalı boş bir WordPress sitesine kurulur ve örnek içerik yüklenir. Temanın kurulumda istediği eklentiler sayılır. Son güncellenme zamanı ve WordPress’in güncel sürümüyle uyumu temanın sayfasından okunur. Ardından örnek bir hizmet sayfası PageSpeed Insights’ta denenir; bu Google aracı sayfanın yüklenme ölçümlerini gösterir.
Hazır temalarda sık görülen sorun kullanılmayan koddur. Tema, birçok farklı siteye uyabilmek için çok sayıda bölüm, kaydırıcı ve hareket efekti taşır. Bu özellikler kullanılmasa da dosyaları sayfalarda yüklenebilir. Bazı temalar başlık düzeylerini görünüşe göre seçer; sayfada ikinci bir ana başlık ya da atlanmış başlık düzeyleri oluşur. Bunların düzeltilmesi tema dosyalarında değişiklik gerektirir.
Özel tasarımda önce sayfa taslakları hazırlanır, ardından görsel tasarım onaylanır. Şablonlar hafif bir temel tema üzerine, yalnızca listedeki bölümlerle kurulur. Sayfaya kullanılmayan dosya eklenmediği için tarayıcı daha az dosya indirir. Bu yol daha uzun sürer; her bölüm ayrıca tasarlanır, kurulur ve denenir. Şablonların sonradan nasıl düzenleneceği ayrı bir belgede yazılır.
Karar ihtiyaç listesinin sonucuna göre verilir. Tema listedeki satırların büyük kısmını ek eklenti olmadan karşılıyor ve ölçümde sorun çıkarmıyorsa hazır tema kullanılır. Yapılan değişiklikler ana temaya değil, onun üzerine eklenen küçük bir alt temaya yazılır. Ana tema güncellendiğinde bu dosyalar korunur. Satırların önemli bir kısmı temanın dışında kalıyorsa özel tasarım seçilir. Seçim, onayınıza sunulan aylık iş listesine gerekçesiyle yazılır.
Sayfa Yüklenirken Öğelerin Kayması Nasıl Önlenir?
Düzen kayması, sayfa yüklenirken ekranda görünen bir öğenin ziyaretçi bir şey yapmadan yer değiştirmesidir. Okunan satır aşağı iner ya da dokunulacak düğme başka bir yere kayar. Bu kaymaların ölçüsüne CLS denir. Google, CLS’yi Core Web Vitals başlığı altında topladığı ölçülerden biri olarak kullanır. Bu grup yüklenme hızını, dokunuşa verilen tepkiyi ve görünümün sabit kalmasını değerlendirir.
CLS, kayan öğelerin ekranda kapladığı alanı ve ne kadar uzağa kaydıklarını birlikte hesaplar. Ziyaretçinin dokunuşundan hemen sonra gelen kaymalar beklenen kayma sayılır ve hesaba girmez. Değer sayfanın açık kaldığı bütün süre boyunca ölçülür; kaydırma sırasında olan kaymalar da hesaba girer. Kaymaların nedenleri dört grupta toplanır. Bunlar boyutu bildirilmeyen görseller, yeri ayrılmayan gömülü içerikler, sonradan eklenen bantlar ve geç yüklenen yazı tipleridir.
Tarayıcı bir görselin boyutunu bilmezse ona baştan yer ayırmaz. Görsel indiğinde altındaki metin aşağı itilir. Bu yüzden her görselin genişliği ve yüksekliği sayfanın kodunda belirtilir; geç yüklenen görsellerde de bu kural geçerlidir. Tarayıcı iki değerden en-boy oranını hesaplar ve kutuyu görsel gelmeden çizer. Harita ve video için de sabit oranlı bir kutu hazırlanır; içerik onun içinde açılır.
Sayfa çizildikten sonra eklenen içerik de kaymaya yol açar. Duyuru bandı, reklam alanı ya da kampanya kutusu JavaScript ile içeriğin üstüne eklenirse bütün sayfa aşağı kayar. Öğe ya ilk yanıtla birlikte sayfanın içinde gönderilir ya da ona önceden boş bir alan bırakılır. Öteki yol, öğeyi içeriğin üzerinde ayrı bir katman olarak açmaktır. Yüksekliği değişen kaydırıcılar sabit bir yükseklikte tutulur.
Yazı tipi dosyası geç inerse tarayıcı metni önce yedek bir yazı tipiyle gösterir. Asıl yazı tipi gelince harf genişlikleri değişir ve satırlar yeniden dizilir. Bunu azaltmak için yazı tipi dosyaları sitenin kendi sunucusundan ve öncelikle yüklenir. Yedek yazı tipinin ölçüleri asıl yazı tipine yaklaştırılır. Hareket efektleri ise öğeyi yerinden oynatmadan görüntüsünü kaydıran dönüşümlerle yapılır.
Kaymalar ölçümle bulunur. PageSpeed Insights raporunun tanılama bölümü, kaymaya yol açan öğeleri ayrı bir satırda listeler. Chrome’un geliştirici araçlarında kayan bölgeleri ekranda renkle gösteren bir seçenek de vardır. Gerçek ziyaretçilerin değerleri ise Search Console’da, Core Web Vitals başlıklı raporda adres grupları hâlinde görünür. Web tasarım düzeltmeleri bu rapora gecikmeyle yansır. Ücretsiz site dökümünde bulunan kaymalar döküm listesine yazılır.
Ziyaretçi Yazıları Büyüttüğünde Sayfa Düzeni Nasıl Korunur?
Ziyaretçi yazıları iki yolla büyütür. Birincisi tarayıcının yakınlaştırma özelliğidir; sayfadaki her öğe büyür ve sayfa daha dar bir ekran için hazırlanmış düzene geçer. İkincisi tarayıcının yazı boyutu ayarıdır; bu ayarda yalnızca metin büyür, öteki öğelerin boyutu değişmez. Telefonda parmakla büyütme ise yalnızca görüntüyü yaklaştırır. Web tasarım iki durumda da içeriğin okunur, düğmelerin ve formların çalışır kalmasını hedefler.
Erişilebilirlik yönergeleri bu konuda üç ölçüt koyar. Metin, yardımcı bir program kullanılmadan önemli ölçüde büyütülebilmeli ve bu sırada içerik ya da işlev kaybolmamalıdır. Yakınlaştırılmış sayfa, dar bir ekran genişliğinde iki yönlü kaydırma gerektirmeden okunabilmelidir; harita ve geniş tablo bunun dışında tutulur. Satır, paragraf, harf ve sözcük aralıkları artırıldığında da metin kesilmemelidir. Bu ölçütler masaüstü ve telefon için aynıdır.
Yazı boyutları tarayıcının temel yazı boyutuna bağlı göreli birimlerle tanımlanır. Temel yazı boyutu, ziyaretçinin tarayıcıda seçtiği varsayılan yazı büyüklüğüdür. Sabit birimle verilen boyutlar tarayıcının yazı boyutu ayarına çoğu zaman uymaz. Telefonda yakınlaştırmayı kapatan sayfa ayarı kullanılmaz; bu ayar ziyaretçinin parmakla büyütmesini engeller. Metin resim içine yazılmaz. Resimdeki yazı bu ayarla büyümez ve yakınlaştırıldığında bulanıklaşır.
Kutuların yüksekliği içeriğe göre belirlenir. Kartlar, düğmeler ve başlık alanları sabit yükseklikte tutulursa büyüyen metin kutudan taşar ya da kesilir. Bu yüzden kutulara yalnızca en küçük yükseklik verilir ve kutu metinle birlikte uzar. Satır aralığı da yazı boyutuna oranla verilir; yazı büyüyünce aralık da büyür. Düğme yazıları gerektiğinde ikinci satıra geçer. Yan yana duran kartlar, yer daraldığında alt alta dizilir.
Uzun sözcükler ve adresler dar sütunda taşabilir; bunlar için satır sonunda bölünme izni verilir. Geniş tablolar kendi kutusu içinde yana kaydırılır, sayfanın geri kalanı kaymaz. Açılır menüler büyütülmüş sayfada ekrana sığacak biçimde alt alta açılır. Ekrana sabitlenen üst menü ve alt bantlar büyütülmüş sayfada okunacak alanı daraltır. Bu öğeler yakınlaştırılmış görünümde küçültülür ya da sabit konumdan çıkarılır.
Denetim her sayfa şablonunda ayrı yapılır. Tarayıcının yakınlaştırması adım adım yönergelerin öngördüğü en yüksek düzeye çıkarılır ve her adımda sayfa okunur. Ardından tarayıcının yazı boyutu ayarı en büyük değere getirilir. Her şablonda menü, form ve düğmeler bu ayarla da denenir. Yakınlaştırmayı engelleyen ayar, PageSpeed Insights raporunun erişilebilirlik kısmında ayrıca işaretlenir. Bulunan taşmalar ve kesilen metinler sayfa sayfa listelenir.
Çerez Bildiriminin Tasarımı Sayfayı Nasıl Etkiler?
Çerez bildirimi, ziyaretçiye sitenin kullandığı çerezleri anlatan ve seçimini kaydeden kutudur. Çerez, tarayıcının bir site adına sakladığı ve o siteye her istekte geri gönderdiği kısa bir veridir. Bildirim ilk ziyarette, hangi sayfadan girilirse girilsin açılır ve seçim yapılana kadar ekranda kalır. Web tasarım açısından bildirim üç şeyi etkiler: öğelerin yerleşimi, yüklenme ölçümleri ve içeriğin okunması.
Bildirimin yeri, sayfada kayma olup olmayacağını belirler. Sayfanın üstüne, içeriğin akışına sonradan eklenen bir bant bütün içeriği aşağı iter; bu hareket CLS değerine yazılır. Ekranın alt kenarına sabitlenen ve sayfanın önünde duran kutu ise başka öğelerin yerini değiştirmez. Kutu kapatıldığında da sayfadaki öğeler bulundukları yerde kalır. Ayrıntılı seçenekler açıldığında kutu yukarı doğru büyür, sayfadaki metin yerinde kalır.
Bildirim yüklenme ölçümüne de girer. LCP, Core Web Vitals’ın yüklenme ölçüsüdür. Sayfa açılınca görünen bölümdeki en geniş metin ya da görsel bloğunun çizilme zamanını ölçer. Uzun metinli ve geniş bir bildirim kutusu bu alanın en büyük bloğu olabilir. Bu durumda ölçüm asıl içerik yerine bildirimi esas alır ve bildirim geç çizilirse LCP de gecikir. Bu yüzden kutunun metni kısa tutulur.
Bildirim çoğu sitede ayrı bir onay yönetim yazılımı tarafından çizilir. Bu yazılım dışarıdaki bir sunucudan JavaScript dosyası yükler. Dosya, sayfanın çizilmesini bekletecek biçimde eklenirse sayfa geç açılır. Ağır bir dosya düğmelere verilen tepkiyi de geciktirebilir; bu gecikmeyi Core Web Vitals’taki INP ölçer. Bu yüzden dosya sayfanın çizimini durdurmayacak biçimde, erkenden yüklenir.
Kutu telefon ekranının yalnızca alt kısmında durur ve içeriğin büyük bölümü görünür kalır. Seçenek düğmeleri parmakla rahat seçilecek büyüklükte, aynı boyutta ve aynı belirginlikte tasarlanır. Kutu klavyeyle gezilebilir; açıldığında klavye odağı kutuya geçer, kapandığında sayfaya döner. Google, yasal bir yükümlülük için gösterilen çerez kutularını, ölçülü kullanıldıklarında, rahatsız edici ara pencerelerden ayrı tuttuğunu açıklar.
Bildirimin etkisi ilk ziyaret koşulunda ölçülür. Tarayıcının gizli penceresi önceki ziyaretlerden kalan çerezleri kullanmaz; site bu pencerede telefonda ve masaüstünde açılır. PageSpeed Insights testi de siteye her seferinde ilk kez gelen bir ziyaretçi olarak girer ve bildirimi görür. Raporda en büyük öğe olarak seçilen blok ve kayma listesi okunur. Ölçüm sonuçları aylık raporda, tek sayfa içinde gösterilir.
Kullandığım hazır tema uzun süredir güncelleme almıyor; ne yapmalıyım?
Tema sayfasında son güncelleme zamanını ve WordPress’in güncel sürümüyle uyumunu kontrol edin. Ücretli bir temaysa lisans süresine bakın; güncellemeler çoğu zaman geçerli lisansa bağlıdır. Güncelleme gelmeyecekse sitenin arama motorlarına kapalı bir kopyasında yeni bir tema ya da özel şablonlar denenir, ardından canlı siteye geçilir.
PageSpeed Insights’ta CLS uyarısı alıyorum; hangi öğenin kaydığını nasıl bulurum?
Raporun tanılama bölümünde düzen kaymalarını listeleyen satırı açın. Satır, kayan öğeleri ve her birinin toplam kaymaya katkısını gösterir. Öğe boyutu bildirilmemiş bir görselse genişlik ve yüksekliğini ekleyin. Sonradan eklenen bir kutuysa ona önceden yer ayırın ya da içeriğin üzerinde açın. Ardından testi yeniden çalıştırın.
Telefonda yazı boyutunu büyüttüğümde sitemdeki düğme yazıları kesiliyor; neden olur?
Bu durum çoğunlukla düğmenin sabit bir yükseklikle tasarlanmasından doğar; büyüyen metin kutuya sığmaz. Düğmeye yalnızca en küçük yükseklik verin ve yazının ikinci satıra geçmesine izin verin. Yazı boyutlarının göreli birimle tanımlandığını kontrol edin. Değişiklikten sonra sayfayı en büyük yazı ayarında yeniden açın.
Çerez bildirimim PageSpeed raporunda en büyük öğe olarak görünüyor; bunu nasıl düzeltebilirim?
Bildirim kutusunun metnini kısaltın ve kutunun ekranda kapladığı alanı küçültün. Kutunun sayfayla birlikte, dış dosyayı beklemeden çizilmesini sağlayın. Böylece ilk ekrandaki asıl başlık ya da görsel en büyük öğe olarak ölçülür. Değişiklikten sonra testi PageSpeed Insights’ta tekrarlayın; sonucu telefon ölçümünde de okuyun.