Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfaların görünümünü ve kullanımını planlar: farklı sayfa tasarımlarının aynı anda nasıl denendiği, tarayıcının geri düğmesine basıldığında sayfanın nereye dönmesi gerektiği, çentikli ve kavisli telefon ekranlarında sayfa kenarlarının nasıl ayarlandığı ve sayfa sonundaki “Bu bilgi işinize yaradı mı?” sorusunun ne sağladığı.
Web Tasarım Çalışmasında Farklı Sayfa Tasarımları Aynı Anda Nasıl Denenir?
Bölünmüş test, bir sayfanın iki ya da daha fazla tasarımının aynı dönemde farklı ziyaretçilere gösterilmesidir. Ziyaretçiler gruplara rastgele ayrılır ve her grup tek bir sürümü görür. Bu yöntem web tasarım çalışmasında bir ölçüm aracıdır. Hangi sürümün daha çok form gönderimi ya da telefon araması aldığını gösterir. Sürümler aynı günlerde denendiği için mevsim ve kampanya farkları sonucu bozmaz.
Testte genellikle tek bir öğe değiştirilir: başlığın yazılışı, düğmenin yeri ya da formdaki alan sayısı. Birden çok öğe aynı anda değişirse sonucun hangi değişiklikten doğduğu ayrılamaz. Her sürüm için ölçülecek eylem önceden belirlenir ve GA4’te anahtar etkinlik olarak tanımlanır. Test başlamadan önce sayfanın mevcut sürümü bir süre ölçülür ve karşılaştırma için kayda geçer.
Ziyaretçiyi gruplara ayırmanın iki yolu vardır. İlkinde sürümler aynı adreste durur ve hangisinin gösterileceğine sunucu ya da tarayıcıdaki JavaScript karar verir. İkincisinde sürümler ayrı adreslerdedir ve ziyaretçi bunlardan birine yönlendirilir. Ziyaretçi seçilen sürümü sonraki gelişlerinde de görür. Bu bilgi tarayıcıda saklanır; saklanmazsa aynı kişi iki sürümü de görür ve ölçüm karışır.
Google’ın web sitesi testleriyle ilgili belgesi, arama sonuçlarını etkilememek için birkaç kural sayar. İlki gizlemenin yapılmamasıdır: Googlebot’a ziyaretçilerden farklı bir içerik gösterilmez ve Googlebot ayrı bir gruba konmaz. Google gizlemeyi spam politikalarına aykırı sayar. Sürümler ayrı adreslerdeyse her sürümde asıl sayfayı gösteren kanonik etiket bulunur. Yönlendirme yapılıyorsa kalıcı 301 değil, geçici 302 kullanılır.
Belgedeki bir başka kural süreyle ilgilidir: test, güvenilir bir sonuç için gereken süreden uzun tutulmaz. Google, gereğinden uzun süren bir testi arama motorlarını yanıltma girişimi olarak değerlendirebileceğini belirtir. Tarayıcıda yapılan değişim ayrıca görüntü sorunu doğurur. Sayfa önce asıl sürümle açılıp sonra değişirse ziyaretçi bir anlık titreme görür. Titreme sırasındaki kayma, Core Web Vitals içinde düzen kaymasını ölçen CLS değerini yükseltir.
Test bitince sonuç okunur ve tek bir sürüm kalır. Öteki sürümün adresi asıl sayfaya yönlendirilir, test kodu sayfadan kaldırılır. Elementor’da sürümler ayrı taslak sayfalar olarak hazırlanır; test bitince kullanılmayan taslak silinir. Web tasarım kayıtlarında her testin başlangıç günü, değişen öğe, ölçülen eylem ve kalan sürüm yazılır. Bu kayıt, aynı denemenin sonradan tekrarlanmasını önler.
Tarayıcının Geri Düğmesine Basıldığında Sayfa Nereye Dönmelidir?
Geri düğmesi, tarayıcının ziyaret geçmişindeki bir önceki kayda döner. Ziyaretçi bu düğmeye bastığında önceki sayfayı ayrıldığı yerde ve ayrıldığı hâlde görmeyi bekler. Kaydırma konumu, açılmış bir sekme, seçilmiş bir filtre ya da forma yazılmış bilgiler bu hâlin parçasıdır. Bu hâl korunmazsa ziyaretçi listenin başına döner ve aradığı yeri yeniden bulmak zorunda kalır.
Tarayıcılar bu dönüşü hızlandırmak için ileri-geri önbelleğini kullanır. Bu önbellek, ayrılınan sayfanın tam bir kopyasını bellekte tutar ve dönüşte sayfayı yeniden yüklemeden gösterir. Bazı ayarlar sayfanın bu önbelleğe alınmasını engeller. Bunlar arasında sayfadan ayrılırken çalışan kodlar, sayfanın saklanmasını yasaklayan sunucu ayarları ve açık kalan bağlantılar bulunur. PageSpeed Insights raporu bu engelleri ayrı bir denetim olarak listeler.
Geri düğmesini bozan sık durumlardan biri ara sayfalardır. Ziyaretçi bir bağlantıya tıklar, açılan sayfa onu JavaScript ile başka bir adrese gönderir. Geri basıldığında ziyaretçi ara sayfaya döner ve yeniden ileri gönderilir. Bu döngü, yönlendirmenin sunucu tarafında 301 ile yapılmasıyla çözülür. Ziyaretçi bir şeye tıklamadan geçmişe kayıt ekleyen kodlar da aynı sorunu doğurur ve kaldırılır.
Filtreli listelerde, sekmeli bölümlerde ve sayfa sayfa ilerleyen listelerde yapılan seçim adrese yazılır. Böylece geri düğmesi ziyaretçiyi seçtiği filtreyle ya da bulunduğu sayfa numarasıyla listeye döndürür. Seçim yalnızca sayfanın belleğinde tutulursa dönüşte liste sıfırlanır. Aşağı kaydırdıkça yeni sonuç yükleyen listelerde de ek sonuçlar ayrı sayfa adresleriyle sunulur; dönüş bu adreslerden birine yapılır.
Formlarda geri düğmesi ayrı bir soruna yol açabilir. Form gönderildikten sonra aynı sayfada kalınırsa, geri ve ileri düğmeleri formun yeniden gönderilmesini soran bir uyarı çıkarabilir. Bu yüzden gönderim bittiğinde ziyaretçi teşekkür için hazırlanmış başka bir adrese gönderilir. Geri basıldığında form yeniden açılır, gönderim tekrarlanmaz. Teşekkür sayfasının açılması GA4’te anahtar etkinlik olarak da sayılabilir.
Açılır pencereler ve büyütülen görseller de geçmişle ilişkilidir. Telefonda ziyaretçi açık bir pencereyi kapatmak için çoğu zaman geri düğmesine basar. Pencere açıldığında geçmişe tek bir kayıt eklenirse geri düğmesi yalnızca pencereyi kapatır ve sayfa yerinde kalır. Web tasarım denetiminde bu davranışlar telefonda ve masaüstünde ayrı ayrı denenir; sonuç her sayfa türü için listeye yazılır.
Çentikli ve Kavisli Telefon Ekranlarında Sayfa Kenarları Nasıl Ayarlanır?
Çentik, bazı telefonlarda ekranın üst kenarındaki kamera ve algılayıcı bölümüdür. Bu bölüm ekranı kesen bir oyuk ya da ekranın içinde bir delik biçiminde olabilir. Kavisli ekranlarda köşeler yuvarlaktır; bazı modellerde yan kenarlar da bükülür. Alttaki ana ekran çizgisi de telefonun kendi hareketlerine ayrılmış bir alandır. Bu bölgelere düşen yazı okunmaz, düğmeye de dokunulamaz.
Telefon, ekranın bu bölgelerden arınmış kısmını güvenli alan olarak tanımlar. Tarayıcılar varsayılan olarak sayfayı güvenli alanın içinde gösterir. Dikey tutuşta bu genellikle sorun çıkarmaz. Telefon yatay çevrildiğinde ise çentik sayfanın bir yan kenarına gelir. Bu durumda tarayıcı çentik tarafında boş bir şerit bırakır ve şeridi sayfanın arka plan rengiyle doldurur.
Sayfa tasarımı ekranın tamamını kullanacak biçimde de ayarlanabilir. Bu ayar açıldığında arka plan rengi ve görseller kenarlara kadar uzanır. Yazılar, menü ve düğmeler ise içeride tutulur. Tarayıcı, her kenar için güvenli alan payını sayfaya bildirir. Tasarım bu payları kenar boşluklarına ekler. Böylece içerik çentiğin ve yuvarlak köşelerin altında kalmaz, zemin ekranı boşluksuz doldurur.
Ekranın altına sabitlenen öğeler ayrıca denetlenir: arama ya da mesaj düğmesi, çerez bildirimi ve alt menü. Bu öğeler alt kenara yapıştırılırsa ana ekran çizgisinin üstüne biner. Çizgiye yakın dokunuşlar sayfa yerine telefonun kendi hareketlerini çalıştırabilir. Bu yüzden sabit öğelerin altına güvenli alan payı kadar boşluk eklenir. Aynı kural üst kenara sabitlenen menüye de uygulanır.
Telefon tarayıcılarında adres çubuğu sayfa kaydırıldıkça gizlenir ve yeniden görünür. Bu sırada görünür ekranın yüksekliği değişir. Ekran yüksekliğine göre kurulmuş tam sayfa bölümler bu değişimde zıplayabilir ya da altları kesilebilir. Bu bölümler, tarayıcının değişen yüksekliğini hesaba katan ölçülerle kurulur. Böylece ilk ekrandaki düğme, adres çubuğu görünürken de ekranın içinde kalır.
Yuvarlak köşelere ve bükülen kenarlara çok yakın konan düğmelerin bir kısmı görünmez kalabilir. Bu yüzden telefonda yan boşluklar masaüstüne göre ayrıca belirlenir; Elementor’da kenar boşlukları telefon görünümü için ayrı girilir. Web tasarım denetiminde sayfalar çentikli bir telefonda hem dik hem yan tutuşta açılır. Geliştirici araçlarının telefon görünümü çentiği her zaman göstermez; son deneme gerçek cihazda yapılır.
Sayfa Sonundaki “Bu Bilgi İşinize Yaradı mı?” Sorusu Ne Sağlar?
Sayfa sonundaki geri bildirim sorusu, ziyaretçiye içeriğin işine yarayıp yaramadığını soran küçük bir bölümdür. Bölümde bir soru ve iki düğme bulunur: Evet ve Hayır. Soru tek cümledir ve sayfanın konusuna göre değişmez. Ziyaretçi bir düğmeye bastığında yanıt, sayfanın adresiyle birlikte kaydedilir. Bu kayıt, hangi sayfaların ziyaretçinin aradığı bilgiyi verdiğini ve hangilerinin vermediğini sayfa sayfa gösterir.
Hayır yanıtından sonra isteğe bağlı ikinci bir adım açılabilir. Bu adımda kısa bir seçim listesi ya da tek satırlık bir metin alanı bulunur. Liste eksikliğin türünü sorar: bilgi eksik, bilgi eski ya da anlatım anlaşılmıyor. Bu adımda ad, e-posta ya da telefon istenmez. Metin alanının üstünde kişisel bilgi yazılmaması gerektiği belirtilir.
Yanıtlar GA4’e etkinlik olarak gönderilir. Evet ve Hayır, ayrı etkinlikler ya da aynı etkinliğin iki değeri olarak kaydedilir. Değer kullanılıyorsa GA4’te bu değer için özel bir boyut tanımlanır. Ardından hazırlanan bir tabloda etkinlikler sayfa yoluna göre dökülür. Tablo her sayfa için Evet ve Hayır sayısını yan yana gösterir; seçim listesinin yanıtları da aynı tabloda okunur.
Bölüm içeriğin sonuna, iletişim düğmesinden önce yerleştirilir. Açılır pencere olarak gösterilmez ve içeriği örtmez. Düğmeler telefonda rahat dokunulacak büyüklüktedir; ekran okuyucunun seslendireceği bir ad her düğmeye ayrıca verilir. Yanıt verildikten sonra düğmeler kaybolur ve yerine kısa bir teşekkür cümlesi çıkar. Aynı ziyaretçinin aynı sayfada art arda verdiği yanıtlar tek sayılır.
Önbellek eklentisi kullanılan sitelerde sayfa her ziyaretçiye hazır bir kopya olarak gider. Bu yüzden yanıt sayfanın içine yazılmaz; tarayıcıdan ayrı bir istekle gönderilir. Bölüm için yapılandırılmış veri eklenmez, çünkü bu yanıtlar bir inceleme ya da puan değildir. Google, Analytics verisini arama sıralamasında kullanmadığını belirtir. Yanıtlar bu nedenle sitenin kendi analiz kaydında kalır ve içerik düzeltmeleri için okunur.
Hayır yanıtı alan sayfalar, seçilen eksiklik türüyle birlikte bir listeye yazılır. Eksik bilgi eklenir, eski bilgi güncellenir, anlaşılmayan bölüm yeniden yazılır. Değişiklik günü kayda geçer ve sonraki yanıtlar o günden sonrası için ayrı okunur. Sitenin SEO’su, web tasarımı ve yazılımı aynı ekipte yapılır. Bu yüzden bölümün kodu, yerleşimi ve sayfanın metni aynı iş sırasında ele alınır.
Bölünmüş test sırasında sürüm sayfalarım Google’da dizine eklenmiş görünüyor; bir sorun var mı?
Search Console’daki URL denetimi aracında sürüm adresini sorgulayın ve Google’ın seçtiği kanonik adrese bakın. Seçilen adres asıl sayfaysa sürüm ayrı bir sonuç olarak gösterilmez. Seçilen adres sürümün kendisiyse kanonik etiketi ve yönlendirmenin geçici olup olmadığını yeniden kontrol edin.
Sitemde geri düğmesine basınca sayfa en başa dönüyor; nedenini nasıl bulurum?
Sayfayı Chrome’da açın ve geliştirici araçlarında Uygulama panelindeki ileri-geri önbelleği bölümüne gidin. Buradaki test, sayfanın bu önbelleğe alınmasını engelleyen nedenleri listeler. Liste boş çıkarsa sayfadaki bir kodun dönüşte kaydırma konumunu sıfırlayıp sıfırlamadığına bakın. Engelleyen neden bir eklentiye aitse eklentinin ayarlarına ya da güncel sürümüne bakın.
Telefonda tarayıcının üst çubuğu sitemin renginde görünebilir mi?
Sayfaya bir tema rengi tanımlanabilir. Bazı telefon tarayıcıları adres çubuğunu ve durum çubuğunu bu renkle boyar. Destek tarayıcıya ve sürüme göre değişir; bazı tarayıcılar rengi yok sayar ve kendi rengini kullanır. Açık ve koyu görünüm için ayrı renk tanımlamak da mümkündür.
Geri bildirim sorusuna yalnızca birkaç yanıt geldi; sayfayı buna göre değiştirmeli miyim?
Birkaç yanıt sayfanın genel durumunu göstermez. Yanıt sayısı artana kadar bekleyin ve Hayır yanıtlarıyla birlikte seçilen eksiklik türüne bakın. Aynı eksiklik birden çok yanıtta tekrar ediyorsa önce o bölümü düzeltin. Düzeltme gününü kaydedin ve sonraki yanıtları ayrı okuyun.