Duyarlı tasarım nedir?

Duyarlı tasarım, web tasarımı ve geliştirme yaklaşımıdır; bu yaklaşıma göre sitenin düzeni ve içeriği, masaüstü bilgisayar, tablet veya akıllı telefon gibi cihazların ekran boyutuna otomatik olarak uyum sağlar. Amaç, her çözünürlükte optimal görüntüleme ve kullanım kolaylığı sağlamaktır.

Temel ilkeler:

• Esnek Izgara (Fluid Grid): Elemanların boyutlarını belirlemek için sabit piksel yerine yüzdelik, em, rem gibi göreceli ölçü birimleri kullanmak.
• Esnek Görüntüler (Flexible Images): Görüntüler, kapsayıcı boyutuna orantılı olarak ölçeklenir ve taşma önlenir.
• Medya Sorguları (Media Queries): CSS kuralları, ekran genişliği, yönlendirme, çözünürlük gibi cihaz özelliklerine bağlı olarak farklı stiller uygulamaya olanak tanır.

Medya sorgularının kullanımıyla ilgili tipik örnek:

/* Temel stiller */
.container {
    width: 960px;
    margin: 0 auto;
}

/* 768px altındaki ekranlar için stiller */
@media (max-width: 767px) {
    .container {
        width: 95%;
        padding: 0 10px;
    }
    .column {
        float: none;
        width: 100%;
    }
}

Uygulamada, duyarlı tasarımı test ederken şunları kontrol ediyorum:

1. Düzenin görüntülenmesi: Yatay kaydırma olmamalı, bloklar düzgün yerleştirilmeli.
2. Metin okunabilirliği: Yazı tipi boyutları tüm cihazlarda rahat olmalı.
3. Gezinme: Menü erişilebilir ve kullanımı kolay olmalı (örneğin, mobilde "hamburger menü").
4. İşlevsellik: Tüm etkileşimli öğeler (düğmeler, formlar) düzgün çalışmalı.
5. Performans: Mobil cihazlarda yükleme süresi. Görüntüleri optimize etmek için <picture> veya srcset kullanımı.

Duyarlı tasarımın temel avantajları:

• Tüm cihazlar için tek kod tabanı.
• SEO göstergelerinin iyileştirilmesi (Google duyarlı siteleri tercih eder).
• Daha iyi kullanıcı deneyimi.
• Siteyi ayrı sürümler halinde oluşturmak yerine zaman ve maliyet tasarrufu.

Farkı, adaptif tasarımdan (Adaptive Design) ayıran nokta, sonuncusunun sabit kırılma noktaları (breakpoints) kullanmasıdır; duyarlı tasarım ise herhangi bir ekran boyutuna daha akıcı şekilde uyum sağlar. Bu terimler, farklı cihazlar için geliştirme bağlamında sıklıkla eşanlamlı kullanılır.