Cihazlar Arasında En İyi Görsel Deneyimler Nasıl Sağlanır?

22 Ağustos 2022'de güncellendi

Mobil, tablet ve masaüstü olmak üzere üç cihazda web sitenizdeki en iyi dönüşüm sağlayan sayfayı açın.

Gerçekten, yap. Bekleyeceğim.

İçeriğiniz beklediğiniz kadar iyi görüntüleniyor mu?

Birçok pazarlamacı bunun olmadığını görecektir. Kullanıcı deneyimi ve mesajlaşma tutarlılığı tatmin edici değil. Bazen, düpedüz korkunç.

Buraya nasıl geldin? Sonuçta, şirketiniz içerik yayınlamak için çok fazla kaynağa yatırım yapıyor. Hatta COPE yöntemini benimseyerek bu içerik kaynaklarını en üst düzeye çıkarırsınız - bir kez oluşturun, her yerde yayınlayın.

Ve bu hata olabilir.

Neşelen, içerik pazarlamacısı dostum. Küçük bir ayarlamaya yardımcı olmak için buradayım – COPE-M.

COPE-M'nin neden gerekli olduğunu anlayın

Geleneksel bir COPE stratejisini kullanarak, bir içerik yığınını (tanım, resim, açıklama vb.) bir kez yüklersiniz ve CMS bu yığınları birden çok çıktıya çeker (yapıştırmalar değil). Orijinal içeriği güncellediğinizde, güncelleme havuzunuzda dalgalanır.

Bir içerik stratejisi olarak COPE içeriği zariftir. Verimli. Mantıklı. İçeriğinizin yeniden kullanımını artırır ve orijinal içeriğe yaptığınız yatırımları amorti eder. Metin, ses ve video ile çalışır.

Ancak COPE, içerik yayınlamanız için her derde deva değildir. Modern tarayıcılar metninizi yeniden akıtır, ancak görüntüler cihazlarınız için küçülür. Masaüstünde harika görünen bir görüntü, bir mobil cihazda tanınmayabilir. (Hedef kitleniz bundan hoşlanmaz ve Google da beğenmez, bu da içeriğinizin sıralamasına zarar verebilir.)

COPE harika bir başlangıç ​​noktasıdır, ancak görüntü kontrolü için daha katmanlı bir yaklaşım gereklidir. Ben buna COPE-M diyorum - bir kez oluşturun, çoğunlukla her yerde yayınlayın. COPE-M, iyi bir kullanıcı deneyimi ile harika bir kullanıcı deneyimi arasındaki köprü olabilir.

İçerik yayınlama stratejinize bir COPE-M yaklaşımı benimsemek, kullanıcı deneyiminizi canlandırabilir, tutarlılığı artırabilir ve yenilenen içerikle arama motoru optimizasyonunuzu (SEO) iyileştirebilir.

Görüntüler COPE ile mutlaka en iyi arkadaşlar değildir

Daniel Jacobson'ın bu içeriği yeniden kullanma stratejisine yönelik konsept ve teknik yaklaşımı ana hatlarıyla belirttiği 2009'dan bu yana çok şey değişti. COPE sağlam bir konsept olmaya devam ediyor, ancak bugün içerik birden fazla cihaz türü aracılığıyla dağıtılıyor. İzleyiciler ayrıca içeriği daha fazla biçimde tüketir.

Birden çok tarayıcıda görüntülenen tek kaynaklı metin hala çalışıyor, ancak bu, resimler için bir sorun. Metin görünümünden ayrılabilir. Basamaklı stil sayfaları, yazı tipi boyutları ve sütun genişlikleri gibi metnin görünümünün orijinal kaynağı değiştirmeden değişmesini sağlar.

Görüntüler o kadar dövülebilir değil. İşlenen grafikler (örn. JPEG, PNG dosyaları) görünümlerinden ayrılamaz. Tek bir kaynaktan tek bir boyut her zaman herkese uymaz. Masaüstünde iyi görünen bir bilgi grafiği iPhone'da okunamayabilir. İzleyicinin onu görmeye çalışırken çimdiklemesine, yakınlaştırmasına, gözlerini kısmasına ve homurdanmasına neden oluyor.

Çoklu kaynak için görüntüleri seçin

İçerik yönetim sistemleri, her cihazdaki her görüntü için otomatik olarak ideal görüntüleme deneyimleri sağlayacak kadar akıllı hale gelene kadar, görüntülerinizle ne zaman BAĞIŞ YAPMAyacağınızı ve ne zaman BÖLMEMEYİ düşünmelisiniz.

Orijinal isteğime geri dönün - birden fazla cihazda nasıl göründüğünü görmek için en iyi dönüştürme sayfanızı açın. Bunu web sitenizdeki diğer önemli sayfalar ve resimlerle yapın. Muhtemelen onları analiz yazılımınızda zaten etiketlemişsinizdir.

İPUCU: Sayfa seçiminizi, mobil cihazlardan önemli miktarda trafik alan sayfalara daraltın.

Hangi görüntülerin çoklu kaynak oluşturulacağını belirlemek için seçilen sayfaları birden fazla cihazda test edin. Bir yığın cihaz ve bir tasarımcı, içerik stratejisti veya UX kişisi edinin. İçeriğinizi müşterinizin yapacağı şekilde yükleyin. Bir görüntü ezilmiş görünüyorsa, onu çok kaynaklı görüntüler listesine ekleyin.

