Responsive web tasarım nedir, mobil uyumlu web sitesi nasıl yapılır? Breakpoint, flexbox, CSS grid ve viewport ayarlarıyla tablet-telefon uyumluluğu. Konya web tasarım ajansı Solid Medya'dan SEO odaklı responsive site rehberi.
Aynı web sitesini telefonda, tablette ve geniş bir masaüstü ekranda açtığınızda her seferinde okunaklı ve kullanışlı görünüyorsa, arkasında büyük olasılıkla responsive (duyarlı) bir tasarım vardır. Bu yaklaşımda her cihaz için ayrı bir site yapılmaz; tek bir kod tabanı ve tek bir adres, ekran genişliğine göre kendini yeniden düzenler.
Aşağıda kavramın temel parçalarını, breakpoint kararlarını, Flexbox ile CSS Grid arasındaki farkı, görsel ve yazı boyutlarının yönetimini, sık yapılan hataları ve test yöntemlerini sırayla bulacaksınız.
Responsive web tasarım nedir ve nasıl çalışır?
Responsive web tasarım, bir sayfanın içeriğini ve yerleşimini kullanılan ekranın genişliğine göre otomatik olarak uyarlayan tasarım yaklaşımıdır. Üç yapı taşına dayanır: yüzde ya da esnek birimlerle kurulan akışkan ızgara, ekrana sığacak şekilde küçülen görseller ve belirli genişliklerde farklı kurallar devreye sokan CSS medya sorguları (media query).
Alternatif olan ayrı mobil site yaklaşımında (örneğin m.siteadi.com) iki ayrı yapıyı yönetmeniz gerekir; içerik farkları, yönlendirme hataları ve çift bakım yükü kaçınılmazdır. Google da tek adreste duyarlı tasarımı uygulaması ve bakımı en kolay seçenek olarak tarif eder. Bu nedenle yeni projelerde ayrı mobil site yerine duyarlı tasarım tercih edilir.
Pratikte bu, aynı HTML içeriğinin yalnızca CSS ile farklı yerleşimlere dönüştürülmesi demektir. İçerik tek yerde yazıldığı için bir telefon numarasını ya da adres bilgisini değiştirdiğinizde her cihazda aynı anda güncellenir.
Viewport ayarı neden zorunludur?
Viewport ayarı, mobil tarayıcıya sayfayı cihazın gerçek genişliğinde göstermesini söyleyen meta etiketidir ve duyarlı tasarımın çalışması için şarttır. Bu ayar olmadan telefon, sayfayı masaüstü ölçüsünde sanal bir genişlikte çizip küçülterek ekrana sığdırır; yazılar okunmaz hale gelir ve yazdığınız medya sorguları beklediğiniz gibi tetiklenmez.
Doğru ayar, sayfanın head bölümüne eklenen ve içinde width=device-width ile initial-scale=1 değerleri bulunan viewport etiketidir. Kullanıcının yakınlaştırmasını engelleyen user-scalable=no ya da maximum-scale=1 gibi değerlerden kaçının; bunlar görme zorluğu yaşayan ziyaretçiler için erişilebilirliği bozar.
Breakpoint değerleri nasıl belirlenir?
Breakpoint, tasarımın düzen değiştirdiği ekran genişliği eşiğidir ve cihaz modellerine göre değil, içeriğin bozulduğu noktaya göre seçilmelidir. Tarayıcı penceresini yavaşça daralttığınızda satırlar fazla uzadığında, menü sığmadığında ya da kartlar birbirine yapıştığında yeni bir kural eklemeniz gerektiğini anlarsınız.
Pratikte çoğu proje, küçük ekrandan büyüğe doğru ilerleyen min-width sorgularıyla yazılır. Aşağıdaki aralıklar başlangıç için işinizi görür, ancak sabit bir standart değildir:
- 360 ile 480 piksel arası: tek sütun, büyük dokunma alanları ve açılır menü.
- 600 ile 768 piksel arası: iki sütunlu kartlar ve yan yana duran butonlar.
- Yaklaşık 1024 piksel: tam menü, yan panel ve üç sütunlu yerleşim.
- 1280 piksel ve üzeri: içerik genişliğini sınırlayıp ortalayın, böylece satırlar okunmayacak kadar uzamaz.
Flexbox mı CSS Grid mi kullanmalı?
Tek yönlü sıralamalarda Flexbox, satır ve sütunları birlikte kurguladığınız sayfa iskeletlerinde CSS Grid daha uygundur. Flexbox; menü çubukları, buton grupları ve kart içindeki öğe hizalamaları gibi tek eksenli işlerde, öğeler sığmadığında alt satıra geçmesini sağlayan flex-wrap özelliğiyle çok işe yarar. Grid ise ürün listesi, galeri ve blog kartları gibi iki eksenli düzenlerde güçlüdür.
Medya sorgusu yazmadan duyarlı bir kart ızgarası için tek satır yeterli olabilir: grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)). Bu kuralla kartlar en az 240 piksel genişlikte kalır ve sütun sayısını tarayıcı ekrana göre kendisi belirler. İki yöntem birbirini dışlamaz; sayfa iskeletini Grid ile, bileşenlerin içini Flexbox ile kurabilirsiniz.
Güncel tarayıcılarda kullanılan container query özelliği ise bir bileşenin stilini ekran yerine içinde bulunduğu kutunun genişliğine göre değiştirmenizi sağlar. Hem kenar çubuğuna hem ana alana yerleştirilebilen kartlar için özellikle yararlıdır, çünkü kart kendi alanına göre davranır.
Görseller ve yazılar farklı ekranlarda nasıl ölçeklenir?
Görsellerin taşmasını önlemenin en kısa yolu max-width: 100% ve height: auto kuralıdır; ancak görüntüyü ekranda küçültmek dosya boyutunu küçültmez. Telefona 2000 piksel genişliğinde bir fotoğraf göndermek hem veriyi hem yüklenme süresini gereksiz uzatır. Bu yüzden srcset ve sizes özellikleriyle farklı genişliklerde dosyalar tanımlayın, uygun olanı tarayıcı seçsin. WebP ve AVIF gibi modern biçimler, benzer kalitede daha küçük dosya üretir. Logo ve ikonlarda SVG kullanmak her çözünürlükte keskin görüntü sağlar ve dosya boyutunu çok küçük tutar.
Yazı boyutunda sabit piksel yerine rem birimini kullanın ve gövde metnini mobilde genellikle 16 piksel civarında tutun. Başlıklar için clamp() fonksiyonu, en küçük ve en büyük değeri belirleyip arada akışkan ölçeklenme sağlar. Görsellere genişlik ve yükseklik değerlerini de yazarsanız sayfa yüklenirken içerik aşağı doğru kaymaz.
Sayfanın alt kısmındaki görselleri gecikmeli yükleme (lazy load) ile hafifletebilirsiniz; ancak ilk ekranda görünen büyük görselde bunu kullanmayın, çünkü o görselin geç gelmesi sayfanın yüklenme algısını doğrudan kötüleştirir.
Responsive tasarımda en sık yapılan hatalar nelerdir?
En sık yapılan hata, masaüstü tasarımı sonradan küçültmeye çalışmak ve mobil deneyimi son aşamaya bırakmaktır. Bunun yanında şu noktalar tekrar tekrar karşımıza çıkar:
- Viewport etiketini eklemeyi unutmak ya da yakınlaştırmayı tamamen kapatmak.
- Dokunma alanlarını küçük bırakmak; buton ve bağlantılar parmakla rahat basılacak büyüklükte, yaklaşık 44 ile 48 piksel civarında olmalıdır.
- Yalnızca üzerine gelince (hover) açılan menüler yapmak, oysa dokunmatik ekranlarda hover yoktur.
- Geniş tablo ve görselleri taşırarak sayfada yatay kaydırma oluşturmak.
- Sabit yükseklikli bölümler kullanmak; metin uzadığında içerik taşar veya kesilir.
- Mobilde gizlenen içeriği önemsememek, çünkü Google dizinlemeyi ağırlıklı olarak mobil sürüme göre yapar ve orada olmayan içerik arama sonuçlarında karşılık bulmayabilir.
Mobil uyumlu bir site nasıl test edilir?
Mobil uyumluluğu test etmenin en güvenilir yolu, tarayıcı geliştirici araçlarındaki cihaz simülasyonunu gerçek telefonlarla birlikte kullanmaktır. Chrome'da F12 tuşuna basıp cihaz çubuğunu açarak farklı genişlikleri hızlıca deneyebilir, Lighthouse raporuyla erişilebilirlik ve performans sorunlarını yakalayabilirsiniz. Google'ın eski Mobil Uyumluluk Testi aracı 2023 sonunda kaldırıldı; yerine bu araçlar ve PageSpeed Insights kullanılıyor.
Test sırasında menü ve formlara özellikle bakın. Mobil menü, sık kullanılan birkaç bağlantıyı görünür bırakıp geri kalanını açılır panele alan sade bir yapıda olmalı; hamburger simgesinin yanına "Menü" yazısı eklemek ilk kez gelen ziyaretçi için belirsizliği azaltır. Telefon ve WhatsApp gibi birincil eylemleri menünün içine gömmeyin. Formlarda alanlar tek sütunda ve görünür etiketlerle durmalı, e-posta ve telefon alanlarında doğru input type değeri seçildiği için uygun klavye açılmalıdır.
Emülatör parmak dokunuşunu, ekran klavyesinin açılışını ve gerçek ağ hızını tam yansıtmaz. Bu yüzden en az bir Android ve bir iPhone ile formu doldurmayı, menüyü açıp kapatmayı, telefon numarasına dokunarak arama başlatmayı deneyin; telefonu yatay çevirip düzenin bozulup bozulmadığına da bakın. Tarayıcı ayarlarından yazı boyutunu büyüttüğünüzde de sayfanın taşmadan okunabildiğini deneyin. Duyarlı bir siteyi sıfırdan yaptırmak ya da mevcut sitenizi bu ölçütlere göre yenilemek isterseniz Solid Medya ile planlama aşamasından başlayarak çalışabilirsiniz.