Mobil Uyumluluk, Okunabilirlik ve Temel Tasarım İlkeleri

Bu derste ne yapacağız?

Önceki derslerde sitenizin sayfalarını ve içeriğini oluşturdunuz. Şimdi bu içeriğin ziyaretçinin elinde nasıl göründüğüne bakacağız. Ziyaretçilerin önemli bir bölümü siteyi telefondan açar. Bilgisayarda güzel görünen bir sayfa telefonda dağınık olabilir.

Hedef: Sitenizi telefon görünümünde kontrol etmek, boşluk, hizalama, yazı boyutu ve renk karşıtlığı gibi temel ilkeleri uygulamak ve sık yapılan görünüm hatalarını düzeltmek.

Ön koşul: Bir site kurucuda (Wix, WordPress.com, Google Sites, Canva Websites gibi) oluşturduğunuz, en az bir sayfası olan bir site. Yayında olması şart değildir, taslak da olur. Elinizin altında bir telefon bulunması da işinizi kolaylaştırır.

Uyarı: Site kurucuların arayüzü zamanla değişir. Aşağıda geçen menü adları sizin ekranınızda biraz farklı olabilir. Böyle bir durumda aynı işi yapan en yakın seçeneği arayın. Örneğin Mobil, Telefon görünümü ya da bir telefon simgesi.

Kavram

Mobil uyumluluk, sayfanın ekran boyutuna göre kendini ayarlamasıdır. Su gibi düşünün: bardağa konunca bardağın, şişeye konunca şişenin şeklini alır. İçerik aynıdır, kap değişir. Çoğu site kurucu bunu sizin yerinize yapar. Ancak otomatik düzen her zaman mükemmel olmaz, bu yüzden kontrol etmeniz gerekir.

Telefonda okunaklı bir sayfa için beş temel ilke işinizi görür:

• Boşluk: Öğeler arasındaki nefes payıdır. Noktalama işaretsiz yazılmış bir cümle gibi, boşluksuz sayfa da yorucudur. Boşluk içeriği boş göstermez, düzenli gösterir.
• Hizalama: Kitaplıktaki kitapların aynı çizgide durması gibi, başlık, yazı ve düğmelerin ortak bir kenara oturmasıdır. Genelde sola hizalı uzun metin daha rahat okunur. Ortalanmış uzun paragraflar gözü yorar.
• Renk karşıtlığı: Yazı ile zemin arasındaki ayrımdır. Gece yolda okunan bir tabela gibi düşünün: yazı zeminden net ayrılmazsa okunmaz. Beyaz zemin üstüne açık gri yazı güzel görünebilir ama güneşli bir günde telefonda neredeyse kaybolur.
• Yazı boyutu ve hiyerarşi: Başlık, alt başlık ve gövde metninin boyutları birbirinden belirgin biçimde ayrılmalıdır. Ziyaretçi bakar bakmaz neyin önemli olduğunu anlamalıdır. Gövde metni için genel bir kural olarak yaklaşık 16 piksel ve üstü rahat okunur.
• Tutarlılık: Aynı türden öğelerde aynı yazı tipi, aynı renk ve aynı düğme stili kullanılmalıdır. En fazla iki yazı tipi ve birkaç ana renk çoğu zaman yeterlidir.

Bir de dokunma hedefi kavramı var. Telefonda fareyle değil parmakla tıklanır. Parmak ucu imleçten çok daha kalındır. Bu yüzden düğme ve bağlantılar yeterince büyük ve birbirinden ayrık olmalıdır. Sık verilen öneri, düğmelerin yaklaşık parmak ucu kadar, yani kabaca 44 ile 48 piksel yüksekliğinde olmasıdır.

Adım adım uygulama

