Bir web sitesi bilgisayarda tertemiz görünürken telefonda açıldığında dağılabilir: yazılar kutusundan taşar, görseller ekranın dışına çıkar, menü açılmaz, butonlara parmakla basmak zorlaşır, sayfa sağa sola kayar, bölümler üst üste biner. Bu, telefonun “bozuk” olmasından değil, sitenin küçük ekrana uyum sağlayacak biçimde tasarlanmamış olmasından kaynaklanır. Sorunun adı responsive (uyarlanabilir) tasarım eksikliğidir. Bu yazıda belirtileri, nedenleri ve çözümleri sırayla ele alıyoruz.
Konu yalnızca estetik bir kusur değildir. Bugün web trafiğinin önemli bir bölümü telefon ve tabletlerden gelir; birçok ziyaretçi bir siteyi ilk kez cep telefonundan açar. Telefonda kayan, taşan ve zor kullanılan bir sayfa, ziyaretçinin siteyi hemen terk etmesine ve firma hakkında olumsuz bir izlenim edinmesine yol açar. Bu yüzden mobil uyum, arama motorlarının değerlendirmesinde de dikkate alınan temel bir ölçüttür.
Belirtiler: telefonda tam olarak ne bozuluyor?
Masaüstü ekran geniştir ve yatay yönde çok yer sunar; telefon ekranı ise dar, dikey ve dokunmatiktir. Geniş ekrana göre kurulmuş bir sayfa dar ekrana sığmaya çalıştığında düzeni bozulur ve tipik belirtiler ortaya çıkar:
- Metinler kutunun dışına taşar veya okunamayacak kadar küçülür.
- Görseller ekran genişliğini aşar, sağ tarafı kesilir.
- Sayfa yatay olarak kayar; kullanıcı sağa doğru sürüklemek zorunda kalır.
- Menü açılmaz ya da bağlantılar birbirine girer.
- Butonlar birbirine çok yakın olduğu için parmakla doğru olana basmak güçleşir.
- Yan yana kurgulanmış bölümler üst üste biner.
Neden: sabit ölçüler ve eksik ayarlar
Sorunların çoğu, sayfanın masaüstü genişliğine göre sabit ölçülerle kurulmasından doğar. Tasarım tek bir ekran genişliği düşünülerek yapıldığında, o genişlikten daralan her ekranda öğeler yerlerine sığmaz. En sık görülen nedenler şunlardır:
- Sabit px genişlikleri: Bir bölüme width: 1200px gibi sabit bir genişlik verilirse, 380 piksel genişliğindeki bir telefonda o bölüm ekrana sığmaz ve yatay kaymaya yol açar.
- Viewport meta etiketi eksikliği: Sayfanın head bölümünde viewport meta etiketi yoksa, telefon sayfayı masaüstü genişliğinde açıp küçültmeye çalışır; her şey minik ve kaymış görünür.
- max-width kullanılmayan görseller: Görsele bir üst sınır konmazsa, orijinal boyutuyla açılır ve dar ekranı aşar.
- Mobil düzenin hiç düşünülmemiş olması: Tasarım yalnızca geniş ekran için yapılmış, küçük ekranda öğelerin nasıl dizileceği tanımlanmamıştır.
Çözüm: akışkan ve uyarlanabilir düzen
Çözüm, sayfayı sabit ölçülere değil, ekranın genişliğine göre akışkan davranacak biçimde kurmaktır. Bu yaklaşımda tasarım tek bir genişliğe kilitlenmez; öğeler ekranın boyutuna göre yeniden dizilir, sütunlar alt alta iner, yazı ve boşluklar orantılı ayarlanır. Uygulanması gereken temel yaklaşımlar:
- Viewport meta etiketi: Sayfanın head bölümüne width=device-width, initial-scale=1 değerini taşıyan viewport meta etiketi eklenir. Bu, telefonun sayfayı kendi gerçek genişliğinde göstermesini sağlar; responsive tasarımın ilk şartıdır.
- Relative birimler: Sabit px yerine yüzde, rem, vw gibi göreli birimler kullanılır; öğeler ekran genişliğiyle orantılı büyür ve küçülür.
- Flexbox ve grid: Bölümler CSS’in flexbox ve grid düzenleriyle yerleştirilir; dar ekranda yan yana duran öğeler otomatik olarak alt alta geçebilir.
- Media queries: Medya sorguları ile belirli ekran genişliklerinin altında farklı kurallar tanımlanır; örneğin menü mobilde hamburger düğmesine dönüşür, sütun sayısı azalır.
- Görsellerde max-width: Görsellere max-width: 100% verilir; böylece görsel hiçbir zaman kapsayıcısından geniş olamaz ve ekrandan taşmaz.
Dokunmatik kullanım ve yatay kaymanın önlenmesi
Mobilde tasarım yalnızca “sığmak” değil, parmakla rahat kullanılmaktır. Fare imleci kesin ve küçük hedeflere basabilirken, parmak daha büyük ve daha az hassastır; bu yüzden masaüstünde sorunsuz görünen bir düzen dokunmatikte kullanışsız olabilir. Bunun için birkaç noktaya ayrıca dikkat edilir:
- Yeterli buton boyutu: Dokunulabilir öğeler, parmakla kolayca basılacak büyüklükte ve aralarında yeterli boşlukla yerleştirilir; yanlış öğeye basma engellenir.
- Yatay kaymayı kesmek: Sayfa gövdesi asla yatay kaydırma üretmemelidir. Geniş içerikler (tablolar, kod blokları, geniş görseller) kendi içinde kaydırılabilir kutulara alınır.
- Okunabilir yazı boyutu: Metin, telefonda yakınlaştırma gerektirmeyecek boyutta tutulur.
Bir sitenin mobilde doğru çalıştığını doğrulamak için gerçek cihazlarda ya da tarayıcının geliştirici araçlarındaki cihaz benzetimiyle test etmek gerekir. Yalnızca bir telefon modeline değil, farklı ekran genişliklerine bakmak önemlidir; çünkü küçük bir telefonla büyük bir tablet arasında düzenin akışkan biçimde değişmesi beklenir. Sayfayı sağa sola kaydırmayı deneyerek yatay kayma olup olmadığını, butonlara parmakla basarak dokunma hedeflerinin yeterince büyük olduğunu kontrol etmek, çoğu sorunu erken yakalar.
Özetle telefonda bozuk görünen bir site, çoğunlukla sabit ölçülerle ve tek ekran düşünülerek kurulmuş bir sitedir. Viewport etiketi, göreli birimler, flexbox/grid ile kurulmuş akışkan bir düzen ve max-width: 100% ile sınırlanmış görseller, aynı sayfanın hem bilgisayarda hem telefonda düzgün görünmesini sağlar. Bugün ziyaretin büyük kısmı mobil cihazlardan geldiği için, bir sitenin mobilde sorunsuz çalışması artık tercih değil temel bir gerekliliktir.
İlgili hizmetler: Web Tasarım ve Yazılım, Yazılım ve PC Uygulamaları
Bir yanıt yazın