Web tasarımı ve geliştirme en iyi uygulamaları, bir siteyi hızlı, kullanılabilir, erişilebilir, güvenli ve değiştirilmesi kolay hale getiren alışkanlıklardır. İş rakamlarını değiştirenler ise şunlardır: Core Web Vitals eşiklerini karşılamak, sayfaları tek bir kullanıcı görevi etrafında oluşturmak, arama motorlarının ve ekran okuyucuların anladığı semantik HTML yazmak, formları kısa tutmak ve değişiklikleri canlı düzenlemeler yerine test edilmiş bir sürüm süreciyle göndermek.
İyi görünen siteler neden hala düşük performans gösteriyor?
Bir site tasarım ödülleri kazanabilir ve yine de satış kaybedebilir. Yaygın nedenler bir makette görünmezdir: mobil veride yüklenmesi dört saniye süren bir ana görsel, dahili jargonla yazılmış navigasyon etiketleri veya nakliye maliyetlerini göstermeden önce hesap isteyen bir ödeme sayfası.
Tasarım, insanların nasıl davranacağına dair bir hipotezdir. Geliştirme ise onu ölçülebilir bir şeye dönüştürür. Aşağıdaki uygulamalar bu ikisinin buluştuğu noktada yer alır ve her biri canlı bir sitede kontrol edilebilir.
Performans: hangi eşikleri hedeflemelisiniz?
Google’ın Core Web Vitals’ı, gerçek kullanıcı ziyaretlerinin 75. yüzdelik diliminde ölçülen net, yayınlanmış hedefler sunar:
- Largest Contentful Paint (LCP) 2,5 saniye veya daha az.
- Interaction to Next Paint (INP) 200 milisaniye veya daha az.
- Cumulative Layout Shift (CLS) 0,1 veya daha az.
Search Console ve PageSpeed Insights’ta görünen Chrome UX Raporu’ndan elde edilen saha verileri, hızlı bir dizüstü bilgisayardaki tek bir laboratuvar testinden daha önemlidir. Bu rakamlara pratikte ulaşmak için:
- Görselleri modern formatlarda (WebP veya AVIF) açık genişlik ve yükseklik nitelikleriyle sunun ve ekranın altındaki her şeyi tembel yükleyin.
- LCP görselini veya yazı tipini önceden yükleyin ve ana görseli JavaScript aracılığıyla yüklemekten kaçının.
- Kritik olmayan komut dosyalarını erteleyin; sık INP suçluları olan sohbet widget’ları ve ısı haritaları gibi üçüncü taraf etiketlerini denetleyin.
- İçeriğin zıplamaması için reklamlar, yerleştirmeler ve çerez banner’ları için yer ayırın.
- Sayfa önbelleğe alma ve CDN kullanın ve sunucu yanıt süresini düşük tutun.
Her sayfayı bir görev etrafında yapılandırın
Her sayfanın birincil bir işi olmalıdır: demo rezervasyonu yapmak, planları karşılaştırmak, bir rehber okumak, bir ürün satın almak. Tasarım başlamadan önce bu işi yazın. Başlığı, bölümlerin sırasını ve en belirgin düğmeyi o belirler.
İkincil eylemler hala mevcuttur, ancak ikincil görünmelidirler. Bir sayfada dört eşit derecede yüksek sesli düğme olduğunda, insanlar tereddüt eder ve tereddüt daha düşük bir dönüşüm oranı olarak ortaya çıkar.
Ziyaretçilerin düşünme biçimine uygun navigasyon
Menü öğelerini organizasyon şemanıza göre değil, ziyaretçilerin aradıklarına göre adlandırın. Bir avuç müşteriyle kart sıralama veya site arama sorgularının gözden geçirilmesi, insanların gerçekte kullandığı kelimeleri hızla ortaya çıkarır. Ana menüyü kısa tutun ve derinliği mega menülere veya merkez sayfalara taşıyın.
Erişilebilirlik bir yapı standardıdır, eklenti değil
WCAG 2.2, AA seviyesinde yaygın olarak kullanılan ölçüttür ve erişilebilirlik kaplamaları bunu tek başına başaramaz. Temeller geliştirme kararlarıdır:
- Semantik HTML: gerçek düğmeler, sırayla başlıklar, liste olarak işaretlenmiş listeler, üstbilgi, ana içerik ve altbilgi için yer işaretleri.
- Gövde metni için en az 4,5:1 ve büyük metin için 3:1 metin kontrastı.
- Görünür odak göstergesi ile tam klavye kullanımı.
- Anlamlı görsellerin amacını açıklayan alt metin; dekoratif olanlar için boş alt.
- Görünür etiketleri olan form alanları, kaybolan yer tutucu metin değil.
Bu seçimler SEO’ya da yardımcı olur, çünkü temiz semantik yapı tarayıcıların okuduğu şeydir ve erişilebilirlik düzenlemesi olan pazarlarda yasal riski azaltır.
Formlar ve ödeme sayfaları nasıl oluşturulmalıdır?
Formlar, niyetin gelire dönüştüğü yerdir, bu yüzden küçük detaylar ağırlık taşır. Sadece kullanacağınız şeyi sorun. Mobil klavyelerin telefon alanları için rakamları ve e-posta için @ tuşunu göstermesi için doğru giriş türlerini kullanın. Alanın yanında satır içi doğrulama yapın ve bir hata oluştuğunda kullanıcının girişini koruyun.
E-ticaret için, nakliye dahil toplam maliyeti mümkün olduğunca erken gösterin, misafir ödemesi sunun ve müşterilerinizin kullandığı Apple Pay veya Google Pay gibi cüzdanları destekleyin. Örneğin, nakliye maliyetlerini son adımdan ürün sayfasına taşıyan bir mağaza, sürpriz maliyet yerine ortadan kaldırıldığı için genellikle daha az terk edilmiş ödeme görür.
Yapıdaki içerik ve SEO temelleri
Geliştiriciler farkında olmadan birçok SEO kararı alırlar. Bunları şablonda doğru yapın ki editörler onları bozamasın:
- Başlık alanından oluşturulan sayfa başına bir H1.
- Sayfa başına düzenlenebilir başlık etiketleri ve meta açıklamalar.
- Bir sayfanın adı değiştirildiğinde değişmeyen, temiz, okunabilir URL’ler, gerektiğinde 301 yönlendirmeleri ile.
- Canonical etiketler, XML site haritaları ve CSS veya JavaScript’i engellemeyen bir robots.txt.
- Gerçek sayfa verilerinden çıkarılan yapılandırılmış veriler (Organizasyon, Ürün, Makale, SSS geçerli olduğu yerlerde).
Güvenlik ve bakım
Hacklenen veya bir güncelleme ile bozulan bir site, sadece yavaş olan bir siteden daha fazlasını kaybeder. CMS’yi, temayı ve eklentileri güncel tutun, kimsenin kullanmadığı eklentileri kaldırın, her yerde HTTPS’yi zorunlu kılın ve Content-Security-Policy ve Strict-Transport-Security gibi güvenlik başlıklarını ayarlayın. Yönetici hesapları için iki faktörlü kimlik doğrulama ve editörler için en az ayrıcalıklı roller kullanın.
Yedeklemelerin sadece planlanması değil, test edilmesi gerekir. Hiç geri yüklemediğiniz bir yedekleme bir plan değil, bir umuttur.
Sağlıklı bir sürüm süreci nasıl görünür?
Canlı bir siteyi doğrudan düzenlemek, hata yapmanın en hızlı yoludur. Minimum profesyonel iş akışı şöyledir:
- Tema ve özel kod için sürüm kontrolü (Git).
- Aynı PHP sürümü ve önbelleğe alma dahil olmak üzere üretimi yansıtan bir hazırlık ortamı.
- Kısa bir sürüm öncesi kontrol listesi: formlar gönderiliyor, ödeme tamamlanıyor, ana sayfalar yükleniyor, konsol hatası yok.
- Düşük trafik zamanlarında, geri alma planı ile sürümler.
Sürümleri ölçümle eşleştirin. GA4’te veya analiz aracınızda dağıtımları not edin, böylece dönüşümlerdeki bir düşüş buna neden olan değişikliğe kadar izlenebilir.
Tasarım sistemleri siteleri tutarlı tutar
Küçük bir tasarım sistemi, sonraki her sayfada zaman kazandırır. Renk, boşluk ve tip için belirteçler tanımlayın, ardından bunlardan düğmeler, kartlar ve form alanları gibi yeniden kullanılabilir bileşenler oluşturun. Bir marka rengi değiştiğinde, üç yüz stil sayfası kuralı yerine bir belirteç değişir. Ayrıca, her yeni açılış sayfasının kendi düğme stilini icat ettiği ve ziyaretçileri şaşırtıp CSS’e ağırlık kattığı yavaş sürüklenmeyi durdurur. Her bileşeni durumlarıyla belgeleyin: varsayılan, üzerine gelme, odak, devre dışı ve hata.
Benimsediğiniz her uygulamanın etkisini ölçün. Daha hızlı bir LCP veya daha kısa bir form, ancak dönüşüm oranı, potansiyel müşteri kalitesi veya oturum başına gelir onunla birlikte hareket ederse kutlamaya değerdir, bu yüzden her değişiklikten önce ve sonra birkaç haftayı karşılaştırın.
Bu hafta nereden başlamalı
En iyi beş açılış sayfanızı PageSpeed Insights’tan geçirin ve saha verilerinde hangi Core Web Vitals’ın başarısız olduğunu not edin. Ardından bir ana formu telefonda sadece klavye ile ve iki dakika boyunca ekran okuyucu ile test edin. Önce en yavaş görseli ve en kötü form sorununu düzeltin. Bu iki kontrol, sitenizin eksik olan web tasarımı ve geliştirme en iyi uygulamalarını herhangi bir yeniden tasarım özetinden daha hızlı ortaya çıkarır.
Okumaya devam edin: Web Tasarımı ve Geliştirme · Web Tasarımı