HTML5 ile Görüntülü Reklamcılık – Duyarlı reklamlar nasıl oluşturulur

Bu makalede, HTML5 duyarlı banner reklamların neden tüm dijital reklamverenler için bir zorunluluk olduğunu açıklıyoruz. Tasarımcılardan dijital uzmanlara, ajanslardan şirket içi ekiplere kadar HTML5 görüntülü reklamcılık artık varsayılan banner formatıdır.

Özellikle, her zamankinden daha fazla sayıda cihaz ve hizmet verilecek platformla birlikte, izleyicilerin davranışlarına uyum sağlamak çok önemlidir. Banner reklamınız uyumlu değilse, ekran boyutundaki değişikliklere yanıt veremiyorsa veya mobilde çalışmıyorsa, başınız belada demektir. HTML5 duyarlı görüntülü reklamcılık, markanızın çevrimiçi ortamda başarılı olması için ihtiyaç duyduğunuz esnekliği ve teknolojiyi sunar.

HTML5, özellikle dijital pazarlamacılara şunları yapma olanağı sunar:

• Birçok biçime ve boyuta hızla ölçeklendirin
• Tasarım üzerinde nihai kontrole sahip olun
• Kolayca reklam çeşitleri ve çevirileri oluşturun
• Zengin medya afişlerini kitlesel olarak üretin
• Video ve mobil görüntülemenin büyümesinden yararlanın
• Banner'ları veri akışlarıyla dinamik olarak güncelleyin
• Ekipler arasında, kurum içinde etkin bir şekilde işbirliği yapın

Evet, duyarlı görüntülü reklamlar oluşturmak hiç bu kadar önemli olmamıştı, özellikle de günümüzde güzel görüntülü reklamınızın mobil cihazlarda görüntülenme olasılığı her zamankinden daha yüksek olduğundan. Bannerflow'un 2020 araştırmasına göre, mobil görüntülü reklamlar masaüstünü bir miktar geride bırakıyor. Bugün Avrupa'da görüntülü reklam görüntülemelerinin yaklaşık üçte ikisi mobil cihazlara yöneliktir. Ayrıca, mobil kullanıcılar her gün akıllı telefonlarında dört saatten fazla zaman harcadıklarında - bu, bir dijital reklamverenin göz ardı etmeyi göze alamayacağı etkileşimdir. Statik, gifler ve flash banner'ların eski dünyası çoktan bitti - ya da en azından olması gerekiyor.

Neden HTML5 görüntülü reklamcılık oluşturmalıyım?

HTML5 görüntülü reklamcılık üretmek için daha fazla nedene mi ihtiyacınız var? Başlangıç ​​olarak, oyunumuz tamamen dönüşümle ilgili ve rekabetçi. Herkes dikkat çekmek için can atıyor - büyüleyemiyor ve oyun bitiyor. HTML5, zengin medya ve çok çeşitli reklam biçimleri aracılığıyla benzersiz tasarım fırsatları sunar. Afiş tasarımı için en iyi uygulamayı takip etmiyorsanız, bir rakibin izleyeceğine bahse girebilirsiniz. Bunun da ötesinde, görüntülü reklamcılık, özellikle programatik içinde erişim açısından her zaman büyüyor.

Örneğin, İngiltere'de neler olup bittiğini ele alalım. Bir eMarketer raporuna göre, 2020'de Birleşik Krallık reklamverenleri programatik reklamcılık için 6,79 milyar sterlin harcadı. Programatik görüntülü reklam harcamaları, Covid-19 pandemisinin etkisine rağmen, şu anda Birleşik Krallık'taki tüm dijital görüntülü reklam harcamalarının %92'sini temsil ediyor. Ve bu oranın 2022 yılına kadar %94,5'e ulaşması ve 9,01 milyar sterline ulaşması bekleniyor! Bu büyümeden en iyi şekilde yararlanmak için HTML5 aracılığıyla daha iyi reklamlar üretmek bir öncelik olmalıdır.

