Merhaba, Web dünyası internete bağlanan her cihazın erişimine açıktır. Bilgiyi internete bağlantısına sahip her cihazın erişebilmesi için tasarlanmıştır. Frontend kodlama teknolojileri de bilgiye erişmek isteyen kullanıcıların en iyi deneyime sahip olmasını hedefler. Daha göze hitap eden arayüzler, kullanımı kolay tasarımlar kullanıcıların en rahat şekilde bilgiye ulaşmasını hedefler. 

Web’e erişimin daha çok mobil cihazlar üzerinden gerçekleştirildiği düşünüldüğünde, cihazların ekran ölçülerindeki farklılıklar tasarım düzenlerinde de belirli değişiklikler yapılmasını gerektiriyor.

Mobil cihazlara uygun bir web sayfası hazırlamak için seçeneklerimiz nelerdir?

  • Hiçbir şey yapmamak ve mobil kullanıcıların web site içeriğinizi okuyabilmek için cihazlarının zoom özelliğinden faydalanmasını beklemek.
  • m.facebook.com gibi ikinci bir web sitesi oluşturmak ve mobil cihazları bu web sitesine yönlendirilmesini sağlamak.
  • Responsive web tasarım kullanmak.

Bir çok farklı ekran ölçüsü olduğunu düşünecek olursak, her birinin ölçüsüne uygun ayrı tasarımlar yapmak çok da mümkün görünmüyor. Bu sebeple hazırlanacak olan web sayfasının tek bir arayüzle her cihaza uyumlu olmasını sağlamak daha kullanışlı bir çözüm. CSS, cihaz ölçüsüne duyarlı (responsive) web siteler yapmamıza olanak tanır.

Cihaz, tarayıcı, viewport

  • Cihaz: kullanılan donanım: akıllı telefon, tablet, pc veya bilgisayar
  • Tarayıcı: kullanılan yazılım: Chrome, Firefox, Safari, Edge
  • viewport: tarayıcı içerisinde web sayfasını tam olarak görüntüleyen alan

Responsive Web Tasarımı

Responsive web tasarımının amacı, web sitenizin görüntüsünü herhangi bir cihaza uyarlanabilir şekilde kodlamaktır. Bunu, cihaz ölçülerini CSS’nizle hedefleyerek ve yalnızca bu belirli ölçülere belirli stiller uygulayarak yapar.

Responsive web tasarımı, belirli durumlarda belirli stilleri uygulamamızı sağlar.

media sorguları

CSS’de yalnızca belirli ölçü aralığındaki ekran ölçüsüne sahip cihalarda kullanılmak üzere kod blokları oluşturmamız gerekiyor. Bu kod blokları media sorgularıdır.

Aynı CSS animasyonlarında kullandığımız keyframes özelliği gibi belirli durumlarda çalıştırılacak CSS kuralları tanımlayacağız.

/* Bu kısım tüm cihaz/viewport ölçüleri için kullanıma açıktır.
body{ font-size: 14px; }

@media (min-width: 1200px) {
  /* Bu kısım sadece viewportu 1200 pikselden geniş olan cihazların kullanımına açıktır. */
  body{ font-size: 16px; }
}

Bu durumda, sayfanın varsayılan metin boyutu 14px; olarak ayarlanmıştır. Ancak sayfanın görüntülendiği cihaz 1200px ölçüsünden geniş bir görüntüleme alanına sahipse metinlerimiz 16px; olarak görüntülenecektir. 

Dikkat etmeniz gereken, cihazın ölçüsünden değil,  görünüm penceresinden (viewport) bahsediyoruz.

Mobil cihazlarda, yalnızca yatay ve dikey olarak görüntüleyebildiğiniz için farklı ölçüleri test etmeniz mümkün olmayacaktır. Masaüstündeyseniz, media sorgularının etkinleştirildiğini / devre dışı bırakıldığını görebilmek için tarayıcı pencerenizi yeniden boyutlandırın veya tarayıcınız destekliyorsa Console kullanarak farklı ölçülerdeki görünümünü test edin.

Çoklu parametre tanımlama

Bir media sorgusunun etkinleştirilmesi için 2 koşul isteyebilirsiniz.

body{ font-size: 18px; }

@media (min-width: 1000px) and (orientation: landscape) {
  body{ font-size: 20px;}
}

Yazı tipi ölçüsü sadece viewport en az 1000 piksel genişliğinde ve manzara modundaysa (landscape) 20 piksel olarak ayarlanır. (Örnek olarak cep telefonunuzu yatay konumda tutarsanız bu landscape, dikey konumda tutarsanız bu portrait durumunda olduğu anlamına gelir.)

