Anasayfa › Web Tasarım
Web Tasarım
Web tasarım, sayfaların ekranda nasıl görüneceğini ve nasıl kullanılacağını planlar: form alanlarında uygun telefon klavyesinin açılması, çok geniş ekranlarda sayfa genişliğinin sınırlanması, tıklanmayan öğelerin düğmeye benzememesi ve tema güncellendiğinde yapılan özel değişikliklerin kaybolmaması için alınan önlemler.
Web Tasarım Sürecinde Form Alanlarında Uygun Telefon Klavyesinin Açılması Nasıl Sağlanır?
Telefonda bir form alanına dokunulduğunda ekranda bir klavye açılır. Açılan klavyenin türü, alanın sayfada hangi bilgi türüyle tanımlandığına bağlıdır. Telefon alanı rakam tuşlarını, e-posta alanı @ işaretini içeren klavyeyi açar. Web tasarım sürecinde formdaki her alan için doğru tür seçilir. Böylece ziyaretçi klavye değiştirmeden yazar ve yazım hatası azalır. Bu ayar alanın görünüşünü değiştirmez.
Alan türleri tarayıcıların ortak kabul ettiği bir listeden seçilir. Telefon türü rakamlı tuş takımını getirir. E-posta türünde klavyede @ ve nokta öne çıkar. Tarayıcı, gönderimden önce adresin bu işareti içerip içermediğini de denetler. Web adresi türü eğik çizgi ve nokta tuşlarını gösterir. Sayı türü yalnızca adet ve miktar alanlarında kullanılır. Elementor’un form bileşeninde tür, alan ayarlarından seçilir.
Telefon numarası için sayı türü kullanılmaz. Sayı türü baştaki sıfırı silebilir, alanın yanına artırma okları koyabilir ve boşluk ya da artı işaretini kabul etmeyebilir. Telefon türü ise girilen biçimi kendiliğinden denetlemez. Numaranın biçimi için ayrıca bir kural tanımlanır. Bu kural, numaranın sıfırla ya da ülke koduyla başlamasına ve aralarda boşluk bulunmasına izin verecek genişlikte tutulur.
Bazı alanlar yalnızca rakam ister ama sayı değildir: posta kodu, doğrulama kodu ya da vergi numarası. Bu alanlar metin türünde bırakılır ve tarayıcıya ayrıca bir klavye ipucu verilir. İpucu, telefonda rakam klavyesini açar; girilen değer ise metin olarak saklanır. Böylece baştaki sıfır korunur. Klavyedeki onay tuşu da bir ipucuyla ayarlanabilir; son alanda tuş gönderme işlevini gösterir.
Her alana tarayıcının otomatik doldurma özelliği için ayrıca bilgi verilir: ad, e-posta, telefon ya da adres. Bu bilgi doğruysa tarayıcı kayıtlı bilgileri tek dokunuşla alanlara yazar. Her alanın üstünde görünür bir etiket durur; yalnızca alanın içindeki silik örnek yazıya güvenilmez. O yazı ziyaretçi yazmaya başlayınca kaybolur. Etiket, ekran okuyucuların alanı doğru adlandırmasını da sağlar.
Alan yazısı küçük tutulursa bazı telefon tarayıcıları alana dokunulunca sayfayı yakınlaştırır. Ziyaretçi formu görmek için sayfayı yeniden küçültmek zorunda kalır. Bu yüzden alanlardaki yazı yeterince büyük seçilir. Web tasarım kontrolünde form, iki yaygın telefon işletim sisteminde gerçek cihazla doldurulur. Her alanda açılan klavye, otomatik doldurma, hata mesajları ve gönderim sonrası sayfa tek tek denenir.
Çok Geniş Ekranlarda Sayfa Genişliği Nasıl Sınırlanır?
Çok geniş ekranlarda içerik ekranın bütün genişliğine yayılırsa satırlar uzar. Göz bir satırın sonundan ötekinin başına dönerken yerini kaybeder ve okuma zorlaşır. Bu sorun, içeriğe bir en büyük genişlik verilerek çözülür. İçerik bu genişliğe ulaşınca büyümeyi bırakır ve ekranın ortasında durur. Kalan boşluk iki yana eşit dağılır. Daha dar ekranlarda sınır devreye girmez ve içerik ekran genişliğine uyar.
Elementor’da bu sınır iki yerde ayarlanır. Site Ayarları’ndaki Düzen bölümünde sitenin içerik genişliği belirlenir. Her kapsayıcı ise kutulu ya da tam genişlik olarak seçilir. Kapsayıcı, bir bölümün öğelerini bir arada tutan kutudur. Kutulu kapsayıcı site genişliğine uyar; tam genişlik kapsayıcı ekranın kenarlarına kadar uzanır. Metin taşıyan bölümler kutulu kurulur. Tam genişlik yalnızca arka planı ekranın tamamını kaplayacak bölümlerde kullanılır.
Kutulu bir bölümün içinde de her öğe aynı genişlikte olmaz. Paragraflar ve uzun başlıklar site genişliğinden daha dar bir sütunda tutulur. Erişilebilirlik ölçütleri de satır uzunluğunun sınırlı tutulmasını önerir. Kartlar ve görseller ise site genişliğinin tamamını kullanabilir. Bölümün arka plan rengi ya da görseli ekranın iki kenarına kadar uzanır, içindeki yazı ortada kalır.
Sitenin üst ve alt bilgi alanları da aynı genişlik kuralına bağlanır. Logo ve menü içeriğin sol ve sağ kenarıyla aynı hizada başlar ve biter. Bu hiza bozulursa geniş ekranda logo en solda, metin ortada kalır ve ekranın iki ucu arasında bir boşluk oluşur. Açılır menüler de bu hizaya göre yerleştirilir. Sayfa altındaki sütunlar aynı sınırın içinde kalır.
Geniş ekran görsellerin boyutunu da etkiler. Tam genişlikteki bir görsel ekranla birlikte büyür ve tarayıcı daha büyük bir dosya indirir. WordPress her görselin birkaç boyutunu üretir; tarayıcı ekran genişliğine göre bunlardan birini indirir. Görsel alanına en büyük genişlik verilirse çok büyük dosyalar indirilmez. Bu, Core Web Vitals’ta en büyük içerik öğesinin görünme süresini gösteren LCP değerine de yansır.
Genişlik ayarı farklı ekranlarda denenir. Tarayıcının geliştirici araçlarındaki duyarlı görünüm, sayfayı istenen genişlikte açar. Sayfa geniş bir ekran boyutunda ve tarayıcı uzaklaştırılarak incelenir. Elementor’a gerekirse ayrı bir geniş ekran kırılma noktası eklenir; bu noktadan sonra yazı boyutu ve boşluklar ayarlanabilir. Kırılma noktası, tasarımın ayrıca ayarlandığı ekran genişliğidir. Web tasarım teslimi öncesinde her sayfa bu genişliklerin her birinde açılır.
Tıklanmayan Öğelerin Düğmeye Benzememesi Nasıl Sağlanır?
Ziyaretçi bir öğenin tıklanabilir olup olmadığını görünüşünden çıkarır. Dolgulu ve köşeleri yuvarlatılmış kutular, gölgeler ve altı çizili yazılar bu işaretlerdendir. Metin içindeki farklı renkte kelimeler ve ok simgeleri de aynı biçimde okunur. Bu görünüş bir etikete ya da bilgi kutusuna verilirse ziyaretçi ona dokunur ve hiçbir şey olmaz. Bu, ziyaretçinin asıl düğmeyi aramasına yol açar.
Bu sorunu önlemek için web tasarım işinin başında tıklanabilir öğeler için bir görsel kural yazılır. Düğme biçimi yalnızca bir işlem başlatan ya da başka bir sayfaya götüren öğelerde kullanılır. Metin içindeki bağlantılar tek bir renkte gösterilir; bu renk başka hiçbir öğeye verilmez. Etiketler, rozetler ve bilgi kutuları düz, gölgesiz ve düğmeden farklı bir biçimde tasarlanır. Bu kural bütün sayfalarda aynı uygulanır.
Fareyle üzerine gelindiğinde değişen renk, gölge ya da büyüme etkisi yalnızca tıklanabilir öğelere verilir. İmlecin el biçimine dönmesi de bu öğelerle sınırlı tutulur. Tıklanmayan bir kartın üzerine gelince kart yukarı kalkıyorsa ziyaretçi onu bağlantı sanır. Kartın tamamı tıklanabilir olacaksa kart tek bir bağlantı olarak kurulur. Yalnızca içindeki düğme çalışacaksa kartın kendisi sabit kalır.
Telefonda fareyle üzerine gelme yoktur. Bu yüzden tıklanabilirlik, üzerine gelme etkisi olmadan da görünüşten anlaşılır olmalıdır. Bağlantılar yalnızca renkle ayrılmaz. Erişilebilirlik ölçütleri, bilginin yalnızca renkle verilmemesini ister; renk ayırt edemeyen ziyaretçi farkı göremez. Metin içi bağlantıların altı bu nedenle çizilir. Düğme ile düz yazı arasındaki fark gri tonlarda da görülebilir olmalıdır. Bu, ekran görüntüsü gri tonlara çevrilerek denenir.
Simgeler de aynı kurala bağlıdır. Ok ve dış bağlantı simgesi yalnızca bağlantı taşıyan öğelerin yanında yer alır. Başlıklar ve ara başlıklar bağlantı rengine boyanmaz. Kalın ve renkli yazılan vurgu kelimeleri, metin içi bağlantılardan farklı bir renk taşır. Açılıp kapanan soru listelerinde soru satırı tıklanabilir; yanındaki artı işareti bunu gösterir. Bu işaret satır açılınca eksiye döner.
Kontrol için her sayfa telefonda ve masaüstünde baştan sona gezilir. Düğme görünüşünde olup bağlantısı olmayan her öğe listelenir. Bu öğelerin biçimi değiştirilir ya da öğe gerçekten bir sayfaya bağlanır. Bazı analiz araçları, tıklanıp sonuç vermeyen noktaları ölü tıklama olarak raporlar. Yayından sonra bu rapor okunur ve ziyaretçilerin sık dokunduğu tıklanmaz öğeler düzeltilir. Bu düzeltmeler aylık iş listesinde ayrı madde olur.
Tema Güncellendiğinde Yapılan Özel Değişikliklerin Kaybolması Nasıl Önlenir?
Tema, sitenin görünüşünü ve sayfa düzenini belirleyen dosyalar bütünüdür. Tema güncellendiğinde WordPress temanın klasöründeki bütün dosyaları yeni sürümle değiştirir. Bu dosyalara doğrudan yazılmış her değişiklik güncellemeyle silinir. Bu yüzden özel bir tasarımda temanın kendi dosyalarına dokunulmaz. Özel değişiklikler, güncellemeden etkilenmeyen yerlerde tutulur. Bu yerler üç türlüdür: alt tema, veritabanında saklanan ayarlar ve küçük eklentiler.
Alt tema, ana temanın bütün özelliklerini kullanan ve yalnızca değişiklikleri taşıyan küçük bir ikinci temadır. WordPress önce alt temaya bakar; orada olmayan her şeyi ana temadan alır. Ana tema güncellendiğinde alt temanın dosyaları yerinde kalır. WordPress’in kendi belgeleri, tema dosyalarında değişiklik yapılacaksa alt tema kullanılmasını önerir. Alt tema etkinleştirildikten sonra sitenin menüleri ve araç bileşenleri yeniden kontrol edilir.
Her değişiklik için alt tema gerekmez. WordPress’in özelleştirme ekranındaki ek stil alanına yazılan kurallar veritabanında saklanır. Veritabanı, sitenin içeriklerini ve ayarlarını tutan veri deposudur; tema güncellemesi ona dokunmaz. Elementor ile yapılan sayfa tasarımları ve Tema Oluşturucu şablonları da veritabanında durur. Ancak ek stil alanı temaya bağlıdır; tema değiştirilirse bu kurallar yeni temada görünmez.
Siteye işlev ekleyen küçük kod parçaları temanın işlev dosyasına yazılmaz. Bu dosya da güncellemeyle yenilenir. Kod parçaları ya alt temanın kendi işlev dosyasına ya da yalnızca bu iş için kurulan küçük bir eklentiye konur. Eklentide tutulan kod, tema değiştirilse bile çalışmaya devam eder. Her parçanın ne yaptığı ve ne zaman eklendiği kodun başına yazılır.
Güncelleme bir sırayla yapılır. Önce sitenin dosyalarının ve veritabanının yedeği alınır. Temanın değişiklik kaydında hangi bölümlerin değiştiği okunur. Mümkünse güncelleme önce sitenin hazırlık kopyasında denenir; bu kopya canlı siteyle aynı içerikte, ziyaretçiye kapalı bir sürümdür. Sorun çıkmazsa canlı sitede güncellenir ve önbellek boşaltılır. Temalar ekranındaki otomatik güncelleme seçeneği kapalı tutulur, güncelleme bu sırayla elle yapılır.
Güncellemeden sonra ana sayfa, bir hizmet sayfası, bir blog yazısı ve iletişim formu açılır. Menü, sayfa altı ve form telefonda ve masaüstünde denenir. Alt temada ana temanın bir şablon dosyası kopyalanmışsa, yeni sürümdeki değişiklikler bu kopyaya elle aktarılır. Web tasarım işinde yapılan her özel değişikliğin nerede durduğu bir listede tutulur ve aylık raporda belirtilir.
Formumdaki telefon alanına dokununca harf klavyesi açılıyor; bunu nasıl düzeltebilirim?
Alan büyük olasılıkla metin türünde tanımlanmış. Elementor’un form bileşeninde bu alanı açın ve türünü telefon olarak değiştirin. Sayı türünü seçmeyin; baştaki sıfırı silebilir ve boşlukları kabul etmeyebilir. Değişikliği kaydettikten sonra önbelleği boşaltın ve formu telefonunuzda yeniden deneyin.
Sitem büyük monitörde çok yayvan görünüyor; içerik genişliğini nereden ayarlayabilirim?
Elementor’da Site Ayarları’nı açın ve Düzen bölümündeki içerik genişliği değerini kontrol edin. Sonra yayvan görünen bölümlerin kapsayıcı ayarına bakın; tam genişlik seçiliyse kutulu olarak değiştirin. Arka planın ekranı kaplaması gerekiyorsa dış kapsayıcıyı tam genişlikte bırakıp içine kutulu bir kapsayıcı koyabilirsiniz.
Ziyaretçilerin sayfamda tıklanmayan bir öğeye dokunmaya çalıştığını nasıl anlayabilirim?
Tıklama haritası sunan analiz araçları, sonuç vermeyen tıklamaları ayrı bir raporda gösterir. Aynı noktaya tekrar tekrar dokunuluyorsa öğe çoğu zaman düğme sanılıyordur. O öğeyi ya gerçek bir bağlantıya çevirin ya da gölgesini, dolgu rengini ve üzerine gelme etkisini kaldırarak düz bir görünüş verin.
Temayı güncelledim ve tema dosyalarına yaptığım değişiklikler kayboldu; ne yapmalıyım?
Güncellemeden önce alınmış bir yedek varsa değiştirdiğiniz dosyaları oradan bulun. Bu değişiklikleri ana temaya geri yazmayın; bir alt tema oluşturup oraya taşıyın ya da kod parçalarını küçük bir eklentiye koyun. Kendi yedeğiniz yoksa barındırma hizmetinin otomatik yedeklerine bakın. Sonraki güncellemelerden önce yedek alın.