Responsive Web Tasarım: Mobil Uyumlu Site Nasıl Yapılır?

Responsive tasarımın ilk adımı tek satırlık bir etikettir. Bu etiket olmazsa telefon, sayfayı bilgisayar genişliğinde çizip küçültür; yazılar okunmayacak kadar küçük görünür ve diğer ayarların hiçbiri işe yaramaz.

<meta name="viewport" content="width=device-width, initial-scale=1">

İkinci temel, görsellerin bulundukları alandan taşmamasıdır. Görseller kutularına göre küçülmeli, telefona da bilgisayar için hazırlanmış büyük dosya gönderilmemelidir.

/* Görsel kutusundan taşmasın */
img {
    max-width: 100%;
    height: auto;
}

<!-- Ekrana göre uygun boyutu tarayıcı seçsin -->
<img src="urun-800.webp"
     srcset="urun-400.webp 400w, urun-800.webp 800w, urun-1200.webp 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     width="800" height="600" alt="Ürün fotoğrafı">

Mobil öncelikli (mobile-first) yaklaşım, web sitesini önce mobil cihazlar için tasarlayıp, sonra daha büyük ekranlar için genişletmeyi önerir. Bu yaklaşım, performans ve kullanılabilirlik açısından çok daha etkilidir.

Breakpoint'ler (kırılma noktaları), CSS'de farklı ekran genişlikleri için farklı stiller tanımladığınız noktalardır. Bu noktalarda düzen değişir: sütun sayısı azalır, menü daralır. Aşağıdaki aralıklar yaygın bir başlangıçtır; ama asıl kural, kırılma noktasını cihaz adına göre değil, tasarımınızın bozulmaya başladığı genişliğe göre seçmektir.

/* Mobil First - Varsayılan */
.container {
    width: 100%;
    padding: 20px;
}

/* Tablet ve üzeri */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* Masaüstü ve üzeri */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        padding: 40px;
    }
}

CSS Grid ve Flexbox, responsive tasarım için vazgeçilmez modern CSS teknolojileridir. Bu teknolojiler sayesinde karmaşık layout'ları kolayca oluşturabilirsiniz.

/* Grid Container */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Responsive Grid */
@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
}

/* Flex Container */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* Responsive Flex */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
        text-align: center;
    }
}

Telefonda fare yok, parmak var. Parmak fare imlecinden çok daha az hassastır; bu yüzden dokunulacak her şeyin yeterince büyük ve birbirinden yeterince uzak olması gerekir.

Telefonlarda işlemci daha zayıf, bağlantı daha değişkendir; aynı site telefonda bilgisayardan daha yavaş açılır. Bu yüzden mobil uyum hızla birlikte düşünülmelidir. Ayrıntılı teknikler Web Sitesi Hızını Artırma Yöntemleri rehberimizde.

Mobil uyumu test etmeden "oldu" demeyin. Google'ın eski "Mobil Uyumluluk Testi" aracı 2023 sonunda kaldırıldı; bugün aşağıdaki araçlar kullanılıyor.