Zeki Can - WordPress
Siteyi Mobil Uyumlu Responsive Yapma
Merhaba arkadaşlar, günümüzün web sitelerinde öne çıkan özelliklerden biride mobil uyumlu yani diğer adıyla responsive özellikli web siteleridir. Artık gelişen dünyada buzdolapları dahi internete bağlanabiliyorken web sitenize ya da blogunuza gelen mobil kullanıcılara masaüstü temanızla karşılamanız hoş bir durum olmayacaktır. Hem kullanıcı performansı açısından hem de ileriye dönük site kaliteniz açısından bu konu çok önemlidir. Yeni temalarda bu özellik ilk aranan özelliklerden biri olduğunun farkına varan tema yapımcıları, temalarının özelliklerini sayarken bu özellik ilk olarak bahsettikleri özelliklerden biridir. Bu da bize gösteriyor ki Responsive tasarımın küçümsenemeyecek bir kalite standardı halini almış bir yere sahip özellik olduğunu.
Temamı Seviyorum Ama Responsive Değil
Size responsive mantığını anlatmaya çalışacağım bu makalemde. Öncelikle sevdiğiniz temadan vazgeçmek tabi ki zorunlu değilsiniz. Css ile aranız iyi ise küçük dokunuşlarla sitenizi mobil uyumlu hale getirmemeniz elde bile değil. Öncelikle kodlar vereceğim size ve neyi nerede kullanmanız gerektiğinden bahsedeceğim. Teknolojik Blog com (güncelleme teknolojikblog daha önceden kullandığım alan adım. Şimdi zekican.net olarak devam ediyorum. Hakkımda sayfasında sitemin geçmişini okuyabilirsin;) )olarak sitenizi mobil hale getireceğiz. Kodlar da geçenleri açıklamakla başlayayım.
Sayfamızı Mobil Duyarlı Hale Getirelim
Html etiketlerimizin arasına alttaki kodumuzu ekleyelim ve sayfamızı mobil duyarlı hale getirelim. <head> </head> etiketlerimizin arasına alttaki meta etiket kodumuzu çağıralım.
<meta name="viewport" content="" />
Bu meta etiketimiz sayfanın mobil uyumlu olması için mutlaka gerekli. Content kısmımız gördüğünüz gibi boş buraya gelebileceklere bakalım ve kendimize göre burayı dolduralım.
width Sayfanın ekran genişliğine göre duyarlı hale gelmesini sağlayan koddur. Ayrıca diğer kullanımı da width=device-width şeklindedir.
height Sayfanın ekran yüksekliğine göre duyarlı hale gelmesini sağlayan kodumuzdur. Çok kullanılan bir kod değildir. Bazı projelerde kullanılabilir.
initial-scale Sayfa gösterileceği zaman ölçeklendirmeye yarar. initial-scale=1.0 şeklinde bir kullanımı vardır. 1.0 değeri ölçeklendirme yapılmamasını sağlar. 0 ve 10.0 arasında bir değer verebilirsiniz.
user-scalable Ziyaretçi sayfayı görüntülediğinde zoom (çimdikleme) veya ölçekleme yapıp yapamayacağını belirleyebileceğiniz özelliktir. yes veya no değerlerini alır. user-scalable=no şeklinde kullanılmalıdır.
maximum-scale Ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom’un yani yakınlaştırma-büyültme oranını belirlemenizi sağlar. maximum-scale=1.0 şeklinde kullanılabilir.
minimum-scale Aynı maximumun gibi ama bu sefer tersi şeklinde ziyaretçi sayfayı görüntülediğinde yapabileceği maksimum zoom out yani uzaklaştırma-küçültme oranını belirlemenizi sağlar. minimum-scale=1.0 şeklinde bir kullanım uygundur.
Şimdiye kadar yazıklarımız mobil uyumlu hale getirmek için bir başlangıç aşamasıydı. Devamı konumuz da çözünürlüğe göre CSS kodları belirleyebileceğim @media özelliğimizden bahsedeceğim. Daha detaylı bir konu olduğundan ayrı bölümde yazmak istedim. İkinci konuya ” Siteyi CSS ile Mobil Uyumlu Responsive Yapma ” tıklayarak gidebilirsiniz.
Etiketler : Mobil, Mobil Uyumlu Site Yapımı, Nasıl Mobil Uyumlu Yapılır?, Responsive, Responsive Tema, Responsive Tema Yapımı, Siteyi Mobil Uyumlu Yapma, WordPress Mobil Uyumlu Yapma
