Responsive Tasarım Nedir? Mobilde Kullanılabilir Bir Site Hazırlamak

Ekranı küçültmek yerine düzeni uyarlayın

Responsive tasarım, sayfanın farklı ekran genişliklerine ve kullanım koşullarına uyum sağlayan bir tasarım yaklaşımıdır. MDN bu yaklaşımı esnek düzenler, uygun görseller ve ekran koşullarına göre değişebilen stiller üzerinden açıklar. Masaüstündeki üç sütunun dar ekranda tek sütuna dönüşmesi basit bir örnektir. Amaç bütün bileşenleri aynı oranda küçültmek değil, içeriğin okunabilirliğini ve kullanımını korumaktır.

Örneğin bir hizmet karşılaştırma alanında başlık, kapsam ve başvuru bağlantısı masaüstünde yan yana durabilir. Telefonda bunları mantıklı sırayla alt alta yerleştirmek daha uygun olabilir. Büyük ekrandaki görsel sıralama ile dar ekrandaki okuma sırasının tutarlı olması önemlidir. Tasarım incelemesinde yalnızca boş örnek kutular değil, gerçek başlıklar ve gerçek uzunlukta metinler kullanılmasını isteyin.

Mobil ziyaretçinin öncelikli işlerini seçin

Mobilde bütün kullanıcıların aynı amaçla geldiğini varsaymayın. Bazıları telefon numarasını ararken bazıları hizmet ayrıntılarını karşılaştırıyor veya daha önce başladığı başvuruyu tamamlıyor olabilir. İşletmenizin sık aldığı soruları, mevcut kullanım verilerini ve destek taleplerini birlikte inceleyin. Sayfanın ilk bölümünde hangi bilgilerin işe yarayacağını bu gözlemler üzerinden belirleyin.

Varsayımsal bir kurulum hizmeti sitesinde ziyaretçi önce hizmet verilen bölgeyi, sonra başvuru için gerekli bilgileri görmek isteyebilir. Sadece geniş bir tanıtım görseli ve genel sloganla karşılaşması kararını kolaylaştırmaz. İçeriği kısaltırken kritik açıklamaları gizlemeyin. Uzun metinleri açıklayıcı başlıklara ayırmak, kullanıcının ilgilendiği bölüme ulaşmasını sağlar. Kurumsal web sitesi içeriği de bu gerçek sorular etrafında hazırlanmalıdır.

Menü ve sabit öğeleri gerçek cihazda deneyin

Masaüstünde fareyle rahat kullanılan bir menü, dokunmatik ekranda aynı davranışı vermeyebilir. Kullanıcı menüyü nasıl açacağını, alt sayfaya nasıl geçeceğini ve menüyü nasıl kapatacağını açıkça anlayabilmelidir. Sadece fare üzerine gelince açılan içeriklere güvenmeyin. Menüde kullanılan başlıklar, kullanıcının aradığı hizmeti tahmin edebilmesini sağlamalıdır; kurum içi terimler her ziyaretçi için anlaşılır olmayabilir.

Sabit başlıklar, iletişim düğmeleri ve bildirim alanları küçük ekranda birbirinin üzerine gelebilir. Özellikle telefon klavyesi açıldığında kalan alanı kontrol edin. Ziyaretçi mesaj yazarken gönder düğmesine ulaşabiliyor mu, hata açıklaması görünür mü, açık menü sayfanın tamamını kilitliyor mu? Bu kontrolleri yalnızca ekran görüntüsüyle yapmak mümkün değildir; sayfayı açıp işlemleri tamamlamak gerekir.

• Menü açıldıktan sonra bütün bağlantılara ulaşılabiliyor mu?
• Sabit düğmeler önemli metni veya form alanını kapatıyor mu?
• Yatay ve dikey kullanımda içerik sırası anlamlı kalıyor mu?
• Uzun sayfada kullanıcı bulunduğu bölümü anlayabiliyor mu?

Formları telefonda tamamlanabilir hale getirin

Formun masaüstünde kısa görünmesi, telefonda kolay doldurulacağı anlamına gelmez. Gereksiz alanları kaldırın ve istenen bilginin neden gerekli olduğunu değerlendirin. W3C'nin form rehberi, açık etiketleri, anlaşılır yönergeleri ve hatanın nasıl düzeltileceğini belirten geri bildirimi öne çıkarır. Örneğin tarih alanı hangi biçimi bekliyorsa bunu kullanıcı deneme yapmadan anlayabilmelidir.

Varsayımsal bir teklif formunda müşteri henüz kesin proje bütçesini bilmiyor olabilir. Bu alanı zorunlu yapmak yerine uygun bir belirsizlik seçeneği sunmak daha gerçekçi olabilir. Dosya yüklemesi varsa telefondaki dosyalardan seçim yapmayı deneyin. Hata sonrası diğer alanların silinmesi veya klavyenin ilgili mesajı kapatması başvuruyu zorlaştırır. Formun erişilebilirliğini erişilebilir web tasarımı kapsamında da inceleyin.

Tablolar ve görseller için ayrı kararlar verin

Geniş bir veri tablosunu dar ekrana sığdırmak için yazıları aşırı küçültmek okunabilirliği düşürür. Önce tablonun hangi karşılaştırmayı sağladığını anlayın. Satırlar bağımsız kayıtları gösteriyorsa bazı durumlarda kart görünümü uygun olabilir; sütunlar arasında karşılaştırma gerekiyorsa ilişkileri koruyan bir çözüm gerekir. Yatay kaydırma kullanılıyorsa bunun fark edilebilir olmasını ve başlıkların anlamını korumasını sağlayın.

Görsellerde de tek çözüm her şeyi küçültmek değildir. Geniş bir fotoğrafın telefonda kırpılması ana nesneyi görünmez hale getirebilir. Uygun kadraj ve farklı boyutlu dosyalar birlikte değerlendirilmelidir. Metin içeren görselleri küçük ekranda okuyarak kontrol edin. Görselin doğru görünmesi kadar yüklenme maliyeti de önemlidir; web sitesi performansı çalışmasını tasarım kararlarının yanında yürütün.

Teslimi birkaç ekran ölçüsünden daha geniş kontrol edin

Test listesine dar telefon, geniş telefon, tablet ve masaüstü gibi farklı kullanım alanları ekleyin; ancak yalnızca önceden seçilmiş ölçülerle yetinmeyin. Pencere genişliği değişirken içeriğin nerede zorlandığını gözlemleyin. Uzun hizmet adı, çok satırlı başlık, boş arama sonucu ve hata mesajı gibi içerik durumları tasarımın dayanıklılığını gösterir.

Teslim değerlendirmesinde gerçek görevler kullanın: Hizmeti bulun, kapsamı okuyun, iletişim formuna gidin ve başvuruyu gönderin. Aynı görevi farklı cihazlarda tekrar edin. Çalışanların kendi telefonları başlangıç için yararlıdır, fakat hedef kullanıcıların cihaz çeşitliliğini temsil ettiklerini varsaymayın. İçerik güncellemelerinden sonra da kısa bir kontrol yaparak mobil uyumluluğu yalnızca ilk yayın gününün konusu olmaktan çıkarın.