Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfaların yerleşimini ve ziyaretçinin siteyi rahat kullanmasını planlar: üye girişi gereken alanların tasarlanması, birden fazla şubesi olan işletmenin sitesinde şube sayfalarının düzenlenmesi, görselin üstüne yazılan metnin her ekranda okunur kalması ve sunucu hatası sırasında gösterilen sayfanın tasarımı.
Web Tasarım Sürecinde Üye Girişi Gereken Alanlar Nasıl Tasarlanır?
Üye alanı, yalnızca hesabıyla giriş yapan kullanıcının açabildiği sayfalardır. Müşteri paneli, sipariş geçmişi ve kişiye özel belgelerin bulunduğu bölüm bu alana girer. Web tasarım sürecinde ilk karar, hangi içeriğin girişin arkasında kalacağıdır. Googlebot hesap açmaz ve giriş yapmaz. Girişin arkasındaki sayfalar bu yüzden aramada görünmez. Aramada bulunması gereken bilgiler herkese açık sayfalarda kalır.
Giriş formu iki alandan oluşur: e-posta adresi ve parola. Her kutunun adı, kutunun üstünde duran ve hiç kaybolmayan bir etikette yazar. İpucu olarak kutunun içine konan açık renkli yazı, kullanıcı yazmaya başlayınca silinir; etiketin işini görmez. Alanlar türlerine göre tanımlanır. Böylece telefonda e-posta için uygun klavye açılır, tarayıcının parola yöneticisi alanları tanıyıp doldurur. Parola alanının yanında yazılanı gösteren bir düğme bulunur.
Hatalı girişte mesaj, hangi bilginin yanlış olduğunu söylemez. Tek bir mesaj yazılır: E-posta adresi ya da parola hatalı. Ayrı mesajlar, hangi adreslerin kayıtlı olduğunu dışarıya belli eder. Hatadan sonra yazılan e-posta adresi alanda kalır, yalnızca parola silinir. Art arda yapılan hatalı denemeler bir süre durdurulur. İsteyen kullanıcı için, girişte parolaya ek olarak tek kullanımlık bir kod soran iki adımlı doğrulama açılır.
Parolamı unuttum bağlantısı parola alanının hemen altında durur. Sıfırlama bağlantısı e-postayla gönderilir; tek kullanımlıktır ve kısa bir süre sonra geçersiz olur. Sayfa, e-postanın gereksiz klasörüne de bakılmasını hatırlatır. Kayıt formunda yalnızca gerekli alanlar istenir. Parola kuralları, yazmaya başlamadan önce alanın yanında gösterilir. Parola alanına yapıştırma engellenmez; parola yöneticisi kullananlar böylece uzun parola girebilir.
Sitede HTTPS dışında açılan sayfa bırakılmaz; HTTPS, tarayıcıyla sunucu arasındaki bilgiyi şifreler. Giriş ve üye sayfalarına noindex eklenir ve bu sayfalar site haritasına konmaz. Noindex, sayfanın arama sonuçlarına alınmamasını isteyen işarettir. Üye sayfaları önbelleğe alınmaz. Önbellek, sayfaların hazır kopyalarını saklayan katmandır. Hatalı ayarda bir üyenin sayfası başka ziyaretçiye gösterilebilir. Aynı istisna CDN’de, yani dosyaları dağıtan sunucu ağında da tanımlanır.
WordPress’te üyeler kendi rolleriyle kaydedilir. Abone rolündeki kullanıcı yalnızca kendi profilini görür. Elementor Pro’nun giriş formu bileşeni, formu sitenin tasarımıyla kurar. Üyeler giriş yaptıktan sonra yönetim paneline değil, kendi sayfalarına gider. Çıkış düğmesi her üye sayfasında görünür. Web tasarım testinde deneme hesaplarıyla giriş, hatalı giriş, parola sıfırlama ve çıkış telefonda ve masaüstünde denenir.
Birden Fazla Şubesi Olan İşletmenin Sitesi Nasıl Düzenlenir?
Birden fazla şubesi olan işletme için tek bir site kurulur ve her şubeye ayrı bir sayfa açılır. Şubeler için ayrı alan adları alınmaz. Ayrı siteler kazanılan bağlantıları ve içerik emeğini böler; her biri ayrıca bakım ister. Şube sayfaları sitenin içinde tek bir bölümde toplanır ve adreslerinde bu bölümün adını taşır. Menüdeki Şubeler başlığı bütün şubeleri listeleyen sayfaya gider.
Her şube sayfasında o şubenin adı, açık adresi, telefonu ve çalışma saatleri yazar. Bu bilgiler görsel dosyası olarak değil, seçilebilir metin olarak girilir. Telefonda numaraya dokununca arama başlar. Sayfaya şubenin Google Haritalar kaydı yerleştirilir ve yol tarifi bağlantısı eklenir. Şubede verilen hizmetler, binanın ve girişin fotoğrafları, ulaşım ve otopark bilgisi her şubeye özgü olarak yazılır.
Google’ın spam politikaları, aracı sayfa (doorway) kullanımını ayrı bir başlıkta ele alır. Bunlar belirli aramaları yakalamak için açılan ve ziyaretçiyi asıl işe yarayan sayfaya yönelten sayfalardır. Politika, belirli bölgeleri hedefleyip kullanıcıyı tek bir sayfaya akıtan sayfaları da bu gruba koyar. Bu yüzden yalnızca gerçek adresi olan şubeler için sayfa açılır. Metin kopyalanıp yalnızca yer adı değiştirilmez.
Her şube sayfası, yalnızca o şubeyi anlatan bir yapılandırılmış veri bloğu taşır. Bu blok, sayfadaki bilgileri Google’a belirli bir düzende bildiren ek koddur. Yerel işletmeler için tanımlanmış veri türünde şubenin adı, adresi, telefonu ve çalışma saatleri bulunur. Bu bilgiler şubenin Google İşletme Profili’ndeki kayıtla birebir aynı yazılır. Her profilin web sitesi alanına ana sayfa değil, o şubenin sayfası girilir.
Şubeler sayfası bütün şubeleri adres ve telefonlarıyla metin olarak listeler; her satır şubenin kendi sayfasına bağlanır. Şube sayısı çoksa liste ilçeye göre süzülebilir. Telefonda önce liste, sonra harita gelir. En yakın şubeyi bulma özelliği konum iznini yalnızca ziyaretçi düğmeye bastığında ister. İletişim formuna şube seçimi eklenir; mesaj seçilen şubenin e-posta adresine gider.
Şube sayfaları tek bir şablondan üretilir; yeni şube için yalnızca bilgiler girilir. Kapanan şubenin sayfası silinip boşta bırakılmaz, 301 yönlendirmeyle şubeler sayfasına bağlanır. GA4’te her şube sayfasının ziyaretleri ve telefon numarasına yapılan dokunuşlar ayrı ölçülür. Web tasarım ve SEO tek ekipte yürütüldüğü için şube sayfasının metni, yapılandırılmış verisi ve profil bağlantısı birlikte hazırlanır.
Görselin Üstüne Yazılan Metin Nasıl Okunur Kalır?
Görsel üstü metin, bir arka plan görselinin üzerine yerleştirilen başlık, kısa açıklama ya da düğmedir. Okunurluk, harflerle hemen arkalarındaki görsel bölge arasındaki parlaklık farkına bağlıdır. Bu farka kontrast denir. Fotoğrafın her noktası farklı parlaklıktadır. Bu yüzden aynı satırın bir ucu rahat okunurken öbür ucu zemine karışabilir. Kontrol, metnin kapladığı bütün alan için yapılır.
Metin görsel dosyasının içine gömülmez; sayfada ayrı bir metin katmanı olarak yazılır. Google’ın görseller hakkındaki rehberi de önemli metinlerin görsel içine gömülmemesini önerir. Gömülü yazıyı ekran okuyucular okuyamaz. Tarayıcı yakınlaştırıldığında gömülü yazı bulanıklaşır, metin katmanı ise net kalır. Metin ayrı olunca telefon için satır kırılımı ve yazı boyutu ayarlanabilir. Görsel değişince yazının yeniden tasarlanması gerekmez.
Kontrastı dengelemenin bir yolu, görselin üstüne yarı saydam koyu bir katman koymaktır. Katman fotoğrafın açık bölgelerini koyulaştırır; beyaz yazı her noktada okunur hâle gelir. Katmanın koyuluğu ayarlanabilir. Yalnızca metnin bulunduğu tarafı koyulaştıran renk geçişi de kullanılabilir. Elementor’da bu ayar, bölümün stil sekmesindeki arka plan kaplaması seçeneğindedir. Metnin arkasına düz renkli bir kutu da konabilir.
Görsel seçilirken metnin geleceği bölgenin sade olmasına bakılır: düz bir duvar, gökyüzü ya da bulanık bir arka plan. Ayrıntılı ve çok renkli bölge metnin altına getirilmez. Telefonda görsel kenarlarından kırpıldığı için metnin altına başka bir bölge gelebilir. Elementor, arka plan konumunun telefon görünümü için ayrıca belirlenmesine izin verir. Gerekirse telefon için sade bölgesi ortada kalan ikinci bir görsel hazırlanır.
Görselin üstündeki metin kısa tutulur: birkaç sözcüklük bir başlık ve tek satırlık bir açıklama. Uzun paragraflar görselin üstüne yazılmaz. Yazı tipi ince değil, orta ya da kalın kesimde seçilir. Hafif bir yazı gölgesi harflerin kenarını zeminden ayırır. Düğmenin kendi düz zemin rengi bulunur. Görsel yüklenene kadar metin bölümün arka plan renginin üstünde durur; bu renk de koyu seçilir.
Erişilebilirlik ölçütleri, metin ile zemin arasında en düşük bir kontrast oranı tanımlar; büyük metin için bu oran daha düşüktür. PageSpeed Insights’ın otomatik denetimi, arka planı fotoğraf olan metinde oranı her zaman hesaplayamaz. Bu yüzden ölçüm elle yapılır: metnin arkasındaki en açık nokta renk seçiciyle alınır ve yazı rengiyle karşılaştırılır. Web tasarım kontrolünde kayan alanlar dahil bütün görseller telefonda ve masaüstünde ölçülür.
Sunucu Hatası Sayfası Nasıl Tasarlanır?
Sunucu hatası sayfası, sunucu ya da site yazılımı bir isteği karşılayamadığında gösterilen sayfadır. Bu durumda sunucu 500 ile başlayan bir durum kodu döndürür. Durum kodu, sunucunun her yanıtın başında gönderdiği sayıdır. 500 iç sunucu hatasını, 503 hizmetin geçici olarak kullanılamadığını bildirir. 404 sayfası tek bir adresin bulunamadığını söyler. Sunucu hatasında ise sitenin kendisi yanıt veremez.
Hata sırasında çalışmayan parça çoğu zaman veritabanı, bir eklenti ya da sitenin yazılımıdır. Veritabanı, sitenin yazılarını ve ayarlarını tutan bölümdür. Hata sayfası bu parçalara bağlı olursa o da açılmaz. Bu yüzden sayfa, sunucunun ayarlarında hata sayfası olarak tanımlanan düz ve tek bir dosya olarak hazırlanır. Logo ve renkler bu dosyanın içindedir; yazı tipi olarak cihazın kendi yazı tipi kullanılır.
Hata sayfası ekranda düzgün görünse de durum kodu 500 ile başlayan aralıkta kalır. Sayfa başarılı anlamına gelen 200 koduyla gelirse Google hata metnini sayfanın içeriği sayıp dizine alabilir. Google’ın durum kodları belgesine göre sunucu hataları, Googlebot’un taramayı geçici olarak yavaşlatmasına yol açar. Dizindeki adresler bir süre korunur; hata sürerse dizinden çıkarılabilir. Hatalı adresler ana sayfaya yönlendirilmez.
Başlık, ne olduğunu tek cümleyle bildirir: Sayfa şu anda açılamıyor. Altında sorunun geçici olduğunu söyleyen ve birkaç dakika sonra yeniden denemeyi öneren bir cümle yer alır. Sayfayı yeniden yükleyen bir düğme eklenir. Telefon numarası ve e-posta adresi metin olarak yazılır; telefonda numaraya dokununca arama başlar. Sayfaya form konmaz; sunucu çalışmadığı için gönderilen bilgi ulaşmaz.
Hata sayfası teknik ayrıntı göstermez. Sunucunun hata mesajı, dosya yolları ve yazılım sürümleri ziyaretçiye açılmaz; bu bilgiler saldırganın işine yarar. Ayrıntılar sunucunun hata günlüğüne yazılır. WordPress, bir eklenti ya da tema siteyi durdurduğunda yöneticiye kurtarma bağlantısı içeren bir e-posta gönderir. Bu bağlantıyla panele girilir ve sorunlu eklenti devre dışı bırakılır.
Hata sayfası canlı sitede değil, sitenin deneme kopyasında sınanır. Deneme kopyasında hata bilerek oluşturulur; sayfanın açıldığı ve doğru kodun döndüğü tarayıcının Ağ sekmesinden okunur. Çalışma süresi izleme hizmeti siteyi aralıklarla açar, hata alınca uyarı yollar. Search Console’un Tarama istatistikleri raporu sunucu yanıt sorunlarını gösterir. Web tasarım ile SEO ve yazılım aynı ekipte yürür; sayfa tasarımı, durum kodu ve izleme birlikte kurulur.
Üye giriş sayfam Google’da çıkıyor; bunu nasıl kaldırabilirim?
Giriş sayfasına SEO eklentinizden noindex ekleyin ve sayfayı XML site haritasından çıkarın. Sayfayı robots.txt ile engellemeyin; Google’ın noindex işaretini görebilmesi için sayfayı tarayabilmesi gerekir. Sayfa, Google onu yeniden taradıktan sonra sonuçlardan düşer. Sonucu Search Console’un URL denetimi ekranından takip edebilirsiniz.
Şubelerimden biri kapandı; o şubenin sayfasını ne yapmalıyım?
Sayfayı silip 404 hatasına bırakmayın. Adresi 301 yönlendirmeyle şubeler sayfasına ya da en yakın şubenin sayfasına bağlayın. Şubeyi menüden, şube listesinden ve iletişim formundaki seçimden kaldırın. Google İşletme Profili’nde o konumu kalıcı olarak kapandı diye işaretleyin.
Ana sayfa görselimdeki başlık telefonda zor okunuyor; ne yapabilirim?
Telefonda görsel kırpıldığı için başlığın altına daha açık bir bölge gelmiş olabilir. Elementor’da telefon görünümü için arka plan konumunu değiştirin ya da kaplama katmanını koyulaştırın. Bu yetmezse telefona özel ikinci bir görsel yükleyin. Sonra başlığın arkasındaki en açık noktada kontrastı yeniden ölçün.
Sitem ara sıra kritik hata uyarısı veriyor; bu ekranı değiştirebilir miyim?
Bu ekranı WordPress, bir eklenti ya da tema çalışmayı durdurduğunda gösterir. Ekran, sitenizin tasarımıyla hazırlanmış bir sayfayla değiştirilebilir; ama asıl iş nedeni bulmaktır. Yöneticiye gelen kurtarma e-postasındaki bağlantıyla sorunlu eklentiyi kapatın. Sayfanın durum kodunun 500 olarak kaldığını da kontrol edin.