Mobil Uyumlu Web Sitesi Nasıl Yapılır

Masaüstünde kusursuz duran tasarım telefonda neden dağılır

Bir sitenin telefonda bozulması çoğu zaman tasarımın kötü olmasından değil, tasarımın tek bir ekran genişliği düşünülerek kurulmuş olmasından kaynaklanır. Geniş bir masaüstü ekranında hazırlanan yerleşim, avuç içine sığan bir ekranda aynı kutuları aynı sırayla yan yana dizmeye çalışır ve dizemez. Sonuç tanıdıktır: sağa doğru kayan bir yatay kaydırma çubuğu, üst üste binen metinler, ekranın dışına taşan tablolar, tıklanamayacak kadar küçük düğmeler. Mobil uyumlu web sitesi nasıl yapılır sorusunun teknik cevabı da tam burada başlar: tasarımı küçültmekle değil, yerleşimi genişliğe göre yeniden kurulabilir hâle getirmekle.

Bu yazı bir tema önerisi listesi değil. Amacı, mobil uyumlu web sitesi üreten yapı taşlarını tek tek görünür kılmak: akışkan ızgara, esnek görsel, kırılma noktası, dokunma alanı, ağ bütçesi ve ölçüm. Bu taşları bilmeden alınan her karar, birkaç ay sonra "telefonda bir tuhaf duruyor" geri bildirimiyle geri gelir; o noktada düzeltmek, baştan doğru kurmaktan pahalıya mal olur.

Akışkan ızgara: sabit piksel yerine oran

Mobil uyumun temeli tek bir cümleyle özetlenebilir: genişlikleri piksel yerine oranla tanımlayın. Bir içerik sütununa 960 piksel demek, o sütunu 960 pikselden dar her ekranda taşırır. Aynı sütuna "kullanılabilir alanın yüzde yetmişi, ama en fazla 960 piksel" demek, sütunu her ekrana uydurur ve büyük ekranda da okunmaz derecede uzun satırlar üretmez.

Pratikte bu, CSS tarafında birkaç alışkanlığa dönüşür. Kapsayıcılara sabit yükseklik vermemek — içerik uzayınca yükseklik kendiliğinden büyümelidir. Yan yana duran kutuları flexbox veya grid ile kurmak, çünkü ikisi de dar ekranda alt alta inmeyi tek satır kuralla çözer. Görsellere max-width vermek, böylece görsel kendi doğal boyutundan büyük olsa bile kapsayıcısını taşırmaz. Bu üç alışkanlık, mobil hataların önemli bir kısmını daha ortaya çıkmadan siler.

Bir de sık atlanan bir ayrıntı var: sayfanın viewport etiketi. Bu etiket yoksa tarayıcı sayfayı masaüstü genişliğinde çizip küçültür; site "mobil uyumlu" görünür ama okumak için sürekli yakınlaştırma gerekir. Etiket, sayfanın genişliğini cihazın gerçek genişliğine bağlar ve bütün esnek yerleşimin çalışmasının ön şartıdır.

Kırılma noktalarını cihaza değil içeriğe göre seçin

Yaygın hata, kırılma noktalarını popüler telefon modellerinin genişliklerine göre belirlemektir. Cihaz listesi her yıl değişir; içeriğinizin davranışı değişmez. Doğru yöntem şudur: tarayıcı penceresini yavaşça daraltın ve yerleşim nerede çirkinleşiyorsa oraya bir kırılma noktası koyun. Bir menü sığmıyorsa, bir fiyat tablosu okunamıyorsa, bir başlık üç satıra düşüyorsa — kırılma noktası odur.

Bu yaklaşım kırılma noktası sayısını da azaltır. Çoğu kurumsal sayfa iki ya da üç eşikle idare eder: tek sütun, iki sütun, tam yerleşim. Onlarca eşik tanımlanmış bir stil dosyası, bakımı zor ve birbiriyle çelişen kurallarla dolu bir yapıya dönüşür. Az sayıda eşiği doğru yere koymak, çok sayıda eşiği yaklaşık yere koymaktan iyidir.

