Responsive Tasarım Nedir?

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-width959px) {
/* Buraya yazacağınız css kodu maksimum 959 pixel genişliği olan cihazlarda çalışacaktır. */
    .container {
    margin0 auto;
    positionrelative;
    width940px;
    }
}
@media only screen and (min-width768px) and (max-width959px) {
/* Buraya yazacağınız css kodu ekran genişliği 768 ve 959 pixel aralığında olan cihazlarda çalışacaktır. */
    .container { width748px; }
}
@media only screen and (max-width479px) {
/* Buraya yazacağınız css kodu maksimum 479 pixel genişliği olan cihazlarda çalışacaktır. */
    .container { width420px; }
}

CSS3 medya sorguları ile ilgili detaylı bilgiye buradan ulaşabilirsiniz.

YORUMLAR (1)

  1. Ömer Faruk
    Ömer Faruk
    Açıklamalar için çok teşekkür ederim anlatım sade ve çözüm odaklı olmuş. Birkaç gündür aklıma takılıyordu bu genişlik ayarlamaları. Gerçekten en iyi anlatımı burada gördüm diyebilirim ellerinize emeklerinize sağlık.

YORUM FORMU

Cevap verilen yorum:
  • Ömer Faruk
    Ömer Faruk
    Açıklamalar için çok teşekkür ederim anlatım sade ve çözüm odaklı olmuş. Birkaç gündür aklıma takılıyordu bu genişlik ayarlamaları. Gerçekten en iyi anlatımı burada gördüm diyebilirim ellerinize emeklerinize sağlık.