Mobil Uyumlu (Responsive) Tasarım: Nedir, Nasıl Kontrol Edilir?

Mobil Uyumlu (Responsive) Tasarım: bir bakışta

Ücret ve kapsam

Responsive tasarım nedir ve nasıl çalışır?

Responsive tasarım, tek bir adresin ve tek bir sayfa yapısının farklı ekran boyutlarına göre kendi düzenini uyarlamasıdır. Google, mobil öncelikli indeksleme rehberinde responsive web tasarımını önerir ve bunun nedenini uygulaması ve bakımı en kolay tasarım deseni olması olarak açıklar. Masaüstü ve telefon için ayrı siteler tutmak zorunda kalmazsınız; içerik, başlıklar ve görseller tek yerde yönetilir.

web.dev'in responsive tasarım temelleri makalesi şu başlıkları anlatır: sayfanın cihaz genişliğine göre ölçeklenmesini sağlayan viewport etiketi, sabit piksel genişlikler yerine esnek yerleşim teknikleri (flexbox, CSS Grid gibi) ve içeriğin gerektirdiği yerlerde düzeni değiştiren medya sorguları. Aynı makale, kullanıcıyı yatay kaydırmaya ya da sayfayı uzaklaştırmaya zorlamanın kötü bir deneyim olduğunu belirtir.

Burada ölçüt cihaz modeli değil, içeriktir. web.dev, kırılma noktalarının belirli cihazlara göre değil içeriğin düzene ihtiyaç duyduğu yere göre seçilmesini önerir. Yani amaç iPhone ya da belirli bir tablet için özel bir sayfa çizmek değil, içeriğin her genişlikte okunabilir ve kullanılabilir kalmasıdır.

• Viewport etiketi: web.dev'in önerdiği biçim width=device-width ve initial-scale=1 değerlerini içerir.
• Esnek yerleşim: sabit piksel genişlikler yerine, mevcut alana uyum sağlayan düzen teknikleri kullanılır.
• Medya sorguları: düzen, içeriğin bozulduğu genişliklerde değişir.
• Görseller: taşma yapmaması için kapsayıcı genişliğine göre sınırlandırılır.

Mobil öncelikli indeksleme (mobile-first indexing) nedir?

Mobil öncelikli indeksleme, Google'ın bir sitenin mobil sürümünün içeriğini akıllı telefon tarayıcısıyla tarayıp indekslemede ve sıralamada kullanması demektir. Rehbere göre Google, indeksleme ve sıralama için sitenin mobil sürümündeki içeriği kullanır; indeksleme için yalnızca mobil sitede gösterilen içerik dikkate alınır.

Bu yüzden Google'ın birinci önerisi eşdeğerliktir: mobil sitenin masaüstü sitedeki içeriğin aynısını içermesi, her iki sürümde aynı yapılandırılmış verinin bulunması ve title ile meta description alanlarının denk olması gerekir. Mobil tasarımda içeriği akordiyon ya da sekmelerin içine taşımak serbesttir; Google yalnızca içeriğin masaüstüyle eşdeğer olmasını ister. Kullanıcı etkileşimi (kaydırma, tıklama, yazma) gerektiren yüklemeler ise riskli bir alandır, çünkü Google bu tür etkileşimlerle yüklenen içeriği yüklemez.

Görsel ve videolar için de kurallar vardır: mobil sitede küçük ya da düşük çözünürlüklü görsel kullanılmamalı, desteklenen biçimler seçilmeli, görsellerin alt metni masaüstüyle aynı olmalı ve görsel ile video adresleri her sayfa yüklenişinde değişmemelidir. Mobil sürümde robots.txt ile görsel veya kaynak adreslerini engellemek de Google'ın bu içeriğe erişmesini zorlaştırır. Masaüstüne özel bir site için Google, mobil sürüm oluşturulmasını çok güçlü biçimde önerir; ancak mobil sürümün olmaması dizine eklenmenin şartı değildir.

Mobil uyum kontrol listesi: sitenizde bakılacak altı konu

