Anasayfa  ›  Web Tasarım

Web Tasarım

Web tasarım, sitenin düzenini, hızını ve yönetimini birlikte planlar: hizmet sayfalarındaki bölümlerin ve sıralarının kurulması, sayfa ağırlığının, yani görsel ve kod yükünün tasarım aşamasında sınırlanması, yönetim panelinde kullanıcı yetkilerinin dağıtılması ve site yayına alındıktan sonra güncelleme, yedek ve güvenlik kontrollerini kapsayan düzenli bakım.

Telefon ekranı: Web Tasarım

Web Tasarım Çalışmasında Hizmet Sayfalarının Düzeni Nasıl Kurulur?

Hizmet sayfası, işletmenin verdiği tek bir hizmeti anlatan ayrı sayfadır. Web tasarım çalışmasında her hizmet için bir sayfa açılır ve bu sayfaların hepsi aynı iskeleti kullanır. İskelet; sayfa adresi, başlık, giriş bölümü, kapsam, işleyiş, sık sorulan sorular ve iletişim çağrısından oluşur. Ortak iskelet, ziyaretçinin her hizmet sayfasında bilgiyi aynı yerde bulmasını sağlar.

Adres yapısı bir üst sayfaya bağlanır. Bütün hizmetleri listeleyen bir Hizmetler sayfası açılır. Her hizmet sayfasının adresi, bu sayfanın adresinin devamı olarak kurulur ve son bölümünde hizmetin adı yer alır. Adreste Türkçe karakter yerine sade harf, sözcükler arasında tire kullanılır. Hizmetler sayfası her hizmete kısa bir açıklama ve bağlantı verir. Google bütün hizmet sayfalarına bu tek giriş noktasından ulaşabilir.

Sayfa başlığı, arama sonucunda çoğunlukla mavi satır olarak görünen metindir ve her hizmet sayfasında farklı yazılır. Başlıkta önce hizmetin adı, sonra işletmenin adı yer alır. Sayfanın ana başlığı hizmetin adını açıkça söyler. Ana başlık sayfada bir kez kullanılır; alt bölümler ara başlıklarla ayrılır. Giriş bölümü iki üç cümleyle hizmetin ne olduğunu, kime ve nerede verildiğini anlatır.

Girişin altında bölümler sabit bir sırayla gelir. Kapsam bölümü hizmetin neleri içerdiğini ve neleri içermediğini maddeler hâlinde yazar. İşleyiş bölümü hizmetin adımlarını sırasıyla anlatır. Sık sorulan sorular bölümü, hizmetle ilgili gerçek soruları kısa cevaplarla toplar. Sayfanın ortasında ve sonunda telefon, WhatsApp ya da form ile iletişime geçme seçeneği bulunur. Telefonda bölümler aynı sırayla alt alta dizilir.

Hizmet sayfaları birbirine iç bağlantılarla bağlanır. İç bağlantı, aynı sitenin iki sayfası arasında kurulan bağlantıdır. İçerik haritası, sayfanın üstünde Ana Sayfa › Hizmetler › hizmetin adı sırasıyla görünen yol satırıdır. Hizmet ve içerik haritası bilgisi yapılandırılmış veriyle de işaretlenir. Yapılandırılmış veri, bu bilgiyi Google’a etiketli olarak bildiren ek koddur. İşaretleme Zengin Sonuçlar Testi ile denetlenir.

İki hatadan kaçınılır. Birincisi, aynı hizmet için yalnızca ilçe adı değişen çok sayıda sayfa açmaktır; Google bu düzeni kapı sayfası olarak tanımlar ve spam politikalarında sayar. İkincisi, iki hizmet sayfasının aynı aramayı hedeflemesidir; bu durumda Google ikisinden birini seçer. Web tasarım sürecinde sayfa listesi ve her sayfanın hedef araması, onayınızdan geçen aylık iş listesinde yer alır.

Sayfa Ağırlığı Tasarım Aşamasında Nasıl Sınırlanır?

