Mobil Sitemi, Mobil Uyumlu Sitemi?
Google ilk olarak konuyu ortaya attığında parası ve yeterli gucu olanlar ilk etapta mobil cihazlar icin yazılımlar geliştirdi. Android ve İphone uyumlu bu yazılımlar cihazlara yuklenip kullanılmaktadır. Asıl mobil site bu olup, masraflı ve bir okadarda zahmetlidir. Normal sitenizden ayrıca mobil icinde icerik girmeniz gerekmektedir. Başarılı bir haber sitesine sahipseniz sizin icin ideal olabilir. Ama benim gibi gunluk ziyaretcisi 1K olan biri icin gereksiz zaman kaybıdır. Google ’de bunun farkında olacakki mobil site yapmak zorunda değilsin hacı siteni mobil cihazlara uygun hale getir demektedir.

Mobil Cihazlardan Sitelere Girilmiyor mu?
Şuan akılsız telefonu olan insan yok denencek kadar azdır. Bu cihazlardan google ’de arama yapabilir cıkan sonuclarda dilediğiniz siteye girebilirsiniz. Ornek https://www.sachastaliklari.com sitesi sağdan soldan genişlik olarak 990px olarak tasarlanmıştır. Bu siteye girdiğinde site mobil yada mobil uyumlu değilse cihaz bunu alıyor 990px ’den 320px ’ duşuruyor. Bunu daraltma yontemi ile yapmaktadır. Bu aşamada tabiki yazılarınız bazen okunmayacak kadar kuculluyor. Cihaz sahibi onları okumak icin parmakları ile ekranı genişletmeli vs yoksa mobil uyumu olmayan siteye girilmeme gibi bir sorun yoktur. Google diyorki ya hacı işte sitene giren rahatca iceriği incelesin, gerekli bilgiyi alsın. Ekranı buyut, kucult, sağa kaydır, sola kaydır uğraşmasın diyor. Bana bunu yap yeter soz siteni arama sonuclarsa mobil uyumlu olarak gostereceğim diyor.

Biraz CSS Bilginiz Varsa Bu İş Tamam
Dunya genelinde wordpress tabanlı bir siteye sahipseniz zaten bir temanız ve kendi css dosyası vardır. Temanız yeni nesil değilse tasarımcı muhtemelen % yerine px olarak boyutlandırma yapmış olacaktır. İşte bunu duzenlemek icin az CSS bilgisi yeterlli olmaktadır. Yoksada sorun değil baktığımda oğrenirim diyorsan hemen sitenizi tema editorune girerek işlemlere başlayabilirsin. Oncelikle CSS kodlarınızı bir yere yedekleyin bozulunca geri yuklersiniz.

Metaların Arasına Eklemeniz Gereken Kod
Arama motorları ile sitenizin iletişim meta taglarla yapılmaktadır. Başlık, acıklama, site sahibi vs bir cok bilgiye yer verdiğimiz bu kısımda aynı zamanda google benim sitem mobil uyumlu dediğimiz bir kod olmalıdır. Aşağıda yer alan kodu arasına ekleyerek işleme başlıyoruz.

Kod:


Siteniz Mobil Uyumlumu Kontrol Edin?
Oncelikle gerek bir akıllı telefon, gerekse googlenin sağladığı araclar ile sitenizin mobil uyumlu olup, olmadığını sadece 30 saniye gibi kısa bir surede oğrenebiliriz. Yandaki linke https://www.google.com/webmasters/tools/mobile-friendly/?url=http://www.webmasteryolcu.com tıklayarak sizde sitenizin durumunu oğrenebilirsiniz. İşlem sonucu kırmızı cıkarsa maalesef uyumlu değildir.

Px Tasarımları % Olarak Değiştirecez
İşimiz muhtemelen %99 sadece CSS dosyamızla olacak olup, size olayı anlatmaya calışayım. WordPress siteler genelde 4-5 ana bolumden oluşur. Bunlar header (ust) Content (İcerik Alanı) Footer (Alt) Sidebar (Sağ yada sol kısım) bir cok tasarımcı bu bolumleri bir div icine (Container) kapsayıcı div icine almaktadır. Bu genelde body kısmında olmaktadır. Muhtemelen 990px yada o arada bir rakam olabilir. 100% olarak girilmişse sorun yoktur. Rakam ve px olarak girişmişse onu 100% şeklinde değiştirebiliriz. Bu aşamadan sonra sitenizi kontrol ediniz. Ekranı tamamen kaplıyorsa burada dilerseniz maksimum bir genişlik icin sınır koyabilirsiniz. Css kısmına max-width:990px; şeklinde bir ibare koyduğunuzda siteniz 990px boyutunu gecmeyecektir. En buyuk ekrandada girse bu boyutla gorulur.

Bu işlemi diğer ic kapsayıcı divler icinde yapmalıyız. Ornek icerik alanı 800px olup geri kalan 190px ’lik kısmı ise sidebara vermiş olabilir. Burada iki kişinin paylaştığı bir yer olup, content ’e 75%-80% verebiliriz. Geri kalan %20-%25 ’lik alanı ise sidebara sağ menuye bıraktık. Onun piksellerine bilerek dokunmuyorum, cunku benim mudahale edeceklerim 300px ve uzeri olanlardır. Cunku en kucuk mobil cihazın boyutu 320px gibidir. Aynı şekilde header, footer icinde uyguladığınızda siteniz mobil uyumlu hale gelecektir.

Bootstrap Kutuphanesi Kullanın
Sıfırdan mobil uyumlu site yapmanın en kolay yolu olan Bootstrap kutuphanesi bundan boyle bizimde cok işimize yarayacaktır. Sitenize ekleyeceğiniz araclar, tablolar mobil uyumlu olmalı, bu işlemleri bootstrap ile cok kolay bir şekilde yapabilirsininiz. Ornek bir slider ekleyeceksiniz. Sadece 30 saniye gibi bir surede kolayca ekleyebilirsiniz. Aynı zamanda mobil uyumlu olan bu araclar işini oldukca kolaylaştıracaktır.

Bootstrap Nedir, Nasıl Kullanılır?
jQuery tarzı bir sistem olup, hazır JS ve CSS kutuphanesi ile size sadece kodların kısa yolunu kullanmak kalıyor. Bu konuda daha fazla bilgi edinmek isteyenler icin yararlı olacağını umduğum bir video ekliyorum. Anar Samadov tarafından hazırlanan Bootstrap anlatım videosunun ilki aşağıda olup, devamını merak edenler icinde http://www.anarsamadov.net/kategori/bootstrap bu linkten devamına ulaşabilir. Kesinlikle bilmeniz, uygulamanız gereken guzel bilgilerdir.

http://www.webmasteryolcu.com/wordpr...il-uyumlu.html