Ayrıca notve onlyparametrelerini de kullanabilirsiniz. Bunlara mantıksal operatörler denir.

Çoklu CSS kuralı tanımlama

Media sorgularına istediğiniz kadar CSS kuralı ekleyebilirsiniz.

body{ font-size: 14px;}
.dugme{ display: block; }
.baslik{ text-align: center; }

@media (min-width: 1200px) {
  body{ font-size: 16px; }
  .kapsayici{ margin: 0 auto; width: 960px; }
  .dugme{ display: inline-block; }
  .baslik{ text-align: left; }
}

Parametreler

Media sorgularının çalışacağı durumları belirlemek için bazı parametreler gerektirir.

width

width(genişlik) parametresi, responsive web tasarımda en çok kullanılan parametredir. Çünkü web sayfaları dikey olarak okunur. İçeriğin devamını  okumak için sayfayı aşağıya doğru kaydırıyoruz. Sonuç olarak, sayfanın genişliği sabit ve kısıtlanırken, web sitesinin yüksekliği değişkendir. Dolayısı ile sayfanın genişliği üzerinden bir parametre belirlemek gerekir.

height

height  (yükseklik) parametresi genişlik parametresi gibi çalışır ve baz alacağı şey viewport yüksekliğidir.

min-height ve max-heightparametreleri kullanılabilir.

Web siteleri genellikle dikey formata uygun yapıldığı için height özelliği çoğunlukla parametre olarak tercih edilmez.

orientation

Orientation parametresi, görünümün aşağıdaki modlardan birinde olup olmadığını algılayabilir:

  • manzara (landscape): görüntü alanı (viewport) genişliği uzunluğundan daha büyük olma durumunda
  • portre (portrait): görüntü alanı (viewport) uzunluğu genişliğinden daha büyük olma durumunda
@media (orientation: portrait) {
  
}

@media (orientation: landscape) {
  
}

Genellikle bu parametreler tabletler ve akıllı telefonlar için kullanılmasına rağmen, geniş ekranlı bir monitörde bile, genişliğinin yükseklikten küçük olması durumunda görünümün dikey olabileceğini unutmamak gerekiyor.

resolution

Çözünürlük (resolution) parametresi aygıtın piksel yoğunluğu ile ilgilidir ve inç başına nokta sayısı (dpi) veya santimetre başına nokta sayısı (dpcm) ile ifade edilebilir.

Piksel yoğunluğu temel olarak ekranınızın ne kadar net olduğunu söyler (dpi ne kadar yüksekse ekran o kadar nettir).

@media (min-resolution: 300dpi) {
  /* */
}

Masaüstü ekranların piksel yoğunluğu genellikle 100 dpi civarındadır. Öte yandan akıllı telefonların dpi yelpazesi çok geniştir. 

Burada CSS’nin rolü nedir? Yüksek çözünürlüklü ekranlar metni çok net hale getirir: tek tek pikseller farkedilmez hale gelir ve harfler kesinlikle pürüzsüz görünür.

Daha yüksek çözünürlüklü bir ekran için farklı bir görsel kullanmak isteyebiliriz. Örnek olarak Retina ekranlar için standart ekranlara oranla 2 kat daha yüksek çözünürlükte görseller kullanabiliriz.

/* 40x40 standart logo kullanılır */
.logo{ background-image: url(simurghmedia-logo.png); background-size: 40px 40px;}

@media (min-resolution: 300dpi) {
  /* yüksek çözünürlüklü ekranda 80x80 logo yine 40x40 olarak kullanılır */
  .logo{ background-image: url([email protected]);}
}

Hangi ölçü aralıkları kullanmalı?

Burada dünyada en çok kullanılan CSS Framework’ü Bootstrap’ın Responsive noktalarını referans alabiliriz.

// En Küçük cihazlar

// Küçük cihazlar (telefonların yatay pozisyonu, 576px ve üzeri)
@media (min-width: 576px) { ... }

// Orta boy cihazlar (tabletler, 768px ve üzeri)
@media (min-width: 768px) { ... }

// Geniş ekran cihazlar (masaüstü bilgisayar ekranları, 992px ve üzeri)
@media (min-width: 992px) { ... }

// En geniş cihazlar (geniş ekranlı cihazlar, 1200px ve üzeri)
@media (min-width: 1200px) { ... }