Sayfa ağırlığı, bir sayfanın açılması için tarayıcının indirdiği bütün dosyaların toplam boyutudur. Bu dosyalar sayfanın kendisi, stil dosyaları, JavaScript dosyaları, görseller, yazı tipleri ve videolardır. Ağırlık arttıkça sayfa özellikle mobil bağlantıda daha geç açılır. Bu yüzden sınır, sayfa çizilmeden önce belirlenir ve her tasarım kararı bu sınıra göre verilir. Bu sınıra performans bütçesi denir.

Performans bütçesi, dosya türlerine göre ayrı ayrı yazılır: görseller, yazı tipleri ve JavaScript için birer pay. LCP, INP ve CLS, Google’ın Core Web Vitals adını verdiği hız ve kararlılık değerleridir. Bütçe, bu değerleri Google’ın iyi saydığı aralıkta tutacak biçimde kurulur. LCP, en büyük görsel ya da metin bloğunun ekranda belirdiği anı ölçer. Ağır bir ana görsel bu değeri geciktirir.

Görsel kararları tasarım dosyasında verilir. Fotoğraflarda AVIF ya da WebP biçimi kullanılır; bu biçimler görüntüyü daha az veriyle taşır. Her görsel, gösterileceği alanın boyutunda kaydedilir ve telefon için ayrıca küçük bir kopyası üretilir. Ekranın ilk görünen bölümü dışındaki görseller geç yüklemeyle, yani ziyaretçi o bölüme yaklaştığında indirilir. Ana görsel geç yüklemeye bırakılmaz; aksi hâlde LCP gecikir.

Yazı tipleri de ağırlığa eklenir. Bir yazı tipi ailesinin her kalınlığı ayrı dosya olarak indirilir. Tasarımda bu yüzden bir ya da iki aile ve sınırlı sayıda kalınlık seçilir. Dosyada yalnızca gereken harf kümesi bırakılır. Dosyalar başka bir sunucudan çağrılmaz; site onları kendi sunucusundan sunar. Yükleme bitene kadar metin sistem yazı tipiyle gösterilir; böylece ziyaretçi boş bir alan görmez.

JavaScript, sayfayı tarayıcıda çalışan küçük programlarla hareketlendiren dildir. Kayan görsel alanları, açılır pencereler, sohbet kutuları ve dış hizmetlerin izleme kodları JavaScript yükler. Bu kodlar sayfanın tepki süresini ölçen INP değerini de etkiler. Tasarımda her etkileşimli öğenin ekleyeceği dosya bütçeden düşülür. WordPress’te kullanılmayan eklentiler kaldırılır; arka planda oynayan video yerine sabit bir görsel konur.

Sınır, tasarım yayına girmeden önce ölçülerek doğrulanır. PageSpeed Insights, sayfanın toplam ağ yükünü ve en büyük dosyaları listeler. Chrome geliştirici araçlarındaki Ağ paneli her dosyanın boyutunu tek tek gösterir. Yayından sonra gerçek ziyaretçi verisi, Search Console’un Deneyim bölümündeki Core Web Vitals raporunda izlenir. SEO, web tasarım ve yazılımı tek ekipte yürüttüğümüz için bütçeyi aşan bir öğe kod yazılmadan önce değiştirilir.

Yönetim Panelinde Kullanıcı Yetkileri Nasıl Dağıtılır?

Yönetim paneli, sitenin içeriğinin ve ayarlarının değiştirildiği giriş gerektiren bölümdür. WordPress’te panele giren her kişiye bir rol atanır. Rol, o kişinin hangi işlemleri yapabileceğini belirleyen yetki paketidir. Yetki dağıtımının temel kuralı en az yetki ilkesidir: herkes yalnızca kendi işini yapmaya yetecek rolü alır. Böylece bir hesap ele geçirilirse verilebilecek zarar sınırlı kalır.

WordPress beş hazır rolle gelir. Yönetici her şeyi yapabilir: eklenti ve tema kurar, kullanıcı ekler, ayarları değiştirir. Editör bütün yazıları ve sayfaları düzenleyip yayımlar, ama ayarlara giremez. Yazar yalnızca kendi yazılarını yazar ve yayımlar. İçerik sağlayıcı yazı hazırlar, ancak yayımlayamaz; yazısı onay bekler. Abone yalnızca kendi profilini görür. Roller, panelde Kullanıcılar ekranından atanır ve değiştirilir.

