Her Web Geliştiricisinin Bilmesi Gereken 21 Şey

Dünyamızda hiç bir şey eskisi gibi değil. Her geçen gün gelişen bir dünya mevcuttur. Hem de bu gelişimin hızı her geçen gün artan bir ivme ile artmaktadır.  Özellikle de web teknolojilerinde bu artış çok hızlıdır. Diğer sektörlere göre göreceli olarak yeni sayabileceğimiz bir sektör/disiplindir. Bu nedenle doygunluk sınırına daha ulaşamamış ve yenilikler daha hızlı meydana gelebilmektedir. Bunun yanında bir de web teknolojilerin genelde yazılım tabanlı olması sebebiyle; sadece insan aklına gereksinim duyması büyük etkendir.

Sonuca ulaşmak adına izlenecek en iyi yöntem hangisidir? Bugün, yarın ve önümüzdeki yıllarda ne gelirse gelsin zirveye tırmanabilir bir site nasıl oluşturulabilir? Optimizasyona, reklam gelirlerine ve pazarlama aşamasına tekrar geriye dönmeksizin başlatan şey nedir? Geriye dönmek aynı şeyleri tekrar yapmaktır. Harcanan emeklerin boşa gitmesi, umut kırıcı bir durumdur. Ayrıca SEO çalışmalarınızın da gecikmesine neden olur.

Her Web Geliştiricisinin Bilmesi Gereken 21 Şey Anahtar Kelime İncelemesi

Şimdi web projelerinizde yer almasını soracağımız( veya yer almasını sağlayacağımız) şeylere göz atalım:Her Web Geliştiricisinin Bilmesi Gereken 21 ŞeyAnahtar Kelime İncelemesi

Bir web projesine başlamadan önce, anahtar kelime çalışması yapmıyorsanız, bu çok büyük bir sorun durumundadır. Anahtar kelime çalışması sizin hedef kitlenizin ne aradığını, hangi ifadelerin onları anlattığını ve özellikle onların arama motorunda arama yaparken o kutucuğa ne yazdığı hakkında bize bilgi verir.

Wire Frame

Wire Frame’de nedir ki diyebilirsiniz?  Bunlara eskiz, şablon diyebiliriz. Bunu internette aratarak da bulabilirsiniz. Kabaca açıklamamız gerekirse; sitenin tasarımını ilk başta kabaca çizmektir. Kabaca bir şablon oluşturmaktır diyebiliriz. Bunun sektörde yerleşmiş tam bir karşılığını bulamadığımdan; Türkçe’ye çevirmeden kullanacağım.

Wire Frame olmadan bir tasarım oluşturmanızı pek önermeyiz. Wire frame kullanmadan belki bir tasarımı daha hızlı tamamlayabiliriz. Ancak tasarım bittiğinde aklımızdaki şey ile, ortaya çıkan şeyin aynı olmama ihtimalini aklınızdan çıkarmayın. Ve genelde bu atlanan adım; sitemizde kesin görmek istediğimiz şeylerin tasarım aşamasında gözden kaçmasına neden olur.

Bu nedenle bu adımın kaçması gözden bir şeylerin kaçmasına veya aklınızda çok iyi duran bir tasarımın parçalarının birleştiğinde ortaya çıkan ürünün aklınızdaki ile aynı olmamasına neden olabilir.Bu nedenle renkler ve taslak dışı unsurlar olmaksızın, sitenizde olmasını arzuladığınız her ayrıntıyı içeren; sitenizin her aşamasını veya her sayfasını içeren bir wire frame oluşturmalısınız.

Solda wire frame, sağda gerçek tasarım

Gri Skala Kompozisyonu

Gri skala kompozisyonu baskı endüstrisinde son derece popülerdir ancak her nedense; web tasarım endüstrisinde pek popüler değil. Fikrimize göre; gri skala kompoziyonu web tasarımında da o kadar önemli olmalıdır. Renk dikkat dağıtıcıdır.Bir çok müşterinin site tasarımını beğenmediği için red ettiğini gördük. Bunu çevirirsek, renkleri beğenmediler. Gri skala tasarımcılara renkleri müşterilerin beğenip beğenmeyeceği veya renklerin birlikte nasıl duracağı hakkında kaygı duymadan, tasarımlarını gerçekleştirirler. Tasarımı gerçekleştirdikten sonra renkleri seçebilirsiniz.

Renk Kompozisyonu

En kötü durum gri skala kompozisyonu kabul edildikten sonra, renk kompozisyonunun ret edilmesidir. En başa gri skala kompozisyonunu değiştirecek misiniz? Hayır sadece gri skala kompozisyonu üzerinde, doğru renk kompozisyonunu bulana dek deneyeceksiniz. SEO hizmeti veren her firma renk uyumuna dikkat etmelidir çünkü bu conversion oranını artırır. 

Kodlama & Geliştirme

