Mobil uyumlu web tasarımı: 10 maddelik kontrol listesi

Teknik olarak responsive, yani duyarlı tasarım, sayfanın ekran genişliğine göre yeniden düzenlenmesi demek. Ama mobil uyumlu olmak bundan fazlası. Bir sayfa telefonda daralıp tek sütuna inebilir, yine de kullanılmaz olabilir: düğmeler parmakla basılamayacak kadar küçük, yazılar okunamayacak kadar ince, form doldurmak bir işkence.

Benim için mobil uyum, sayfanın telefonda nasıl göründüğüyle değil, telefonda nasıl kullanıldığıyla ilgili. Otobüste, ayakta, tek elle, güneş altında ve yavaş bir bağlantıyla. Tasarımı bu koşullara göre yapmak gerekiyor.

İki nedeni var. Birincisi trafik: birçok sektörde ziyaretçilerin büyük çoğunluğu telefondan geliyor; reklam tıklamalarında bu oran daha da yüksek. İkincisi Google: Google artık siteleri mobil sürümleri üzerinden dizine ekliyor ve değerlendiriyor. Mobil sürümde eksik olan içerik, Google’ın gözünde sitede hiç yok sayılabiliyor.

Yani mobil artık “ek bir sürüm” değil; sitenizin asıl hâli. Masaüstü tasarımı büyük ekrana uyarlanmış bir genişletme olarak düşünmek daha doğru.

Parmakla rahatça basılabilecek kadar. Google’ın Material Design yönergeleri dokunma alanı için en az 48×48 dp, Apple ise 44×44 nokta öneriyor. Erişilebilirlik standardı WCAG 2.2 de dokunma hedefleri için asgari bir boyut tanımlıyor.

Burada önemli olan görünen boyut değil, dokunulabilir alan. Küçük bir ikon bile etrafına yeterli boşluk bırakılırsa rahat basılabilir. Asıl sorun, birbirine çok yakın dizilmiş bağlantılar: menüdeki iki öğe arasında boşluk yoksa kullanıcı sürekli yanlış olana basar.

Başparmağın kolayca ulaştığı yerde, yani ekranın alt ve orta kısmında. Telefonlar büyüdükçe ekranın üst köşeleri tek elle ulaşılması en zor yer hâline geldi. Ama birçok sitede en önemli düğme hâlâ sağ üst köşede duruyor.

E-ticarette “Sepete ekle”, hizmet sitelerinde “Ara” ya da “Teklif al” gibi ana eylemleri ekranın altına sabitlenmiş bir çubukta göstermek, mobil dönüşüm için en etkili değişikliklerden biri. Yalnızca bu çubuğun içeriği kapatmadığından ve sayfa kaydırıldığında yerinden oynamadığından emin olun.

Gövde metni için 16 piksel iyi bir başlangıç noktası. Daha küçük yazılar, özellikle ince yazı tiplerinde, telefonda yakınlaştırmadan okunmuyor. Satır aralığı da önemli: 1,5 civarında bir satır aralığı, küçük ekranda satırların birbirine karışmasını önler.

Bir de satır uzunluğu var. Telefonda bu sorun kendiliğinden çözülüyor, ama tabletlerde ve yatay ekranda çok uzun satırlar okumayı zorlaştırıyor. Metin alanına bir azami genişlik vermek iyi bir alışkanlık.

Çünkü telefon güneş altında, düşük parlaklıkta ve farklı açılardan bakılarak kullanılıyor. Masaüstü monitörde şık görünen açık gri yazı, dışarıda okunmaz hâle geliyor. WCAG, normal metin için arka planla en az 4,5:1 kontrast oranı öneriyor. Tasarım araçlarının çoğunda bu oranı ölçen eklentiler var; tasarım teslim edilmeden önce mutlaka kontrol edilmeli.

Her alanın doğru klavyeyi açmasıyla. Telefon alanında sayı tuş takımı, e-posta alanında @ işaretli klavye, tarih alanında tarih seçici. Bu, geliştiricinin alan türünü doğru tanımlamasıyla sağlanıyor ve kullanıcıya inanılmaz zaman kazandırıyor.

