Çeşitli kullanıcılar ve cihazlar için geliştirme yaparken içeriğin yanı sıra düzeni ve grafik tasarımı da göz önünde bulundurun.
Kullanıcılar web'de nasıl okuyor?
ABD hükümetinin yazım kılavuzu, kullanıcıların web'deki yazılardan beklentilerini özetliyor:
Araştırmalar, kullanıcıların web sayfalarını okumadığını, taradığını gösteriyor. Ortalama olarak kullanıcılar, web sayfası içeriğinin yalnızca% 20-28'ini okur. Ekranda okumak, kağıttan okumaya göre çok daha yavaştır. Bilgilere kolayca erişilemediği ve bilgiler kolayca anlaşılmadığı takdirde kullanıcılar pes edip sitenizden ayrılır.
Mobil cihazlar için yazma
Eldeki konuya odaklanın ve hikayeyi en başta anlatın. Yazınızın çeşitli cihazlarda ve görüntü alanlarında çalışması için ana noktalarınızı başlangıçta ilettiğinizden emin olun. Genel bir kural olarak, ideal olarak ilk dört paragrafta, yaklaşık 70 kelimeyle.
Kullanıcıların sitenizden ne istediğini kendinize sorun. Bir şey öğrenmeye mi çalışıyorlar? Kullanıcılar bilgi edinmek için sitenizi ziyaret ediyorsa tüm metinlerinizin hedeflerine ulaşmalarına yardımcı olacak şekilde düzenlendiğinden emin olun. Etken çatı kullanarak yazın, işlemler ve çözümler sunun.
Yalnızca ziyaretçilerinizin istediği içerikleri yayınlayın.
Birleşik Krallık hükümetinin araştırması da şunları gösteriyor:
Başka bir deyişle, okuma yazma bilen ve teknik bilgisi olan bir kitle için bile sade bir dil, kısa kelimeler ve basit cümle yapıları kullanın. Geçerli bir neden olmadığı sürece konuşma dilinizi koruyun. Gazeteciliğin eski kurallarından biri, 11 yaşında zeki bir çocukla konuşuyormuş gibi yazmaktır.
Bir milyar yeni kullanıcı
Yazım yaklaşımını basitleştirmek özellikle mobil cihazlardaki okuyucular için önemlidir. Ayrıca, daha fazla kaydırma gerektiren, düşük kaliteli ekranlara ve daha az duyarlı ekranlara sahip olabilen, küçük görüntü alanlı düşük maliyetli telefonlar için içerik oluştururken de bu yaklaşım çok önemlidir.
İnternete bağlanacak bir milyar yeni kullanıcının çoğu ucuz cihazlara sahip olacak. Veri bütçelerini uzun içeriklerde gezinmeye harcamak istemeyebilirler ve ana dillerinde okumuyor olabilirler. Metninizi kısaltın: Kısa cümleler, minimum düzeyde noktalama işaretleri, beş satır veya daha kısa paragraflar ve tek satırlık başlıklar kullanın. Duyarlı metin kullanmayı (örneğin, daha küçük görüntü alanları için daha kısa başlıklar kullanma) düşünebilirsiniz ancak dezavantajlara dikkat edin.
Metinlere minimalist bir yaklaşımla yaklaşmak, içeriğinizin yerelleştirilmesini ve uluslararası hale getirilmesini kolaylaştırır. Ayrıca içeriğinizin sosyal medyada alıntılanma olasılığını da artırır.
Özetlemek gerekirse:
- Basit tutun
- Karmaşayı azaltma
- Doğrudan konuya girin
Gereksiz içeriği kaldırma
Bayt boyutu açısından web sayfaları büyük ve giderek daha da büyük hale geliyor.
Duyarlı tasarım teknikleri, daha küçük görüntü alanları için farklı içerikler sunmayı mümkün kılar ancak metinleri, resimleri ve diğer içerikleri basitleştirerek başlamak her zaman mantıklıdır.
Web kullanıcıları genellikle eyleme yöneliktir. İyi bir kitap okumak için rahatlamak yerine, mevcut sorularının yanıtlarını ararken "ileri eğilirler".
Jackob Nielsen
Kendinize şu soruyu sorun: Kullanıcılar sitemi ziyaret ederek hangi işlemi gerçekleştirmeye çalışıyor?
Her sayfa bileşeni, kullanıcıların hedeflerine ulaşmasına yardımcı oluyor mu?
Gereksiz sayfa öğelerini kaldırma
HTTP Archive'e göre, HTML dosyaları ortalama bir web sayfası için yaklaşık 70 bin ve dokuzdan fazla istek oluşturur.
Birçok popüler site, mobil cihazlarda bile sayfa başına birkaç bin HTML öğesi ve birkaç bin satır kod kullanır. Aşırı HTML dosyası boyutu sayfaların daha yavaş yüklenmesine neden olmayabilir ancak büyük bir HTML yükü, içerik şişkinliğinin işareti olabilir: Daha büyük .html dosyaları daha fazla öğe, daha fazla metin içeriği veya her ikisi anlamına gelir.
HTML karmaşıklığını azaltmak sayfa ağırlığını da azaltır, yerelleştirme ve uluslararasılaştırmayı kolaylaştırır ve duyarlı tasarımın planlanmasını ve hatalarının ayıklanmasını kolaylaştırır. Daha verimli HTML yazma hakkında bilgi için Yüksek performanslı HTML başlıklı makaleyi inceleyin.
Kullanıcıların uygulamanızdan değer elde etmeden önce gerçekleştirmesini istediğiniz her adım, kullanıcılarınızın% 20'sini kaybetmenize neden olur.
Gabor Cselle, Twitter
Aynı durum içerikler için de geçerlidir: Kullanıcıların istediklerine olabildiğince hızlı ulaşmalarına yardımcı olun.
İçeriği yalnızca mobil kullanıcılardan gizlemeyin. Mobil kullanıcılarınızın hangi özellikleri kaçırmayacağını tahmin etmek her zaman başarısız olacağından içerik eşitliği sağlamayı hedefleyin. Kaynaklarınız varsa aynı içeriğin farklı görüntü alanı boyutlarına uygun alternatif sürümlerini oluşturun. Bu sürümler yalnızca yüksek öncelikli sayfa öğeleri için olsa bile bu işlemi yapın.
İçerik yönetimi ve iş akışı: Eski sistemler eski içeriklere mi yol açıyor?
Metni basitleştirme
Web mobil hale geldikçe yazma şeklinizi değiştirmeniz gerekir. Basit tutun, dağınıklığı azaltın ve konuya gelin.
Gereksiz resimleri kaldırma
Görseller güzel, eğlenceli ve bilgilendirici olabilir ancak sayfa alanını da kullanır, sayfa ağırlığını artırır ve dosya isteği sayısını yükseltir. Bağlantı kalitesi düştükçe gecikme de artar. Bu nedenle, web mobil hale geldikçe aşırı sayıda resim dosyası isteği gönderilmesi giderek daha büyük bir sorun haline geliyor.
Resimler de güç tüketir. Ekrandan sonra pilinizi en çok tüketen ikinci şey radyodur. Daha fazla resim isteği, daha fazla radyo kullanımı, daha fazla biten pil. Yalnızca resimlerin oluşturulması bile güç gerektirir ve bu, boyut ve sayıyla orantılıdır. Stanford'un Who Killed My Battery? (Pili Kim Bitirdi?) raporuna göz atın.
Mümkünse resimleri kaldırın.
Aşağıda bazı öneriler sunulmuştur:
- Görsel içermeyen veya görsellerin az kullanıldığı tasarımları tercih edin. Yalnızca metin içeren tasarımlar da güzel olabilir. Kendinize şu soruyu sorun: "Sitemi ziyaret edenler ne yapmaya çalışıyor? Resimler bu sürece yardımcı olur mu?"
- Eskiden başlıkları ve diğer metinleri grafik olarak kaydetmek yaygın bir uygulamaydı. Bu yaklaşım, görüntü alanı boyutu değişikliklerine iyi yanıt vermez ve sayfa ağırlığını ve gecikmeyi artırır. Metnin grafik olarak kullanılması, metnin arama motorları tarafından bulunamaması ve ekran okuyucular ile diğer yardımcı teknolojiler tarafından erişilememesi anlamına da gelir. Mümkün olduğunda "gerçek" metin kullanın. Web yazı tipleri ve CSS, güzel tipografi oluşturmanıza olanak tanır.
- Renk geçişleri, gölgeler, yuvarlak köşeler ve arka plan dokuları için tüm modern tarayıcılar tarafından desteklenen özellikler olan resimler yerine CSS kullanın. Ancak CSS'nin resimlerden daha iyi olabileceğini, ancak özellikle mobil cihazlarda işleme ve oluşturma cezası olabileceğini unutmayın.
- Arka plan resimleri, mobil cihazlarda nadiren iyi sonuç verir. Küçük görüntü alanlarında arka plan resimlerini önlemek için medya sorgularını kullanabilirsiniz.
- Açılış ekranı resimlerinden kaçının.
- Kullanıcı arayüzü animasyonları için CSS kullanın.
- Gliflerinizi tanıyın. Gerekirse web yazı tipleriyle birlikte resimler yerine Unicode sembolleri ve simgeleri kullanın.
- Simge yazı tiplerini kullanabilirsiniz. Bunlar, sonsuz ölçeklenebilen vektör grafiklerdir ve tüm resim grubu tek bir yazı tipi olarak indirilebilir. (Ancak bu endişelere dikkat edin.)
<canvas>öğesi, JavaScript'te çizgiler, eğriler, metinler ve diğer resimlerden resim oluşturmak için kullanılabilir.- Satır içi SVG veya veri URI'si resimleri, sayfa ağırlığını azaltmaz ancak kaynak isteği sayısını azaltarak gecikmeyi azaltabilir. Satır içi SVG, mobil ve masaüstü tarayıcılarda mükemmel desteklenir ve optimizasyon araçları, SVG boyutunu önemli ölçüde azaltabilir. Aynı şekilde, veri URI'leri de iyi desteklenir. Her ikisi de CSS'ye satır içi olarak eklenebilir.
- Animasyonlu GIF'ler yerine
<video>kullanabilirsiniz. Video öğesi, mobil cihazlardaki tüm tarayıcılarda desteklenir (Opera Mini hariç).
Daha fazla bilgi için Resim Optimizasyonu ve Resimleri kaldırma ve değiştirme başlıklı makaleleri inceleyin.
İçeriği farklı görüntü alanı boyutlarında iyi çalışacak şekilde tasarlama
"Ürün oluşturun, küçük ekranlar için ürünü yeniden tasarlamayın. Harika mobil ürünler taşınmaz, oluşturulur."
Mobile Design and Development, Brian Fling
İyi tasarımcılar "mobil için optimize etmez". Bunun yerine, çeşitli cihazlarda çalışan siteler oluşturmak için duyarlı düşünürler. Metnin ve diğer sayfa içeriklerinin yapısı, cihazlar arası başarı için kritik öneme sahiptir.
İnternete yeni bağlanan milyarlarca kullanıcının çoğu, küçük görüntü alanına sahip düşük maliyetli cihazlar kullanıyor. 3,5 inç veya 4 inçlik düşük çözünürlüklü bir ekranda okumak zor olabilir.
İkisinin birlikte çekilmiş fotoğrafı:
Daha büyük ekranda metin küçük ancak okunabilir.
Tarayıcı, daha küçük ekranda düzeni doğru şekilde oluşturur ancak metin, yakınlaştırıldığında bile okunamayacak kadar küçüktür. Ekran bulanık ve "renk atması" var. Beyaz, beyaz görünmüyor ve bu durum içeriğin okunabilirliğini azaltıyor.
Mobil cihazlar için içerik tasarlama
Çeşitli görüntü alanları için geliştirme yaparken içeriğin yanı sıra düzeni ve grafik tasarımı da göz önünde bulundurun. Yer tutucu içerik yerine gerçek metin ve resimlerle tasarım yapın.
"İçerik, tasarımdan önce gelir. İçerik olmadan tasarım olmaz, sadece dekorasyon olur."
Jeffrey Zeldman
- Kullanıcılar web sayfalarını F şeklinde okuduğundan en önemli içeriğinizi en üste yerleştirin.
- Kullanıcılar bir hedefe ulaşmak için sitenizi ziyaret eder. Kendinize bu hedefe ulaşmak için neye ihtiyaç duyduklarını sorun ve diğer her şeyi kaldırın. Görsel ve metinsel süslemeler, eski içerikler, aşırı bağlantılar ve diğer dağınıklıklar konusunda katı olun.
- Sosyal paylaşım simgeleriyle ilgili dikkatli olun. Bu simgeler düzenleri karıştırabilir ve kodları sayfa yüklemeyi yavaşlatabilir.
- İçerik için sabit cihaz boyutları yerine duyarlı düzenler tasarlayın.
Test içeriği
- Chrome Geliştirici Araçları'nı ve diğer emülasyon araçlarını kullanarak daha küçük görüntü alanlarında okunabilirliği kontrol edin.
- İçeriğinizi düşük bant genişliği ve yüksek gecikme süresi koşullarında test edin. İçeriği çeşitli bağlantı senaryolarında deneyin.
- İçeriğinizi düşük maliyetli bir telefonda okumayı ve içeriğinizle etkileşim kurmayı deneyin.
- Arkadaşlarınızdan ve iş arkadaşlarınızdan uygulamanızı veya sitenizi denemelerini isteyin.
- Basit bir cihaz test laboratuvarı oluşturun. Google'ın Mini Mobil Cihaz Laboratuvarı'nın GitHub deposunda kendi laboratuvarınızı nasıl oluşturacağınızla ilgili talimatlar yer alır. OpenSTF, web sitelerini birden fazla Android cihazda test etmek için kullanılan basit bir web uygulamasıdır.
OpenSTF'nin kullanımına dair bir örneği burada görebilirsiniz:
Mobil cihazlar artık yalnızca iletişim, oyun ve medya için değil, içerik tüketmek ve bilgi edinmek için de giderek daha fazla kullanılıyor.
Bu nedenle, içerikleri çeşitli görüntü alanlarında iyi çalışacak şekilde planlamak ve cihazlar arası düzen, arayüz ve etkileşim tasarımını göz önünde bulundururken içeriğe öncelik vermek giderek daha önemli hale geliyor.
Veri maliyetini anlama
Web sayfaları büyüyor.
HTTP Archive'e göre, en popüler bir milyon site için ortalama sayfa ağırlığı artık 2 MB'ın üzerinde.
Kullanıcılar, yavaş veya pahalı olduğu düşünülen sitelerden ya da uygulamalardan kaçınır. Bu nedenle, sayfa ve uygulama bileşenlerini yüklemenin maliyetini anlamak çok önemlidir.
Sayfa ağırlığını azaltmak da kârlı olabilir. YouTube'dan Chris Zacharias, izleme sayfası boyutunu 1,2 MB'tan 250 KB'a düşürdüklerinde şunları tespit etti:
Başka bir deyişle, sayfa ağırlığını azaltmak yepyeni pazarların kapılarını açabilir.
Sayfa ağırlığını hesaplama
Sayfa ağırlığını hesaplamak için kullanabileceğiniz çeşitli araçlar vardır. Chrome Geliştirici Araçları Ağ paneli, tüm kaynakların toplam bayt boyutunu gösterir ve tek tek öğe türlerinin ağırlıklarını belirlemek için kullanılabilir. Ayrıca, tarayıcı önbelleğinden hangi öğelerin alındığını da kontrol edebilirsiniz.
Firefox ve diğer tarayıcılar da benzer araçlar sunar.
WebPagetest, ilk ve sonraki sayfa yüklemelerini test etme olanağı sunar. Komut dosyaları (ör. bir siteye giriş yapmak için) veya RESTful API'lerini kullanarak testleri otomatikleştirebilirsiniz. Aşağıdaki örnekte (developers.google.com/web yükleniyor) önbelleğe alma işleminin başarılı olduğu ve sonraki sayfa yüklemeleri için ek kaynak gerekmediği gösterilmektedir.
WebPagetest, MIME türüne göre boyut ve istek dökümü de sağlar.
Sayfa maliyetini hesaplama
Birçok kullanıcı için veriler yalnızca bayt ve performans maliyetine değil, aynı zamanda para maliyetine de neden olur.
What Does My Site Cost? (Sitemin Maliyeti Ne Kadar?) sitesi, sitenizi yüklemenin gerçek maliyetini tahmin etmenizi sağlar. Aşağıdaki histogramda, amazon.com'un yüklenmesinin (ön ödemeli veri planı kullanılarak) ne kadar maliyetli olduğu gösterilmektedir.
Bu değerin, gelire göre uygun fiyatlılığı dikkate almadığını unutmayın. blog.jana.com adresindeki veriler, veri maliyetini gösterir.
| 500 MB veri planı maliyeti (ABD doları) |
Saatlik asgari ücret (ABD doları) |
500 MB'lık veri planı için ödenecek çalışma saatleri |
|
| Hindistan | 3,38 ABD doları | 0,20 ABD doları | 17 saat |
| Endonezya | 2,39 ABD doları | 0,43 ABD doları | 6 saat |
| Brezilya | 13,77 ABD doları | 1,04 TL | 13 saat |
Sayfa ağırlığı yalnızca gelişmekte olan pazarların sorunu değildir. Birçok ülkede kullanıcılar sınırlı veriye sahip mobil planlar kullanır ve sitenizi ya da uygulamanızı ağır ve pahalı olarak algılarsa kullanmaktan kaçınır. "Sınırsız" olarak sunulan hücresel ve kablosuz veri planları bile genellikle bir veri sınırına sahiptir. Bu sınır aşıldığında veri planı engellenir veya bant genişliği kısıtlanır. Bu nedenle, sayfanızın ne kadar veri tükettiği konusunda mümkün olduğunca şeffaf olmanız en iyisidir. Aşağıdaki blog yayınında bu konuyla ilgili en iyi uygulamalar paylaşılmaktadır: Maliyet şeffaflığı sayesinde güveni artırma
Özetle: Sayfa ağırlığı performansı etkiler ve maliyete neden olur. İçerik verimliliğini optimize etme, bu maliyetin nasıl azaltılacağını gösterir.