Dokunma ergonomisi: parmak, imlecin yerini tutmaz

Fare imleci bir pikseli hedefleyebilir; parmak ucu hedefleyemez. Mobil uyumlu web sitesi bu farkı ciddiye almakla başlar. Google'ın kendi mobil kullanılabilirlik yönergesi, dokunulabilir öğeler için yeterli hedef alanı ve öğeler arasında yeterli boşluk önerir. Uygulamada bunun anlamı sade: bağlantılar metin içinde birbirine yapışık durmaz, ikonla çalışan düğmeler görünür kutusundan daha geniş bir dokunma alanına sahip olur, "İptal" ile "Onayla" yan yana ve aynı büyüklükte konumlanmaz.

İkinci mesele başparmak erişimidir. Telefon tek elle tutulduğunda ekranın üst köşeleri en zor ulaşılan bölgedir. Ana eylem düğmesini sayfanın en tepesine sabitlemek, kullanıcıyı her seferinde elini kaydırmaya zorlar. Uzun sayfalarda eylem düğmesini içeriğin akışına birden fazla kez yerleştirmek, tek bir "yukarıda duran" düğmeden daha iyi çalışır.

Üçüncüsü, üzerine gelince açılan menülerdir. Dokunmatik ekranda "üzerine gelme" diye bir durum yoktur; ilk dokunuş menüyü açar, ikinci dokunuş bağlantıya gider ve kullanıcı bunu bilmez. Alt menüsü olan navigasyon, mobilde açılır-kapanır bir yapıya dönüştürülmeli, masaüstü davranışı olduğu gibi taşınmamalıdır.

Mobil hız, masaüstü hızıyla aynı ölçüm değildir

Aynı sayfa, ofis internetiyle bağlı bir dizüstünde hızlı, şehirlerarası yolda mobil veriyle açılan bir telefonda yavaş olabilir. İki fark birleşir: bant genişliği ve işlemci. Mobil cihaz aynı JavaScript dosyasını indirmekle kalmaz, onu daha yavaş çözümler ve çalıştırır. Bu yüzden mobil performans, masaüstü performansının küçük bir varyasyonu değil, ayrı bir bütçedir.

Bu bütçeyi tutmanın en etkili üç kalemi genellikle şunlardır:

• Görseller. Ekranda 400 piksel genişlikte görünen bir görselin 2400 piksel genişlikte yüklenmesi, mobilde en sık rastlanan israftır. Modern format kullanmak ve farklı ekran boyutları için farklı dosya sunmak, çoğu sitede tek başına hissedilir bir kazanç sağlar.
• Yazı tipleri. Dışarıdan yüklenen her yazı tipi ailesi ek bir istek ve ek bir bekleme demektir. Ağırlık sayısını sınırlamak ve metnin yazı tipi gelene kadar görünür kalmasını sağlamak, "sayfa açıldı ama yazılar yok" anını ortadan kaldırır.
• Üçüncü taraf betikler. Sohbet widget'ı, ısı haritası, birkaç ayrı analitik, sosyal medya gömüleri. Her biri tek başına küçüktür; toplamı çoğu zaman sitenin kendi kodundan ağırdır. Hangisinin gerçekten kullanıldığını sormak, kod optimizasyonundan daha çok kazandırır.

Bir de yerleşim kaymasını unutmamak gerekir: görselin veya reklamın yeri baştan ayrılmadığında, içerik yüklendikçe sayfa zıplar ve kullanıcı yanlış yere dokunur. Görsele ve gömülü içeriğe en baştan boyut vermek bunu önler. Hız tarafını daha ayrıntılı okumak isterseniz, sebepleri tek tek ayırdığımız web sitesi yavaş açılıyor yazısı bu bölümün devamı sayılabilir.

Okunabilirlik: küçük ekranda metin nasıl davranmalı

