Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sitenin farklı ekran boyutlarında nasıl göründüğünü ve sayfalar arasında nasıl gezinildiğini belirler: uzun sayfalarda gezinmeyi kolaylaştıran içindekiler ve bölüm bağlantıları, telefon yatay tutulduğunda görünümün denetlenmesi, dil seçicinin yeri ve biçimi ve ürün ile hizmet görsellerinde aynı en-boy oranının korunması.
Web Tasarım Uzun Sayfalarda Gezinmeyi Nasıl Kolaylaştırır?
Uzun sayfa, birkaç ekran boyunca devam eden içeriktir. Kapsamlı rehberler, ayrıntılı hizmet anlatımları, soru listeleri ve yasal metinler çoğunlukla bu uzunluktadır. Bu sayfalarda ziyaretçi aradığı bölümü bulmak, oraya geçmek ve geri dönmek ister. Web tasarım bu üç işi sayfaya eklenen araçlarla karşılar: içindekiler listesi, düzenli başlıklar, başa dön düğmesi ve açılır bölümler.
İçindekiler listesi, sayfanın başında, giriş paragrafından sonra durur. Listede sayfadaki ana başlıklar sırayla yer alır. Her madde, sayfa içi bağlantıyla kendi başlığına gider. Sayfa içi bağlantı, ziyaretçiyi aynı sayfanın belirli bir noktasına götüren bağlantıdır. Bunun için her başlığa kısa ve okunur bir kimlik verilir. Bu kimlik adres satırına eklendiği için bölümün adresi ayrıca paylaşılabilir.
Birinci düzey başlık sayfanın adıdır. Ana bölümler ikinci düzey, onların alt bölümleri üçüncü düzey başlık olarak işaretlenir ve sıra atlanmaz. Her başlık, altındaki metnin konusunu söyler. Başlık metni görselin içine gömülmez; sayfada yazı olarak durur. Ekran okuyucu, sayfanın içeriğini kullanıcıya sesli olarak aktaran bir programdır. Bu yazılımı kullananlar başlıklar arasında tek tuşla geçebilir. Paragraflar kısa tutulur ve bölümler arasında yeterli boşluk bırakılır.
Sayfa kaydırılırken üstte sabit kalan bir menü varsa, sayfa içi bağlantıyla gidilen başlık bu menünün altında kalabilir. Bu yüzden başlıklara, sabit menünün yüksekliği kadar üst pay tanımlanır. Masaüstünde içindekiler listesi yan sütunda sabit tutulabilir. Telefonda liste kapalı bir kutu olarak gelir ve dokunulunca açılır. Bağlantıya tıklanınca sayfa başlığa yumuşak bir hareketle kayar; cihazda hareketi azaltma ayarı seçilmişse doğrudan atlar.
Başa dön düğmesi, ziyaretçi sayfanın bir bölümünü geçtikten sonra ekranın alt köşesinde belirir. Düğme WhatsApp ya da arama düğmesinin üstüne binmez. Ekran okuyucuların seslendirdiği bir metin adı da bulunur. Soru listelerinde her cevap kapalı bir bölümde durur ve sorunun üstüne dokunulunca açılır. Kapalı bölümdeki metin sayfayla birlikte yüklendiği için Google tarafından okunabilir.
Web tasarım kontrolünde uzun sayfalar telefonda, tablette ve masaüstünde ayrı ayrı açılır. İçindekiler listesindeki her bağlantı denenir ve gidilen başlığın tam göründüğü kontrol edilir. Tarayıcının geri düğmesinin ziyaretçiyi listeye döndürdüğüne bakılır. GA4’ün geliştirilmiş ölçüm özelliğindeki kaydırma etkinliği, ziyaretçilerin sayfanın sonuna yaklaşıp yaklaşmadığını gösterir. Sonuçlar sayfa sayfa listelenir. Sorun bulunan sayfalar düzeltildikten sonra aynı denemeden yeniden geçirilir.
Sitenin Telefonda Yatay Tutulduğundaki Görünümü Nasıl Denetlenir?
Telefon yan çevrildiğinde ekran geniş ve alçak bir alana dönüşür. Tarayıcı sayfayı bu yeni genişliğe göre yeniden düzenler. Web tasarım denetimi bu görünümü dikey görünümden ayrı ele alır. Kontrol edilen üç şey vardır: içeriğin kesilmeden okunması, menüye ve düğmelere ulaşılması, sabit öğelerin ekranı kaplamaması. Her sayfa şablonu bu üç açıdan sınanır.
Duyarlı tasarım, sayfa düzeninin ekran genişliğine göre değişmesidir. Düzenin değiştiği genişliklere kırılma noktası denir. Yatay tutulan bir telefonun genişliği çoğu zaman tablet düzenine denk gelir. Bu durumda tablet için hazırlanmış düzen, tabletten çok daha alçak bir ekranda gösterilir. Yan yana duran bölümler sığar, ama dikey boşluklar ve büyük başlıklar ekranın tamamını doldurabilir.
En sık görülen sorun sabit öğelerdir. Üstte sabit duran menü ile altta sabit duran arama ya da WhatsApp çubuğu birlikte görünür. Alçak ekranda bu ikisi içerik için çok az yer bırakır. Ekran yüksekliğine göre ayarlanmış giriş alanı da kısalır; içindeki başlık ve düğme taşar. Açılır pencere ekrandan uzunsa kapatma düğmesi görünmez. Tam ekran açılan mobil menü kaydırılamıyorsa alttaki maddelere ulaşılamaz.
Çözümlerin çoğu ekran yüksekliğine bağlı kurallarla yapılır. Ekran alçaldığında sabit menü küçülür ya da sabitliği kalkar. Alt çubuk yalnızca simgelerle gösterilir. Giriş alanının yüksekliği ekrana göre değil, içindeki metne göre belirlenir. Açılır pencere ve mobil menü kendi içinde kaydırılabilir yapılır. Çentikli ekranlarda içerik, telefonun kenarlarda ayırdığı güvenli alanın içinde tutulur.
Erişilebilirlik ölçütleri, içeriğin zorunlu olmadıkça tek bir ekran yönüne kilitlenmemesini ister. Bu yüzden site, yatay tutulduğunda ziyaretçiden telefonu döndürmesini istemez. Formlar ayrıca denenir: yatay görünümde ekran klavyesi ekranın büyük bölümünü kaplar. Seçilen alanın klavyenin üstünde görünür kalması ve gönder düğmesine kaydırarak ulaşılabilmesi kontrol edilir. Klavye kapandığında sayfanın eski konumuna döndüğüne de bakılır. Videolar tam ekrana geçirilerek denenir.
Denetim iki yolla yapılır. Birincisi, tarayıcının geliştirici araçlarındaki cihaz görünümüdür; burada ekran yönünü tek tıklamayla değiştiren bir düğme bulunur. İkincisi, Android ve iOS işletim sistemli telefonlarla yapılan gerçek denemedir. Her sayfa şablonu, menü, form ve açılır pencere iki yönde açılır. Bulunan sorunlar ekran görüntüleriyle listelenir; düzeltmeler onayınızla aylık iş listesine girer.
Dil Seçici Sitede Nereye ve Nasıl Konur?
Dil seçici, ziyaretçinin bulunduğu sayfanın başka bir dildeki sürümüne geçmesini sağlayan bağlantı grubudur. Yalnızca sitenin çevrilmiş sürümleri varsa eklenir. Google’ın çok dilli sitelerle ilgili rehberi, dillerin her birinin ayrı bir adreste yayımlanmasını önerir. Bu adres çoğu zaman alan adının altında ayrı bir klasördür. Ziyaretçi ve Google, her dili bu adresten açar.
Dil seçici, başlık alanında, menünün sağ ucunda durur ve her sayfada aynı yerde bulunur. Ziyaretçi onu sayfanın en üstünde görür. Telefonda menü düğmesinin yanında kısa bir kısaltmayla ya da açılan menünün en üstünde gösterilir. Uzun bir menünün sonuna konmaz. Aynı seçici sayfa altında bir kez daha yer alabilir; sayfanın sonuna inen ziyaretçi de ona ulaşır.
Diller kendi adlarıyla yazılır: Türkçe, English, Deutsch. Ziyaretçi kendi dilinin adını bu biçimde tanır. Bayraklar tek başına kullanılmaz, çünkü bayrak bir ülkeyi gösterir, dili göstermez. Bir dil birkaç ülkede konuşulur, bir ülkede de birkaç dil konuşulabilir. O an seçili olan dil ayrıca işaretlenir. Her dil adı, ekran okuyucunun doğru seslendirmesi için kendi dil bilgisiyle işaretlenir.
Seçicideki her bağlantı, aynı sayfanın öteki dildeki karşılığına gider; o dilin ana sayfasına gitmez. Çevirisi bulunmayan sayfalarda o dil seçicide yer almaz. Google’ın rehberi, ziyaretçinin dilini tahmin edip onu kendiliğinden başka bir sürüme yönlendirmemeyi önerir. Bu tür yönlendirmeler hem ziyaretçinin hem Google’ın bütün sürümleri görmesini engelleyebilir. Bu yüzden dil seçimi ziyaretçiye bırakılır.
Seçicinin bağlantıları, Google’ın izleyebileceği normal bağlantılardır. Google, yalnızca adres taşıyan bağlantıları izleyebildiğini belirtir; yalnızca JavaScript ile çalışan bir açılır liste bu koşulu karşılamayabilir. Sayfalarda ayrıca hreflang işaretleri bulunur. Bu işaretler, sayfanın hangi dilde olduğunu ve öteki dillerdeki karşılıklarının adreslerini bildirir. WordPress’te bu yapı bir çeviri eklentisiyle kurulur; eklenti seçiciyi ve işaretleri birlikte üretir.
Web tasarım teslimi öncesinde her dildeki her sayfanın seçicisi tek tek denenir. Bağlantının doğru karşılığa gittiği, seçili dilin işaretlendiği ve telefonda seçiciye ulaşılabildiği kontrol edilir. Eklentinin ürettiği hreflang işaretlerinin karşılıklı olduğuna, yani her sürümün ötekini gösterdiğine bakılır. Makineyle çevrilmiş metinler yayımlanmadan önce o dili bilen bir kişi tarafından okunur. Her dil sürümünün dizin durumu, Search Console’un Sayfa dizine ekleme raporundan izlenir.
Ürün ve Hizmet Görsellerinde Aynı Oran Nasıl Korunur?
En-boy oranı, bir görselin genişliği ile yüksekliği arasındaki ilişkidir. Görsel kare, yatay ya da dikey olabilir. Ürün ve hizmet görselleri sitede çoğunlukla yan yana kartlarda, liste sayfalarında ve galerilerde gösterilir. Oranlar karışık olursa kart yükseklikleri birbirini tutmaz ve satırlar düzensiz görünür. Bu yüzden her kullanım alanına bir oran atanır ve bütün görseller ona göre hazırlanır.
Oran, görselin gösterileceği alana göre seçilir. Liste ve kart görsellerinde çoğunlukla kare oran kullanılır; kare görsel dar ve geniş ekranda aynı biçimde kalır. Ayrıntı sayfasındaki ana görsel için yatay ya da kare oran seçilebilir. Galeride küçük önizlemeler tek orana kırpılır, büyük görünüm ise görselin tamamını gösterir. Seçilen oranlar bir tabloya yazılır.
Hazırlık çekimle başlar. Konu kadrajın ortasına alınır ve kenarlarda kırpma için boşluk payı bırakılır. Arka plan bütün görsellerde aynı renkte ve sade tutulur. Konunun görsel içindeki büyüklüğü de görselden görsele değişmez. Görseller bir düzenleme programında aynı ölçülere toplu olarak kırpılır. Dosyalar WebP biçiminde kaydedilir; bu biçim dosya boyutunu çoğu zaman küçültür.
Bazı konular kare bir kutuya sığmaz; dikey ya da çok geniş çekilmiş bir görsel kırpıldığında önemli bir kısmı kesilebilir. Bu görseller için iki yol vardır. Birincisinde görsel kutuyu dolduracak biçimde kırpılır. İkincisinde görsel kutunun içine bütünüyle sığdırılır ve boş kalan kenarlar arka planla aynı renkte bırakılır. Aynı listede yalnızca bir yol kullanılır.
WordPress, bir görsel yüklendiği anda onun birkaç farklı boyutta kopyasını oluşturur. WooCommerce kullanılan sitelerde ürün görsellerinin kırpma biçimi, Özelleştirici’deki ürün görselleri ayarından seçilir: kare, özel oran ya da kırpmasız. Bu ayar sonradan değiştirilirse eski görsellerin kopyaları yeniden üretilir. Tarayıcının görsele baştan yer ayırması için görselin ölçüleri sayfaya eklenir. Böylece metin aşağı itilmez ve Core Web Vitals’ın CLS ölçüsü yükselmez.
Her görsele, ne gösterdiğini yazıyla anlatan alternatif metin eklenir. Web tasarım işinin son adımında liste sayfaları dar, orta ve geniş ekranda görüntülenir; kartların aynı yükseklikte durduğu kontrol edilir. Ortam kütüphanesindeki görseller oran ve boyutlarıyla bir tabloya alınır; orana uymayanlar yeniden kırpılır. Sonradan eklenecek görseller de aynı tabloya göre hazırlanır. Seçilen oran böylece yeni görsellerde de korunur.
İçindekiler listesini her yazıya elle mi eklemem gerekiyor?
Gerekmez. Elementor Pro’nun içindekiler bileşeni ya da bir içindekiler eklentisi, listeyi sayfadaki başlıklardan kendiliğinden oluşturur. Ayarlarda hangi başlık düzeylerinin listeye gireceği seçilir. Liste başlıklardan üretildiği için başlıkların sırayla ve doğru düzeyde işaretlenmesi gerekir. Başlık değiştiğinde liste de kendiliğinden güncellenir.
Telefonumu yan çevirince sitemdeki yazılar birden büyüyor; bunun nedeni nedir?
Bazı mobil tarayıcılar, telefon yan çevrildiğinde yazı boyutunu kendiliğinden büyütür. Sitenin stil kurallarına eklenen bir ayar bu otomatik büyütmeyi kapatır. Bu ayar, ziyaretçinin iki parmakla yakınlaştırma yapmasını engellemez. Yakınlaştırma erişilebilirlik için açık bırakılır; yazı boyutu ise her ekran genişliği için ayrıca belirlenir.
Siteme dil seçici eklendi; sayfa başlıkları ve açıklamalar da çevrilmeli mi?
Evet. Her dil sürümünün sayfa başlığı ve arama sonucunda görünen açıklaması o dilde yazılır. Çeviri eklentileri, SEO eklentisiyle uyumlu çalıştığında bu alanları her dil için ayrı tutar. Sayfa adresindeki sözcükler de çevrilebilir. Görsellerin alternatif metinleri ve sosyal medya paylaşım metinleri de aynı dile çevrilir.
Görsellerimi telefonla çekiyorum; aynı oranı korumak için çekimde nelere dikkat etmeliyim?
Kamerayı sitede kullanılan orana ayarlayın ya da biraz geniş çekip kırpma payı bırakın. Kılavuz çizgilerini açıp konuyu ortaya alın. Yakınlaştırma yerine telefonu konuya yaklaştırın. Her çekimde aynı uzaklığı, aynı ışığı ve aynı arka planı kullanın; böylece konunun görseldeki büyüklüğü değişmez.