Web tasarımı yaparken gerek tasarım gerek ise programlama aşamasında dikkat edilmesi gereken birçok kural bulunmaktadır. Geliştiriciler bu kurallara uymak için gayret sarf etseler de bazı basit gibi gözüken ancak oldukça önemli olan kurallar unutulmaktadır. Gelin bunlara değinelim.
1. Mobil Öncelikli Olmayan Tasarım
Bundan çok geride olmayan birkaç yıl öncesine kadar bir web sitesine giren ziyaretçilerin büyük çoğunluğunun kaynağı masaüstü bilgisayarlardı. Bu sebeple geliştiriciler web sitesi tasarımı yaparken öncelikli olarak masaüstü internet tarayıcılarını öncelik alırlardı. Ancak durum son yıllarda oldukça değişti.
Artık normal bir web sitesine giren ziyaretçilerin genellikle %60'ından fazlası mobil cihazlardan gelmekte. Bu sebeple bir web sitesi tasarımı ve kodlaması yaparken mobil öncelikli (mobile first) düşünmek oldukça önem arz etmektedir. Hatta farklı mobil cihazlar için sadece duyarlı (responsive) kodlama ve uyarlama yapmak bile yetmeyebilir. PWA (Progressive Web App) veya mobil işletim sistemi marketlerinde uygulama paylaşımı gibi alternatifler de düşünülmelidir.
Bu konuda daha evvel sizlerle paylaştığım "Django Web Sitesini Progressive Web App (PWA)'e / Progresif Web Uygulamasına Dönüştürme Nasıl Yapılır?" konulu yazım ilginizi çekebilir.
2. Tutarsızlık
Bir web sitesinin tutarlılığı, ziyaretçilerin o web sitesinden ne beklediklerini anlamalarına yardımcı olur. Bu ziyaretçilerin web sitesi içinde geçirdikleri sürenin uzamasına sebep olur ki, bu arama motorları için oldukça önemli bir göstergedir. İçeriği alakasızca ve tutarsız olan web sitelerinin ziyaretçi tutma süresi ve sayısı oldukça düşüktür.
Bir diğer tutarsızlık çeşidi ise bağlantıların açılış yöntemiyle alakalıdır. Örneğin bir pdf dosyasının açılığını target="_blank" yapmazsanız, ziyaretçi dosya aynı sayfada açılacağı için siteyi terk etmiş olur.
Son olarak tasarımda tutarlılık da oldukça önemlidir. Sitenin elementleri ve içeriği birbirleriyle uyumlu, kullanıcıyı doğru ve kolay yönlendirici şekilde tasarlanmalıdır.
3. Tam URL Yolu Kullanımı
Programcıların birçoğu hata payını azaltmak, diğer deyişle kolaya kaçmak için site içi sayfa veya medya dosyaları bağlantı yollarını tam girmektedir. Örnek olarak bir medya dosyasını ele alırsak;
Hatalı kullanım -> http://www.siteadi.com/static/img/resim.jpg
Bu ilerisini düşünmeyen programcıların yaptığı hatalardandır. Mesela web sitesi SSL sertifikası aldığında url https olarak değişmelidir.
Doğru kullanım -> <img src="{% static '/img/resim.jpg' %}" alt="Resim" />
Binlerce bağlantısı olan sitelerde bu hatanın nasıl bir zaman kaybına yol açacağından bahsetmeme gerek yoktur sanırım.
4. Resimlerde alt Etiketi Kullanmamak
Gününüzde web sitesinin arama motorlarındaki görünümünü iyileştirmenin en kolay yöntemlerinden biri site içerisinde kullanılan tüm resimlerde alt etiketi kullanmaktır. Bunun hedefi kullanıcıları kullanılan resim konusunda bilgilendirmektir ve arama motorları bu bilgiyi oldukça önemserler. Ancak hala birçok geliştirici bu basit işlemi es geçmekteler.
5. Gereksiz <div> Kullanımı
Hepimiz div etiketini ve getirdiği kolaylıkları seviyor olabiliriz. Ancak her ne kadar div kullanmayı biliyor olsak da, her zaman bunu kullanmak doğru değildir. Artık elimizde kullanabileceğimiz semantik HTML elementleri bulunuyor.
Birkaç örnek vermek gerekirse <article>, <header>, <nav>, <main>, <footer>, <button> gibi Semantik HTML elementleri ile gerek kod yapısını, gerek ise arama motorları görünümünü iyileştirebiliriz.
Listelediğim bu basit ama önemli 5 kötü alışkanlıklar sizde de varsa, tekrar düşünme vakti geldi demektir.