Hiç kodlama yapmadan web geliştirme mevcuttur. Kodlama yapanları bulabilirsiniz. Ancak sadece kodlama yapmak için birisini ve tasarım için başka birisini bulmak biraz sizi yavaşlatır. Hem ayrı iki kişi genelde daha fazla maliyet oluşturur. Ayrıca kodlama ile tasarımın uyumunu oluşturmak için de fazla zaman alır.  Bunları tek kişi yaparsa bu zaman minimuma inebilir.

HTML 5 (Onaylanmış)

HTML 5 site tasarımı için şu an çok iyi durumdadır ancak hala bazı siteler HTML 4 kullanmaktadır. HTML 4 evet hala çalışıyor ancak, bu sitenizin eski görünmesine sebep olabilir. HTML 5 yeni medyaya yükseliştedir ve diğer HTML sürümlerine göre daha az kod ile daha geniş fonksiyonelliğe sahiptir. Bu sizi daha berrak, temiz ve hızlı yapacaktır. Tasdik bir sitenin çalışması için gerekli olmadığında, bir geliştirici HTML kodlarını uygun şekilde en aza indirmelidir. Bunun için bazı istisnalar yok olmasa da (özellikle 3. parti araçlar kullanıldığında); ama tasdik iyi geliştirilmiş kod için bazı araçlarla gerçekleştirilmelidir.

CSS 3 (Onaylanmış)

HTML 5 ve CSS 3 aynı gemide ilerlemektedirler. CSS 3, gereksiz JavaScript kodları ve siteyi yavaşlatıcı resimleri azaltıcı püf noktalar önerir. CSS3 sitenizin hızını artırmakta ve sitenizin yüklenme hızını artırmakta benzersiz bir rol oynamaktadır. Ve yine, CSS 3 de tasdik edilmiş olmalıdır.

Arama Motoru Dostu Mimari

Özellikle tekil bir fonksiyon ekleniyorsa,bir siteyi kodlama büyük bir iş külfeti olarak görünmektedir. Ancak arama motorlarına uygun olamayan bir site oluşturmayı düşünmeyin.

Geliştiricilerin genel mimaride sitenin arama motorlarındaki performansı azaltıcı, haddinden fazla iç link, okunabilir URL’ler,  anlaşılabilir linkler ve sayfalar,  yavaş yüklenen siteler ve daha fazlasının dikkatlice düşünmesi gerekir. Geliştiricilerin çoğu arama motoru optimizasyonu hakkında bilgili olmadığı zamanlarda bile, bazıları gelecekte sorunlara neden olabilecek site mimarileri hakkında gerekli çalışmaları yaparlardı.

Kopya İçeriği Önleyin

Arama motoru dostu mimariden beri, geliştiriciler içerikleri arama motoru böceklerinin daha önce başta bir sayfada görmediğinden emin olmak zorundadırlar. Kopya içerikler salgın hastalık gibi yayılmaktadır ancak iyi geliştiriciler, sitelerini inşa ederken kopya içeriğe karşı önlem almak zorundadırlar. Kopya içerik SEO açısından da çok tehlikelidir. Bunu yapan siteler, arama motorları tarafından cezalandırılablir.

Sayfa Dışı Tasarım

Bu biraz da arama motoru dostu mimariyle alakalıdır. Ancak geliştiriciler daha az kodun ziyaretçilerin daha iyi bir web gezintisi yaşaması için gerekli olduğunu bilmeleri gerekir. Bu ziyaretçilerin kodlar hakkında kaygı duymasıyla alakalı olduğundan değildir,  onların ziyaretleri açısından önemlidir. Stiller ve Javascript kodları mümkün olduğu kadarıyla sayfa dışı katmanlar ile, ziyaretçinin tarayıcısına indirme işlemleri yaptırmaktan ayrılabilir. Bu da sayfanın daha hızlı çalışmasına ve her sayfa değişikliğinde tüm kodun tekrar indirilmesinin önüne geçebilir.

Boyutu Optimize Edilmiş Medya

Sitenizde medya kullanıyor musunuz? Peki bunlar uygun şekilde optimize edilmiş mi? Resimden videoya kadar her şey hız ve arama motoruna uygunluk açısından buyutlandırılmalıdırlar. Bazı medya içerikleri daha hızlı bir yüklenme için daha küçük bir boyuta sıkıştırılabilir ve orjinal boyutuna link verilebilir.

Medya oluşturulurken alt bilgi ve başlıkların eklenmesi için bir çok araç mevcuttur. Videoların çoğu Youtube için, resimlerin çoğu da resim araması için optimize edilir. Bu düşünce tarzı geliştirme prosesleri için önemlidir.

Tüm Resimler için Alt Yazılar

Site geliştirilirken resimlerin alt yazıları eklenmeyecek de ne zaman eklenecek? Tabi ki her şey hallolduktan sonra geri döner ve yaparsınız. Ancak neden geri dönesiniz ki? Bunu kolaylıkla başta yapabilirsiniz.

CSS Resim Spriteları

