Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfaların okunmasını, menüleri ve düğmelerin çalışmasını planlar: yazı ile zemin arasındaki renk farkının denetlenmesi, sayfa başına dön düğmesinin hangi sayfalarda kullanılacağı, telefonda açılan menünün nasıl kapanacağı ve fareyle üzerine gelince açılan öğelerin dokunmatik ekranda çalışması.
Web Tasarım Sürecinde Yazı ile Zemin Arasındaki Renk Farkı Nasıl Denetlenir?
Yazı ile zemin arasındaki renk farkına kontrast denir. Kontrast, iki rengin göreli parlaklıkları karşılaştırılarak bir oranla ifade edilir. Oran büyüdükçe yazı zeminden daha belirgin ayrılır. Renklerin tonu tek başına belirleyici değildir; kırmızı yazı yeşil zemin üzerinde düşük oran verebilir. Web tasarım sürecinde kontrast üç aşamada denetlenir: renk paleti kurulurken, şablonlar hazırlanırken ve sayfalar yayına alınmadan önce.
Erişilebilirlik yönergeleri bu oran için alt sınırlar tanımlar. Paragraflardaki normal boy yazı için bir sınır vardır. Büyük ve kalın yazılarda daha düşük bir sınır yeterli sayılır. Daha üst bir uyum düzeyi için daha yüksek oranlar istenir. Simgeler, form alanlarının çerçeveleri ve klavye odağını gösteren çizgi için ayrı bir sınır bulunur. Logolar ve devre dışı öğeler bu kuralın dışındadır.
Denetim renk paletiyle başlar. Paletteki her yazı rengi, kullanılacağı her zemin rengiyle eşleştirilir ve oranı hesaplanır. Sınırı geçen eşler bir tabloya yazılır ve sayfalar yalnızca bu eşlerle kurulur. Kurumsal renk beyaz yazıyla yeterli oran vermiyorsa düğmeler için aynı rengin koyu bir tonu üretilir. Elementor’da bu renkler Site Ayarları içindeki Global Renkler bölümünde tek yerden tanımlanır.
Sayfalar kurulduktan sonra ölçüm araçlarla yapılır. PageSpeed Insights’ın Erişilebilirlik başlığı altında, ön plan ve arka plan renkleri arasında yeterli oran bulunmayan öğeler listelenir. Chrome’un geliştirici araçları, yani tarayıcıdaki inceleme paneli, seçilen bir yazının oranını renk seçicide verir. Yazının arkasında fotoğraf, renk geçişi ya da video varsa araçlar oranı hesaplayamayabilir. Bu alanlarda ölçüm, zeminin en açık noktasından elle alınır.
Bir öğe birkaç durumda ayrı ayrı ölçülür. Bunlar normal hâl, fareyle üzerine gelme, klavyeyle seçilme ve ziyaret edilmiş bağlantı hâlidir. Form alanlarının içindeki soluk örnek metin ve kırmızı hata mesajları da ölçülür. Yarı saydam yazının rengi zeminle karışır; ölçüm bu karışık renkle yapılır. Paragraf içindeki bağlantılar renk farkının yanında alt çizgi de taşır.
Denetim telefon ve masaüstü görünümünde, her şablon için ayrı yapılır. Şablonlar üst menü, sayfa altı, kartlar, formlar, düğmeler ve blog yazısıdır. Her bulgu öğenin adı, yazı rengi, zemin rengi ve yapılan düzeltmeyle bir listeye girer. Palette bir renk değiştiğinde bütün eşler yeniden hesaplanır. SEO ile web tasarım tek ekibin işi olduğundan bu liste PageSpeed Insights bulgularıyla birlikte tutulur.
Sayfa Başına Dön Düğmesi Ne Zaman Kullanılır?
Sayfa başına dön düğmesi, ziyaretçiyi tek dokunuşla sayfanın en üstüne, menünün bulunduğu yere götüren küçük bir düğmedir. Ziyaretçi sayfada belirli bir mesafe aşağı indikten sonra ekranın alt köşesinde görünür. Simgesi çoğunlukla yukarıyı gösteren bir oktur. Kullanılıp kullanılmayacağı sayfanın uzunluğuna bağlıdır. Ölçü telefondaki görünümdür; dar ekranda aynı içerik çok daha uzun bir sayfa oluşturur.
Düğme, telefonda birkaç ekran boyunca süren sayfalarda kullanılır. Kapsamlı rehberler, uzun soru listeleri, yasal metinler ve blog yazıları bu gruba girer. Bir iki ekranlık sayfalarda düğme konmaz; ziyaretçi kısa bir kaydırmayla zaten başa döner. Sayfanın üst menüsü kaydırma sırasında ekranda sabit kalıyorsa düğmeye duyulan ihtiyaç da azalır. Bu karar sayfa şablonlarının her biri için ayrıca verilir.
Düğme ekranın alt köşelerinden birinde sabit durur. Aynı köşede WhatsApp düğmesi, çerez bildirimi ya da canlı destek simgesi olabilir. Bu durumda öğeler üst üste binmeyecek biçimde aralıklı dizilir. Telefonda düğme, ekranın alt kenarındaki tarayıcı çubuğuna da yapışmaz. Düğme okunan metnin ya da form alanlarının üstünü kapatmaz. Simgesi zeminden ayırt edilir; erişilebilirlik yönergeleri metin dışındaki öğeler için de yeterli kontrast ister.
Düğme sayfanın en üstündeyken gizli kalır ve ziyaretçi aşağı indikçe yumuşak bir geçişle belirir. Görünmeye başladığı nokta genellikle telefonda bir ekran boyu kaydırmanın ardındadır. Sabit konumda durduğu için belirmesi sayfadaki öğeleri yerinden oynatmaz. Düğmeye basıldığında sayfa yukarı doğru akarak kayar. Cihazında hareketleri azaltma tercihini açan ziyaretçide bu akış yapılmaz; sayfa doğrudan en üste geçer.
Düğmenin ekran okuyuculara okunan bir adı vardır: “Sayfa başına dön”. Ekran okuyucu, ekrandaki yazıyı seslendiren programdır. Düğme bir bağlantı ya da gerçek bir düğme öğesi olarak kurulur. Düğmeye klavyeyle de ulaşılır ve Enter tuşuyla çalışır. Basıldıktan sonra klavye odağı da sayfanın başına taşınır; erişilebilirlik yönergeleri odağın mantıklı bir sırayla ilerlemesini ister. Dokunma alanı simgeden geniştir; parmakla ilk denemede seçilir.
Düğmenin kullanımı Google Analytics 4’te, kısaca GA4’te ölçülebilir. Her basış, sitenin ölçüm kodlarını tek yerden yöneten Google Etiket Yöneticisi ile tanımlanan bir etkinlik olarak kaydedilir. Etkinlik GA4’ün Etkinlikler raporunda düğmenin adıyla görünür. Uzun bir sayfada bu etkinlik hiç görülmüyorsa düğmenin yeri ve görünürlüğü yeniden denenir. Web tasarım planında düğmenin hangi şablonlarda yer alacağı sayfanın çeşidine göre yazılır.
Telefonda Açılan Menünün Kapanması Nasıl Tasarlanır?
Telefonda açılan menü, ekranın bir bölümünü ya da tamamını kaplayan bir paneldir. Kapanma tasarımı, ziyaretçinin bu panelden sayfaya hangi yollarla döneceğini belirler. Beş yol tanımlanır: kapatma düğmesi, panelin dışına dokunma, bir bağlantı seçme, klavyedeki Escape tuşu ve telefonun geri hareketi. Her yolun çalıştığı ayrı ayrı denenir. Bağlantı dışındaki yollar sayfayı aynı hâle getirir: menü kapalı, sayfa menü açılmadan önceki yerinde.
Kapatma düğmesi, menüyü açan düğmenin yerinde durur; menü açılınca simgesi çarpı işaretine döner. Simgenin yanında Kapat yazısı ya da ekran okuyucuya okunan bir ad bulunur. Düğmenin rengi panelin zemininden ayırt edilir. Panel uzunsa ve içinde kaydırma yapılıyorsa düğme panelin üstünde sabit kalır. Dokunma alanı küçük simgeden daha geniş tutulur; ziyaretçi düğmeyi ilk dokunuşta bulur.
Panel ekranın tamamını kaplamıyorsa arkadaki sayfa yarı saydam koyu bir katmanla örtülür. Bu katmana dokunmak menüyü kapatır. Başka bir sayfaya giden bağlantı seçildiğinde yeni sayfa menü kapalı açılır. Aynı sayfadaki bir bölüme giden bağlantıda ise menünün kendini kapatması ayrıca kurulur. Bu kurulmazsa sayfa bölüme kayar ama panel açık kalır ve bölümün üstünü örter.
Telefonların geri hareketi varsayılan olarak menüyü değil, sayfanın kendisini geride bırakır. Ziyaretçi menüyü kapatmak isterken önceki sayfaya döner. Bu davranış istenmiyorsa menü açılırken tarayıcı geçmişine bir adım eklenir; geri hareketi önce bu adımı kapatır. Hangi davranışın seçildiği tasarım aşamasında yazılı olarak belirlenir. Bu çözüm her temada hazır gelmez ve gerçek bir telefonda denenmeden yayına alınmaz.
Menü açıkken klavye odağı panelin içinde kalır; arkadaki sayfanın bağlantılarına geçmez. Odak sırası, panelin üstündeki kapatma düğmesinden başlar. Escape tuşuna basıldığında panel kapanır ve klavye odağı menüyü açan düğmeye geri gelir. Düğme, menünün açık mı kapalı mı olduğunu ekran okuyuculara bildirir. Erişilebilirlik yönergeleri, klavyeyle açılan bir alandan klavyeyle çıkılabilmesini ister. Panel açıkken alttaki sayfa kaydırılamaz.
Kapanma hareketi kısa tutulur; hareketleri azaltma tercihi açık cihazlarda panel hareketsiz kapanır. Kapanan panel yalnızca saydamlaştırılarak gizlenmez. Saydam ama yerinde duran bir panel, altındaki bağlantılara gelen dokunuşları yakalar ve sayfa tıklanmaz hâle gelir. Web tasarım denetiminde her kapanma yolu gerçek bir telefonda, dikey ve yatay konumda tek tek denenir. Elementor’un menü bileşenindeki telefon ayarları da ayrıca kontrol edilir.
Fareyle Üzerine Gelince Açılan Öğeler Telefonda Nasıl Çalışır?
Üzerine gelince açılan öğeler, fare imleci üstlerine geldiğinde görünen içeriklerdir. Açılır alt menüler, açıklama kutucukları ve görselin üstünde beliren yazı ya da düğmeler bu türdendir. Dokunmatik ekranda fare imleci yoktur; telefon ve tablet ziyaretçileri bu içerikleri ancak dokunarak açabilir. Tarayıcılar ilk dokunuşu bazen üzerine gelme, bazen tıklama sayar. Bu davranış tarayıcıdan tarayıcıya değiştiği için tasarım ona dayandırılmaz.
En sık sorun alt menülerde görülür. Ana menü öğesi hem bir sayfaya bağlantı hem de alt menünün açıcısı olabilir. Bu durumda dokunuş çoğu zaman doğrudan o sayfayı açar. Alt menü hiç görülmez. Çözüm, alt menüyü açan ayrı bir ok düğmesidir; ana öğe bağlantı olarak kalır. Telefon görünümünde bu menüler, açılıp kapanan bölümler olarak telefon menüsünün içine taşınır.
Görselin üstünde beliren başlık ve düğmeler telefonda sürekli görünür hâle getirilir. Bu öğeler görselin altına ya da görselin üstündeki koyu bir şeride yerleşir. Açıklama kutucuğu yalnızca üzerine gelince çıkıyorsa telefonda dokununca açılır; ikinci dokunuşla ya da başka bir yere dokununca kapanır. Kısa açıklamalar ise kutucuğa konmadan doğrudan metnin içine yazılır.
Erişilebilirlik yönergeleri bu öğeler için üç koşul tanımlar. Beliren içerik, imleç yerinden oynatılmadan kapatılabilir; Escape tuşu bu iş için kullanılır. İmleç içeriğin üzerine taşındığında içerik kaybolmaz. İçerik, ziyaretçi kapatana ya da odak başka bir öğeye geçene kadar görünür kalır. Kendiliğinden kaybolan bir açıklama kutucuğu bu koşulu karşılamaz. Aynı içeriğe yalnızca fareyle değil, klavye odağıyla da ulaşılır.
Tarayıcı, cihazın fareyle üzerine gelmeyi destekleyip desteklemediğini sayfaya bildirebilir. Bu bilgi tarayıcının kendi özelliğidir; sayfaya ek bir program yüklenmesini gerektirmez. Tasarım bu bilgiye göre iki davranış tanımlar: fareli cihazda üzerine gelince açılma, dokunmatik cihazda dokununca açılma. Elementor’da üzerine gelme ayarları masaüstü görünümüne bağlanır. Telefon ve tablet görünümü için öğelerin sürekli görünür kalacağı ayarlar ayrıca yapılır.
Bilgisayardaki telefon görünümü dokunma davranışını tam yansıtmayabilir. Bu yüzden denetim gerçek bir telefonda ve tablette yapılır. Ardından aynı öğeler fareyle ve yalnızca klavyeyle denenir. Web tasarım listesinde sitedeki her açılan öğe, fareli ve dokunmatik cihazdaki davranışıyla birlikte yazılır. Davranışı iki cihazda farklı olan öğeler ayrıca işaretlenir. Liste, siteye yeni bir açılır öğe eklendiğinde güncellenir.
Bir yazının zeminden yeterince ayrıldığını kendi bilgisayarımda hangi araçla ölçebilirim?
Sayfayı Chrome’da açın, yazının üzerine sağ tıklayıp İncele’yi seçin. Stiller bölümünde yazı renginin yanındaki küçük kareye tıklayın. Açılan renk seçici kontrast oranını ve erişilebilirlik düzeylerinin karşılanıp karşılanmadığını gösterir. Sayfadaki bütün sorunlu öğelerin listesi için PageSpeed Insights’ın Erişilebilirlik bölümüne bakabilirsiniz.
Sayfa başına dön düğmesi sayfa hızını etkiler mi?
Küçük bir simge ve kısa bir kod sayfaya çoğu zaman belirgin bir ağırlık eklemez. Düğme ayrı bir eklentiyle kuruluyorsa eklentinin her sayfada yüklediği dosyalara PageSpeed Insights raporundan bakın. Temanızda ya da Elementor’da bu düğme için hazır bir ayar varsa ek eklenti kurmanız gerekmez.
Telefonda menüyü kapattıktan sonra sayfa en başa atlıyor; bunu nasıl önlerim?
Menü açıkken arkadaki sayfanın kaymasını engelleyen yöntem, sayfanın kaydırma konumunu sıfırlıyor olabilir. Menü açılmadan önce sayfanın konumu kaydedilmeli ve menü kapanınca aynı konuma dönülmelidir. Temanızda ya da menü bileşeninde bu ayar yoksa kısa bir kodla eklenir; ardından gerçek bir telefonda yeniden deneyin.
Dokunmatik ekranlı dizüstü bilgisayarda açılır menüm bazen açılmıyor; neden olabilir?
Bu cihazlar hem dokunmayı hem fareyi destekler. Tasarım cihazın yalnızca birini kullandığını varsayıyorsa öteki yol çalışmaz. Alt menünün hem üzerine gelince hem de ok düğmesine dokununca ya da tıklayınca açılması gerekir. Menüyü bu cihazda önce fareyle, sonra parmakla deneyin.