Düzgün Kod Yazımının Web Tasarımına Faydası Nedir?

Temiz kod yazmak hem SEO hem de erişilebilirlik açısından faydalıdır.

Web her gün değişen ve gelişen bir organizmadır, bu sebeple kendi kendine gelişebilen web siteleri oluşturmak ve yeni teknolojilerin altında ezilmemesi için gerekli önlemleri önceden almak gereklidir.

Temiz kodlama ve web standartlarına uygun web siteleri geliştirmek sadece bu önlemi almanıza yardımcı olmakla kalmaz, bunun yanısıra uzun vadede size hem zaman hem de para kazandıracaktır.

Web geliştikçe onun kullandığı teknolojiler de gelişmektedir. Her ne kadar HTML uzun süredir hayatımızda yer alıyor olsa da, bu süreç içerisinde ona bağlı veya onunla doğrudan ilişkili pek çok yan kodlama dili de onunla birlikte gelişti.

İlk olarak JavaScript, ardından CSS, XML ve daha sonra AJAX. HTML 5′in geniş kitlelerce kullanılmaya başlamasına da çok fazla zaman kalmamış görünüyor, zira Firefox, Safari, Opera ve Google Chrome gibi tarayıcılar daha şimdiden HTML 5 desteği vermeye başlamış durumdalar (mahallenin tembel çocuğu Internet Explorer, her zaman olduğu gibi diğer tarayıcıları geriden takip ediyor).

Bu makalede web standartlarının temellerini inceleyecek, onların ne olduğunu artaştıracak, sizin için ne anlam ifade ettiklerine bakacak ve bu önemli ve genellikle gözardı edilen soruna dair bazı önemli ipuçları vereceğiz.

“Temiz” Kodlama Yapmanın Anlamı Nedir?

En basit şekilde ifade etmek gerekirse gereksiz kodlar içermeyen, standartlarla uyumlu ve her bir dilik etiketlerini ve yapılarını doğru şekilde kullanan kod yazmak demektir.

Gereksiz kodlardan arındırılmış HTML kodu, ilgili dilin sunduğu tüm etiketleri doğru şekilde ve yerinde kullanır ve hedefine mümkün olan en az miktarda kod kullanarak ulaşmaya çalışır. Bu durum, satıriçi CSS gibi gereksiz kod yazımının önüne geçmesinin yanısıra her bir belgeyi organize bir şekilde depolar.

Bunun yanısıra CSS kodu da kendisini tekrar etmemelidir ve kalıtım avantajını ve (unutmayın ki CSS’nin tam adı Cascading Style Sheet – Peşpeşe Dizilmiş Stil Şablonudur) CSS sınıflarını (class) tekrar tekrar kullanabilmelidir.

“Standartlarla uyumlu” teriminin anlamı ise sayfanızın, W3C’nin (World Wide Web Consortium – Dünya Çapında Ağ Konsorsiyumu) HTML, CSS ve XML için belirlediği standartlarla uyumlu olması ve bu standartların doğru kullanılıp kullanılmadığını ölçen testten başarı ile geçebilmesi anlamına gelmektedir. Diğer bir deyişle ücretsiz sunulan W3C doğrulayıcılarını kullanarak sayfalarınızı hatalara karşı test etmeli ve sayfanız %100′e mümkün olan en yakın miktarda hatasız olana kadar hatalarından arındırmalısınızdır.

Peki Bundan Bana Ne? Sayfam Çalışıyor, Bu Yeterli Değil mi?

Her bir projenin agresif bir zaman sınırlaması vardır ve her bir müşteri, web sitesinin “dün” yayımlanmış olmasını ister. Bu sebeple web geliştiricileri ve tasarımcıları olarak, daima daha hızlı ve verimli çalışabilmek için baskı altındayızdır.

Hızlı çalışmanın özensiz çalışmak anlamına geldiği düşüncesine kapılmak çok kolaydır ve temiz, standartlarla uyumlu kod yazmak daha fazla zaman ister. “Çalışıyor ya, gerisi önemli değil” demek kolaydır.

Elbette, çalışıyor… şimdilik, sizin için. Peki ya gelecek yıl, ya da günümüzden üç yıl sonra? Yeni tarayıcılar çıktığında ne olacak? Peki ya erişilebilirlik?

Büyük arama motorlarıın özensiz ve yanlış kod yazımına müsamaha göstereceğini mi zannediyorsunuz? Arama motorları mızmızdırlar ve eğer web sitenizin kodu standartlarla uyumlu değilse, arama motorları puanınıza (search engine ranking) büyük bir darbe vurmuş oluyorsunuz.