Otomatik doldurma da öyle. Ad, telefon, e-posta ve adres alanları doğru işaretlenirse telefon bu bilgileri tek dokunuşla doldurur. Bir küçük ayrıntı daha: iPhone’da 16 pikselden küçük yazı boyutuna sahip form alanına dokunulduğunda tarayıcı sayfayı otomatik yakınlaştırır ve kullanıcı her seferinde geri uzaklaştırmak zorunda kalır.

Alanın hemen yanında ve form gönderilmeden önce. Kullanıcı on alanı doldurup gönder düğmesine bastıktan sonra sayfanın en üstünde “Hatalı alanlar var” yazısını görmek, mobilde formdan vazgeçmenin en kısa yolu. Hatalı alan kırmızı çerçeveyle işaretlenmeli, altında neyin yanlış olduğu sade bir dille yazmalı: “Telefon numarası 10 haneli olmalı” gibi.

Çok dikkatli. Sayfa açılır açılmaz ekranın tamamını kaplayan bir bülten kaydı ya da kampanya penceresi, mobilde kullanıcının içeriği görmeden çıkmasına neden olabilir. Google da içeriğe erişimi zorlaştıran araya giren pencereleri mobil arama sonuçlarında olumsuz değerlendirebiliyor.

Yasal zorunluluklar, örneğin çerez bildirimi, istisna. Ama onu da ekranın altında küçük bir şerit olarak tasarlamak mümkün. Kapatma düğmesinin de büyük ve kolay bulunur olması şart; birçok sitede bu çarpı işareti neredeyse görünmez.

Görseller, reklamlar ve sonradan yüklenen bölümler yer ayrılmadan sayfaya eklendiğinde, altlarındaki içerik aşağı itilir. Kullanıcı tam bir düğmeye basacakken düğme yer değiştirir ve yanlış yere dokunur. Google bu kaymayı CLS adıyla ölçüyor; iyi bir değer 0,1’in altında.

Çözüm basit: her görselin ve her reklam alanının boyutu baştan tanımlanmalı. Tarayıcı, içerik gelmeden önce yerini ayırır ve hiçbir şey kaymaz.

Hız yalnızca geliştiricinin işi değil. Tasarımda kullanılan her büyük görsel, her özel yazı tipi, her animasyon sayfanın ağırlığına ekleniyor. Ana görseli telefon için ayrı ve daha küçük boyutta hazırlamak, yazı tipi ağırlıklarını ikiye üçe indirmek ve dekoratif videolardan kaçınmak, sayfanın telefonda çok daha hızlı açılmasını sağlar.

Google’ın Core Web Vitals ölçütleri burada iyi bir rehber: en büyük içeriğin 2,5 saniye içinde görünmesi, etkileşimlere 200 milisaniye içinde yanıt verilmesi ve kaymanın 0,1’in altında kalması.

Kesinlikle. Ekran okuyucu kullanan bir kişinin sitenizi telefonda dolaşabilmesi, görsellerin açıklamalarının olması, renklerin tek başına bilgi taşımaması, yazı boyutunu büyüten kullanıcı için sayfanın bozulmaması... Bunların hepsi hem erişilebilirlik hem de iyi mobil tasarım.

Telefonun ayarlarından yazı boyutunu en büyüğe getirip sitenizi bir kez dolaşmayı deneyin. Taşan metinler, üst üste binen düğmeler ve kesilen başlıklar, düzeltilmesi gereken yerleri hemen gösterir.

En iyi test, gerçek bir telefonda tek elle siteyi kullanmak: bir ürün bulmak, form doldurmak, iletişime geçmek. Bunun yanında Google’ın PageSpeed Insights aracı mobil hız ve Core Web Vitals değerlerini, Chrome’un geliştirici araçları ise farklı ekran boyutlarını gösterir. Search Console da gerçek kullanıcı verisine dayalı hız raporları sunar.

Hayır. Bugün önerilen yöntem, aynı adreste ve aynı içerikle ekran genişliğine uyum sağlayan tek bir site. Ayrı mobil siteler bakım yükünü ikiye katlar ve içerik farklılıkları nedeniyle arama motorlarında sorun çıkarabilir.

Masaüstü tasarımı bitirdikten sonra mobili “sığdırmaya” çalışmak. Tasarıma telefon ekranından başlamak, neyin gerçekten önemli olduğuna karar vermeyi zorunlu kılar; masaüstü sürüm ise bu temel üzerine daha rahat genişler.