Bu terimin dilimizdeki yerleşmiş karşılığını bilmiyorum, o yüzden olduğu gibi aldım. Bu  tüm görselleri, bir görselde saklamaktır. CSS ile istediğiniz görseli, bu tümleşik görselden seçebilir ve kullanabilirsiniz. Bu işlem sayesinde sitenizin yüklenme hızı artar ve dolayısı ile sitenizin hızı artar. Daha geniş resim kuşkusuz daha az zorlanma ve daha hızlı yüklenmeye neden olacaktır. Bu özellikle çoklu resimler için doğru resim kullanıldığında geçerlidir.

Mobil Cihazlara Duyarlılık

Sitenizin mobil cihazlarda nasıl göründüğüne dair bir kaygınız oldu mu hiç? Olmalıdır. Müşterileriniz mobil cihazlardan yaptıkları işlemleri bitiremeseler bile, çoğu zaman mobil işlemler hakkında araştırmaya başlarlar. Markalaşma namına önemlidir.

Eğer web siteniz mobil cihazlarda çalışmıyor veya bozuk görünüyorsa bu iyi bir ilk izlenim bırakma şansınızı ortadan kaldırır. Mobil cihazların kullanımı her geçen gün artarken, hedef kitlenizin de mobil cihaz kullanımının artacağını unutmayın. Bu hem bugün içindir hem de gelecek için kaçınılmaz sondur.Değişken 

Ekran Boyutlarına Duyarlılık

Ekran boyutları günümüzde çok değişkendir. Cep telefonları, tabletler,  diz üstüler, büyük ekranlı masa üstü bilgisayarlar hep bize değişken ekran boyutları sunar. Mobil cihazlarda olduğu gibi bunlarda da, web siteniz iyi bir izlenim bırakmalıdır.

Hız için Optimizasyon

Hıza yazımızın bir çok yerinde yer verdik. Hız dışında her şeyi optimize ettikten sonra, dönüp neyin sitenizi yavaşlattığına bir bakın. Bu sadece gereksiz ufak bir ayrıntı olabilir mi? Bizce hayır. Ziyaretçilerin sitenizde geçirdiği deneyimin açısından hız oldukça önemlidir ve bu sebeple sitenizi hızlandırmak için elinizden geleni yapmalısınız.Analiz Araçlarını Kurun

Sitenizin tasarım kısmı çok güzel ancak sitenize analiz araçları kurmadıysanız daha sonra sitenizin arama motorlarındaki performansı hakkında nasıl bilgi sahibi olacaksınız?  Analiz araçlarını kurmak sanılan aksine çok basittir, sadece sitenize bir kod eklenir. Bu tüm web siteleri için standart olmalıdır. SEO çalışmaları için de bu araçlar çok önemlidir.

Kırık Link Kontrolü

Eğer her bulduğumuz kırık link başına lira alsak, şu an milyoner olurduk. Kırık link bırakmaksızın siteyi teslim etmek, geliştiricilerin işidir. Ayrıca periyodik olarak linkler kontrol edilmelidir. Kırık linkler de ziyaretçiler için kötü bir durumdur.

Geniş Test

Her ne koşulda olursa olsun, geliştirici bir web sitesini teslim etmeden önce siteni her yerini test etmelidir. Bir web sitesi teslim edildikten hemen sonra sorun çıkmasının hiç bir mazereti yoktur. Sitenin tamamlanması için süre verilirken, test yapılacak süre de buna eklenmelidir.  Aceleyle test edilmeden teslim edilmiş işler, büyük ihtimalle sorun ile dönecektir.

404 & Favicon

Bazı web geliştiricileri için küçük bir ayrıntıdır. Hep iş bitimine zaman kalırsa diye bırakılır. Tarayıcı adres satırının yanında küçücük bir resmin olması ile olmaması arasında onlarca fark yoktur. ancak bu sitenin kalite göstergesidir. Küçük resmin büyük bir etkisi vardır.

404 hata sayfası da olmayan bir adrese ziyaretçi gittiğinde ortaya çıkar. Bu özel tasarlanmış bir sayfadır. Kuşkusuz ki ziyaretçiye düz bir “page not found” mesajından daha iyi şeyler ortaya çıkarabilirsiniz. Ayrıca onu ana sayfanıza yönlendirebilirsiniz.

Yazıcı Uyumu

Son olarak çok az yerde geçer ancak; siteniz yazıcı uyumlu olmalıdır. Bu sayede ziyaretçiler içeriğinizi yazdırmaya çalıştığında sürprizle karşılaşmaz. Yazıcı uyumu sadece yazdırma işlemi için değil, sayfanızın okuma konforu açısından da oldukça önemlidir. Css kullanarak bu uyuma kavuşabilirsiniz. Ayrıca içeriklerinizin botlar tarafından okunabilir olduğundan da emin olmalısınız.

Maddelerimizi burada bitirdik ancak bu sadece bu alanda söyleneceklerin bir kısmı. İyi bir web tasarım, iyi bir SEO için ilk adımı oluşturur. Web siteleri her geçen gün önemlerini artırmaktayken, kuşkusuz bu alanda hizmet verenler de kendini geliştirmelidir.

Bu yazı büyü oranda Stoney G. deGeyter’ın “21 Things Every Web Developer Should Be Doing” adlı yazısından yararlanılarak oluşturulmuştur.