Kratki vodič za dizajniranje email kreativa

Šta se nalazi u ovom vodiču?

Kako je kodiranje mejlova izuzetno komplikovano, mislio sam da bilo korisno napraviti dokument u kojem bih izložio osnovne savete i smernice za dizajn email kreativa.

Ovaj dokument je deo besplatnog email marketing kursa koji možeš naći na ovoj adresi:
https://www.marketar.rs/besplatni-kurs-email-marketinga/

Update: ukoliko si prijavljen/a na na kurs vođen putem mejla, poslaću ti potpuno novi email šablon, polished i sređen tako da se prikazuje što je bolje moguće u preko 80 email klijenata. Možeš slobodno da je koristiš, menjaš, deliš i tome slično. Ovo je Litmus test kreative:

https://litmus.com/pub/5a303ef

Možeš da nastaviš sa vodičem 🙂

Mejl koji ću koristiti kao primer je jedan od promotivnih mejlova koje smo radili za Bayt.com. Detaljan Litmus test možete videti ovde:

https://litmus.com/pub/dd9ed7f

Ovu HTML kreativu možete preuzeti ovde.

Evo kako kreativa izgleda:

email-sablon-Marketar
Međutim, iako kodirana od strane eksperta1, evo par komparacija koje pokazuju kako se kreativa drugačije prikazuje u različitim klijentima:

Gmail.com vs Outlook.com (browser)

prikaz-mejla-uporedno-u-gmail-i-outlook-online-mail-app-desktop-Marketar

 

Apple Mail vs Windows 10 Mail (desktop)

prikaz-mejla-uporedno-u-apple-mail-i-win-10-mail-app-desktop-Marketar

 

Apple mail (levo) vs Gmail mobile app (desno)

prikaz-mejla-uporedno-u-gmail-i-apple-mail-mobile-app-Marketar

 

Kao što vidiš, razlike mogu biti velike, čak i između bazičnih elemenata kao što je prazan prostor, prelom i širina. Kako ne postoji mogućnost da se kodira kreativa tako da izgleda identično u svim klijentima, dole ćeš naći spisak saveta i instrukcija koje će ti pomoći da počneš.

Pozdrav!


Layout

  • Razmišljaj u tabelama
    Sve u mejlu se kodira u tabelama, koristeći osnovni HTML. Dakle, imaj na umu da će sav sadržaj koji kreiraj biti isečen na kolone i redove. layout email kreative marketar
  • Max width 650px
    Iako možeš da pokušaš i sa širom kreativom, generalno se ne preporučuje, jer se neće dobro prikazivati u barem nekoliko velikih email klijenata.
  • Koristi progressive enhancement
    Pre nego što dodaš zaobljene ivice kontejnerima, uveri se da će dizajn dobro da izgleda i bez njih. Možeš da vidiš iz primera sa početka teksta kako se verzije mogu razlikovati u odnosu na drugi email klijent.
  • Organizuj sadržaj za brzo pregledanje brzo pregledanje marketar Ljudima ne treba više od 15 sekundi u proseku za brzo pregledanje blog mejlova. Za promotivne mejlove im ne treba više od 5 sekundi. Ovaj trend se nastavlja i raspon pažnje se smanjuje.
  • Napravi mesta
    Koristi više slobodnog prostora ako možeš. Mnogi email klijenti zapravo umanjuju slobodan prostor i line spacing, pa je bolje da računaš na to.
  • Poravnaj pravilno
    Ako tvoj mejl nema previse sadržaja, ili su slike u centru pažnje, poravnaj po sredini. Ukoliko je mahom tekstualni mejl, poravnaj na levo.
  • Definiši odeljke
    Odeljci sa različitim sadržajem trebaju biti vidno odeljeni. Koristi druge boje, horizontalne linije ili prazan prostor.
  • Pripremi za mobile Prikaz email kreative u Gmail mobilnoj aplikaciji Marketar
    Responsive se u email tehnologiji obezbeđuje kroz osnovne medija upite. To znači da će sve na levoj strani u istom redu da padne ispod svega na desnoj strani.