Artı, işletmeler artık tüm dijital pazarlamalarında "önce mobil" düşüncesini benimserken, web sitenizin, açılış sayfalarınızın ve banner'larınızın duyarlı olduğundan emin olmak minimum bir gerekliliktir. HTML5, mobil kullanıma hazır, duyarlı ve zengin özelliklere sahip banner'lar oluşturmanıza olanak tanır. Masaüstü için statik bir kampanya tasarlamak ve ardından her bir banner'ı ayrı ayrı ölçeklendirmek yerine, HTML5 ile ölçeği büyütebilirsiniz!

Reklamcılık uzun süredir mobil hale geldi ve HTML5, ihtiyacınız olan banner'ları oluşturmanın yolu.

HTML5 ile anlaşma nedir?

HTML5 evrensel olarak benimsenmeden önce, farklı cihazlarda bir reklam kampanyası yürütmek zor bir işti. Banner reklamın görünebileceği tüm farklı ekranlar için manuel olarak banner yapmak bir slogandı. HTML5, tıpkı duyarlı web siteleri için olduğu gibi, banner reklamlar oluşturmanın en uygun yoludur.

HTML5 Köprü Metni Biçimlendirme Dilinin en son güncellemesidir. Duyarlı olanlar da dahil olmak üzere web sayfalarının içeriğini ve tasarımını tanımlamak için kullanılan standart dildir. HTML5, cihazlar arasında banner reklamlar yayınlama esnekliği sağladığı için çevrimiçi reklamcılıkta önemlidir.

Hem yayıncılara hem de reklamverenlere, tüm platformlara uyan banner'lar aracılığıyla uyarlanabilir reklam kampanyaları oluşturma araçları sağlar. Diyelim ki flaş kullanmaktan farklı olarak (oh, ne kadar tuhaf) bu, aynı reklamın yüzlerce versiyonunu oluşturmak zorunda olmadığınız anlamına gelir. Reklam sürümlerinin sayısını azaltmak, hata olasılığını da azaltacak ve banner üretiminizi artıracaktır.

Bir HTML5 başlık reklamında, metin, resim, video ve JavaScript, herhangi bir web sayfasıyla aynı şekilde ayarlanabilir - bunlar düzenlenebilir. HTML5 banner reklamları da dinamik olarak optimize edilir, böylece reklam her yerde mükemmel görünür. Dahası, HTML5 banner reklamları mobil cihazlarda mükemmel şekilde çalışır! İşlevsellik kaybı da olmadan, daha geniş bir kitleye ulaşmak kolaydır.

HTML5 banner'ları oluşturmanın iki yolu vardır

Esasen, bugün çevrimiçi banner reklamlar oluşturmanın iki farklı yolu vardır.

İlk olarak, banner reklamları duyarlı hale getirmek için kendiniz manuel olarak kodlayabilirsiniz. Ve evet, çevrimiçi olarak bunu nasıl yapacağınızı gösteren çok sayıda öğretici ve şablon var. Ancak süreç yavaştır ve HTML5 ve CSS hakkında yeterli bilgiye sahip olmanız gerektiği anlamına gelir. Artı, elbette bir tasarımcının parıltısına da sahip olmanız gerekiyor! Nadir bir kombinasyon.

Alternatif olarak, yaratıcı üretim otomasyonu için tasarlanmış bir reklam oluşturucuya sahip Bannerflow gibi bir yaratıcı yönetim platformunu kullanabilirsiniz. Bunlar, sizin için kodlamayı halletmeye yardımcı olur ve tüm banner'larınızı bir düğmeye tıklayarak duyarlı hale getirir. Ayrıca, keşfedeceğimiz gibi, HTML5'ten yararlanmak için birçok yerleşik yol sunarlar. Bunlar, harika video banner'larının geliştirilmesinden veri beslemelerini içeren dinamik banner'lara kadar değişebilir.