Dağıtım, sitede kimin ne iş yaptığına göre yapılır. Yönetici rolü bir ya da iki kişide kalır. İçerik ekleyen çalışanlar Editör ya da Yazar rolü alır. Dışarıdan yazı gönderen kişiye İçerik sağlayıcı rolü verilir; yazı editör onayından geçmeden yayımlanmaz. Eklentilerin eklediği özel roller varsa, her birinin hangi ekranlara eriştiği ayrıca kontrol edilir. SEO eklentisinin ayarları da yalnızca yetkili rollere açık tutulur.

Her kişi kendi hesabıyla girer; ortak kullanılan tek bir yönetici hesabı açılmaz. Ortak hesapta hangi değişikliği kimin yaptığı anlaşılamaz ve ayrılan biri girişi sürdürebilir. Her hesap güçlü ve yalnızca bu siteye ait bir parolayla korunur. Yönetici ve editör hesaplarında bir güvenlik eklentisiyle iki adımlı doğrulama açılır. Bu yöntemde parolaya ek olarak telefondaki uygulamanın ürettiği tek kullanımlık kod istenir.

Hesaplar düzenli aralıklarla gözden geçirilir. Kullanıcılar ekranında her hesabın rolü ve e-posta adresi listelenir. İşten ayrılan kişinin hesabı silinmeden önce içerikleri başka bir kullanıcıya aktarılır; WordPress silme sırasında bunu sorar. Dış uygulamalara verilen uygulama parolaları da profil ekranında kontrol edilir. Etkinlik günlüğü eklentisi, hangi kullanıcının hangi sayfayı ne zaman değiştirdiğini kaydeder. Bu kayıt, beklenmedik bir değişikliğin kaynağını bulmayı kolaylaştırır.

Yetki konusu WordPress paneliyle bitmez. Barındırma paneli, yani sunucunun yönetim ekranı, alan adı hesabı, Search Console ve GA4 de kendi kullanıcı düzeylerine sahiptir. Search Console’da sahip, tam yetkili ve kısıtlı kullanıcı düzeyleri bulunur; kısıtlı kullanıcı verileri görür, ayar değiştiremez. Bu hesapların sahipliği işletmenin kendi e-posta adresinde tutulur. Web tasarım çalışmasında hesaplarda bulunan yetki fazlalıkları inceleme raporuna yazılır.

Site Yayına Alındıktan Sonra Düzenli Bakımda Neler Yapılır?

Bakım, yayındaki sitenin güvenli, hızlı ve çalışır durumda kalması için belli aralıklarla yapılan işlerin bütünüdür. WordPress çekirdeği, yani sitenin temel yazılımı, tema ve eklentiler sürekli yeni sürümlerle güncellenir. Güncellenmeyen yazılımdaki bilinen güvenlik açıkları, sitenin ele geçirilmesine yol açabilir. Bakım bu yüzden yedekleme, güncelleme, izleme ve kontrol başlıklarına ayrılır ve her başlık bir takvime bağlanır.

İlk iş yedektir. Yedek, sitenin dosyalarının ve veritabanının belirli bir andaki kopyasıdır. Veritabanı yazıları, sayfaları, ayarları ve form kayıtlarını tutar. Yedekler sitenin bulunduğu sunucudan ayrı bir yerde saklanır; sunucu arızalanırsa yedek de kaybolmaz. Bir yedeğin işe yaradığı, ancak geri yüklenerek anlaşılır. Bu yüzden yedek, zaman zaman bir test kopyasına geri yüklenip denenir.

İkinci iş güncellemedir. Güncellemeden önce yedek alınır. Büyük güncellemeler önce test kopyasında, yani ziyaretçiye kapalı bir deneme sitesinde uygulanır. Orada formlar, menüler, iletişim düğmeleri ve sayfa düzeni kontrol edilir. Sorun yoksa aynı güncelleme yayındaki siteye uygulanır. Bir eklentinin geliştiricisi güncelleme yayımlamayı bırakmışsa, o eklentinin yerine bakımı süren bir seçenek aranır. Sunucu yazılımının sürümü de barındırma panelinden izlenir.