İPUCU: Sadece görüntünün gösterilip gösterilmediğine bakmayın. Nasıl görüntülendiğine dikkatlice bakın. Kullanıcının bir görüntünün tamamını görüntülemek için kıstırıp yakınlaştırması gerekiyorsa, COPE muhtemelen en iyi yöntem değildir.

Sonuçları, içerik stratejisi, tasarım, içerik mühendisliği ve kullanıcı deneyimi dahil olmak üzere, web sitenizin görsellerinin nasıl yüklendiğini bilmesi gereken, içerikle ilgili tüm ekiplerle paylaşın.

Çoklu ekranlar için tasarım

Bir mobil cihaz ekranına sığdırmak için üst ve alt uçlardan ödün verilmiş bir görüntüyle, birden fazla görüntü yüklemek ve sisteme her birini hangi kesme noktasında kullanacağını söylemek faydalı olabilir.

Kesme noktası, sistemin bir görüntü çekmeyi durdurduğu ve görüntüleme aygıtına daha uygun bir sürümü çektiği bir noktadır. Kullanıcılar dikey olarak sonsuza kadar kaydırabildiğinden ancak ekranı genişletemediğinden kesme noktaları cihaz genişliğine göre belirlenir.

Bu resimde üç olası kesme noktası gösterilmektedir: cep telefonu için 320 piksel, tablet veya büyük telefon için 720 piksel ve dizüstü bilgisayar için 1.024 piksel:

Bu örnekte, iki kızımın ve köpeğimizin orijinal görüntüsü 800 piksel genişliğindedir. Tam boyutta oluşturulmuş bir masaüstünde harika görünüyor (resmin sol tarafı). Tablet boyutundaki bir ekranda, orijinal görüntü ayrıntıyı kaybeder ve bu da etkisini azaltır.

Bu resim bir grafik veya infografik olsaydı, daha küçük bir ekranda okunaksız hale gelebilirdi. Bu nedenle, birden fazla görüntü elde etmek için ekstra çaba göstermelisiniz. Bu yaklaşıma “duyarlı sanat yönetimi” denir. Bu, resimlerin kullanıcılarınıza gösterilme şekli üzerinde size biraz daha fazla kontrol sağlayan bir tarayıcı hilesidir.

Orijinal örnekle bunun nasıl çalıştığı aşağıda açıklanmıştır. Bu sefer her boyut için farklı fotoğraflar çektim – 800, 400 ve 200 piksel genişliğinde. Yayınlandığında, yüzleri her birinde yaklaşık olarak aynı boyuttadır.

800 piksellik yatay versiyonda, kızlardan biri köpeğimizle birlikte merdivenlerde otururken, diğeri arka planda mahalleye bir bakış atarak korkuluk boyunca duruyor. 400 piksellik dikey versiyonda, her iki kız da, her iki korkuluk da görünecek şekilde, birinin yanında köpekle basamaklarda oturuyor. 200 piksellik dikey versiyonda, her kız ve köpeğin kendi adımı vardır ve yalnızca bir korkuluk görünür.

Bu yaklaşım COPE değildir. COPE-M'nin çoğunlukla olmayan kısmıdır. Kendim için üç kat daha fazla iş yarattım. Bu nedenle, zaman alan bu çalışmayı yalnızca temel dönüştürme içeriğiyle sınırlandırmalısınız.

Çok kaynaklı görüntülerin nasıl kodlandığını görün

Bu makale, bu tür bir kodun nasıl yazılacağına dair bir eğitim olmasa da, neye benzediğini görmek faydalı olabilir:

“Resim” etiketleri arasında, görsel genişliğine göre isimlendirilen üç kaynak görseli belirledim:

• jpg
• jpg
• jpg

Şimdi, her görüntü kesme noktasına ulaştığında devreye girecek:

• Akıllı telefonlar için 499 piksel (maks)
• Tabletler için 799 piksel (maks)
• Masaüstü için 800 piksel (minimum)

COPE-M'nin markanız için çalışmasını sağlayın

Çoğu dijital varlık yönetimi (DAM) sistemi, tek bir görüntünün farklı boyut ve oranlarda birden çok çıktısını oluşturabilir. Fotoğrafları yeniden çekemiyorsanız, tüm ekran boyutlarında en iyi deneyimi sağlamak için onları kırpın. Çok fazla iş olabilir, bu nedenle tasarımcılarınızdan veya geliştiricilerinizden web sitenizdeki her resmi yeniden tasarlamasını istemeyin. Etkiye odaklanın.

SEO bir öncelik ise, çoklu görüntü yaklaşımını uygulamadan önce SEO uzmanlarınızla görüşün. Google'ın algoritması, masaüstü ve mobil cihazlarda tam olarak aynı deneyimi sağlamayan web sayfalarını cezalandırabilir. İnsanlar için daha iyi bir deneyim sağlıyor olsanız bile, bir Google tarayıcısı bunu henüz bilmiyor olabilir. Tabii ki, daha fazla kişi daha iyi bir görsel deneyimi nedeniyle sayfanızı zamanına layık buluyorsa, Google bundan hoşlanacaktır.

Takımın nasıl? Bir dizi ekran boyutuna uyum sağlamak için bazen önemli resimlerinizin birden çok sürümünü oluşturuyor musunuz? Görüntülerinizi birden fazla cihazda test etmekten ne öğrendiniz? Yorumlarda bana bildirin.

Kapak resmi Joseph Kalinowski/Content Marketing Institute