İçeriğin Boyutunu Görünüme Göre Ayarlama

Bu kural, PageSpeed Insights, sayfa içeriğinin belirtilen görünüm boyutuna yatay olarak sığmayacağını ve böylece kullanıcının tüm içeriği görüntülemek için yatay olarak kaydırma yapmak zorunda kalacağını belirlediğinde tetiklenir.

Genel Bakış

Hem masaüstü, hem de mobil cihazlardaki kullanıcılar web sitelerinde ekranı yatay olarak değil, dikey olarak kaydırmaya alışkındır. Sayfa sonuçlarını tümüyle görmek için kullanıcıyı ekranı yatay olarak kaydırmaya veya görüntüyü uzaklaştırmaya zorlamak kötü bir kullanıcı deneyimine neden olur.

Meta görünüm etiketine sahip bir mobil site geliştirirken yanlışlıkla, belirlenen görünüme tam olarak sığmayan bir sayfa içeriği oluşturmak çok kolaydır. Örneğin, görünümden daha büyük bir genişlikte gösterilen bir resim, görünümün yatay olarak kaymasına neden olabilir. Kullanıcının yatay olarak kaydırma yapmak zorunda kalmaması açısından bu içeriği görünümün genişliği içine sığacak biçimde ayarlamanız gerekir.

Öneriler

Sayfa boyutları cihazlara göre önemli değişiklikler gösterdiğinden (ör. telefonlarla tabletler ve hatta farklı telefonlar arasında) sayfalarınızın pek çok çeşitli cihazda doğru olarak oluşturulması için, görünümü yapılandırmalısınız. Bununla birlikte, görünümün genişliği (CSS pikseli olarak) değişebileceğinden, sayfa içeriğinizin iyi oluşturulabilmesi için belirli bir görünüme dayanmaması gerekir.

  • Sayfa öğeleri için CSS genişliklerini mutlak değer olarak büyük bir sayıya ayarlamaktan kaçının (div{width:360px;} gibi). Çünkü bu durum, öğenin daha dar bir cihazdaki görünüm için çok geniş kalmasına neden olabilir (ör. iPhone gibi 320 CSS pikseli genişliğindeki bir cihazda). Bunun yerine, göreli genişlik değerleri (width:100% gibi) kullanmayı düşünün. Aynı biçimde, küçük ekranlarda öğenin görünümün dışında kalmasına neden olacak büyük mutlak konumlandırma değerleri kullanmaktan da kaçının.
  • Gerekirse, küçük ve büyük ekranlarda farklı stiller uygulamak için CSS medya sorguları kullanılabilir. Bu HTML5 Rocks makalesinde konunun nasıl ele alınacağı ile ilgili öneriler verilmiştir.
  • Resimlerle ilgili olarak bu makalede, oluşturma sırasında sayfaların gereksiz yere yeniden düzenlenmesine neden olmadan, esnek boyutlu resimlerin nasıl sunulacağı konusunda faydalı bir genel bakış verilmiştir.