Aşağıdaki liste, yukarıdaki resmî kaynaklara dayanan bir kontrol listesidir. Hepsini kendiniz telefonunuzda ve ücretsiz araçlarla gözden geçirebilirsiniz. Bu liste Google'ın resmî bir puanlaması değildir; sayfanın kendi derlemesidir.

• Viewport: sayfanın head bölümünde meta name=viewport etiketi width=device-width, initial-scale=1 ile tanımlı mı?
• Yatay kaydırma: telefonda hiçbir sayfa yana kayıyor ya da uzaklaştırma gerektiriyor mu? Görseller, tablolar ve gömülü videolar ekrana sığıyor mu?
• İçerik eşitliği: masaüstünde gördüğünüz metin, başlık, görsel, alt metin, title ve meta description telefonda da var mı? Gizlenen bir bölüm varsa yalnızca düzen olarak mı taşındı, içerik olarak mı çıkarıldı?
• Dokunma hedefleri: web.dev'e göre, doğru ayarlanmış bir mobil viewport'a sahip sitede önerilen asgari dokunma hedefi yaklaşık 48 cihazdan bağımsız pikseldir ve hedefler birbirinden yaklaşık 8 piksel aralıklı olmalıdır. Menü bağlantıları, telefon numarası ve form düğmeleri bu ölçüye uyuyor mu?
• Görseller: görsellerde genişlik ve yükseklik öznitelikleri tanımlı mı, ekrana göre boyut seçimi için srcset ve sizes kullanılıyor mu, ekran dışındaki görseller gecikmeli yükleniyor mu? Mobil öncelikli indeksleme rehberi, etkileşim gerektiren gecikmeli yüklemeye karşı da uyarır.
• Hız ve sayfa deneyimi: Core Web Vitals değerleri (LCP, INP, CLS) iyi eşiklerin içinde mi? Eşikler aşağıdaki Core Web Vitals bölümünde yer alıyor.

Mobil görünümü ve Google'ın gördüğünü kontrol eden araçlar

Google'ın Arama dokümantasyonu güncelleme günlüğüne göre 1 Aralık 2023'te Mobile Friendly Test ve Mobile Usability raporuna yapılan anmalar, bunlar kalkacağı (going away) için dokümantasyondan çıkarıldı. Aracın güncel durumu için Google'ın duyurularına bakabilirsiniz; bu sayfada aşağıdaki araçlar anlatılıyor.

Araçlar farklı veriler gösterir; birkaçını birlikte okumak ve sayfayı telefonda açmak yararlıdır.

• Google Search Console, URL Denetimi: Google'ın dizinindeki sayfa sürümünü, Google'ın seçtiği kanonik adresi ve sayfa tarama bilgilerini gösterir. Canlı test, sayfanın o anki halini Google'ın tarayıcısının gördüğü biçimde ekran görüntüsüyle sunar; bu ekran görüntüsü, öğelerin görüntülendiğini ve Google'a engellenmediğini doğrulamanıza yardım eder. URL Denetimi mobil uyum puanı vermez; Google'ın sayfayı nasıl gördüğünü ve kaynakların engellenip engellenmediğini görmenize yardım eder.
• PageSpeed Insights: sayfayı mobil ve masaüstü için ayrı ayrı raporlar. Gerçek kullanıcı verisi (Chrome User Experience Report, 28 günlük) ile Lighthouse'un orta seviye bir cihaz ve mobil ağ simülasyonuna dayanan laboratuvar verisini birlikte gösterir; iki veri birbirinden farklı çıkabilir. Core Web Vitals değerlendirmesi, üç metriğin 75. yüzdelik dilimi iyi olduğunda geçilmiş sayılır.
• Chrome geliştirici araçlarında cihaz modu: mobil görünüm alanını, CPU ve ağ kısıtlamasını simüle eder. Chrome'un kendi belgesi bunun gerçek bir cihaz olmadığını, yalnızca bir yaklaşım olduğunu söyler; daha doğru sonuç için kodun gerçek mobil cihazda çalışırken incelenmesini önerir.
• Gerçek telefon: sayfanın kendi telefonunuzda, farklı genişliklerde ve dikey ile yatay konumda açılması. Menü, form, telefon bağlantısı ve harita gibi öğeleri parmağınızla deneyin.

