Bir Web Sitesini Mobil Uyumlu Hale Getirme

Bir web sitesini mobil uyumlu hale getirmek için bir viewport meta etiketi ekleyin, düzeni esnek genişliklerle mobil öncelikli kurun ve daha büyük ekranlarda düzeni yeniden düzenlemek için CSS kırılma noktaları kullanın — sütunları alt alta dizmek, menüyü daraltmak ve görselleri sığacak şekilde ölçeklemek gibi. Ardından her sayfayı telefon genişliğinde yatay kaydırma, çok küçük metin ve dokunmak için fazla küçük düğmeler açısından kontrol edin. AI ile oluşturulmuş bir sitede, net bir istem ve telefon boyutundaki bir önizlemede yapılan bir kontrol çoğu sorunu düzeltir.

Duyarlı tasarım aslında nedir?

Duyarlı bir site, ekrana uyarlanan tek bir sayfa ve URL kümesi kullanır. Ayrı bir "m." sitesi yerine CSS, belirli genişliklerde — kırılma noktaları denen yerlerde — düzeni değiştirir. Yapı taşları şunlardır:

• Viewport meta etiketi, mobil tarayıcılara cihazın gerçek genişliğini kullanmasını söyler.
• Akışkan düzenler sabit piksel genişlikleri yerine yüzdeler, flexbox ve grid kullanır.
• Medya sorguları (ya da Tailwind'in md: gibi framework sınıfları) belirli bir genişliğin üstünde düzeni değiştirir.
• Esnek medya — kapsayıcısına sığacak şekilde küçülen görseller ve videolar.

Bu önemlidir, çünkü trafiğinizin büyük bölümü muhtemelen telefonlardan gelir ve Google sayfalarınızın mobil sürümünü dizinler. İçerik ya da bağlantılar yalnızca masaüstünde varsa, Google onları da görmeyebilir.

Seçenekler ve ödünleşimler

Mobil öncelikli yaklaşım genellikle daha basittir: tek sütun en kolay düzendir ve alan genişledikçe sütun eklemek, sütun çıkarmaktan daha az iştir.

Genellikle bozulan kısımlar

Viewport etiketi

Bir sayfa telefonda küçük bir masaüstü sitesi gibi görünüyorsa, viewport etiketi eksiktir:

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

maximum-scale=1 ya da user-scalable=no eklemeyin. Parmakla yakınlaştırmayı engellemek, düşük görme gücü olan insanlar için siteyi kullanmayı zorlaştırır.

Sabit genişlikler ve yatay kaydırma

En yaygın duyarlılık hatası, ekrandan daha geniş bir şeydir: sabit width: 1200px kapsayıcı, geniş bir tablo, uzun bir URL veya kod bloğu, max-width: 100% olmayan bir görsel. Tüm sayfa o zaman yana doğru kayar. width yerine max-width kullanın, metnin sarmasına izin verin ve geniş öğelere kendi kaydırma alanlarını verin.

Gezinme

Masaüstü menüsündeki beş bağlantı nadiren telefona sığar. Yaygın çözüm, bir panel açan bir menü düğmesidir. En önemli iki ya da üç eylemi — "Rezervasyon", "Sepet", "Giriş yap" — görünür tutun ve menünün klavyeyle çalıştığından ve kolayca kapandığından emin olun.

Metin ve dokunma alanları

• Telefonlarda yaklaşık 16 px gövde metni makul bir alt sınırdır. Daha küçük metinli girdi alanları, dokunulduğunda iPhone'ların yakınlaştırmasına neden olur.
• Düğme ve bağlantıların dokunması kolay olsun. WCAG 2.2 AA, 24 x 24 CSS piksellik bir alt sınır (ya da yeterli boşluk) koyar; baş parmak için yaklaşık 44 piksel daha rahattır.
• Yan yana bağlantılar arasında boşluk bırakın ki insanlar yanlış olana dokunmasın.

Tablolar ve veriler

Geniş tablolar, duyarlı bir uygulamanın en zor kısmıdır. Tercih sırasına göre seçenekler: telefonlarda daha az sütun göstermek, her satırı bir karta çevirmek ya da tabloyu ilk sütunu sabitlenmiş, yatay kaydırılabilir bir kapsayıcıya koymak. İnsanların neyi karşılaştırması gerektiğine göre seçin.

Görseller ve medya

max-width: 100% ve height: auto kullanın, küçük ekranlara srcset ile daha küçük dosyalar sunun ve düzen sıçramalarını önlemek için genişlik ile yükseklik belirleyin. Gömülü videolar ve haritalar, en-boy oranlarını korumak için duyarlı bir sarmalayıcıya ihtiyaç duyar. Daha küçük görseller sayfaları da hızlandırır — bkz. web sitenizi nasıl hızlandırırsınız.

Formlar

Etiketleri alanların üstüne koyun, alanları tam genişlikte yapın ve telefonların ilgili klavyeyi göstermesi için doğru girdi türlerini (type="email", type="tel", inputmode="numeric") kullanın. Gönder düğmesini baş parmağın ulaşabileceği bir yere koyun ve klavye açıldığında görünür tutun.

Yalnızca fareyle üzerine gelmeye bağlı etkileşimler

Telefonlarda fare üzerine gelme (hover) yoktur. Yalnızca hover ile görünen ipuçları, açılır menüler ve önizlemeler dokunma kullanan kişilere görünmez. Bunları dokunarak da çalışacak hale getirin.

İşe yarayan istemler

Yeni bir yapı için, en başta söyleyin:

Bunu mobil öncelikli yap. Telefonlarda tek sütun, tabletten itibaren iki sütun, masaüstünde tam düzen. 320 px genişlikte yatay kaydırma olmasın, gövde metni en az 16 px, dokunma alanları en az 44 px, küçük ekranlarda bir menü düğmesi ve telefonda kartlara dönüşen tablolar.

Mevcut bir sayfa için gördüğünüzü anlatın:

Telefonda /pricing sayfası yana kayıyor ve üç plan kartı yan yana sıkışmış. 768 px'in altında kartları dikey olarak alt alta diz, karşılaştırma tablosunu kendi kapsayıcısında yatay kaydırılabilir yap ve özellik sütununu sabitle, masaüstü düzenini değiştirme.

Her sayfayı 375 px genişlikte kontrol et. Taşan, üst üste binen, 16 px'ten küçük metin ya da 44 px'ten küçük dokunma alanı olan ya da yalnızca hover ile çalışan her şeyi listele, sonra her birini düzelt.

Adım adım

1. Viewport etiketinin sayfa başlığında olduğunu doğrulayın.
2. Tarayıcının cihaz modunda ya da telefon boyutundaki bir önizlemede 320–375 px genişlikte test edin. Her sayfayı baştan sona kaydırın.
3. Önce yatay kaydırmayı düzeltin. Çok geniş olan öğeyi bulun; o gidene kadar diğer her şeyi değerlendirmek zordur.
4. Gezinmeyi düzenleyin: menü düğmesi, ana eylemler görünür.
5. Metni, dokunma alanlarını ve formları her temel akışta kontrol edin — kayıt olma, arama, ödeme, iletişim.
6. Tablo ve medyayı ele alın: kartlar ya da kaydırma kapsayıcıları, duyarlı görseller ve gömüler.
7. Ara boyutları kontrol edin. Genişliği telefondan masaüstüne yavaşça sürükleyin; düzenler çoğu zaman tablet genişliği civarında bozulur.
8. Gerçek bir telefonda test edin. Emülatörler, ekran klavyesinin bir düğmeyi kapatması, çentikler ve sitenin mobil veride ne kadar hızlı hissettirdiği gibi şeyleri kaçırır.

Sık yapılan hatalar

• Yalnızca tek bir telefon boyutunda test etmek. Küçük bir telefonu, büyük bir telefonu ve bir tableti kontrol edin.
• Sığsın diye içeriği mobilde gizlemek. Google mobil sürümü dizinler ve telefon kullanıcıları aynı bilgiyi ister.
• Viewport etiketinde yakınlaştırmayı devre dışı bırakmak.
• Telefonlarda masaüstü boyutunda görseller, bunlar yükleme süresine ve veriye mal olur.
• Sabit konumlu öğelerin birikmesi: yapışkan bir üst bölüm, bir çerez bildirimi ve bir sohbet balonu, bir telefon ekranının yarısını kaplayabilir.
• Kapatılamayan açılır pencereler, çünkü küçük ekranda kapatma düğmesi ekran dışında kalır.

Mobil kontrol listesi

• Viewport meta etiketi var; yakınlaştırma devre dışı bırakılmamış
• Hiçbir sayfada 320 px'te yatay kaydırma yok
• Gövde metni yaklaşık 16 px; girdi alanları yakınlaştırmayı tetiklemiyor
• Dokunma alanları rahat büyüklükte ve aralıklı
• Menü telefonda ve klavyeyle çalışıyor
• Tablolar telefonda okunabilir (kartlar, daha az sütun ya da kaydırma kapsayıcısı)
• Görseller ve gömüler ölçekleniyor; doğru boyutta dosyalar sunuluyor
• Formlar doğru girdi türlerini kullanıyor; gönder düğmesine ulaşılabiliyor
• Önemli hiçbir şey hover'a bağlı değil
• En az bir gerçek telefonda test edildi

Duyarlı düzen aynı zamanda erişilebilirliğin bir parçasıdır: WCAG, içeriğin 320 px genişlikte ve %200 yakınlaştırmada çalışmasını ister. İnsanların telefonlarında her gün kullanacağı bir uygulama geliştiriyorsanız, mobil uyumlu bir web uygulaması nasıl yapılır bölümü, yüklenebilir PWA'lar dahil daha ileri gider.

Mythex'te duyarlı tasarım

Mythex duyarlı web uygulamaları oluşturur ve Pro'da bunları Android ve iPhone uygulaması olarak sarabilir. Çalışma alanında Önizlemenin üstündeki telefon simgesine (Mobile geç) tıklayarak uygulamanızı telefon boyutundaki bir çerçevede görebilir, çerçevenin kenarını sürükleyerek başka genişlikleri deneyebilirsiniz (Önizleme ve Kod). Dokümanlarda küçük ekran düzenini düzeltmek için kısa bir başlangıç istemi mobil uyumlu istemler sayfasında yer alır. Gerçek bir telefonda da kontrol edin — yayınlanmış URL'yi açın ya da bir önizleme bağlantısı paylaşıp telefonunuzda açın.

Sorular