Gerçek şu ki, yaratıcı yönetim platformları, bir kampanya oluşturmak ve ölçeklendirmek için gereken süreyi azaltırken, HTML5 afiş üretiminin odağını sıkıca tasarıma yerleştirir.

HTML5 duyarlı görüntülü reklam oluşturma

HTML5 duyarlı banner reklamlar oluşturmak nispeten basittir. Ancak, tüm dijital afişlerde olduğu gibi, uyulması gereken kurallar ve en iyi uygulamalar vardır. HTML5 görüntülü reklam oluştururken şunları dikkate almaya değer:

HTML5 banner boyutlarınızı kontrol edin

HTML5'e duyarlı bir düzen oluştururken, öğelerin, banner reklamların izlemesi gereken kurala benzer değişken genişliklere sahip olması gerekir. İstediğiniz yüksekliği de kullanabilirsiniz – ancak bu, reklamınızın o yükseklikte kalacağı anlamına gelmez. Duyarlı afişler oluştururken en iyi uygulama, geleneksel afiş boyutlarıyla aynı yükseklikleri kullanmaktır. Bu, yayıncılar ve reklam ağlarıyla uyumluluğu korumak için böyledir.

Her zaman reklam ağları ve yayıncılar tarafından sunulan belirli boyutlar için HTML5 banner'ları tasarlayın (veya değiştirin). Örneğin, burada Google Ad Manager tarafından sunulan boyutların bir listesi verilmiştir. Banner reklamlarınızı bu boyutlara dayandırırsanız, çoğu cihazın reklam kreatifinizi yayınlandığında doğru şekilde göstereceğinden emin olabilirsiniz.

Resimler, afiş tasarımı ve HTML5

HTML5 uyumlu banner'lar oluştururken tasarım ve görseller üzerindeki kontrolünüz benzersizdir. Mesajlar ve animasyonlar için çerçevelerin kontrolü kolaydır. Ama açgözlü olma! Banner'ınız büyük olasılıkla yalnızca 5 ila 15 saniye arasında izleyiciye görünür olacaktır - bu nedenle bu süreyi en iyi şekilde değerlendirin ve tasarım seçimlerinize odaklanın.

Ve işte burada işler ilginçleşiyor! Bannerflow gibi bazı yaratıcı yönetim platformlarını kullanırken, HTML5 banner'ınızda kullanılan resimler otomatik olarak ayarlanır ve sıkıştırılır. Bu, banner'ınızın görsel boyutunun ve ağırlığının reklam ağlarına uyacak şekilde ince ayarlandığı anlamına gelir.

Ancak – tüm bu harika teknolojiye rağmen – herhangi bir görüntüyü piksel olarak maksimum 4000×4000 (genişlik ve yükseklik) boyutunda tutmaya çalışmakta fayda var. Ayrıca, daha iyi sonuçlar elde etmek için 4000×4000'i aşan süper büyük ham dosyaları düzenlemek her zaman en iyisidir. Aslında, her zaman mümkün olan en küçük resimleri kullanmaya çalışmak en iyi uygulamadır. Bu, bir afişin ağırlığını daha da azaltmaya yardımcı olacaktır. Görüntü ne kadar küçükse o kadar iyidir (ama elbette kaliteyi düşürmeden!).

Ayrıca, banner'ınızda kullandığınız resim türü için en iyi resim biçimini seçmeye değer. Örneğin, arka plan için her zaman bir JPEG kullanılmalıdır. Saydam veya bir nesne ise PNG kullanın. Logo türleri ve çizilmiş nesneler için (fotoğraflar hariç) SVG'ler – dosya boyutu küçük ama genişletildiğinde netliği korumada iyi. Görüntü dosyası türlerinin bir kombinasyonu genellikle daha iyi sonuçlar sağlar.