Mobilde okuma mesafesi kısadır ama dikkat de kısadır. Gövde metnini masaüstündekinden küçültmek yerine aynı bırakmak, çoğu zaman doğru karardır. Form alanlarında ise özel bir ayrıntı vardır: yazı tipi boyutu belli bir eşiğin altındaysa iOS tarayıcısı alana dokunulduğunda sayfayı otomatik olarak yakınlaştırır ve kullanıcı formu doldurduktan sonra kendini kaymış bir sayfada bulur. Alan yazı tipini yeterince büyük tutmak bu davranışı kapatır.

Satır uzunluğu ikinci konudur. Dar ekranda kenar boşluğunu tamamen sıfırlamak metni ekran kenarına yapıştırır ve okumayı yorar. Küçük ama düzenli bir yan boşluk, uzun metinlerde algılanan okunabilirliği belirgin biçimde artırır. Başlık hiyerarşisi de mobilde daha kritiktir: masaüstünde göz sayfayı tarayarak yapıyı görür, telefonda göz yalnızca içinde bulunduğu ekranı görür. Ara başlıklar, kullanıcının nerede olduğunu hatırlatan tek işarettir.

Tablolar özel bir vakadır. Dört sütunlu bir fiyat tablosunu daraltmak okunmaz hâle getirir. İki çözüm işe yarar: tabloyu kendi içinde yatay kaydırılabilir yapmak ya da mobilde her satırı ayrı bir kart olarak yeniden çizmek. İkincisi daha fazla iş ister, ama fiyatlandırma gibi karar verdiren tablolarda karşılığını verir.

Arama motoru tarafı: mobil öncelikli indeksleme

Google, sayfaları değerlendirirken sitenin mobil sürümünü esas alır. Bunun pratik sonucu şudur: masaüstünde olup mobilde gizlenen içerik, arama motoru için büyük ölçüde yok hükmündedir. Yer kazanmak için mobilde kaldırılan açıklama metinleri, gizlenen ürün özellikleri veya yalnızca masaüstünde gösterilen iç bağlantılar, sıralamayı doğrudan etkiler.

Bu yüzden mobil seo, ayrı bir çalışma alanı değil, aynı sayfanın mobilde eksiksiz olması meselesidir. Yapılandırılmış veri, başlık etiketleri, meta açıklamalar ve iç bağlantılar iki sürümde de aynı olmalıdır. Mobilde "daha az göster" yaklaşımıyla kırpılmış bir sayfa, hem kullanıcıya hem tarayıcıya eksik bir sayfa sunar. Konunun içerik ve yapı tarafını SEO uyumlu web tasarım yazısında kontrol listesi hâlinde ayırmıştık; teknik SEO ve görünürlük tarafı için SEO hizmetimizin kapsamına bakabilirsiniz.

Hazır şablonla mı, sıfırdan mı?

Piyasada mobil uyumlu web sitesi şablonları bol ve çoğu gerçekten esnek yerleşimle kurulmuş. Şablon, kurumsal tanıtım sitesi gibi yapısı öngörülebilir işlerde makul bir başlangıçtır. Sorun şablonun kendisinde değil, şablona sonradan eklenen sayfa kurucularda ve eklentilerde başlar: her biri kendi stilini ve kendi betiğini getirir, mobil yerleşim bir süre sonra birbirini ezen kuralların toplamına döner.

Özel geliştirme ise ilk günden ağırlık kontrolü verir: yalnızca kullanılan kod yüklenir, kırılma noktaları içeriğe göre kurulur, üçüncü taraf betik sayısı bilinçli bir karardır. Hesabı yaparken kurulum maliyetini değil, iki yıllık bakım ve hız maliyetini karşılaştırmak daha doğru bir ölçüdür. Yaklaşık bir bütçe çıkarmak isterseniz fiyat hesaplayıcıyı kullanabilir, kapsam tarafını web ve yazılım hizmetlerimiz sayfasından okuyabilirsiniz.

