Responsive Site Yapımı

Günümüz dünyasında web siteleriniz mobil alanlarda ufakta olsa söz sahibi değilse siz bu platformda yok bile sayılabilirsiniz. Kullanıcıların büyük bir kısmının mobil cihazlar üzerinden giriş yaptığı web sitelerinde mobil arayüzler çok önemlidir. Kullanım açısından web sitelerinizi nasıl mobile uygun hale getirebileceğinize dair birkaç ufak ipucu hazırladım.

CSS'in nimetlerinden bahsedeceğimiz bu makalemiz yeni giriş yapacak kişilere yol gösterici olacaktır. Bu sebeple dikkatle incelenmesini tavsiye ediyorum.

Responsive Nedir?

Kelime anlamı esnek, duyarlı olarak çevirebileceğimiz responsive kavramı, bir diğer anlamda scrollbar olmadan çalışabilen mobil site olarak da karşımıza çıkabilir. Yani mobilde herhangi bir problem ile karşılaşmadan gelen kullanıcının standart yazı puntoları, görseller vb. diğer öğeler ile doğru bir şekilde etkileşime geçebilmesine izin verir. Bu da cep telefonları, tabletler ve bilgisayarlar olmak üzere 3 temel başlığa ayrılmıştır.

Responsive Boyutlarında Nelere Dikkat Edilmelidir?

Responsive bir tasarımı ele alırken aşağıdaki görseli incelemeniz halinde temel boyutlandırmayı görmüş olacaksınız. Bu boyutlarda cihazların maksimum boyutları oldukça önemlidir. Genellikle yüzdelik ile belirlenen genişlik değerlerini bu boyutlara uygun olarak tasarlayabilirsiniz.

Mobil Arayüze Merhaba

Mobil web siteler hazırlarken head etiketlerimiz arasında mutlaka yer vermemiz gereken başlangıç kodumuz tam olarak şöyle;

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bu yapımıza aşağıda dikkatle bakalım;

viewport ise sayfamızın boyutlarını kontrol etmemize yarayan bir etiket olduğunu tarayıcıya belirtmektedir.
width=device-width kısmı, sayfa içeriğimizin cihaz genişliğine göre ayarlanması gerektiğini tarayıcıya bildirir.
initial-scale=1.0 kısmı ise tarayıcıda ilk yüklemede ki yakınlık oranını bizlere göstermektedir.

Bazı durumlarda ortaya çıkan yakınlaştırma problemine ilişkin minik bir not düşmek istedim. Eğer web sitelerin yakınlaştırılmasını istemiyorsanız user-scalable=no komutunu kullanabilirsiniz.

Nasıl Yapılır?

Bizim temelde kullanacağımız bir yapı var. Bu yapı @media only screen and (DEĞER) olarak belirtilir. Burada DEĞER kısmını ve içeriklerini şimdi örneklerle inceleyelim.

Akıllı cihazları ele alarak yatay ve dikey olması farketmeksizin aynı görüntüye sahip bir css dosyası düzenleyeceğiz. O halde;

@media only screen and (max-width: 480px) {
CSS KODLARIMIZ
}

Burada yer verdiğimiz max-width: 480px ile 480px ve daha düşük tüm çözünürlüklerde CSS KODLARIMIZ kısmına eklediğimiz kodlar çalışacaktır.

max-width: Girilen değer ve daha düşük tüm değerleri içerir. Yani eğer max-width: 480px belirttiysek 480px ve 480px'den daha düşük çözünürlüklerde geçerli bir alan hazırlamış oluruz.
min-width: Girilen değer ve daha büyük tüm değerleri içerir. Yani eğer biz min-width: 768px belirlediysek 768px ve 768px'den daha büyük çözünürlüklerde geçerli bir alan hazırlamış oluruz.

Örneğin;

Mobil Cihazlarda Menü Gizleme (Div Adı: .menu)

@media only screen and (max-width: 480px) {
	.menu {display: none;}
}

Şeklinde CSS kodlarımızı ekleyebiliriz. Tüm CSS kodları sorunsuz bir şekilde çalışacaktır.

İki Boyut Arası Belirlemek

Eğer iki boyut aralığında CSS kodu eklemek istiyorsak şu şekilde bir yapı hazırlayabiliriz;

@media only screen and (min-width: 480px) and (max-width: 768px) {}

Genel olarak kullanım tarzımız bu şekildedir.

İyi çalışmalar dilerim :)