Responsive Tasarım Nedir? Mobil Uyumlu Web Sitesi Rehberi

Responsive tasarım, bir web sitesinin telefon, tablet ve masaüstü gibi farklı ekran boyutlarına kendiliğinden uyum sağlamasıdır. Aynı adres, aynı içerik ve aynı kod kullanılır; yalnızca sayfanın yerleşimi ekran genişliğine göre değişir. Masaüstünde yan yana duran dört kart telefonda alt alta dizilir, menü bir düğmenin arkasına geçer, görseller ekrana göre küçülür. Bu rehberde responsive tasarımın neden artık bir tercih değil zorunluluk olduğunu, nasıl uygulandığını ve sitenizin mobil uyumunu nasıl test edebileceğinizi anlatıyoruz.

Neden zorunlu?

Birinci neden ziyaretçilerdir. Pek çok sektörde site trafiğinin yarısından fazlası telefondan gelir; yerel hizmet ve perakende sitelerinde bu oran çok daha yüksektir. Telefonda yazıları büyütmek zorunda kalan, butonlara isabet ettiremeyen ya da yatay kaydırmak zorunda kalan bir ziyaretçi, birkaç saniye içinde rakibinizin sitesine geçer.

İkinci neden Google’dır. Google, siteleri artık mobil sürümlerine göre tarar ve dizine ekler; buna mobil öncelikli dizine ekleme denir. Mobil sürümde eksik olan bir içerik, masaüstünde olsa bile arama sonuçlarında yokmuş gibi değerlendirilebilir. Google’ın mobil öncelikli dizine ekleme belgeleri bu konuda neye dikkat edilmesi gerektiğini ayrıntılı anlatır.

Responsive, ayrı mobil site ve uyarlanabilir tasarım

Mobil uyum için tarihsel olarak üç yol kullanıldı. Eskiden yaygın olan ayrı mobil site (m.site.com gibi) yaklaşımında iki ayrı site yönetilir; içerik farkları, yönlendirme hataları ve bakım yükü nedeniyle bugün önerilmez. Uyarlanabilir tasarımda sunucu, cihaz türüne göre farklı şablonlar gönderir; cihaz algılama hataları sık görülür. Responsive tasarım ise tek bir kodla tüm ekranlara hizmet eder ve Google’ın önerdiği yöntemdir.

İyi bir responsive tasarımın temel teknikleri

Esnek ızgara ve göreli ölçüler

Sayfa düzeni sabit piksel genişlikleri yerine yüzdeler ve esnek ızgara sistemleriyle kurulur. Böylece içerik ekran genişliğine göre orantılı biçimde yayılır ya da daralır.

Kırılma noktaları

Belirli ekran genişliklerinde düzen değişir: tek sütundan iki sütuna, iki sütundan dörde. Kırılma noktalarını popüler cihaz modellerine göre değil, içeriğin nerede sıkışıp bozulduğuna göre belirlemek daha sağlıklı sonuç verir.

Esnek görseller

Görseller kapsayıcılarından taşmamalı ve cihaza uygun boyutta sunulmalıdır. Telefondaki bir ziyaretçiye masaüstü için hazırlanmış büyük bir görsel göndermek, sayfayı gereksiz yere yavaşlatır. Farklı boyutlarda görsel hazırlayıp tarayıcının uygun olanı seçmesini sağlamak hem hızı hem de mobil veri tüketimini iyileştirir.

Okunabilir tipografi

Gövde metni telefonda en az 16 piksel olmalı, satır aralığı rahat tutulmalı ve başlıklar ekrana göre ölçeklenmelidir. Masaüstünde etkileyici görünen dev başlıklar, telefonda ekranın tamamını kaplamamalıdır.

Dokunmatik kullanım

Parmak, fare imleci kadar hassas değildir. Butonlar ve bağlantılar en az 44–48 piksel yüksekliğinde olmalı ve birbirine çok yakın durmamalıdır. Fareyle üzerine gelince açılan menüler dokunmatik ekranlarda çalışmaz; alternatifi düşünülmelidir.

Mobil dostu formlar

Telefon alanında rakam klavyesi, e-posta alanında @ işaretli klavye açılmalı; gereksiz alanlar kaldırılmalıdır. Uzun formlar küçük ekranda en sık terk edilen öğelerdir.

Mobil öncelikli düşünmek

Tasarıma masaüstünden başlayıp sonra telefona “sığdırmak” yerine küçük ekrandan başlamak daha doğru sonuç verir. Küçük ekranda her öğe için yer olmadığından, neyin gerçekten önemli olduğuna baştan karar vermek zorunda kalırsınız. Bu disiplin masaüstü tasarımını da sadeleştirir ve sayfaları hızlandırır. Hız tarafını Core Web Vitals yazımızda ayrıntılı anlattık; mobilde yavaş açılan bir sayfa, iyi bir düzenin bütün avantajını siler.

Sitenizin mobil uyumunu nasıl test edersiniz?

1. Gerçek telefonlarda deneyin: Hem iPhone hem Android cihazda ana sayfayı, bir hizmet sayfasını ve iletişim formunu baştan sona kullanın.
2. Tarayıcı cihaz modunu kullanın: Chrome geliştirici araçlarındaki cihaz görünümü, farklı ekran genişliklerini hızlıca görmenizi sağlar.
3. Hız testini mobil için yapın: PageSpeed Insights varsayılan olarak mobil sonucu gösterir.
4. Teknik kontrolleri yapın: Ücretsiz SEO analiz aracımız, sayfada görüntü alanı (viewport) etiketinin olup olmadığını ve diğer temel ayarları kontrol eder.
5. Search Console’u izleyin: Mobil kullanıcılar için sayfa deneyimi raporlarını düzenli kontrol edin.

Sık görülen mobil uyum hataları

• Sayfada yatay kaydırma çubuğu çıkması; genellikle taşan bir tablo, görsel ya da sabit genişlikli bir öğe yüzündendir.
• Mobilde bazı içerikleri “yer yok” diye gizlemek; Google o içerikleri görmeyebilir.
• Ekranın tamamını kaplayan açılır pencereler; hem kullanıcıyı hem arama motorunu rahatsız eder.
• Telefon numarasının tıklanabilir olmaması.
• Menüde çok fazla alt seviye; küçük ekranda gezinmek imkânsızlaşır.

Mobil deneyim yalnızca responsive bir siteyle sınırlı değildir; bazı işletmeler için telefona uygulama gibi eklenebilen bir PWA da iyi bir ara çözümdür. Tasarımın genel ilkeleri için web tasarım nedir? yazımıza, teknik temeller için web.dev’deki temel rehbere bakabilirsiniz. Geliştirdiğimiz tüm kurumsal siteler mobil öncelikli tasarlanır; ayrıntılar kurumsal web sitesi sayfamızda.