Následující návod vychází z
našich zkušeností a vědomostí.
Pokud se v něčem mýlíme, neváhejte nám to napsat na bartos@incomaker.com, rádi se naučíme něco
nového.
Shrnutí designu
- Prvky designu se nemůžou překrývat, e-maily toto
neumožňují. Překrytí lze dosáhnout tím, že si jej vytvoříte jako obrázek, který se pak do e-mailu
přidá. - Fonty které se budou zobrazovat prakticky všude a je dobré na nich návrh
stavět jsou: Arial, Verdana, Helvetica, Georgia, Tahoma, Lucida,
Trebuchet, Times New Roman, Courier, Courier New, Geneva. Jiné fonty se
nebudou zobrazovat na 99 % e-mailových klientů. - Zarovnání prvků je dobré navrhnout tak, aby bylo stejné jak na mobilních
(telefony) zařízeních, tak na stolních zařízeních (PC). - Obrázky a GIFy by měly velikostně odpovídat bloku ve kterém budou umístěny (např. do bloku o šířce 200 px nevkládat obrázek o velikosti 150 px. Buď by nevyplnil celý blok a pokud byste nastavili aby ano, zdeformuje se a nebude kvalitní).
Formáty: .jpeg, .gif, .png.
Datová velikost obrázků není nijak penalizovaná, nicméně velké obrázky se
načítají dlouho, klienta budou stát data z jeho paušálu a klient se Vám může odhlásit z odběru e-mailů. - Obrázky pozadí navrhovat bez nutnosti přesného umístění. Velikost
individuální. Obrázek jako pozadí se nebude všude zobrazovat. - Velikost fontů 14px desktop 16px mobil pro text, velikost nadpisů je
individuální. - Výchozí šířka těla e-mailu je v Incomakeru nastavena na 640 px a je s ní počítáno v
produktových blocích. Užší email může mít za následek, že produktové prvky nebudou na stejném řádku. - Video v e-mailu pouze formou odkazu na video. Incomaker má v editoru šablon
nástroj na automatické vytváření náhledů Youtube videí s linkem na příslušné video.
Požadavky na návrh
- Návrh vytvářejte např. v Affinity Designeru, Photoshopu nebo nějakém jiném vektorovém editoru, nebo jejich webové
obdobě např Canva. - Velikost návrhu 1:1, veškeré rozměry v pixelech.
- Veškerou grafiku jako obrázky, ikony atd. pošlete společně s návrhem odděleně, ve formátu .png s průhledným
pozadím. - Pokud si přejete importovat existující e-mailovou šablonu, tak prosím o její zaslání (ne přeposlání) na
bartos@incomaker.com nebo o přístup do editoru, ve kterém se daná šablona nachází.
Vysvětlení designu
1. Fonty písma
- Fonty jiné než základní tj: Arial, Verdana, Helvetica, Georgia,
Tahoma, Lucida, Trebuchet, Times New Roman, Courier, Courier New, Geneva, se nebudou zobrazovat na drtivé
většině emailových klientů. V případě potřeby “extra” fontu je jediná spolehlivá cesta obrázek a na něj ve
Photoshopu napsat něco požadovaným fontem, viz. obr. níže.
2. Design “mobile first”
- Čím složitější je šablona, tím je větší šance, že se bude někde zobrazovat
chybně/nestejně. Všeobecně se doporučuje šablony designovat “mobile first”, viz obr. níže.
3. Více elementů na jednom řádku
- Pokud bude víc elementů na jednom řádku, například text-logo-text, je dobré aby
zabíraly v řádku stejnou šířku, a byly vycentrovány stejně jako zbytek šablony ideálně vše na střed. Viz obrázky
níže a obrázky výše.
4. Rozměry
- Šířka těla e-mailu je v Incomakeru nastavena na 640 px a je s ní počítáno v produktových blocích, užší email může mít za následek že produktové prvky nebudou na stejném řádku.
- Velikosti obrázků nemusí být přesně 1:1, dají se upravovat pomocí html/css. Pokud se nějaký obrázek nebo element
zobrazuje někde jinak velký nebo zarovnaný než jinde, je to věc k testování a doladění. Faktory, které to mohou
způsobit se různí a čas od času se něco “rozsype”, i když to předtím fungovalo. A to z důvodu updatu jednotlivých
emailových klientů. Ideální je, aby měly všechny obrázky na jednom řádku stejnou šířku nebo výšku. Nebo
obojí. - Velikosti a rozpětí písma je na Vašem uvážení/testování.
Obecně se udává:
14px velikost standardního textu
pro desktop a 16px pro mobily.
Velikosti nadpisů jsou čistě na designu.
Velikost/zobrazení fontů se může na
zařízeních lišit (ne všude to vypadá stejně). - Obrázky na pozadí se na některých email. klientech nezobrazují, a je obtížné zajistit přesné usazení elementů
vůči obrázku jako pozadí. Osobně používám obrázek jako pozadí za tělem emailu, motiv je tapeta nebo něco co
nevyžaduje přesnou pozici, a vždy k němu přidávám barvu která se zobrazí na klientu který obrázky na pozadí
nepodporuje. Velikost obrázku na pozadí je individuální. - Paddingy jsou otázkou designu. Nicméně platí to, co jsem uváděl výše. Pokud možno vše zarovnávat na střed. Paddingy
se potom dost často nemusí zleva či zprava řešit. - Rozměry GIFu by měli být +- odpovídající šířce containeru ve kterém bude umístěn.
- Video se do emailů přidává formou linku, nebo formou GIFu jako párvteřinový náhled toho videa, vedoucí například
na youtube nebo eshop/web pokud hostujete videa tam. Velikost GIFU viz výše. Samotné video nelze do emailu
umístit.
Incomaker má v editoru šablon nástroj na automatické vytváření náhledů Youtube videí s linkem na příslušné video. Viz obr. níže.
