Web Resimlerinizle Ne Zaman KOPYALAMAMALI [Video]

Web tabanlı görsel içeriğiniz hakkında stratejik düşünmek için, hangi görselleri kullanacağınızı seçmekten daha fazlasını yapmalısınız; Ayrıca bu görüntülerin büyük ve küçük ekranlarda çalıştığından emin olmalısınız.

Bir görüntü tüm ekran boyutlarında çalışıyorsa, harika. Bir dosya yükleyin (görüntüyü tek kaynaklı) ve hazırsınız.

Tüm görüntüler hayatınızı o kadar kolaylaştırmaz. Bazen insanlara herhangi bir cihazdaki görüntüden ihtiyaç duydukları şeyi vermek için bir görüntünün birden çok sürümünü sağlamaya değer.

The Medicines Company'de kıdemli içerik stratejisi yöneticisi olan Buddy Scalera da öyle diyor. Akıllı İçerik Konferansı konuşmasında, Ölçeklendiren Görsel İçerik Stratejisi Yaratmak ve Yürütmek, Buddy bize onun tek kaynak için olduğunu söyledi. Kendisinin ve diğerlerinin "çoğunlukla COPE" (COPE-M) dedikleri şeyi, özellikle de görüntülere gelince, savunuyor.

COPE, "bir kez oluştur, her yerde yayınla" anlamına gelir. COPE içeriği, tek kaynaklı içeriktir. Birçok yönden COPE içeriği idealdir. Bir kez bir içerik yığını oluşturursunuz - bir ürün açıklaması, bir şartname, bir tanım, bir görüntü - ve sistem bu yığınları birden fazla çıktıya çekebilir (yapıştırmaz). Kaynağı güncellediğinizde, güncelleme deponuzda dalgalanır. COPE içeriği zariftir. Verimli. Mantıklı. Şirketlere çeviri maliyetlerinde milyonlarca dolar kazandırır. Utanç verici, çılgınca, dava açan tutarsızlıklardan kaçınmalarına yardımcı olur. COPE metin, ses ve videoyla iyi çalışır (YouTube kullanıyorsanız).

Yine de bazen COPE, gitmenin yanlış yoludur. Modern tarayıcılar metninizi yeniden akıtır, ancak görüntüler cihazlarınız için küçültülür. Masaüstünde harika görünen bir görüntü, akıllı telefonda tanınmayabilir. (Merhaba, sıkıştırın ve yakınlaştırın.)

Bu, COPE-M'deki M'nin devreye girdiği yer. Buddy, "İçeriğinizi çok kanallı yeniden kullanıma hazırlamak iyi bir hedef olsa da, COPE modelindeki tüm içerik ölçekleri etkili bir şekilde ayarlanmıyor" diyor.

Bu makalede, Buddy'nin ICC konuşmasındaki tavsiyelerini özetliyorum. Bu gönderideki tüm resimler slaytlarından ve aksi belirtilmedikçe tüm alıntılar onun konuşmasından ve onunla daha sonra yaptığım konuşmalardan geliyor.

Bazı resimlerle COPE yapmak neden zordur?

Buddy, görüntülerle ilgili “doğruluk bombası” dediği şeyi düşürür: Bunlar metinle aynı değildir.

Metin, kendi görünümünden ayrılabildiği için, kendisini tek kaynaklı hale getirir. Basamaklı stil sayfaları, alttaki metin kaynağını değiştirmeden metnin görünümünün bir örnekten diğerine değişmesini sağlar. "Metin, dijital dünyada harika çalışan harika, esnek, akışkan, yeniden kullanılabilir, kanaldan bağımsız bir varlıktır" diyor.

Görüntülerde öyle değil. Görünüşlerinden ayrılamazlar. Görüntülerde tek bir boyut her zaman hepsine uymaz.

Justyn Hornor'un birkaç yıl önce söylediği gibi, duyarlı web tasarımı için "odadaki fil" "görüntülerin nasıl işleneceğidir". Küçük bir görüntü bir cep telefonunda net ve yüksek çözünürlüklü bir monitörde gülünç derecede küçük görünebilir. Daha küçük bir görüntünün yeterli olacağı küçük bir aygıtta büyük bir görüntünün oluşturulması uzun zaman alabilir.

Çoklu kaynaklı görüntüler hakkında nasıl düşünülür

Tek bir görüntünün yüksek ve alçak uçlardan ödün vererek tüm cihazlarda çalışmasını beklemek yerine, en azından ara sıra birden fazla görüntü yüklemeyi ve ardından sisteme her birini hangi kesme noktasında kullanacağını söylemeyi faydalı bulabilirsiniz.