Bugün ayrı bir mobil web sitesi kurmak, yani aynı içeriği farklı bir adreste ikinci kez yayınlamak, artık savunulabilir bir yaklaşım değil. İki ayrı sürüm iki ayrı bakım yükü, iki ayrı içerik kayması ve yönlendirme hataları demektir. Tek adres, tek içerik, ekrana göre değişen yerleşim — mobil uyumlu web sitesi kurmanın yerleşmiş yöntemidir.

Yayına almadan önce yapılacak testler

Tasarımcı ekranındaki tarayıcı simülasyonu iyi bir ilk adımdır ama yeterli değildir; gerçek cihazın dokunma davranışını, yazı tipi çözümlemesini ve ağ gecikmesini taklit etmez. Sıralama şöyle işler: önce tarayıcı geliştirici araçlarıyla yerleşimi daraltarak kırılma noktalarını doğrulayın. Sonra en az bir Android ve bir iOS cihazda gerçek dokunuşla gezin. Ardından ağı yavaşlatarak — geliştirici araçlarındaki kısıtlama seçeneği bunu yapar — sayfanın zayıf bağlantıda nasıl açıldığına bakın.

Sonra ölçüm araçlarına geçin. Lighthouse ya da PageSpeed Insights, mobil sekmesinde ayrı bir puan ve ayrı öneriler üretir; masaüstü puanına bakıp mobili varsaymak en sık yapılan hatadır. Search Console'un sayfa deneyimi raporları ise laboratuvar ölçümü değil, gerçek kullanıcı verisi gösterir. İkisi çeliştiğinde gerçek kullanıcı verisi haklıdır.

Mobil Uyumlu Web Sitesi Nasıl Yapılır: Yayın Öncesi Kısa Kontrol Listesi

• Viewport etiketi var ve sayfa hiçbir ekranda yatay kaymıyor.
• Kırılma noktaları cihaz modellerine değil, yerleşimin bozulduğu genişliklere konmuş.
• Dokunulabilir öğeler yeterince büyük ve birbirinden ayrık; üzerine gelmeye bağlı menü yok.
• Görseller ekranda göründükleri boyuta yakın sunuluyor, boyutları baştan tanımlı.
• Form alanları dokunulduğunda sayfa kendiliğinden yakınlaşmıyor.
• Masaüstünde olan hiçbir içerik mobilde gizlenmemiş.
• Ölçüm mobil sekmesinde yapılmış ve en az bir gerçek cihazda elle denenmiş.

Mevcut siteyi dönüştürmek mi, yeniden yapmak mı?

Elinizde çalışan bir site varsa karar tek bir soruya bağlıdır: yerleşim esnek mi, yoksa sabit genişliklere mi çivilenmiş? Esnek bir temel varsa yapılacak iş sınırlıdır — kırılma noktalarını düzeltmek, görselleri yeniden boyutlandırmak, dokunma alanlarını büyütmek. Bu, birkaç günlük bir müdahaledir ve içeriği, adresleri, sıralamaları olduğu gibi korur.

Sabit genişlikli bir yapıda ise her düzeltme bir sonrakini bozar. Bu durumda yamalamak yerine yerleşimi yeniden kurmak hem daha ucuz hem daha kalıcıdır. Yeniden kurarken korunması gereken şey tasarım değil, adres yapısı ve içeriktir: mevcut adresler değişecekse yönlendirmeleri baştan planlayın, yoksa mobil uyumu kazanırken görünürlüğü kaybedersiniz.

Özetle, mobil uyumlu web sitesi nasıl yapılır sorusunun cevabı tek bir teknikte değil, birbirini tamamlayan altı kararda saklı: oranla kurulmuş yerleşim, içeriğe göre seçilmiş kırılma noktaları, parmakla kullanılabilen arayüz, mobil için ayrı tutulan hız bütçesi, iki sürümde de eksiksiz içerik ve gerçek cihazda yapılan doğrulama. Bu altısı yerindeyse site yalnızca telefonda düzgün görünmez; telefonda gerçekten çalışır.