Ama unutma, söylemeden geçen bazı şeyler var! Ana görüntünüzün tam odakta olduğundan emin olmak gibi. Bununla birlikte, temiz, basit bir tasarım her zaman en iyi sonucu verir.

Ölçekleme, sürüm oluşturma ve çevirme

Otomatik olarak optimize edilen HTML5 uyumlu banner'lar oluştururken bile, mümkün olduğunca çok kişiye ulaşmak için mümkün olduğunca çok sürüm oluşturmanız gerekir. Banner boyutları ne kadar fazlaysa o kadar iyidir. Medyanın türüne bağlı olarak, ne kadar çok banner'ınız varsa, herhangi bir programatik teklifi kazanma olasılığınız o kadar artar.

Açıkça görülen en iyi uygulama, HTML5 banner'larının birden çok sürümünü ölçeklendirme ve oluşturma söz konusu olduğunda verimli ve hızlı bir yaratıcı yönetim platformu ve bir reklam oluşturucu kullanmaktır. Daha da iyisi, görüntülü reklamcılığınızı çoğaltabilir, tercüme edebilir ve çeşitlerini yapabilirseniz, birden fazla pazarda çalışmak çok daha kolaydır.

HTML5 banner'larındaki içeriği değiştirmek de kolaydır. Ayrıca, kampanyaları saniyeler içinde çoğaltabilmek ve ölçeğini genişletebilmek, farklı günler için farklı varyantlar planlamanın çok daha kolay olduğu anlamına gelir. Açıkça söylemek gerekirse, HTML5 duyarlı afişler, programatik gibi otomasyon hizmetlerinde kullanım için mükemmeldir.

Zengin medya banner'ları

HTML5 olmadan zengin medya banner'ları olmazdı. İzleyicilerle etkileşime giren, duyarlı olan ve birden fazla cihazda çalışan banner'lar yapmak imkansız olurdu. Zengin medya reklamları, daha yüksek düzeyde etkileşim sağlar ve markanız için iyidir. Kayıt formlarından arama çubuklarına ve banner içi oyunlara kadar HTML5, dijital pazarlamacıların izleyicilerle çeşitli şekillerde etkileşim kurmasını sağlar.

Ancak zengin medya banner'larını nasıl kullandığınıza dikkat edin. Etkililikleri büyük ölçüde kullanmayı seçtiğiniz afiş biçimine bağlıdır. Çok fazla bilgi eklemeye veya aşırı karmaşık hale getirmeye çalışmayın. Etkileşim bir veya iki adımdan fazla olmamalıdır; tek bir şeye odaklanmaya çalışın ve bunu izleyici için hızlı ve kolay hale getirin.

Örneğin, çevrimiçi bir form, gereken minimum etkileşimi içermelidir - artık, banner'da başlar ve açılış sayfasında biter. İyi bir HTML5 zengin medya banner kampanyasının anahtarı, yürütmede ciddi ve tasarımda sezgisel olması gerektiğidir.

Bugün, bir banner'da yer alan bir ürün için doğrudan ödeme yapabilme gibi özelliklerden yararlanabilirsiniz. Veya sohbet robotlarının üstündeki görüntülü reklamda görüldüğü gibi - zengin medya banner'ları ile gelecekteki uygulamalar sonsuzdur!

Video ve HTML5 görüntülü reklamcılık

Görüntülü reklamcılıkta video kullanımı her zaman artıyor. Yalnızca Avrupa'da, çevrimiçi video gösterimi, video olmayan gösterimden üç buçuk kat daha hızlı çoğalıyor. HTML5 görüntülü reklamınızda video kullanmak, daha özgün görünmenize ve izleyicilerle bağlantı kurmanıza yardımcı olur ve bu da dönüşüme yardımcı olur. HTML5 aynı zamanda video kullanan banner'ların oluşturulmasını da kolay hale getirir.

