Responsive web tasarımı farklı ekran çözünürlüklerinde sitenin yeniden boyutlandırılarak en iyi görüntünün sağlanmasıdır. Duyarlı tasarım olarak da anılır. Responsive tasarım sayesinde bilgisayarlar, tabletler ve akıllı telefonlarda farklı tasarımlar hazırlamaya gerek kalmaz. Sadece CSS kodlarıyla sitenin ekran çözünürlüğüne göre yeniden şekillenmesi sağlanır.
Avantajları
1. Kullanılabilirlik: Web siteniz farklı cihaz ve ekran çözünürlüklerine en uygun şekilde uyum sağlayacağından dolayı siteniz farklı cihazlarda rahatlıkla gezilebilir. Böylelikle kullanıcılara kaliteli bir deneyim sunmuş olursunuz.
2. Kolay Bakım: Eğer responsive tasarım değil de bilgisayar, tablet ve mobil cihazlar için farklı tasarımlar kullanırsanız sitede bir değişiklik veya güncelleme yapacağınız zaman bu üç tasarımda da değişiklikleri ayrı ayrı gerçekleştirmeniz gerekir. Responsive tasarımda ise tek bir tasarım olduğundan kolaylıkla güncellemeleri yapabilirsiniz.
3. Arama Motoru Optimizasyonu: Responsive tasarımlarda farklı cihazlar için aynı url adresini kullanacağınızdan dolayı arama sonuçlarında daha istikrarlı sonuç elde edersiniz. Diğer bir avantajı ise bilgisayar, tablet ve mobil cihazlar için farklı url adresleri kullandığınızda arama motorları bu url adreslerini tekrar eden veriler olarak algılayıp sitenizi arama sonuçlarında alt sıralara atabilmektedir. Responsive tasarımda ise böyle bir olay söz konusu değildir.
4. Düşük Maliyet: Farklı cihazlar için tek tasarım kullanacağınızdan dolayı maliyetiniz azalacaktır. Alternatif yöntemde bilgisayar, tablet ve cep telefonları için ayrı ayrı tasarımlar hazırlamanız veya hazırlatmanız gerekecektir.
Nasıl Responsive Tasarım Yapılır?
@media sorguları aracılığı ile responsive tasarım gerçekleştirilebilir. Bunun için CSS3 kullanmanız ve ziyaretçinin kullandığı tarayıcının CSS3 destekli olması gerekir.
İlk önce aşağıdaki viewport meta etiketini sitenizde head etiketleri arasında kullanmanız gerekiyor. Bu etiket ile cihazın ekran genişliğini elde ediyoruz. (width=device-width diyerek) initial-scale ise sayfa açıldığında ne kadar zoom yapılacağı. 1 diyerek gerçek boyut elde ediliyor. maximum-scale ise kullanıcın sayfayı ne kadar yakınlaştırabileceğini (zoom) ayarlıyor. Eğer kullanıcının sayfada zoom yapmasını istemiyorsanız user-scalable=no demeniz gerekiyor.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Daha sonra CSS3 @media sorgularını CSS dosyamızda kullanıyoruz.
@media only screen and (max-width: 959px) {
/* Buraya yazacağınız css kodu maksimum 959 pixel genişliği olan cihazlarda çalışacaktır. */
.container {
margin: 0 auto;
position: relative;
width: 940px;
}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
/* Buraya yazacağınız css kodu ekran genişliği 768 ve 959 pixel aralığında olan cihazlarda çalışacaktır. */
.container { width: 748px; }
}
@media only screen and (max-width: 479px) {
/* Buraya yazacağınız css kodu maksimum 479 pixel genişliği olan cihazlarda çalışacaktır. */
.container { width: 420px; }
}
CSS3 Medya Sorguları
CSS3’ün ortaya çıkmasıyla beraber farklı ekran çözünürlüklerindeki aygıtlar için farklı css özellikleri belirlemek artık daha kolay hale geldi. Günümüzde cep telefonları, tabletler gibi farklı çözünürlüklerde çalışan bir çok aygıtın olduğunu ve bunların neredeyse masaüstü bilgisayarlar kadar web’de gezindiğini düşünürsek işimizi kolaylaştıracak çözüm CSS3’te yer alan medya sorguları.
Medya sorguları bir veya daha fazla tipe ve koşula göre sorgulama yapar ve sorgulama doğru ise belirtilen css özelliklerini çalıştırır.
Genel kullanımı şu şekildedir:
@media media and (özellik:değer) { css tanımlamaları }
Bir örnek ile açıklayalım:
@media only screen and (max-width: 800px) {
#logo { max-height: 100%; }
}
Burada only screen medya tipini ifade eder. Medya tipleri şunlardır.
- all (Tüm araçlar için kullanılır.)
- aural (Ses sentez birimlerinde kullanılır.)
- braille (Braille dokunsal okuyucularda kullanılır.)
- embossed (Braille yazıcı çıktıları için kullanılır.)
- handheld (Taşınabilir telefonlar ve PDA’lar için kullanılır.)
- print (Yazıcı çıktılarında görüntüleme için kullanılır.)
- projection (Projeksiyonda görüntüleme için kullanılır.)
- screen (Bilgisayarda görüntüleme için kullanılır.)
- tty (Bilgisayar terminalleri ve eski taşınabilir araçlar ile görüntülemede kullanılır.)
- tv (Televizyonda görüntülemede kullanılır.)
max-width: 800px ise medyanın hangi ekran çözünürlüğünde css özelliklerini aktif hale getireceğini belirler. Süslü parantezler içindeki css tanımlamaları ise bu medya sorgulaması doğru ise çalıştırılacak css özelliklerini ifade eder.
Mantıksal Operatörler
Medya sorgularında kullanabileceğimiz mantıksal operatörlere göz atalım.
and
Aynı anda iki veya daha fazla medya özelliği belirtmek için kullanılır.
@media screen and (min-width: 768px) and (max-width: 959px)
Ekran genişliği en az 768 ve en fazla 959 piksel olan ekranlarda uygulanır.
not
Negatif ifadedir. Özelliğin uygulanabilmesi için not ile belirtilen medya şartı sağlanmamalıdır.
@media not screen and (color)
Bilgisayar ve renkli ekran olmayan durumlarda uygulanır.
only
Sadece bu şartlar geçerli olduğunda uygulanır. Medya sorgularını desteklemeyen cihazlardan bu medya sorgularını saklamak için kullanılır.
@media only screen and (min-width: 768px)
Sadece bilgisayar ve ekran genişliği 768 pikselden büyük aygıtlarda kullanılır.
Medya Özellikleri
width
Görüntünün genişliği. min- ve max- önekleri kullanılabilir.
height
Görüntünün yüksekliği. min- ve max- önekleri kullanılabilir.
device-width
Görüntüleyen cihazın genişliği. min- ve max- önekleri kullanılabilir.
device-height
Görüntüleyen cihazın yüksekliği. min- ve max- önekleri kullanılabilir.
orientation
Konumlandırma. portrait veya landscape olarak dikey ya da yatay seçilebilir.
aspect-ratio
Görüntünün en-boy oranı. min- ve max- önekleri kullanılabilir.
device-aspect-ratio
Görüntüleyen cihazın en-boy oranı. min- ve max- önekleri kullanılabilir.
color
Her renk bileşeni için renk bitlerini sayar. Sadece color derseniz bütün renk bileşenleri için geçerli olur. min- ve max- önekleri kullanılabilir.
color-index
Cihazın renk kontrol tablosundaki renk girişi sayısını kontrol eder. min- ve max- önekleri kullanılabilir.
monochrome
Frame buffer içindeki piksel başına düşen bit sayısını kontrol eder. Sadece monochrome ifadesi bütün monochrome cihazları kapsar. min- ve max- önekleri kullanılabilir.
resolution
Görüntüleyen cihazın çözünürlüğü. min- ve max- önekleri kullanılabilir.
scan
Cihazın progressive mi interlace tarama mı kullandığını kontrol eder. Genelde televizyonlar için kullanılır.
grid
Cihazın grid mi bitmap mi olduğunu kontrol eder. Grid cihazları “tty” terminalleri içerirken, telefonlar tek bir fonta sahiptir.
Örnekler:
@media screen and (max-width:480px)
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
@media screen and (orientation: portrait)
@media print and (min-resolution: 150dpi)
@media only screen and (device-aspect-ratio: 16/9)
