Bu Yazı 77 kez okundu Bu Yazı 77 kez okundu
|

Sitenizi veya Temanızı Mobil Uyumlu Yapmak İçin 5 Dakika Yeterlidir

antalya-web-tasarim-mobil-uyumlu

Mobil Sitemi, Mobil Uyumlu Sitemi?
Google ilk olarak konuyu ortaya attığında parası ve yeterli gücü olanlar ilk etapta mobil cihazlar için yazılımlar geliştirdi. Android ve İphone uyumlu bu yazılımlar cihazlara yüklenip kullanılmaktadır. Asıl mobil site bu olup, masraflı ve bir okadarda zahmetlidir. Normal sitenizden ayrıca mobil içinde içerik girmeniz gerekmektedir. Başarılı bir haber sitesine sahipseniz sizin için ideal olabilir. Ama benim gibi günlük ziyaretçisi 1K olan biri için 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 çıkan sonuçlarda dilediğiniz siteye girebilirsiniz. Örnek http://www.netpaylas.net 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’ düşürüyor. Bunu daraltma yöntemi ile yapmaktadır. Bu aşamada tabiki yazılarınız bazen okunmayacak kadar küçüllüyor. Cihaz sahibi onları okumak için parmakları ile ekranı genişletmeli vs yoksa mobil uyumu olmayan siteye girilmeme gibi bir sorun yoktur. Google diyorki ya hacı işte sitene giren rahatça içeriği incelesin, gerekli bilgiyi alsın. Ekranı büyüt, küçült, sağa kaydır, sola kaydır uğraşmasın diyor. Bana bunu yap yeter söz siteni arama sonuçlarsa mobil uyumlu olarak göstereceğim diyor.

Biraz CSS Bilginiz Varsa Bu İş Tamam
Dünya 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 düzenlemek için az CSS bilgisi yeterlli olmaktadır. Yoksada sorun değil baktığımda öğrenirim diyorsan hemen sitenizi tema editörüne girerek işlemlere başlayabilirsin. Öncelikle CSS kodlarınızı bir yere yedekleyin bozulunca geri yüklersiniz.

Metaların Arasına Eklemeniz Gereken Kod
Arama motorları ile sitenizin iletişim meta taglarla yapılmaktadır. Başlık, açıklama, site sahibi vs bir çok 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:
<meta name="viewport" content="width=device-width, 
initial-scale=1">

Px Tasarımları % Olarak Değiştirecez
 İşimiz muhtemelen %99 sadece CSS dosyamızla olacak olup, 
size olayı anlatmaya çalışayım. 
WordPress siteler genelde 4-5 ana bölümden oluşur. Bunlar header 
(üst) Content (İçerik Alanı) Footer (Alt) Sidebar (Sağ yada sol kısım) 
bir çok tasarımcı bu 
bölümleri bir div içine (Container) kapsayıcı div içine 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 için sınır koyabilirsiniz. 
Css kısmına max-width:990px; 
şeklinde bir ibare koyduğunuzda siteniz 990px boyutunu geçmeyecektir. 
En büyük 
ekrandada girse bu boyutla görülür.
 
 Bu işlemi diğer iç kapsayıcı divler içinde yapmalıyız. Örnek içerik 
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ğ menüye bıraktık. Onun piksellerine bilerek dokunmuyorum, 
çünkü benim müdahale 
edeceklerim 300px ve üzeri olanlardır. Çünkü en küçük mobil 
cihazın boyutu 320px gibidir. 
Aynı şekilde header, footer içinde uyguladığınızda siteniz 
mobil uyumlu hale gelecektir.
 
 Bootstrap Kütüphanesi Kullanın
 Sıfırdan mobil uyumlu site yapmanın en kolay yolu olan 
Bootstrap kütüphanesi bundan böyle 
bizimde çok işimize yarayacaktır. Sitenize ekleyeceğiniz araçlar,
 tablolar mobil uyumlu 
olmalı, bu işlemleri bootstrap ile çok kolay bir şekilde 
yapabilirsininiz. Örnek bir 
slider ekleyeceksiniz. Sadece 30 saniye gibi bir sürede 
kolayca ekleyebilirsiniz. 
Aynı zamanda mobil uyumlu olan bu araçlar işini oldukça 
kolaylaştıracaktır.
 
 Bootstrap Nedir, Nasıl Kullanılır?
 jQuery tarzı bir sistem olup, hazır JS ve CSS kütüphanesi 
ile size sadece kodların 
kısa yolunu kullanmak kalıyor. Bu konuda daha fazla bilgi 
edinmek isteyenler için yararlı 
olacağını umduğum bir

Kısa URL: http://www.netpaylas.net/?p=11223

Yazar . Kas 7 2016. Kategori Diğer Bilgiler. Bu yazıya eklenen yorumları RSS beslemesi üzerinden takit edebilirsiniz RSS 2.0. Yorum yazabilir veya geri izlemede bulunabilirsiniz.

1 yorum . “Sitenizi veya Temanızı Mobil Uyumlu Yapmak İçin 5 Dakika Yeterlidir”

  1. hocam teşekur ederim mobil uyumlu hale geldi cok güzel anlatılmış emeginize saglık

Yorum Yazın

*

Dil Seçin
ArabicEnglishFrenchGermanPortugueseRussianTurkish
Dil Seçin
Sizin Reklamınız Burada Yer Alsın
Hemen Keşfet
Sizin Reklamınız Burada Yer Alsın Sizin Reklamınız Burada Yer Alsın

En Son Yorumlananlar

  • ARS YAPI CAM BALKON: Memnuniyet Garantisi. kaliteli , güvenli , hızlı çözüm üreten ekibimiz ile müşteri memnuniyeti...
  • oyunim.com: çok tuhaf bir şekilde bağımlısı olamayacağınız site…
  • Toplist 25, siteni ekle, hit kazan: TopList – Türkiye – Sihirdarlar – League of Legends –...
  • Kamil Aska Telekom: bende 10 kilo cep telefonu ana kartı vardı gönderdim paramı hemen havale ettiler saglam bir firma...
  • Manolya: hocam teşekur ederim mobil uyumlu hale geldi cok güzel anlatılmış emeginize saglık
Haziran 2017
P S Ç P C C P
« May    
 1234
567891011
12131415161718
19202122232425
2627282930  
Copyright 2006 -2016 Netpaylas, A.Ş Telif Hakları Netpaylas.Net'e Aittir, Tüm Hakları Saklıdır.
Samsung | Apple | Nokia | LG | HTC | General Mobile |Kyocera| Huawei | Asus| BlackBerry | Alcatel|

online