• Adım 1 - Düzenleyicide telefon görünümüne geçin: Site kurucunuzun düzenleme ekranını açın. Üst çubukta bir telefon simgesi ya da Mobil yazan bir düğme arayın. Bazı araçlarda masaüstü, tablet ve telefon simgeleri yan yana durur. Telefon simgesine tıklayın. Sayfa dar bir çerçeveye girecektir.
• Adım 2 - Sayfayı baştan sona kaydırın: Fare tekerleğiyle yavaşça aşağı inin. Şunlara bakın: Yazılar taşıyor mu? Görseller ekrandan dışarı çıkıyor mu? Öğeler üst üste biniyor mu? Yatay kaydırma çubuğu çıkıyor mu? Gördüğünüz her sorunu bir kâğıda yazın.
• Adım 3 - Gerçek telefonda önizleyin: Düzenleyicideki simülasyon her zaman gerçeği yansıtmaz. Düzenleyicide Önizleme ya da Yayınla düğmesini bulun. Site yayındaysa adresini telefonunuzun tarayıcısına yazın. Taslaksa, bazı araçlar size bir önizleme bağlantısı verir. O bağlantıyı kendinize mesajla gönderip telefonda açın. Önizleme seçenekleri araca ve plana göre değişir.
• Adım 4 - Yazı boyutunu kontrol edin: Telefon görünümünde bir paragrafa tıklayın. Açılan yazı ayarlarında boyut kutusuna bakın. Gövde metni çok küçükse (örneğin 12 piksel) 16 civarına çıkarın. Başlıkları gövdeden belirgin biçimde büyük tutun. Telefonda başlık için gövdenin yaklaşık bir buçuk ila iki katı iyi bir başlangıçtır.
• Adım 5 - Renk karşıtlığını sınayın: Açık renkli bir yazıyı açık zeminde ya da koyu yazıyı koyu zeminde kullandığınız yerleri bulun. Ya yazı rengini ya da zemin rengini değiştirin. Güvenli seçim, koyu yazı ile açık zemin ya da tersidir. Telefonunuzun ekran parlaklığını artırıp sayfaya bir kez daha bakın. Hâlâ rahat okuyorsanız karşıtlık yeterlidir. İsterseniz internetteki ücretsiz renk karşıtlığı denetleyicilerinden de yararlanabilirsiniz. Yazılar için genel hedef 4,5'e 1 oranıdır.
• Adım 6 - Boşlukları ayarlayın: Bölümler birbirine yapışıyorsa bölümün kenar boşluğu (Padding ya da Boşluk) ayarını artırın. Telefonda yazının ekran kenarına dayanmaması için iki yanda küçük bir pay bırakın. Çok fazla boşluk da sorundur: ekran boş kalıyor ve ziyaretçi sürekli kaydırıyorsa boşluğu biraz azaltın.
• Adım 7 - Hizalamayı düzeltin: Bir bölümdeki başlık ortada, yazı solda, düğme sağdaysa gözünüz dağılır. Öğeleri seçip hizalama düğmelerinden (sola, ortaya, sağa) aynı hizayı verin. Kısa başlıklar ortalanabilir, uzun paragraflar sola hizalı kalmalıdır.
• Adım 8 - Düğmeleri ve bağlantıları büyütün: Telefon görünümünde düğmeye tıklayın. Boyut ayarında yüksekliği artırın. Yan yana duran iki düğme birbirine çok yakınsa aralarına boşluk koyun ya da alt alta dizin. Telefonda genellikle alt alta dizilen düğmeler daha rahat basılır.
• Adım 9 - Görselleri sığdırın ve sadeleştirin: Taşan bir görsele tıklayıp ekrana sığacak şekilde yeniden boyutlandırın. Yazı bulunan görseller telefonda küçülüp okunmaz hâle gelebilir. Önemli metni görselin içine değil, gerçek yazı olarak sayfaya koymak daha güvenlidir. Her görsele kısa bir açıklama (alternatif metin) eklemeyi unutmayın.
• Adım 10 - Değişiklikleri kaydedin ve yeniden kontrol edin: Düzeltmeleri yaptıktan sonra sitenizi yayınlayın ya da kaydedin. Telefonda sayfayı yenileyip tüm listenizi baştan geçin. Bir yeri düzeltirken başka bir yeri bozmuş olabilirsiniz.

İpucu: Masaüstü görünümünü değiştirmeden önce telefon görünümünün ayrı düzenlenip düzenlenemediğini öğrenin. Bazı araçlarda telefonda yaptığınız değişiklik yalnızca telefonu etkiler. Bazılarında ise masaüstünü de değiştirir. Emin değilseniz küçük bir değişiklik yapıp iki görünüme de bakın.

Sık karşılaşılan sorunlar

Mini görev

Sitenizin ana sayfasını ele alın. Önce telefon görünümünde kaydırıp en az üç sorun bulun. Ardından her birini yukarıdaki adımlarla düzeltin. Bitince sayfayı gerçek telefonunuzda açıp yeniden kontrol edin.

Kontrol listesi:

• Telefon görünümüne geçtim ve sayfayı baştan sona kaydırdım.
• Yatay kaydırma çubuğu çıkmıyor.
• Gövde metni yaklaşık 16 piksel ya da daha büyük.
• Yazı ile zemin arasındaki karşıtlık rahat okunuyor.
• Bölümler arasında yeterli boşluk var, öğeler ekran kenarına dayanmıyor.
• Başlık, yazı ve düğmeler tutarlı biçimde hizalı.
• Düğmeler parmakla rahat basılacak büyüklükte.
• Değişiklikleri kaydettim ve gerçek telefonda tekrar baktım.

Kendini sına

• Soru 1: Mobil uyumluluk ne demektir?
• Soru 2: Uzun paragraflar için hangi hizalama genellikle daha rahat okunur?
• Soru 3: Neden açık gri yazıyı beyaz zeminde kullanmak risklidir?
• Soru 4: Telefonda düğmeler neden daha büyük olmalıdır?
• Soru 5: Düzenleyicideki telefon görünümüne baktıktan sonra neden bir de gerçek telefonda kontrol etmelisiniz?

Cevaplar

• Cevap 1: Sayfanın içeriğini değiştirmeden ekran boyutuna göre düzenini ayarlamasıdır. Aynı içerik telefonda, tabletde ve bilgisayarda okunaklı görünür.
• Cevap 2: Sola hizalama. Satır başları aynı hizada olduğu için göz yeni satırı kolay bulur. Ortalanmış uzun paragraflar daha yorucudur.
• Cevap 3: Yazı ile zemin arasındaki fark azaldığı için özellikle küçük ekranda ve parlak ışıkta yazı zor okunur ya da hiç seçilemez.
• Cevap 4: Telefonda tıklama parmakla yapılır ve parmak ucu imleçten kalındır. Küçük ya da birbirine yakın düğmelerde yanlış yere basma olasılığı artar.
• Cevap 5: Düzenleyicideki görünüm bir simülasyondur. Gerçek ekran parlaklığı, parmakla dokunma rahatlığı ve tarayıcı farkları ancak gerçek telefonda anlaşılır.

Bu derste sitenizi telefonda okunaklı ve düzenli hâle getirdiniz. Sıradaki derste sitenizi bir adım ileri taşıyıp ziyaretçilerle etkileşim kurmaya, yani formlar ve basit otomasyonlar konusuna doğru ilerleyeceğiz. Bugün yaptığınız düzenlemeler orada eklediğiniz her öğenin de telefonda temiz görünmesini sağlayacak.