Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfa düzenini ve sitenin farklı kullanıcılar tarafından kullanılabilmesini planlar: yazdırılmak istenen sayfaların kâğıt çıktısının düzenlenmesi, iletişim formu gönderildikten sonra ziyaretçiye gösterilen ekran, hareketli öğelerin hareket hassasiyeti olan kullanıcılar için ayarlanması ve sitenin yalnızca klavyeyle gezilebilmesi.
Web Tasarım Sürecinde Yazdırılacak Sayfalar Nasıl Hazırlanır?
Bazı sayfalar ekranda okunmanın yanında yazdırılır ya da PDF olarak kaydedilir. İletişim sayfası, fiyat ve teklif sayfaları, yasal metinler ve uzun rehber yazıları bu gruba girer. Tarayıcı, ayrı bir ayar yoksa sayfayı ekrandaki düzeniyle yazdırır. Bu durumda ekran için hazırlanmış bütün bölümler kâğıda çıkar. Web tasarım sürecinde bu sayfalar için ayrı bir yazdırma görünümü hazırlanır. Ekrandaki tasarım bu çalışmadan etkilenmez.
Yazdırma görünümü, yalnızca sayfa yazdırılırken geçerli olan biçim kurallarıyla kurulur. Tarayıcı bu kuralları yazdırma komutu verildiğinde ve PDF olarak kaydederken uygular. Kurallar kâğıtta kullanılamayan bölümleri gizler: menü, düğmeler, kaydırıcılar, çerez bildirimi, sohbet penceresi ve paylaşım simgeleri. Sayfa altındaki uzun bağlantı listeleri de çıkarılır. Logo, sayfa başlığı, metin, tablolar, adres ve telefon kâğıtta kalır.
Kâğıtta beyaz zemin üzerine koyu metin kullanılır. Tarayıcılar arka plan renklerini ve arka plan görsellerini varsayılan olarak yazdırmaz. Renkli bir zemin üzerindeki beyaz yazı bu yüzden kâğıtta kaybolabilir. Yazdırma kuralları bu tür metinleri koyu renge çevirir. Yan yana duran sütunlar tek sütuna indirilir. Yazı boyutu ve satır aralığı kâğıtta okunacak biçimde ayrıca belirlenir.
Kâğıtta bağlantıya tıklanamaz. Bu yüzden önemli bağlantıların adresi, yazdırma görünümünde bağlantı metninin yanına yazılır. Telefon, e-posta ve açık adres metin olarak yer alır. Gömülü haritalar kâğıtta düzgün çıkmayabilir. Haritanın yerine yazılı adres ve kısa bir yol tarifi konur. Tarayıcı, isteğe bağlı olarak sayfa adresini ve sayfa numarasını kenar boşluğuna ekler.
Uzun sayfalar birden fazla kâğıda bölünür. Bölünmenin yerini tarayıcı belirler; yazdırma kuralları bu kararı yönlendirir. Görsellerin ve kısa tabloların ortadan bölünmesi engellenir. Başlığın sayfa sonunda tek başına kalması önlenir ve başlık ardından gelen paragrafla birlikte tutulur. Uzun tablolarda başlık satırı çoğu tarayıcıda her sayfanın başında tekrarlanır. Tarayıcıların bu kurallara desteği farklı olabilir.
Her sayfa türü tarayıcının yazdırma önizlemesinde açılır ve PDF olarak kaydedilir. Tarayıcının geliştirici araçlarında sayfayı ekranda yazdırma görünümüyle gösteren bir seçenek de bulunur. Kontrol birkaç tarayıcıda ve telefonun yazdırma ekranında tekrarlanır. PDF dosyasında metnin seçilebilir kaldığı ve bağlantı adreslerinin okunduğu da kontrol edilir. Sorunlar sayfa adıyla listelenir. Web tasarım güncellemelerinde yeni eklenen bölümlerin yazdırma görünümü de aynı listeyle denetlenir.
Form Gönderildikten Sonra Ziyaretçiye Ne Gösterilir?
Form gönderildikten sonra ziyaretçi üç şeyi öğrenir: mesajın ulaştığını, bundan sonra ne olacağını ve yanıtın hangi yoldan geleceğini. Bu bilgi iki yolla verilir. Birincisinde form, aynı sayfada bir onay mesajıyla yer değiştirir. İkincisinde ziyaretçi ayrı bir teşekkür sayfasına yönlendirilir. İki yolda da verilen bilgi aynıdır. Ayrı sayfa, gönderimin ölçülmesini ve sayfanın ayrıca düzenlenmesini kolaylaştırır.
Onay mesajı kısa tutulur. İlk cümle mesajın alındığını söyler. İkinci cümle yanıtın telefonla mı, e-postayla mı geleceğini ve işletmenin belirlediği yanıt süresini yazar. Mesajın altında ana sayfaya dönen bir bağlantı bulunabilir. Mesaj formun bulunduğu yerde görünür; sayfa en üste kaymaz. Mesaj, ekran okuyucuların kendiliğinden okuduğu bir alana yazılır. Ekran okuyucu, metni sese ya da kabartma yazıya çeviren yardımcı bir yazılımdır.
Zorunlu bir alan boşsa ya da e-posta adresi eksik yazılmışsa form gönderilmez. Hata, ilgili alanın hemen altında yazıyla gösterilir; yalnızca alanın kırmızıya dönmesiyle yetinilmez. Ziyaretçinin yazdığı bilgiler silinmez. İmleç ilk hatalı alana taşınır. Gönderim sunucu tarafında başarısız olursa bu durum açıkça yazılır ve telefon numarası ile WhatsApp bağlantısı seçenek olarak gösterilir.
Gönderim birkaç saniye sürebilir. Bu sırada düğme etkisiz hâle gelir ve üzerinde gönderimin devam ettiğini söyleyen bir yazı görünür. Böylece aynı mesajın iki kez gönderilmesi önlenir. Teşekkür sayfası kullanılıyorsa sayfa yenilendiğinde form yeniden gönderilmez. Sunucu yanıt vermeden onay mesajı gösterilmez; mesaj yalnızca gönderim gerçekten tamamlandığında çıkar. Yanıt hiç gelmezse bir süre sonra hata mesajı çıkar ve form yeniden denenebilir.
Gönderimle birlikte iki e-posta çıkabilir. Birincisi size gelen bildirimdir ve formdaki bütün alanları taşır. Bildirimin yanıtla adresi ziyaretçinin e-postasıdır; böylece yanıt doğrudan ona gider. İkincisi ziyaretçiye giden kısa bir onay e-postasıdır ve gönderdiği bilgilerin özetini içerir. Elementor Pro’nun form bileşeninde bu iki e-posta ve teşekkür sayfasına yönlendirme ayrı işlemler olarak seçilir.
Teşekkür sayfası menüde ve site haritasında yer almaz. Noindex etiketiyle arama sonuçlarının dışında tutulur; bu etiket Google’dan sayfayı göstermemesini ister. Gönderim, Google Analytics 4’te (GA4) anahtar etkinlik olarak işaretlenir. Web tasarım teslimatı öncesinde formların her biri telefonda ve masaüstünde denenir. Bildirimin size ulaştığı ve etkinliğin GA4’ün Gerçek zamanlı raporunda göründüğü tek tek denetlenir.
Hareketli Öğeler Hareket Hassasiyeti Olanlar İçin Nasıl Ayarlanır?
Hareketli öğeler, sayfada kendiliğinden ya da kaydırmayla hareket eden bölümlerdir. Kaydırınca beliren giriş animasyonları ve farklı hızda kayan arka planlar bu gruba girer. Kendi kendine dönen kaydırıcılar, sayan rakamlar ve arka plan videoları da hareketli öğedir. Denge sistemiyle ilgili rahatsızlığı olan bazı kişilerde büyük hareketler baş dönmesine ve mide bulantısına yol açabilir. Bu duruma hareket hassasiyeti denir.
Bilgisayar ve telefon işletim sistemlerinin erişilebilirlik ayarlarında animasyonları azaltan ya da kapatan bir seçenek bulunur. Tercih cihazda bir kez açılır ve onu okuyan bütün sitelerde geçerli olur. Tarayıcı, sayfa açılırken bu tercihi siteye iletir. Web tasarım aşamasında site bu tercihi okuyacak biçimde kurulur. Tercih açıksa büyük hareketler kapanır ya da yerini kısa bir solma geçişine bırakır. Tercih kapalıysa animasyonlar olağan biçimleriyle çalışır.
Tercih açıkken giriş animasyonları kaldırılır ve içerik doğrudan yerinde görünür. Farklı hızda kayan arka planlar sabitlenir. Kaydırıcılar kendiliğinden ilerlemez; ziyaretçi okları kullanarak geçer. Sayan rakamlar son değerleriyle gösterilir. Bağlantıya tıklanınca sayfanın yumuşak kaymasının yerine doğrudan ilgili bölüme geçilir. Fareyle üzerine gelince fotoğrafların büyümesi azaltılır ya da kapatılır. Renk ve saydamlık değişimleri kalabilir.
Bazı kurallar tercihten bağımsız olarak herkes için uygulanır. Erişilebilirlik ölçütlerine göre kendiliğinden başlayan ve bir süre devam eden hareketin durdurulabilmesi gerekir. Bu yüzden arka plan videosunda ve kendiliğinden dönen kaydırıcıda görünür bir durdurma düğmesi bulunur. Kaydırıcı, fare üzerine geldiğinde ya da klavye odağı içindeyken durur. Sayfada hızlı yanıp sönen içerik kullanılmaz.
Animasyonlar sayfanın düzenini de etkiler. Öğenin yerini değiştiren animasyonlar öteki içerikleri iter ve düzen kayması yaratır. Düzen kayması CLS değeriyle ölçülür. Bu yüzden hareket, öğenin yerleşimine dokunmadan yalnızca görünümünü değiştirerek yapılır. Elementor’da giriş animasyonları her öğe için ayrı ayarlanır; hareket efektleri ise ekran genişliğine göre kapatılabilir. Animasyonla gelen içerik JavaScript çalışmazsa gizli kalabilir; bu yüzden ana metinlere animasyon verilmez.
Kontrol için işletim sisteminde hareketi azaltma tercihi açılır. Aynı tercih, tarayıcının geliştirici araçlarında taklit edilerek de denenebilir. Her sayfa baştan sona kaydırılır ve hareket eden her öğe listeye yazılır. Listede öğenin yeri ile tercih kapalıyken ve açıkken nasıl davrandığı yer alır. Davranışı değişmeyen öğeler düzeltilir ve kontrol yeniden yapılır. Tablet ve telefon görünümleri de ayrıca denetlenir.
Site Yalnızca Klavyeyle Gezilebilir mi?
Evet, site buna göre kurulduğunda bütün işlemler klavyeyle yapılabilir. Klavyeyle gezinmede Tab tuşu bağlantılar, düğmeler ve form alanları arasında ileri gider; Shift tuşuyla birlikte geri döner. Enter bağlantıyı açar ya da düğmeye basar. Boşluk tuşu onay kutusunu işaretler. Ok tuşları menüler ve seçenek listeleri içinde dolaşır. Esc açık pencereyi kapatır.
Klavyeyle gezinen kişi, o anda hangi öğede olduğunu odak göstergesinden anlar. Odak göstergesi, seçili öğenin çevresinde beliren çerçevedir. Bazı temalar görünüm kaygısıyla bu çerçeveyi kaldırır. Bu durumda ziyaretçi sayfada nerede olduğunu göremez. Çerçeve, zeminle belirgin kontrast oluşturan bir renkle geri getirilir. Bütün bağlantılarda, düğmelerde ve form alanlarında aynı biçimde görünür.
Odak sırası, sayfanın okunma sırasını izler: üst bölüm, menü, içerik ve sayfa altı. Elementor’da telefon için sütunların yerini değiştiren ayarlar yalnızca ekrandaki sırayı değiştirir. Klavye ise sayfanın kaynak sırasını izler. Bu yüzden telefonda ekran sırası ile klavye sırası ayrışabilir. Sıra farkı varsa bölümlerin sayfadaki asıl sırası ekrandaki sıraya göre yeniden düzenlenir. Kapalı menüler ve ekran dışındaki paneller, görünmezken odak almaz.
Sayfanın ilk odaklanan öğesi içeriğe geç bağlantısıdır. Bu bağlantı yalnızca odaklandığında görünür ve menüyü atlayıp doğrudan ana içeriğe götürür. Fare üzerine gelince açılan alt menüler klavyeyle de açılır. Açma işi Enter, boşluk ya da ok tuşlarıyla yapılır. Alt menüdeki her bağlantı Tab tuşuyla tek tek seçilebilir. Menü açıkken Esc onu kapatır ve odak menünün başlığına döner.
Açılır pencerelerde odak pencerenin içine taşınır ve pencere açıkken Tab dışarı çıkmaz. Pencere Esc ile kapanır, odak da onu açan düğmeye döner. Klavye tuzağı ise bunun tersidir: odak bir öğeye girer ve çıkamaz. Bazı gömülü oynatıcılar ve sohbet pencereleri bu soruna yol açabilir. Tıklanabilen ama düğme ya da bağlantı olarak kurulmamış öğeler odak almaz; gerçek düğmelerle değiştirilir.
Denetimde fare kullanılmaz. Her sayfa en üstten Tab tuşuyla baştan sona gezilir. Menüler, formlar, kaydırıcılar ve açılır pencereler tek tek denenir. Otomatik denetim için PageSpeed Insights’ın Erişilebilirlik bölümü kullanılır; bu bölüm bazı sorunları bulur, klavye kullanımı ise elle sınanır. Web tasarım çalışmasında bulunan sorunlar sayfa adıyla listelenir. Düzeltmeler sizin onayınızdan sonra aylık iş listesine eklenir.
Sayfamı yazdırırken renkli zeminler beyaz çıkıyor; bu bir hata mı?
Hayır, bu tarayıcının varsayılan davranışıdır. Yazdırma ekranında ek ayarları açın ve arka plan grafikleri seçeneğini işaretleyin; zeminler de kâğıda çıkar. Bu seçenek yalnızca sizin tarayıcınızı etkiler, ziyaretçilerin ayarı değişmez. Sitede yazdırma görünümü hazırlanmışsa metinler, seçenek kapalıyken de okunur kalır.
Formdan gelen mesajlar bana ulaşmıyor ama ziyaretçi onay mesajını görüyor; neden olur?
Onay mesajı formun siteden gönderildiğini gösterir; e-postanın size ulaştığını göstermez. Site e-postayı sunucunun kendi gönderim işleviyle yolluyorsa alıcı sunucu iletiyi istenmeyen klasörüne alabilir ya da reddedebilir. Gönderimi kimliği doğrulanmış bir posta kutusuna bağlayın. Elementor Pro gönderimleri panelde de saklayabilir; mesajları oradan görebilirsiniz.
Telefonumda hareketi azaltma ayarı açık ama sitemdeki animasyonlar sürüyor; neden?
Ayar tarayıcı üzerinden siteye ulaşır; animasyonların durması için sitenin bu ayara göre davranan kurallar taşıması gerekir. Tema ya da eklenti bu kuralları içermiyorsa animasyonlar sürer. Tercih açıkken animasyonları kapatan kurallar eklenmelidir. Önbellek eklentisi kullanılıyorsa değişiklikten sonra önbelleği temizleyin ve sayfayı yeniden açarak deneyin.
Sitemdeki çerez bildirimi klavyeyle kapatılabiliyor mu, nasıl denetlerim?
Fareyi kullanmadan sayfayı yükleyin ve Tab tuşuyla ilerleyin. Odak bildirimin düğmelerine gelmeli, düğmedeyken Enter tuşu bildirimi kapatmalıdır. Odak düğmelere hiç gelmiyorsa bildirim, düğme olarak kurulmamış öğeler içeriyor olabilir. Bu durumda bildirimi gösteren eklentinin ayarlarına bakılır ya da eklenti değiştirilir.