Slike

  • Pravilni formati
    Uvek koristi .jpg ili .png formate za fiksne slike. Ako slika ne mora da bude transparentna, koristi .jpg.
  • Fail gracefully
    Uvek imaj na umu da se slike neće prikazati u određenom broju email klijenata i uređaja. Shodno tome, oboji tabele u kojima se slike nalaze, tako da ne bude bela pozadina.
  • Uvek dodaj alt=”” tagove
    Svaka slika mora da ima alternativni tekst koji će da opiše šta se na slici nalazi. Zato što se slika možda neće prikazati, primaoc bi trebalo da može da zna šta je na slici, kako bi možda i ručno uključio slike. Izbegavaj “slika1” i slične generičke opise.
  • Pozadinske slike
    Iako background images mogu da se koriste, imaj na umu da se neće uvek prikazati, tako da nemoj da uključuješ bitne informacije u njih. Koristi samo za stilizovanje kreative.
  • Spremi se za mobile
    Ne stavljaj previše teksta i informacija u slike, jer će se one smanjiti na mobilnim uređajima. Maksimalna veličina slike ne bi smela da ide preko 300kb, ali gledaj da ti sve budu do 50kb, zbog brzine učitavanja.
  • Spremi kreativu za high-res ekrane
    Slike bi trebale da budu u 72 DPI/PPI rezoluciji i skalirane tako da se dobro prikazuju na high-res uređajima. Ako slika treba da se uklopi 300x100px, napravi je da bude 600x200px.
  • Animirani GIF-ovi
    Outlook klijenti u glavnom ne prikazuju animinirane gifove, već samo njihov prvi frejm. Shodno tome, gledaj da ti sve bitne informacije budu sadržane u tom prvom frejmu. Takođe, nemoj da ti gif bude pretežak – maksimalno 400kb.

Fontovi i tekst

  • Koristi 14px-16px font size za paragrafe
    Za duže paragrafe koristi font size 14px. Za kraće 16px.
  • Fail gracefully
    Iako možeš da uvoziš Google, pa čak i custom fontove u kreativu, uvek pripremi zamenski, web-safe font. Mnogi klijenti ne podržavaju uvoženje fontova, tako da planiraj da uvežene zameniš sa sledećim:

    • Sans serif: Arial, Helvetica, Verdana, Trebuchet MS
    • Serif: Georgia, Times New Roman, Courier

Pogledaj primere sa početka teksta i videćeš kako se, recimo, u Windows 10 Mail klijentu ne učitavaju Google fontovi koje smo uvezli na početku definisanja stilova:

pozivanje-google-fontova-u-email-kreativu-marketar

Međutim, kako neki klijenti ne prihvataju uvoženje fontova, pred svaki stil smo definisali prvo web-safe fontove, a na kraju uvežene:

stilizovanje-teksta-u-email-kreativi-marketar

Call to Action (CTA)

  • Pripremi dizajn za CSS dugmiće
    Za CTA dugme ne bi trebalo da koristiš sliku, već stilizovani tekst preko obojene ćelije tabele.

Animacije, apsolutno pozicioniranje i skripte

  • Animacije
    Bilo da je CSS, JS ili Flash animacija, nije joj mesto u mejlu. Interaktivne email creative obično su jako neuspešne, iako izgledaju dobro u browser-u.
  • Skripte
    Kao ni animacije, ni skriptama nije mesto u email kreativama. Iako postoje određeni izuzeci kada eksternu skriptu pozivate kao sliku koristeći <img src=”putanja-ka-skripti”>, što se inače koristi za tracking, ovo su eksterne skripte. Embedded skripte se ne smeju koristiti.
  • Apsolutno pozicioniranje
    Najbolje je da razmišljaš u 2D okvirima. Nešto od pozicioniranja će raditi, na primer text-over-bgimage i image-over-bgimage (ponekad), ali ništa drugo.

Fusnote:

  1. Ukoliko te zanima kontakt, napiši mi poruku i spojiću vas.[]

1 thought on “Kratki vodič za dizajniranje email kreativa”

Comments are closed.