HTML5 başlıklarını kullanarak videoyu nasıl kullandığınıza ilişkin birçok seçeneğiniz olur. Temel düzeyde bir video, bir afiş için arka plan olarak kullanılabilir. Veya daha yaratıcı bir şekilde, afiş animasyonunun bir parçası olabilir. Örneğin, harekete geçirici mesaj (CTA) çerçevesiyle biten bir fragman.

Video görüntülü reklamlar üretmek kolaydır

Video kullanırken birkaç önemli ipucu, logonuzun HTML5 video başlığında her zaman görünür olmasını sağlamaktır. Ana mesajınızla başlayın ve videonun tekrarlandığından emin olun. Ayrıca videoda maksimum 1-3 aşamaya sahip olmaya çalışın: izleyicilerin dikkatini çekin, etkileşimi derinleştirin ve her zaman bir CTA ile bitirin. Videolarınızı her zaman "sessiz" olarak ayarlayın ve altyazıları etkinleştirin (gerekirse).

İyi bir yaratıcı yönetim platformuyla birleştirilen HTML5, kodlamanın da gerekli olmadığı anlamına gelmelidir. Bu, afişin arka ucunda herhangi bir şey yapmaya gerek kalmadan birçok fikrin gerçeğe dönüşebileceği anlamına gelir.

Ayrıca, insanlar cep telefonlarında her zamankinden daha fazla sayıda video afişleri izliyorlar. Bu nedenle, mobil kullanıma hazır, duyarlı bir HTML5 video görüntülü reklamınız olduğundan emin olun.

Ayrıca, HTML5 video banner'larınızı mp4 formatında dışa aktarma seçeneğiniz varsa, bu video reklamları sosyal ağlar üzerinden yükleyebilirsiniz. Şirket içi ekiplerin video reklamlar oluşturması, HTML5 öğelerini yeniden kullanmaları ve dijital kampanyalarının erişimini genişletmeleri için kolay bir yol. Bannerflow'daki reklam yaratıcısı Creative Studio'nun her şeyi bu kadar kolaylaştırması aşağıda açıklanmıştır:

Mobil HTML5 duyarlı banner reklamlar oluşturma

Mobil HTML5'e duyarlı görüntülü reklamlar oluştururken her şey, başlangıçta doğru biçimi kullanmakla ilgilidir. Bir masaüstü banner'ını mobil boyuta küçültmek yerine, reklamınızı özellikle mobil cihazlar için tasarlayın. Bazı çevrelerde, mobilin popülaritesi ve etkileşimi göz önüne alındığında, tüm kampanyaları önce mobil tasarlamak ileriye giden yol olarak görülüyor.

HTML5 banner'larının oranlarının herhangi bir ekrana sığacak şekilde ölçekleneceğini hatırlamakta fayda var. Ancak, banner'larınızı seçilen mobil formatları göz önünde bulundurarak tasarlamak yine de en iyi uygulamadır.

Mobil afiş tasarımının göz önünde bulundurulması gereken bir yönü, tüm kopyaların okunabilir olduğundan emin olmaktır. Evet, buna yazı tipi boyutu da dahildir, ancak mesajınızı da düşündünüz mü? Aynı mesajı bir masaüstü banner'ı olarak ifade etmek için mobil HTML5 banner'ınıza daha fazla çerçeve eklemeniz gerekebilir. Yine, kullandığınız formata bağlıdır, ancak olması gerekenden fazlasını tek bir kareye sıkıştırmaktan kaçının.

Ek olarak, büyük kopya gövdeleri bırakın ve görüntülerinizin etkisine odaklanın. Ayrıca, verilen ekran boyutuna göre, reklamınız ilgi çekici olmalı ve müdahaleci olmamalıdır. Dijital reklamcılık yıllar önce mobil hale geldi - tüketicilerinizin olduğu yere gidin ve onlar için harika HTML5 uyumlu banner'lar üretin.

Dinamik reklamlar