Peki ya sizin hazırladığınız sayfaları daha sonra değiştirecek olan kişilere ne demeli? Ya bir otobüsün altında kalırsanız, ya da bir anda tası tarağı toplayıp seyahate çıkmak isterseniz ne olacak? Bu gibi durumlarda sizin işinizi bıraktığınız yerden bir başkası devralmak zorunda olacaktır ve kodunuza bakarak ondan anlam çıkarmaya çalışacaktır. Bu onun için kolay mı olacak yoksa kodunuza her baktığında başına ağrılar mı girecek?

İşi en başından doğru yapmaya özen gösterin. Bu söylediğimiz gerçekten can sıkıcı bir anne nasihatından çok daha önemli olup uzun vadede size hem zaman ve para kazandıracak, hem de sizin işlerinizi devralan kişilerin hayatını kolaylaştıracaktır.

Bazen kod yazarken CSS kodunuzu doğrudan kod üzerine gömmeyi, ilgili kodu harici CSS dosyasına eklemekten daha kolay bulabilirsiniz. Daha da önemlisi, genel belge yapısını gözardı ederek, aklınıza gelen her HTML kodunu kullanmayı düşünebilirsiniz.

Daha sonra ilgili belgeyi (sayfayı / siteyi) güncellemeniz gerektiğinde ya da sitenizin tasarımını değiştirmek istediğinizde, eskiden özen göstermeden yazdığınız o kodu anlamak ve düzeltmek için çok daha fazla zaman harcayacaksınızdır. Yeni bir stil şablonu oluşturduğunuzda, o satıriçi stil kodları sizin başınızı çok ağrıtacak ve her bir sayfanın kodunu ayrı ayrı inceleyerek o kodları kaldırmak için çok uzun zaman harcayacaksınız.

Genişletilibilirlik, Erişilebilirlik, Aktarım ve Geleceğe Yönelik Kodlama

Taşınabilir (mobil) cihazların kullanımı inanılmaz bir hızda büyüyor. 5 yıl öncesinin oyuncak telefonlarının aksine günümüzde herkes cep telefonlarını kullanarak İnternet üzerinde geziniyor.

Destek teknolojisi (görme bozukluğu çekenler için ekran okuyucuları ya da engelliler için diğer arayüz aygıtları) kullanımı yaygın ve sırf onları göz ardı ettiğiniz için bir satıştan ya da ziyaretçiden mahrum kalmak istemezsiniz.

Siteniz, dünyanın farklı yerlerinde yaşayan kişiler tarafından ziyaret edildiği için muhtemelen pek çok farklı dile çevrilecektir. Internet Archive, Google Cache ve benzeri uygulamalar sağolsun, bugün İnternet’e koyduğunuz sayfalar sizin hedeflediğinizden çok daha uzun bir süre İnternet üzerindeki yerlerini alacaklar, hatta siz sitenizi kapattıktan sonra bile…

Temiz ve standartlarla uyumlu kod yazımı sayesinde web sitenizin bu senaryoların her birinde çalışmaya devam edeceğinden emin olabilirsiniz.

Dikkat Edilmesi Gerekenler

• Etiketleri doğru şekilde ve işlevine yönelik olarak kullanın. Örneğin H1, bir sayfanın en üzerindeki başlık elementidir ve onu H2, H3 takip eder. Sayfa başına sadece bir adet H1 bulunabilir.
• CSS sınıflarınızı ve kimliklerinizi anlamlı terimler kullanarak isimlendirin ve onlar için isim seçerken, sadece CSS kodunuza bakan bir başkasının o koda bakarak ilgili CSS sınıfının ya da kimliğinin (ID) hangi sayfa bileşeni için kullanıldığını anlayıp anlayamayacağını sorgulayın.
• HTML, CSS ve XML kodunuzu doğrulayın ve bulunan mümkün olan en fazla sayıda hatayı gidermeye çalışın. Doğrulama araçlarının verdiği uyarı mesajlarına da dikkat edin.
• WYSIWYG araçları kulanılarak oluşturulan kodları bir kez de kendiniz kontrol edin ve eğer gerekiyorsa kodu temizleyin. Bu tip araçlar genellikle gereksiz pek çok kodu sayfalara dahil ederler.
• Sırf aceleniz var diye satıriçi stillemeler ve gereksiz etiketler kullanmaktan kaçının. Eğer aceleniz var ise ya daha erken kodlamaya başlayın ya da o işi daha fazla zamanınızın olduğu bir güne erteleyin.
• “Çalışıyor ya gerisi önemli değil…” mantalitesinden kaçının. Bir sayfanın çalışması, onun kullandığı kodun standartlarla uyumlu olduğu, problem içermediği ya da arama motorları ile uyumlu olduğu anlamına gelmemektedir.

Etiketler: Erişilebilirlik, HTML, Kodlama, W3C