Web uygulamaları için en iyi uygulamalar

Mobil cihazlar için web sayfaları ve uygulamalar geliştirmek, web tarayıcıları için bir web sayfası geliştirmek üzere tasarlandı. Aşağıdaki uygulamalar, Android ve diğer mobil cihazlar için en etkili web uygulamasıdır.

  1. Mobil cihazları web sitenizin özel bir mobil sürümüne yönlendirin. Birkaç tane bunu sunucu tarafı yönlendirmeler kullanarak yapmanın en iyi yolu. Yaygın olarak kullanılan yöntemlerden biri "the" Web tarayıcısı tarafından sağlanan User Agent dizesi. Belirleyebilmek için sitenizin mobil sürümünü sunup sunmayacağınıza karar verirken "mobil" dizesidir.
  2. HTML5 kullanın yeniden hedefleme kampanyaları için kullanılabilir. HTML5, mobil web siteleri için en yaygın olarak kullanılan biçimlendirme dilidir. Bu standart, web sitelerinin çeşitli alanlarda çalışmasını sağlamak için mobil öncelikli geliştirmeyi teşvik eder cihazlar. Önceki web dillerinin aksine, HTML5 daha basit <DOCTYPE> ve charset beyan:
    <!DOCTYPE html>
    ...
    <meta charset="UTF-8">
    
  3. Web sayfanızı doğru şekilde yeniden boyutlandırmak için görüntü alanı meta verilerini kullanın. Dokümanınızda <head>, tarayıcının görüntü alanının nasıl görünmesini istediğinizi belirten meta veriler sağlayın. oluşturmak için kullanabilirsiniz. Örneğin, görüntü alanı meta verileriniz, ilk sayfa ölçeğini ve hedef ekran yoğunluğunu belirler.

    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 verilerini kullanma hakkında daha fazla bilgi için Web uygulamalarında farklı ekranları destekleme başlıklı makaleyi inceleyin.

  4. Dikey doğrusal bir düzen kullanın. Kaydırırken kullanıcının ekranı sola veya sağa kaydırması sayfanızda gezinmeye devam edebilirsiniz. Yukarı ve aşağı kaydırmak kullanıcı için daha kolaydır ve sayfanızı basitleştirir.
  5. Düzen yüksekliğini ve genişliğini match_parent olarak ayarlayın. WebView nesnenin yüksekliğini ve genişliğini match_parent, uygulamanızın görünümlerinin doğru boyutlandırılmasını sağlar. Bu nedenle, yüksekliği wrap_content olarak ayarlamamanız gerekir. Benzer şekilde, düzen genişliğinin wrap_content olarak desteklenmediğini ve WebView metriğinin üst öğesinin genişliğini kullanın. Bu davranış nedeniyle, sistem gereksinimlerinin WebView nesnenizin üst düzen nesnesinin yüksekliği ve genişliği wrap_content.
  6. Birden fazla dosya isteğinde bulunmaktan kaçının. Çünkü mobil cihazların genellikle bağlantı hızı vardır masaüstü bilgisayarlardan daha yavaşsa sayfanızın mümkün olduğunca hızlı yüklenmesini sağlayın. Bu süreci hızlandırmanın bir yolu da <head> içinde stil sayfaları ve komut dosyası gibi fazladan dosyalar yüklemekten kaçının. Ayrıca şunları da göz önünde bulundurun: Google ile mobil analiz Google'ın PageSpeed Insights aracını kullanarak uygulamanıza özel ayrıntılı optimizasyon önerileri alabilirsiniz.

Ek kaynaklar