Bir kesme noktası, sistemin bir görüntüyü çekmeyi bırakıp bunun yerine diğerini - aygıtın çözünürlüğüne bağlı olarak daha büyük ya da daha küçük bir tane - çektiği noktadır. Bu çizim olası üç kesme noktasını göstermektedir: 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.

Kesme noktaları cihaz genişliğine göre tanımlanır çünkü sonsuz dikey kaydırılabilirliğe sahibiz ancak genişliğimiz sınırlıdır.

Buddy, şirketindeki içerik ekiplerinden birinin, doktorların belirli bir ürünle ilgili sorularını yanıtlayan bir grafiği içeren bir broşür bastırdığı bir zamanı anlatıyor.

Grafik baskıda harika görünüyordu. Sonra bunu bir web sitesine koydular ve küçüldü. Bir akıllı telefonda görüntülendiğinde, grafik okunamıyordu. Bir hastanede akıllı telefondan bir şey arayan insanların bir aciliyeti vardır. Cevaba ihtiyaçları var. Kıstırıp yakınlaştırmalarına gerek yoktur.

Çoğu durumda, web sitenize tek bir büyük resim yüklemek (başka bir deyişle, resmi tek kaynak olarak) ve tarayıcının bunu sizin için ölçeklendirmesine izin vermek kabul edilebilir. Diğer durumlarda, görüntüler küçük bir pencere veya ekrana sıkıştırıldığında neredeyse okunaksız hale gelir. Bu noktayı açıklamak için Buddy, bir tarayıcı kızlarının 800 piksel genişliğindeki bir fotoğrafını ölçeklendirdiğinde neler olduğunu gösterir:

Bu bir COPE örneğidir. Ne yazık ki, tarayıcı bu resmi dar bir pencere veya ekran için ölçeklediğinde, kızların yüzlerini görmek zor. Bu görüntü bir grafik veya infografik ise, daha küçük ekrandaki metin okunaksız hale gelebilir.

Marka anlatımınız için kritik olan görsel öğeler için, birden çok görüntü kullanmak için fazladan çaba sarf etmek isteyebilirsiniz. Buddy'nin "duyarlı sanat yönetimi" olarak adlandırdığı bu yaklaşım, insanlara herhangi bir ekrandaki önemli ayrıntıları daha iyi görme şansı veriyor.

Buddy, görüntü genişliğini 800'den 400'e ve 200 piksele değiştirirken, görüntü kompozisyonunu da değiştiriyor: Bu COPE değil. Bu görüntü planlamasıdır. 800 piksel genişliğindeki fotoğraf, kızları ve köpeği üç genişlikte yatay çekim olarak adlandırdığı şekilde yan yana gösteriyor. 400 piksel genişliğindeki fotoğraf, kızları daha sıkı bir araya getiriyor ve iki geniş dikey çekim için köpeği öne doğru itiyor. 200 piksel genişliğindeki çekim, üç figürü de totem direği düzenlemesine sıkıştırıyor.

Buddy'nin örnek sayfasını bir tarayıcıda görüntülüyorsanız ve pencereyi genişletip daralttıysanız, HTML kodunda belirtilen kesme noktalarından birine her ulaştığınızda görüntü değişir. Kullanıcı deneyimi hakkında fikir edinmek için şu altı saniyelik videoyu oynatın:

Bu davranışı kendi tarayıcınızda deneyimlemek için, pencere genişliğini değiştirmenize olanak tanıyan bir cihazda Buddy'nin örnek sayfasını ziyaret edin.

Bu gönderi, bu tür bir kodun nasıl yazılacağına dair bir öğretici olmasa da, bu kodun neye benzediğini görmek yararlı olabilir:

Dikkat edilmesi gereken en önemli şey ("resim" etiketleri arasına bakın), Buddy'nin üç kaynak resim belirtmiş olmasıdır:

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

Her JPG dosyası bir kesme noktasına atanır:

• maks. genişlik: 499 piksel
• maks. genişlik: 799 piksel
• min-genişlik: 800 piksel

Kaç kesme noktası oluşturmalısınız? Maksimum ve minimum genişliklerini nasıl belirliyorsunuz? Kural yok. Buddy'nin işaret ettiği mükemmel bir makalede Jason Grigsby, "Görüntü kesme noktalarını seçmek herkesin karşılaşacağı bir şey ve açıkçası sizin için iyi bir cevabım yok" diyor.

Muhtemelen web sitenizdeki her görsel için birden fazla görsel oluşturmayacaksınız. Müşteriniz için hangi görüntülerin gerçekten önemli olduğunu belirleyin. Bir görüntünün (örn. Grafik, çizelge, ürün fotoğrafı) kullanıcınız için gerçekten önemli olduğunu biliyorsanız, o görüntünün nasıl işleneceğini belirlemek için onu web tarayıcısına bırakmayın. Kontrol altına almak.

