Sayfanın uyarlanabilir versiyonu nedir?

Duyarlı tasarım, web geliştirmede, sayfa tasarımı ve içeriğinin kullanıcının cihaz ekran boyutuna otomatik olarak uyum sağladığı bir yaklaşımdır (masaüstü, tablet, akıllı telefon).

Temel ilkeler:

• Esnek Izgara (Fluid Grids): Elemanların boyutlarını belirlemek için yüzde veya diğer göreceli birimlerin kullanılması, sabit piksel yerine.
• Esnek Görüntüler (Flexible Images): Görüntülerin oranlı olarak boyutlandırılması, böylece konteyner dışına taşmaması sağlanır.
• Medya Sorguları (Media Queries): CSS kuralları, ekran genişliği, yüksekliği, yönü ve çözünürlüğü gibi cihaz özelliklerine bağlı olarak farklı stiller uygulamaya olanak tanır.

CSS'de medya sorgusu kullanımı örneği:

/* Tüm cihazlar için genel stiller */
body {
    font-size: 16px;
}

/* 768px genişliğe kadar ekranlar için stiller (örneğin, tabletler ve mobil cihazlar) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Navigasyon düzeninde değişiklik örneği */
        display: flex;
        flex-direction: column;
    }
}

/* 480px genişliğe kadar ekranlar için stiller (örneğin, mobil telefonlar) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Görüntüler konteyner genişliğini tamamen kaplar */
        max-width: 100%;
        height: auto;
    }
}

Duyarlı tasarımın amacı, sayfaların farklı cihazlarda kullanılabilirliğini artırmak ve ayrı sürümler oluşturmadan her cihazda uygun görünüm sağlamaktır.

Duyarlı sürüm testi, şunların kontrol edilmesini içerir:

• Farklı çözünürlüklerde öğelerin doğru görüntülenmesi.
• Navigasyon ve etkileşim kolaylığı.
• Yatay kaydırmanın olmaması.
• Metnin okunabilirliği.
• Sayfa yükleme performansı.