Üçüncü iş izlemedir. Erişim izleme hizmeti siteyi düzenli aralıklarla açmayı dener ve site yanıt vermediğinde e-posta gönderir. Güvenlik eklentisi dosyalarda beklenmeyen değişiklikleri ve başarısız giriş denemelerini kaydeder. SSL sertifikası, ziyaretçiyle site arasındaki bağlantıyı şifreleyen belgedir; süresi dolmadan yenilenir. Alan adının yenileme tarihi de takvimde tutulur. Süresi dolan alan adı, sitenin tamamen kapanmasına yol açar.

Dördüncü iş kontroldür. Search Console’da Dizine ekleme bölümündeki Sayfalar ekranı, Google’ın dizine alamadığı adresleri nedenleriyle listeler. Bulunamayan sayfalar, yani 404 hatası veren adresler burada görünür; adresi değişen sayfa için kalıcı yönlendirme (301 yönlendirmesi) kurulur. Core Web Vitals raporu hızdaki gerilemeyi gösterir. İletişim formu ayda bir doldurulup gönderilir ve iletinin e-posta kutusuna ulaştığı denetlenir.

Bunlara ek olarak kullanılmayan eklenti ve temalar silinir. Silinmeden önce eklentinin başka bir özelliğe bağlı olmadığı kontrol edilir. Spam yorumlar temizlenir, veritabanında biriken eski sayfa sürümleri azaltılır ve kullanıcı listesi gözden geçirilir. Web tasarım çalışması teslim edildikten sonra bakımda görülen hız ya da dizin sorunları, onayınızla aylık iş listesine eklenir. Yapılan güncellemeler ve bulunan hatalar tek sayfalık aylık raporda listelenir.

Sıkça Sorulan Sorular

Kullanmayın. Yalnızca adı değişen sayfaları Google yinelenen içerik olarak görür ve çoğunlukla aralarından yalnızca birini gösterir. Her sayfanın giriş, kapsam ve işleyiş bölümleri o hizmete özgü yazılır. İletişim bilgileri ve çağrı düğmeleri sayfalar arasında ortak kalabilir. Search Console’daki URL Denetimi, Google’ın hangi sayfayı standart sürüm seçtiğini gösterir.

Chrome’da sayfayı açın, sağ tıklayıp İncele’yi seçin ve Ağ paneline geçin. Sayfayı yenilediğinizde alt satırda aktarılan toplam veri ve dosya sayısı görünür. Önbelleği devre dışı bırak kutusunu işaretlerseniz ilk ziyaretteki ağırlığı görürsünüz. PageSpeed Insights da en büyük dosyaları ayrıca listeler.

Çalışanınız yazıları ve sayfaları kendisi yayımlayacaksa Editör, yalnızca kendi yazılarını yayımlayacaksa Yazar rolü yeterlidir. Yayından önce sizin onayınızı istiyorsanız İçerik sağlayıcı rolünü verin. Yönetici rolü eklenti kurma ve kullanıcı ekleme yetkisi de taşıdığı için içerik işi için verilmez.

Küçük güvenlik güncellemelerinde otomatik güncelleme açıkları hızlı kapatır; WordPress çekirdeğinin küçük sürümleri zaten kendiliğinden yüklenir. Sayfa düzenini etkileyen büyük eklentilerde ise güncelleme önce test kopyasında denenir. Otomatik güncellemeyi açtığınız eklentilerde günlük yedek ve erişim izleme bulunmalıdır; bir sorun olursa son yedeğe dönülür.

Size daha iyi bir deneyim sunabilmek için sitemizde çerez kullanıyoruz. Dilerseniz inceleyebilirsiniz.

Size daha iyi bir deneyim sunabilmek için sitemizde çerez kullanıyoruz. Dilerseniz inceleyebilirsiniz.