İçindekiler
Mobil kullanımının artması internet sitelerine erişimlerde mobil cihazların daha etkin hale gelmesini sağladı. Bu nedenle internette var olmak isteyen tüm internet site sahiplerinin mobil uyumu sorunsuz bir şekilde sağlaması gerekmektedir. Siteyi mobil görüntüleme ile öncelikle durumun kontrol etmesi gereken kullanıcılar, özellikle HTML bir siteye sahipse mobil uyum konusunda çok daha farklı çalışmalar gerçekleştirmek durumundadır. Zira WordPress gibi özel içerik yönetim sistemlerinde, mobil için çok daha gelişmiş seçenekler bulunmaktadır. Böylece kullanıcılar bir eklenti ile dakikalar içerisinde WordPress siteyi mobil uyumlu hale getirebilmektedir. Ancak HTML tabanlı bir şekilde geliştirilen internet sitesinde, siteyi tüm tarayıcılarla uyumlu yapmak pek çok farklı kriterin gözetilmesini zorunlu hale getirmektedir.
Web sitelerinde mobil uyum neden önemli?
İnternet siteleri için başlangıçta tek erişim kaynağı bilgisayarlardı. Ancak bilgisayarlarda sağlanan tüm bu imkanlar, mobil kullanım arttıkça farklı gereksinimlerin ortaya çıkmasına neden oldu. Daha kompakt bir ekran üzerinden kullanılan cep telefonlarında internet sitelerinin mobil özellikleri desteklemesi ve küçük ekranlarda kolay bir şekilde okunabilmesi önemlidir. Mobil uyumda aşama aşama tüm bu detaylar elden geçirilerek sitenin her bir noktasında mobil kullanıcının zorlanmadan siteyi kullanması, site sayfalarında gezinmesi, arama yapması ya da diğer sitedeki işlemleri yerine getirmesi sağlanmaktadır. Mobil uyumun yerine getirilmemesi, kullanıcıların genellikle siteden çıkmasına neden olacağından niye kullanışları SEO çalışmalarında da ciddi bir zarar yaşamasına neden olacaktır. Mobil uyum hem kullanıcı deneyimi hem de Google gibi arama motorları için oldukça önemsenmektedir. Bu bakımdan internette belirli bir hedefe ulaşmak isteyen bir kişinin, sistemi ya da kod yapısı ne olursa olsun mutlaka uygun bir çalışma ile siteyi mobil uyumlu hale getirmelidir.
Adım adım HTML siteyi mobil uyumlu yapmak
HTML sistemlerde genellikle CSS kullanılır ve böylece sitenin görsel düzenlemeleri CSS üzerinden gerçekleştirilir. Bu bakımdan sayfayı mobile duyarlı hale getirmek için kod yapılarında bazı değişiklikler ve eklemelerin yapılması gerekmektedir. Bunun için öncelikli olarak yapılması gereken işlem <head> </head> etiketleri arasına meta etiketi ekleyerek sitenin mobil uyuma sahip olduğunun belirtilmesidir. Bunun için eklenmesi gereken kod ise şöyledir;
<meta name=”viewport” content=”” />
HTML ya da diğer web sitelerinde sitenin mobil uyumlu olduğunun belirtilebilmesi adına mutlaka mevcut kodun kullanılması gerekir. Kullanıcıların mevcut kodu kullanırken dikkat etmesi gereken detaylardan birisi content bölümüdür. Content, pek çok farklı özellik ile desteklenen bir alandır. Bu bölümde sayfanın ekran genişliğine göre duyarlı hale gelmesini sağlayan width=device-width, height, initial-scale , user-scalable , maximum-scale ve minimum-scale gibi ek kodlar kullanılabilir. Her kod farklı bir özelliği tanımladığı gibi web sitesinin mevcut özelliklerine göre bu kodlar content bölümüne eklenerek uygun değerler ile düzenlenmelidir. Content bölümünde uygun kodların eklenmesi sonrasında kodlar şöyle bir görünüme sahip olacaktır;
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Burada her site için yapılması gereken farklı bir çalışma olduğundan dolayı mutlaka yer alması gereken ya da mutlaka kullanılması gereken bir kod bulunmamaktadır. Kullanıcılar yukarıda yer alan ek kodların ne işe yaradığını öğrenerek deneme yanılma yöntemi ile sitelerine kontrol edebilir. Bu sayede bir web sitesi için en iyi görünüm ayarları kolay bir şekilde HTML üzerinden yapılandırılabilir. Site kodlarında yapılan mevcut değişikliklerin ardından CSS değişiklikleri ile HTML siteyi mobil uyumlu yapmak adımlarına devam edilebilir.
CSS ile HTML siteyi mobil uyumlu yapmak
CSS değişiklikleri için ise öncelikle olarak sitede yer alan style.css dosyasının uygun bir bölüme alttaki kodların eklenmesi gerekir.
@media only screend and (max-width:959px) {
kodlar buraya gelecek
}
Kodlar buraya gelecek bölümünde kullanılmak istenen özelliklere göre CSS’e uygun kodlara yer verilmelidir. Arka plan kodu ya da yazı boyutu, fontu gibi pek çok farklı değişikliğe bu bölümde yer verilebilir ve herhangi bir sınır bulunmamaktadır. Hazırlanan örnek bir çalışma ise şöyle;
<style>
@media screen and (max-width: 600px) {
body {
background-color: blue;
}
}
</style>
Yukarıdaki kod yapısında ekran genişliği 600 piksel ve 600 pikselden küçük olan ekranlarda arka plan renginin mavi olarak ayarlanması istenmiştir.
HTML sitelerin mobil uyumunda dikkat edilmesi gereken noktalar
Mobil uyum için yapılacak çalışmalarda dikkat edilmesi gereken bazı kriterler bulunmaktadır. Bu kriterler ise şöyledir;
Masaüstü tasarımlarda pixel kullanılırken mobil tasarımlarda pixel yerine yüzde ölçü birimi kullanılmaktadır.
Mobil uyumun her aşamasında mutlaka testler yapılmalıdır. Farklı cihazlar üzerinden yapılacak testler ile herhangi bir hatanın olup olmadığı kontrol edilmelidir.