Bazı dijital varlık yönetimi (DAM) sistemlerinin farklı boyut ve oranlarda tek bir görüntünün birden çok çıktısını oluşturabildiğini belirtmek gerekir. Buddy'nin ayrı fotoğraflarla yaptığı şeyi kopyalamayacak, ancak yazılım sisteminizin neler sunduğunu keşfetmelisiniz.

Önerebileceğim tek kural, görsellerle ilgili stratejik kararlarınızı, diğer içerikler hakkında stratejik kararlar alırken yaptığınız gibi vermek : Kendinize hedef kitlenizin neye ihtiyacı olduğunu ve nedenini sorun. Çeşitli görüntüler ve kesme noktaları ile denemeler yapın. Tekrar et.

Görsel içeriğiniz için ölçeklenebilir bir strateji oluşturma ve uygulama hakkında Buddy'nin söylediklerinden daha fazlası için, açıklamalı ICC sunumuna bakın.

Görüntülerinizi ne zaman çoklu kaynak yapmalısınız?

Her görüntü için birden çok kaynak dosya oluşturma zahmetine girmek istemeseniz de, dönüştürme sayfalarınızdaki ana görüntüler gibi en çok etkiye sahip görüntüleri birden çok kaynakla kullanmayı düşünün. Buddy'nin dediği gibi:

Web sitenize harcanan tüm parayı düşünün. Makinelerin tüm resimlerinizle nasıl başa çıkacaklarına karar vermesine izin veriyorsanız ve insanlar bazen önemli resimleri göremiyorsa, bir fırsatı kaçırıyorsunuz demektir.

Web sitenizdeki önemli sayfaları ve görselleri biliyorsunuz. Muhtemelen bunları analiz yazılımınızda zaten etiketlemişsinizdir. Buddy, bu sayfaları "yalnızca tasarımcılarınızın içerik oluşturmak için kullandıkları muhteşem geniş ekran monitörlerde değil" mobil cihazlarda test etmek özellikle önemlidir.

Ayrıca, çoğu kişinin küçük cihazlarda görüntülediği diğer sayfalardaki çoklu kaynaklı görüntüleri de düşünün. "Akıllı telefon cihazlarınızdan ne kadar trafik aldığınıza bakın. Bizim gibiyse,% 65, sizin seyirciniz. Onlara hizmet etmelisiniz, ”diyor Buddy. Akıllı telefon kullanıcıları sıkıştırmadan ve yakınlaştırmadan bir görüntüyü okuyamazsa, görüntüyü küçük ekranlar için özelleştirmek isteyebilirsiniz.

Hangi görüntülerin çoklu kaynak yapılacağını öğrenmenin en iyi yolu , web sayfalarınızı birden çok cihazda test etmektir . İçerik stratejisi, tasarım, içerik mühendisliği ve kullanıcı deneyimindeki meslektaşlarınız da dahil olmak üzere tüm içerik ekiplerinin, web sitenizin görüntülerinin akıllı telefonlara nasıl yüklendiğini bilmesi gerekir. Bir yığın cihaz ve bir tasarımcı, içerik stratejisti veya UX kişisi edinin. İçeriğinizi müşterinizin yapacağı şekilde yükleyin. Buddy, "Web sitenize sevgiyle yüklediğiniz resimler biraz sıkıştırılmış görünüyorsa, tarayıcının resim varlıklarınızı ölçeklendirdiği yolları düşünün" diyor ve buna göre plan yapın.

Sonuç

İçerik sistemlerimiz, insanlara herhangi bir cihazdaki her bir görüntünün ideal deneyimini otomatik olarak verecek kadar akıllı hale gelene kadar, ne zaman COPE yapacağınızı ve ne zaman resimlerinizle COPE yapmayacağınızı düşünün. Ekstra çaba sarf etmek ve belirli görüntüleri çok kaynaklı hale getirmek işe yarayabilir.

Takımın nasıl? Bazen çeşitli ekran boyutlarını barındırmak için önemli resimlerinizin birden çok sürümünü oluşturuyor musunuz? Görüntülerinizi birden fazla cihazda test ederek ne öğrendiniz? Bir yorumda bize bildirin.

İşte Buddy'nin konuşmasından bir alıntı:

CMI Baş İçerik Danışmanı Robert Rose'un özel hikayelerini ve görüşlerini içeren haftalık Pazarlamacılar için İçerik Stratejisi e-bültenimize kaydolun . Tanıştığımız diğer birçok pazarlamacı gibiyseniz, her Cumartesi onun düşüncelerini okumak için sabırsızlanacaksınız.

Kapak resmi Joseph Kalinowski / Content Marketing Institute