Web uygulamaları için en iyi uygulamalar

Mobil cihazlar için web sayfaları ve uygulamalar geliştirmek, masaüstü web tarayıcıları için bir web sayfası geliştirmekten farklı zorlukları beraberinde getirir. Aşağıdaki uygulamalar, Android ve diğer mobil cihazlar için en etkili web uygulamasını sağlamanıza yardımcı olabilir.

  1. Mobil cihazları web sitenizin özel bir mobil sürümüne yönlendirin. Sunucu tarafı yönlendirmeleri kullanarak bunu yapmanın birkaç yolu vardır. Yaygın olarak kullanılan bir yöntem, web tarayıcısının sağladığı Kullanıcı Aracısı dizesini "dinlemek"tir. Sitenizin mobil sürümünün sunulup sunulmayacağını belirlemek için Kullanıcı Aracısı'nda "mobile" dizesini arayın.
  2. Mobil cihazlar için HTML5 kullanın. HTML5, mobil web sitelerinde kullanılan en yaygın biçimlendirme dilidir. Bu standart, web sitelerinin çeşitli cihazlarda çalışmasını sağlamak için mobil öncelikli geliştirmeyi teşvik eder. Önceki web dillerinden farklı olarak HTML5 daha basit <DOCTYPE> ve charset bildirimleri kullanır:
    <!DOCTYPE html>
    ...
    <meta charset="UTF-8">
    
  3. Web sayfanızı düzgün bir şekilde yeniden boyutlandırmak için görüntü alanı meta verilerini kullanın. <head> dokümanınızda, tarayıcının görüntü alanının web sayfanızı nasıl oluşturmasını istediğinizi belirten meta veriler sağlayın. Örneğin, görüntü alanı meta verileriniz, tarayıcının görüntü alanı için yükseklik ve genişliği, ilk sayfa ölçeğini ve hedef ekran yoğunluğunu belirtebilir.

    Aşağıdaki örnekte görüntü alanı meta verilerinin nasıl ayarlanacağı gösterilmektedir:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    

    Android destekli cihazlarda görüntü alanı meta verilerinin nasıl kullanılacağı hakkında daha fazla bilgi için Web uygulamalarında farklı ekranları destekleme konusunu okuyun.

  4. Dikey doğrusal düzen kullanın. Kullanıcının sayfanızda gezinirken sola ve sağa kaydırması ihtiyacını ortadan kaldırın. Yukarı ve aşağı kaydırmak hem kullanıcılar için daha kolay hem de sayfanızı daha basit hale getirir.
  5. Düzen yüksekliğini ve genişliğini match_parent değerine ayarlayın. WebView nesnenizin yüksekliğini ve genişliğini match_parent olarak ayarlamak, uygulamanızın görünümlerinin doğru şekilde boyutlandırılmasını sağlar. Yanlış boyutlandırmayla sonuçlanacağı için yüksekliğin wrap_content olarak ayarlanmasını önermiyoruz. Benzer şekilde, düzen genişliğinin wrap_content olarak ayarlanması desteklenmez ve WebView öğenizin, üst öğesinin genişliğini kullanmasına neden olur. Bu davranış nedeniyle WebView nesnenizin üst düzen nesnelerinin hiçbirinin yüksekliği ve genişliğinin wrap_content olarak ayarlanmadığından emin olmanız da önemlidir.
  6. Birden fazla dosya isteğinden kaçının. Mobil cihazların bağlantı hızı genellikle masaüstü bilgisayarlardan daha düşük olduğundan sayfanızın mümkün olduğunca hızlı yüklenmesini sağlayın. Bu süreci hızlandırmanın yollarından biri, <head> içine stil sayfaları ve komut dosyaları gibi ekstra dosyalar yüklemekten kaçınmaktır. Ayrıca, uygulamanıza özel ayrıntılı optimizasyon önerileri için Google'ın PageSpeed Insights aracıyla mobil analiz yapabilirsiniz.

Ek kaynaklar