Kayıt ol

Tovala Akıllı Fırın Deneyimi: Paket Servisten Daha İyi mi?FortiMail'de Kritik Zero-Day Açığı Aktif Saldırılarda Kullanılıyor Meadow: Sosyal Medyasız Minimalist Telefon Deneyimi California'da Gizli Kayıt Yapan Akıllı Gözlük Yasasına Veto Hello Robot Stretch 4, TechCrunch Disrupt 2026'da Canlı Tanıtılacak

JavaScript devre dışı. Daha iyi bir deneyim için, önce lütfen tarayıcınızda JavaScript'i etkinleştirin.

Mobil Site Nedir? Responsive Tasarım Nasıl Yapılır?

Mesaj: <blockquote data-quote="Admin" data-source="post: 12833" data-attributes="member: 1"><p><h2>Mobil Site Nedir? Responsive Tasarım Nasıl Yapılır?</h2><p>Bir web sitesini telefonda açtığınızda yazıları okumak için ekranı büyütmeniz, menüye dokunmak için birkaç kez denemeniz veya sayfayı sağa sola kaydırmanız gerekiyorsa mobil deneyimde sorun vardır. Site masaüstünde düzgün görünebilir; ancak küçük ekranda ziyaretçinin işini zorlaştırır.</p><p>Mobil uyumluluk, sayfayı telefon ekranına sığdırmaktan daha kapsamlıdır. İçeriğin okunması, menünün kullanılması, formun doldurulması ve alışverişin tamamlanması birlikte düşünülmelidir.</p><p>Bu yazıda mobil sitenin ne anlama geldiğini, responsive tasarımın nasıl çalıştığını, mevcut bir sitenin nasıl iyileştirilebileceğini ve WordPress tarafında nelere dikkat edilmesi gerektiğini ele alıyoruz.</p><h2>Mobil Site Nedir?</h2><p>Mobil site, telefon ve tablet gibi cihazlarda rahatça kullanılabilecek şekilde hazırlanmış web sitesidir. Yazılar, görseller, menüler ve etkileşim alanları ekranın özelliklerine uygun biçimde yerleşir.</p><p>Örneğin masaüstünde üç sütunda gösterilen ürünler telefonda tek veya iki sütuna geçebilir. Geniş bir gezinme menüsü açılır menüye dönüşebilir. Form alanları, ekran klavyesi açıldığında da kullanılabilir durumda kalır.</p><p><strong>Mobil site için ayrı bir alan adı veya ikinci bir web sitesi kurmak şart değildir.</strong> Aynı adres üzerinden çalışan site, responsive tasarımla farklı ekran genişliklerine uyum sağlayabilir.</p><p>Mobil uyumlu bir sitede ziyaretçi şu işlemleri zorlanmadan yapabilmelidir:</p><ul> <li data-xf-list-type="ul">İçeriği okuyabilmek.</li> <li data-xf-list-type="ul">İstediği sayfaya ulaşabilmek.</li> <li data-xf-list-type="ul">Buton ve bağlantılara doğru şekilde dokunabilmek.</li> <li data-xf-list-type="ul">Formları doldurup gönderebilmek.</li> <li data-xf-list-type="ul">Ürün seçeneklerini inceleyip satın alma işlemini tamamlayabilmek.</li> </ul><p>Sitenin açılması, bütün bu işlemlerin sorunsuz çalıştığını tek başına göstermez.</p><h2>Responsive Tasarım Nedir?</h2><p>Responsive, Türkçede “duyarlı tasarım” olarak kullanılan bir yaklaşımdır. Sayfa düzeni, kullanılabilir ekran alanına göre değişir.</p><p>Bu yapıda aynı URL ve HTML üzerinden farklı ekranlara uygun görünüm oluşturulur. Google, uygulanması ve bakımının daha kolay olması nedeniyle responsive tasarımı önerir. Aynı adreste cihazlara göre farklı HTML sunmak veya ayrı mobil URL’ler kullanmak da teknik olarak mümkündür.</p><p></p><table style='width: 100%'><tr><th>Yaklaşım</th><th>Çalışma biçimi</th><th>Yönetimde dikkat edilmesi gereken</th></tr><tr><td>Responsive tasarım</td><td>Aynı sayfanın düzeni ekran genişliğine uyarlanır</td><td>Esnek yerleşim ve farklı genişliklerde test</td></tr><tr><td>Dinamik sunum</td><td>Aynı URL’de cihazlara göre farklı HTML sunulur</td><td>Cihaz algılama, önbellek ve içerik tutarlılığı</td></tr><tr><td>Ayrı mobil URL</td><td>Mobil sürüm farklı bir adreste yayımlanır</td><td>Yönlendirmeler ve iki sürümün eşleştirilmesi</td></tr></table><p></p><p>“Adaptive tasarım” ifadesi ise genellikle belirli genişliklere hazırlanmış farklı düzenleri anlatır. Ekran düzenini tanımlayan bu kavramı, sunucunun farklı HTML göndermesiyle birebir aynı kabul etmemek gerekir.</p><p>Yeni bir proje için responsive yaklaşım çoğu zaman yönetimi kolay bir başlangıçtır. Mevcut ayrı mobil siteyi dönüştürmek ise içerik ve URL yapısı incelenerek planlanmalıdır.</p><h2>Responsive Tasarımın Temel Bileşenleri</h2><p>Duyarlı tasarımda üç unsur birlikte kullanılır:</p><ul> <li data-xf-list-type="ul"><strong>Esnek yerleşim:</strong> İçerik alanları kullanılabilir genişliğe uyum sağlar.</li> <li data-xf-list-type="ul"><strong>Esnek görseller:</strong> Görseller kapsayıcılarının dışına taşmaz.</li> <li data-xf-list-type="ul"><strong>Media query:</strong> Belirli koşullarda farklı CSS kuralları uygulanır.</li> </ul><p>CSS Grid ve Flexbox, bu düzenleri oluşturmak için kullanılabilir. Her alanın sabit piksel genişliğinde tanımlanması gerekmez.</p><h3>Viewport etiketi</h3><p>HTML belgesinin <code class="bbCodeInline"><head></code> bölümündeki temel tanımlardan biri şudur:</p><p><code class="bbCodeInline"><meta name="viewport" content="width=device-width, initial-scale=1"></code></p><p>Bu etiket, mobil tarayıcının sayfa genişliğini cihazın görünüm alanına göre değerlendirmesini sağlar. Eksik olduğunda tarayıcı geniş bir masaüstü sayfasını küçülterek gösterebilir.</p><p>Etiketi eklemek tek başına yeterli değildir. Sayfadaki sabit genişlikler ve diğer yerleşim kuralları da düzenlenmelidir. Kullanıcının yakınlaştırmasını kapatmak ise okunabilirlik sorununa çözüm olarak kullanılmamalıdır.</p><h3>Basit bir responsive CSS örneği</h3><p>Aşağıdaki örnek, <code class="bbCodeInline">.kartlar</code> alanını küçük ekranda tek, daha geniş ekranda üç sütuna geçirir:</p><p>[CODE]*,</p><p>*::before,</p><p>*::after {</p><p>  box-sizing: border-box;</p><p>}</p><p></p><p>.kapsayici {</p><p>  width: min(100% - 2rem, 72rem);</p><p>  margin-inline: auto;</p><p>}</p><p></p><p>.kartlar {</p><p>  display: grid;</p><p>  grid-template-columns: 1fr;</p><p>  gap: 1rem;</p><p>}</p><p></p><p>.kartlar > * {</p><p>  min-width: 0;</p><p>  overflow-wrap: anywhere;</p><p>}</p><p></p><p>img {</p><p>  max-width: 100%;</p><p>  height: auto;</p><p>}</p><p></p><p>@media (min-width: 48rem) {</p><p>  .kartlar {</p><p>    grid-template-columns: repeat(3, minmax(0, 1fr));</p><p>  }</p><p>}[/CODE]</p><p>Buradaki <code class="bbCodeInline">48rem</code>, örnek bir kırılım noktasıdır. Kendi tasarımınızda sütunların ve içeriğin rahatça yerleşebildiği genişliği esas alın.</p><h2>Mobil Öncelikli Tasarım Nasıl Planlanır?</h2><p>Mobil öncelikli tasarımda önce dar ekran için kullanılabilir bir düzen hazırlanır. Daha geniş ekranlarda sütunlar, boşluklar ve ek yerleşim seçenekleri devreye girer.</p><p>Planlamaya ziyaretçinin yapmak istediği işlemlerle başlayabilirsiniz. Bir hosting sitesinde paket karşılaştırması ve sipariş butonu; bir forumda konu okuma, arama ve cevap yazma; bir mağazada ürün seçimi ve ödeme akışı öne çıkabilir.</p><p>Küçük ekranda alan kazanmak için önemli içeriği silmek yerine yerleşimi değiştirin. Ürün özelliklerini açılır bölümlerde sunabilir, uzun menüyü gruplandırabilir veya karşılaştırma alanını yeniden düzenleyebilirsiniz.</p><p>Kırılım noktalarını yalnızca telefon modellerine göre belirlemek de gerekli değildir. Tarayıcı genişliğini değiştirerek menünün, başlıkların ve kartların hangi noktada sıkıştığını gözlemleyin. Tasarımın ara genişliklerde de çalışmasını sağlayın.</p><p>Ayrıca <strong>mobil öncelikli tasarım ile Google’ın mobil öncelikli indekslemesi farklı kavramlardır.</strong> İlki tasarım sürecini, ikincisi Google’ın indeksleme için hangi içerik sürümünü esas aldığını anlatır.</p><h2>Mevcut Siteyi Mobil Uyumlu Hale Getirme</h2><p>Elinizde çalışan bir site varsa önce sorunların hangi sayfalarda ortaya çıktığını belirleyin. Ana sayfa düzgün görünürken ürün detayları, tablolar veya üyelik ekranları taşabilir.</p><h3>1. Taşan alanları bulun</h3><p>Sabit genişlikte hazırlanmış kapsayıcılar, reklamlar, videolar, uzun bağlantılar ve tablolar yatay taşmaya yol açabilir.</p><p>Sayfanın tamamına <code class="bbCodeInline">overflow-x: hidden</code> eklemek, taşan içeriği görünmez hale getirebilir. Sorunun kaynağını bulup ilgili bileşeni düzeltmek daha sağlıklıdır.</p><p>Geniş bir veri tablosu için kendi alanı içinde yatay kaydırma kullanılabilir. Böylece bütün sayfanın sağa sola hareket etmesi önlenir.</p><h3>2. Yazıları gerçek içerikle kontrol edin</h3><p>Kısa demo başlıkları tasarımdaki sorunları gizleyebilir. Uzun Türkçe başlıklar, fiyatlar, kullanıcı adları ve açıklamalarla test yapın.</p><p>Gövde metni için <code class="bbCodeInline">1rem</code>, başlangıç değeri olarak kullanılabilir; fakat okunabilirlik yazı tipine, satır aralığına ve kontrasta da bağlıdır. Kullanıcı metni büyüttüğünde içerik kesilmemelidir.</p><h3>3. Menüyü dokunarak deneyin</h3><p>Fareyi üzerine getirince açılan bir menü, telefonda aynı biçimde kullanılamayabilir. Alt menülere dokunarak erişilebildiğini ve menünün kolayca kapatıldığını kontrol edin.</p><p>Menü düğmesinin anlaşılır bir adı olmalı. Açılır menü, klavye ve ekran okuyucu kullanan ziyaretçiler için de erişilebilir şekilde hazırlanmalıdır.</p><h3>4. Formları uçtan uca test edin</h3><p>Ad, e-posta ve telefon alanlarına uygun giriş türleri seçin. Etiketleri yalnızca alanın içindeki geçici metne bırakmayın; kullanıcı yazmaya başladıktan sonra da hangi bilgiyi girdiğini anlayabilsin.</p><p>Ekran klavyesi açıldığında gönderme butonu veya hata mesajı görünmez hale geliyor mu? Doğrulama hatasından sonra doldurulan bilgiler korunuyor mu? Bunları gerçek cihazda deneyin.</p><h2>Dokunma Alanları ve Erişilebilirlik</h2><p>Küçük ikonlar, birbirine çok yakın bağlantılar ve dar butonlar yanlış dokunmaları artırabilir. Görünen ikonla tıklanabilir alanın aynı boyutta olması gerekmez; çevresindeki boşlukla dokunma alanı büyütülebilir.</p><p>WCAG 2.2’nin AA düzeyindeki hedef boyutu ölçütü, belirli istisnalarla en az <strong>24 × 24 CSS piksel</strong> veya uygun aralık koşullarını ele alır. Daha yüksek düzeydeki ölçütte <strong>44 × 44 CSS piksel</strong> bulunur. Bu nedenle “bütün bağlantılar için zorunlu minimum 44 piksel” ifadesi doğru değildir.</p><p>Ana işlemlerde geniş ve rahat dokunulan alanlar tercih edin. Menü açma, sepete ekleme, cevap gönderme ve ödeme gibi düğmeleri özellikle kontrol edin.</p><h2>Görselleri Mobil Ekrana Uygun Hazırlama</h2><p>Bir görselin CSS ile küçültülmesi, indirilen dosyanın küçüldüğü anlamına gelmez. Telefonda küçük görünen bir görselin masaüstü için hazırlanmış büyük dosyası yükleniyor olabilir.</p><p><code class="bbCodeInline">srcset</code> ve <code class="bbCodeInline">sizes</code>, tarayıcının uygun görsel kaynağını seçmesine yardımcı olur. Gerektiğinde <code class="bbCodeInline"><picture></code> ile farklı kaynaklar veya farklı kırpılmış görseller sunulabilir.</p><p>Görsel hazırlarken şunları kontrol edin:</p><ul> <li data-xf-list-type="ul">Kullanılan alana uygun çözünürlük.</li> <li data-xf-list-type="ul">Kabul edilebilir kalite ve dosya boyutu.</li> <li data-xf-list-type="ul">Görsel yüklenmeden önce ayrılmış alan.</li> <li data-xf-list-type="ul">Anlamlı görseller için uygun alternatif metin.</li> <li data-xf-list-type="ul">Ekranın altında kalan görseller için gecikmeli yükleme.</li> </ul><p><strong>Sayfanın ana görseline gelişigüzel lazy loading uygulamayın.</strong> LCP öğesi olan görselin geç yüklenmesi, ana içeriğin görünmesini geciktirebilir.</p><p>WebP veya AVIF kullanmak faydalı olabilir; yine de format değişikliğinden sonra kaliteyi ve dosya boyutunu karşılaştırın.</p><h2>WordPress’te Mobil Uyumlu Site Yapımı</h2><p>WordPress’te başlangıç noktası, temanın gerçek sayfalarda nasıl davrandığını incelemektir. Demo sayfasının düzgün olması, kendi içeriklerinizin de sorunsuz yerleşeceğini garanti etmez.</p><p>Tema değişikliğinden önce dosya ve veritabanı yedeği alın. Mümkünse değişikliği test ortamında deneyin. Ardından şu sayfaları kontrol edin:</p><ul> <li data-xf-list-type="ul">Ana sayfa ve yazı detayları.</li> <li data-xf-list-type="ul">Kategori ve arama sonuçları.</li> <li data-xf-list-type="ul">İletişim ve üyelik formları.</li> <li data-xf-list-type="ul">Kullanılıyorsa ürün, sepet ve ödeme ekranları.</li> </ul><p>Blok tema kullanıyorsanız Site Düzenleyicisi üzerinden şablonlar ve site bölümleri düzenlenebilir. Bu arayüzün kullanılabilmesi blok tema gerektirir; her WordPress temasında aynı düzenleme ekranı bulunmaz.</p><p>Sayfa oluşturucu kullanıyorsanız mobil ayarları tek tek inceleyin. Sabit yükseklikler, büyük iç boşluklar ve üst üste yerleştirilmiş bileşenler telefonda sorun çıkarabilir.</p><p>Eklentileri de etkilerine göre değerlendirin. Her eklenti ziyaretçi tarafında JavaScript yüklemez; buna karşılık tek bir ağır bileşen belirgin yavaşlama oluşturabilir. Önbellekleme ve kod optimizasyonundan sonra menü, form ve ödeme işlemlerini yeniden test edin.</p><h2>Mobil Uyumluluk ile Sayfa Hızı Aynı Şey mi?</h2><p>Bir site ekrana düzgün yerleştiği halde yavaş çalışabilir. Hızlı açılan bir sayfada da okunamayan metin veya kullanılamayan menü bulunabilir.</p><p>Core Web Vitals, yükleme, etkileşim ve görsel kararlılık alanlarını ölçer:</p><p></p><table style='width: 100%'><tr><th>Ölçüm</th><th>Değerlendirdiği alan</th><th>İyi kabul edilen değer</th></tr><tr><td>LCP</td><td>Ana içeriğin görünme süresi</td><td>2,5 saniye veya daha az</td></tr><tr><td>INP</td><td>Etkileşimlere yanıt</td><td>200 milisaniye veya daha az</td></tr><tr><td>CLS</td><td>Beklenmedik yerleşim kaymaları</td><td>0,1 veya daha az</td></tr></table><p></p><p>Değerlendirmede mobil ve masaüstü kullanıcıları için 75. yüzdelik değer esas alınır. Bu ölçümler, menünün anlaşılır olduğunu veya formun eksiksiz kullanılabildiğini tek başına kanıtlamaz.</p><p>Sunucu yanıtı, görseller, JavaScript, yazı tipleri ve üçüncü taraf hizmetler performansa katkıda bulunur. Sorunu ölçmeden yalnızca hosting değiştirmek beklenen sonucu vermeyebilir.</p><h2>Mobil Site Nasıl Test Edilir?</h2><h3>Tarayıcı araçları</h3><p>Chrome’un geliştirici araçlarındaki cihaz görünümüyle farklı genişlikleri ve bağlantı koşullarını deneyebilirsiniz. Ancak bu görünüm gerçek telefonun bütün davranışlarını taklit etmez.</p><h3>PageSpeed Insights</h3><p>PageSpeed Insights, laboratuvar testi ve yeterli örnek varsa gerçek kullanıcı verileri sunar. Laboratuvar sonuçlarıyla gerçek kullanım sonuçlarının farklı olması mümkündür. Kullanıcı verisinin bulunmaması da otomatik olarak sorun olduğu anlamına gelmez.</p><h3>Search Console</h3><p>Core Web Vitals raporuyla performans sorunlarını takip edebilirsiniz. Eski rehberlerdeki Mobile-Friendly Test ve Mobil Kullanılabilirlik raporu kullanımdan kaldırılmıştır. Ayrı Sayfa Deneyimi raporu da kaldırılmıştır.</p><h3>Gerçek cihaz kontrolü</h3> <table style='width: 100%'><tr><th>Kontrol</th><th>Denenecek işlem</th></tr><tr><td>Gezinme</td><td>Menüyü açma, alt sayfaya geçme ve geri dönme</td></tr><tr><td>Okuma</td><td>Uzun yazı, liste ve tablo görüntüleme</td></tr><tr><td>Formlar</td><td>Bilgi girme, hata alma ve yeniden gönderme</td></tr><tr><td>E-ticaret</td><td>Varyasyon seçme, sepete ekleme ve ödeme</td></tr><tr><td>Görünüm</td><td>Ekranı döndürme ve metni büyütme</td></tr><tr><td>Sabit öğeler</td><td>Çerez bildirimi veya sohbet kutusu açıkken işlem yapma</td></tr></table><p></p><p>Yalnızca ana sayfayı test etmek yerine ziyaretçinin tamamlamasını istediğiniz işlemi baştan sona deneyin.</p><h2>Mobil Uyumluluk Google Sıralamasını Etkiler mi?</h2><p>Google, indeksleme ve sıralama için sitenin mobil içerik sürümünü esas alır. Bu nedenle önemli metinlerin, bağlantıların ve diğer bilgilerin mobil görünümde de erişilebilir olması gerekir.</p><p>Ancak mobil uyumluluk veya yüksek performans puanı, üst sıraya çıkmayı garanti etmez. Google, iyi Core Web Vitals sonuçlarının tek başına yüksek sıralama sağlamadığını açıkça belirtir.</p><p>Hedefiniz, ziyaretçinin ihtiyaç duyduğu içeriği rahatça okuyabildiği ve işlemini tamamlayabildiği bir site oluşturmak olmalıdır.</p><p></p><h2>Sıkça Sorulan Sorular</h2><h3>Mobil site için ayrı alan adı gerekir mi?</h3><p>Hayır. Responsive tasarımda aynı adres farklı ekranlara uygun görünüm sunabilir.</p><h3>Mobil uyumluluk için eklenti kurmak şart mı?</h3><p>Hayır. Düzgün hazırlanmış tema ve sayfa düzeniyle ek bir mobil tema eklentisine ihtiyaç duyulmayabilir.</p><h3>Viewport etiketi bütün sorunları çözer mi?</h3><p>Hayır. Sabit genişlikler, taşan bileşenler ve kullanılamayan menüler ayrıca düzeltilmelidir.</p><h3>Mobil görünümde önemli içeriği kaldırmalı mıyım?</h3><p>Önemli içeriği koruyup yerleşimini düzenlemek daha sağlıklıdır. Bölümleri anlaşılır şekilde gruplandırabilir veya açılır alanlarda sunabilirsiniz.</p><h3>PageSpeed puanı yüksekse site tamamen mobil uyumlu mudur?</h3><p>Hayır. Okunabilirlik, dokunma alanları, form davranışları ve erişilebilirlik ayrıca kontrol edilmelidir.</p><h3>Çalışmaya nereden başlamalıyım?</h3><p>Telefondan sitenizi açıp en önemli kullanıcı işlemini tamamlamayı deneyin. İşlemi engelleyen sorunları önce düzeltin; ardından performans ölçümleriyle yükleme ve etkileşim gecikmelerini inceleyin.</p></blockquote><p></p>