Modern Web Sitesi Anatomisi

Her geçen gün gelişen teknoloji ile dijital tercihler, geliştirme kolaylıkları ve kullanıcı ihtiyaçları da değişiklik gösteriyor. Modern web sayfalarının anatomisini birlikte inceleyecek ve olması gereken yapı taşlarını listeleyeceğiz.

Kullanıcıların site içerisinde rahat gezinebilmesi, aradığı bilgiye hızlı erişmesi kullanıcıyı site içinde uzun süre tutmanın olmazsa olmazları arasındadır.

Bunun için gerekli yapıyı kuralım;

Net ve basit bir navigasyon yapısı

Ziyaretçilerin web sitesinde aradığı ve ulaşmak istediği bilgiye doğrudan ve kolayca erişebilmesini sağlayan tasarım ilkesidir. Navigasyonun net ve anlaşılır, alt maddelerin ise hiyerarşik yapıya uygun olarak tasarlanmış olması gerekir. Bu gereksinimler sağlanırsa kullanıcı deneyimi iyileştirilmiş ve sitenin kullanıcı gözündeki değeri artmış olur.

Responsive Tasarım

Artık bir web sitesine çok sayıda işletim sisteminden, ekrandan, araçtan ve cihazdan bağlanmak mümkün. Örnek vermek gerekirse Oyun konsolları, akıllı saatler, monitörler, dizüstü bilgisayarlar, tabletler, telefonlar, android box cihazları, apple tv gibi bir çok teknolojiye sahip cihaz sizin internet sitenize erişmeyi deneyebilir. Bu kadar fazla işletim sistemi ve cihaz varken farklı ekran boyutlarına hitap etme zorunluluğu da kaçınılmaz oluyor.
Bu alternatiflerin tümüne yanıt verebilecek bir web sitesi hazırlamanız sizin ziyaretçi sayınızı, müşterilerinizi, gelirinizi, markanızın bilinirliğini ve daha bir çok şeyi olumlu yönde etkileyecektir.
Responsive tasarımı sağlamak için başlıca dikkat etmeniz gereken şeyleri listelemek gerekirse;

• Esnek Grid Sistemleri: Flexbox veya CSS grid yapıları içeriklerin genişliğe göre uyum göstermesini sağlayarak responsive yapıyı kuran başlıca yapı taşlarındandır.
• Esnek Görseller: “max-width: 50%” gibi kullanımlar ile görselin içinde bulunduğu lağsayıcıya göre genişlik ayarının yapılması responsive tasarım için gerekenlerden biridir.
• Medya Sorgusu Kullanımı: Belirli ekran boyutlarında sayfanın nasıl davranacağını tarif edebileceğini CSS media query’ler size bu konuda yardımcı olacaktır.
• REM ve EM birimlerini kullanmak: fontlar ve boşluklar için kullanılan bu birimler farklı ekran boyutlarında ölçeklendirmenin yapılmasında etkili rol oynar.
• Çerçevelerin kullanımı: Bootstrap, Materialize, Bulma, Semantic UI gibi CSS ve JS yazma yönünden işinizi çok kolaylaştıran hazır sistemleri kullanmak, responsive geliştirme açıdan yapacağınız hataları da minimuma düşürecektir.

SEO Uyumlu İçerik

Arama motorları tarafından fark edilmenizi, üst sıralara taşınmanızı ve buralarda barınabilmenizi sağlayacak olan tek şey SEO uyumlu içeriğe sahip olmaktır. Bunun için anahtar kelime optimizasyonu, özgün ve değerli içeriğe sahip olmak, güncel kod yapısına sahip web sayfaları kodlamak, kullanıcı deneyimini artıracak düzenlemelerde ve kontrollerde bulunmak olmazsa olmazlar arasındadır.

Sayfa Yüklenme Süreleri

Tarihteki ilk web sitelerinden bu yana kullanıcı deneyimini etkileyen en büyük unsur sitelerin açılma süresidir. Bundan 10 yıl önce internet fazla hızlı olmadığı için sayfalar kısmen yavaş açılırdı. Fakat bugün de bazı siteler hala yavaş açılıyor. Bunun sebebi gelişen teknoloji ile birlikte kullanıcılara sunulan verilerin boyutlarının artması, daha fazla araç ve görselin site içerisinde kullanılmasıdır. Doğal olarak bu isteklere karşılık verebilecek siteleri inşa etmek bir tasarımcının ya da geliştiricinin öncelikli görevleri arasında yer alır.

Site hızını artıracak önlemler;

1. Görsel Optimizasyon
   Eğer yüksek çözünürlükte ve kalitede görsele ihtiyacınız yoksa web sitelerinizde sıkıştırılmış ve JPG, JPEG, Webp formatlarında görselleri kullanmak internet sitenizin ilk açılış ve gezinme hızını büyük ölçüde etkileyecektir.
2. Veritabanı Optimizasyonu
   Sorguların verimliliğini artırmak, gereksiz sorgu ve işlem yapmamak da sitenizin hızını artıracaktır.
3. Cache Mekanizmasının Kurulması
   Sayfada sık kullanılan ve sürekli değişmeyen verilerin ön bellekte depolanarak sayfaların açılışlarındaki gereksiz yükü azaltan uygulamadır.
4. CDN Kullanımı
   Görece maliyetli olduğu söylenebilir. Sitenizdeki içeriğin dünya genelindeki farklı sunuculara dağıtılarak kullanıcının yakın olduğu sunucudan veriyi çekmesi ve mesafelerden kaynaklanan gecikmenin azalmasını sağlamaktadır.
5. Minifikasyon
   CSS, JS gibi dosyaların minify edilerek gereksiz kodun kısaltılması yöntemiyle açılış hızlarının artırılması hedeflenir.
6. Lazy Loading
   Sayfadaki nesnelerin ihtiyaç durumunda yüklenmesi ve bu yolla içeriğin parça parça yüklenerek kullanıcıya yükün bir anda hissettirilmemesi hedeflenir.

Tüm bu maddeler birleştiğinde kullanıcı deneyimi ve dolayısıyla modern web sitesi anatomisinin geliştirilmesi sağlanmış olur.

Güvenlik Protokolleri

Web geliştiricilerin bir görevi de kullanıcı veri güvenliğini sağlamaktır. Bu aynı zamanda yasal zorunluluklara da tabiidir. Siber saldırılara karşı savunmayı güçlendiren HTTPS, SSL/TSL, veri şifreleme mekanizmaları bunların başlıcalarıdır. Ayrıca sistemin ve kodun güncel tutulması da oldukça önemlidir. Zaafiyet taramalarının yapılması kullanıcı güvenliğini ve dolayısı ile deneyimini geliştirir.

Temiz Kod Yapısı

Sitelerin geliştirilmesinde dikkat edilecek bir konu da kodun temizliği, yeniden kullanılabilir ve farklı kişiler tarafından devralındığında geliştirmenin kolaylıkla devam ettirilebilmesi anlamına gelir. Bunun için yorum satırları kullanılması, doğru syntax ile yazılması gerekmektedir.