HTML5 olmadan ilgi çekici dinamik, veri destekli banner reklamlar oluşturamaz ve sürdüremezsiniz. Kendinizi yalnızca en temel banner'ları üretmekle sınırlayın ve kendinizi tek bir mesajla sınırlı bulacaksınız. Bununla birlikte, bir rakip potansiyel olarak 2000'i teslim edebilir. Evet, gerçekten: tutarlı veri akışı güncellemeleri ve otomasyon yoluyla. Bir HTML5 uyumlu banner, statik olarak bir mesaj oluşturmak için gereken sürede 2000 mesaj gönderebilir.

Belirtildiği gibi, HTML5'in güzelliği size tam kontrol sağlamasıdır. Aynısı, bir veri akışına bağlı bir banner için de geçerlidir - ancak dahası: banner'ı gerçek zamanlı olarak güncelleme seçeneğiniz vardır.

Duyarlı görüntülü reklamlarınızı kişiselleştirin

Örneğin, bir e-ticaret mağazasındaki en popüler öğeleri gösteren bir HTML5 banner kampanyası alın. Bir ürün tükendiğinde bu, dinamik afişte gösterilen ürün listelemesinde otomatik olarak yansıtılır. Bu hem izleyiciler hem de e-ticaret işi için harika!

Aynı fikir iGaming şirketleri tarafından da kullanılabilir. Örneğin, bir maç sırasında oranlar dinamik olarak - bir afiş içinde - değiştirilebilir. HTML5 destekli dinamik reklamlarla kullanabileceğiniz birçok farklı kişiselleştirilmiş kampanya türü vardır.

Ayrıca, bir ürün feed'ini gerçek zamanlı olarak güncellemek en iyi uygulamadır. Sonuçta, verilerin görüntülendiği biçim hakkında eleştirel düşünmeniz gerekir. Banner'ınızda kullandığınız verilerin izleyiciler tarafından anlaşılır olduğundan emin olmak çok önemlidir; Bu, tarihler ve fiyatlardan oranlara kadar değişebilir. Bu, pazarlara ve dillere göre de değişebilir. Örneğin, Amerikalıların tarih yazma şekli, İsveçlilerin tarih yazma biçiminden farklıdır. Veya İngilizlerin ve İsveçlilerin bahis oranlarını anlamalarının farklı yolları.

Son bir tavsiye: Creative Studio gibi iyi bir reklam oluşturucu veya bir yaratıcı yönetim platformu, bir veri akışını değiştirirken filtreleri ve sıralama seçeneklerini ayarlamayı kolaylaştıracaktır.

Sonraki adımlar: şimdiye kadarki en iyi duyarlı banner reklamlarınızı oluşturun!

Umarım şimdiye kadar, dijital görüntülü reklamcılık ihtiyaçlarınız için HTML5'e duyarlı banner reklamlar oluşturmanın en iyi seçenek olduğunu fark etmişsinizdir. Çok fazla esneklik, birden çok ekran ve platformda görüntülenebilirlik ile banner'lar için daha iyi bir teknoloji olamaz. Daha iyi reklamlar, daha iyi tasarımlar, daha iyi ölçümler - hepsi mümkün.

Son olarak, size tüm büyük reklam ağlarının yanı sıra sosyal ağlar için kampanyalar oluşturma olanağı sunan yaratıcı yönetim platformlarıyla, birini kullanmak kurum içi ekibinizin üretkenliğini artırmanın basit bir yoludur. Kampanyaları manuel olarak çoğaltmak ve ölçeğini genişletmek günler (hatta haftalar!) almak artık bir seçenek değil.

Birden çok pazarın, canlı optimizasyonun ve şeffaflığın olduğu bir çağda, HTML5'i benimsemek, pazarlamacıların can attıkları reklam performansına ulaşmalarına yardımcı oluyor.

Bannerflow gibi bir platformun harika reklamlar üretmeye nasıl yardımcı olabileceğini merak ediyorsanız, iletişime geçin.