Core Web Vitals ve mobil uyum: hangi değerler iyi sayılır?

Google, Core Web Vitals'ın sıralama sistemlerinde kullanıldığını belirtir ve iyi bir sayfa deneyiminin yalnızca bu skorlardan ibaret olmadığını vurgular. Google ayrıca Arama'nın, sayfa deneyimi zayıf olsa bile alakalı içeriği göstermeye çalıştığını; birçok sorguda yararlı içerik bulunduğunda ise iyi bir sayfa deneyiminin Arama'daki başarıya katkıda bulunabileceğini söyler.

web.dev'in Core Web Vitals sayfasına göre iyi eşikler şunlardır: en büyük içerikli boyama (LCP) sayfa yüklenmeye başladıktan sonra 2,5 saniye içinde olmalı, etkileşimden sonraki boyama (INP) 200 milisaniye ya da daha kısa olmalı, kümülatif düzen kayması (CLS) 0,1 ya da daha az olmalı. Ölçüt, mobil ve masaüstü ayrı ayrı olmak üzere sayfa yüklemelerinin 75. yüzdelik dilimidir.

Mobil uyumlu bir sitede bakılan sekiz teknik başlık

Mobil uyumda resmî kurallar: Google ve web.dev ne diyor?

Mobil uyumda dikkat edilecek altı hata

Mobil uyumlu tasarım hizmetinde çalışma akışı

1. İhtiyaç ve hedeflerin netleşmesi
   Telefon, WhatsApp (0216 393 10 07) ya da teklif formu (/teklif-al) üzerinden sitenizi, hedefinizi ve beklentinizi iletirsiniz. Akış örnektir; sırası ve kapsamı projeye göre değişebilir.
2. Yazılı teklif ve kapsam
   Yeni web sitesi için kapsam ve ücret yazılı teklifle sunulur; hangi paket kaleminin kapsamda olduğu teklifte görülür.
3. İçerik ve erişim bilgilerinin alınması
   Sayfa metinleri, görseller ve gerekli erişim bilgileri sizden alınır. İşinizle ilgili doğru bilgi sizdedir; içerik onayı sizden beklenir.
4. Hazırlık ve uygulama
   Site tasarlanır ve geliştirilir; mobil uyumlu tasarım kalemi içeren paketlerde sayfalar responsive olarak hazırlanır.
5. Yayın
   Hazırlanan site yayına alınır.
6. Destek
   Yayından sonra teknik destek, seçtiğiniz paketin kapsamındaki süre boyunca verilir. Kapsam ve süre paketten pakete değişir.

Neden Tuba Yazılım?

Merkezimiz İstanbul/Pendik'tedir; 81 ile uzaktan hizmet veriyoruz. Tasarım, içerik, teknik SEO ve Google İşletme Profili kurulumunu tek ekipten yürütürüz. Referanslarımızı inceleyin.

Sık sorulan sorular

İlgili sayfalar

• Kurumsal Web Sitesi
• SEO Uyumlu Web Sitesi Kodlaması
• Özel Tasarım Web Sitesi
• Web Tasarım Fiyatları

Ücretsiz araçlarımız: SEO ve GEO analizi · Yapay zekâ bot erişim testi · Google yorum linki oluşturucu · Fiyat hesaplama

Kaynaklar

1. Google Arama Merkezi: Mobil öncelikli indeksleme en iyi uygulamaları
2. Google Arama Merkezi: Sayfa deneyimi
3. Google Arama Merkezi: Dokümantasyon güncellemeleri (1 Aralık 2023 kaydı)
4. Search Console Yardım: URL Denetimi aracı
5. Google PageSpeed Insights: Hakkında
6. web.dev: Responsive web design basics
7. web.dev: Responsive images
8. web.dev: Accessible tap targets
9. web.dev: Core Web Vitals
10. Chrome for Developers: Cihaz modu (Device Mode)