Vytvořte perfektní zprávy ve všech e-mailových klientech

Sep 16, 2025

jak

Pro jakoukoli e-mailovou marketingovou kampaň do práce, e-mail se musí dostat do složky Doručená pošta a vyniknout ze všech ostatních. Příběh však nekončí. Váš e-mail musí dobře vykreslit, pokud chcete, aby se odběratelé otevřeli e-mail, klepněte přes CTA a převedete se převést.

Vykreslování je problém, protože každý e-mailový klient a zařízení vnímá kód odlišně. Kód, který funguje dobře s jedním e-mailovým klientem, může vytvořit problém vykreslování v jiném. Chcete-li dělat věci ještě náročnější, dokonce i nejrozšířenější e-mailové klienty přicházejí s vykreslováním dotazů a problémů. V tomto článku se podívám na výzvy a zástupci pro každou z hlavních e-mailových klientů.

Výhled

Nebylo by to hyperbole říci, že máme e-mailové vývojáři chvění na myšlenku o výhledu. Zřejmým důvodem je četné vykreslování výzev prezentovaných tímto e-mailovým klientem. Co je překvapující, že všechny firem mají stále výhled jako svůj standardní e-mailový klient a malý podíl vašich účastníků je stále loajální.

Podívejte se na některé z výzev a hacků pro aplikaci Outlook:

Výzva: Outlook nepodporuje marže v & lt; p & gt; a & lt; a gt;
Zaseknout: Pokud chcete poskytnout marže, použijte & lt; td & gt; štítek; Velká písmena by měla být použita mimo značku a malá inline

Výzva: Polstrování je podporováno pouze na určitých atributech HTML (ne & lt, div a gt; nebo & lt; p & gt; tagy)
Zaseknout: Stolní rozložení je nejbezpečnější sázka k překonání tohoto problému

Výzva: Outlook je jediný e-mailový klient, který nepodporuje GIF
Zaseknout: Jak někteří klienti uvidí pouze první rámec vaší animace, to by mělo zahrnovat všechny důležité informace, běh jen několik milisekund a dávat smysl jako samostatný obraz

Výzva: Outlook nepodporuje fonty Google a bude implementovat časy New Roman jako fádlo
Zaseknout: Vložit následující kód ...

 & lt;! - [jestliže mso] & gt;
& lt; styl typu = "text / css" & gt;
.fallback-text {
Font-Family: Arial, Sans-Serif;
}
& lt; / styl & gt;
& lt;! [endif] - & gt;

Outlook.com.

Nová verze aplikace Outlook.com byla představena počátkem roku 2016, ale starší verze není stále mimo provoz. Zde jsou výzvy a hackuje pro tento klient:

Výzva: Níže je přidána zbytečná mezera 4-5px
Zaseknout: Nastavte vlastnost zobrazení jako "IMG {DISPLAY: BLOCK;}" odstranit polstrování

Outlook.com introduces unnecessary spacing between your images — Outlook.com představuje zbytečné mezery mezi obrázky

Výzva: Nepodporuje hranice RGB
Zaseknout: Pro nastavení HTML pozadí použijte hex kódy

Výzva: Přidání # v href Odkazy rozbije kotevní značku a posouvá CSS na jiné místo
Zaseknout: Použijte místo domény href #

iPhone nativní aplikace

Nativní iPhone Email App je nejpoužívanější klient, a podporuje všechny interaktivní prvky, které byste typicky nalezeni v e-mailu: GIF, menu, akordeby, odpočítávání, posuvníky a tak dále. Kromě toho také umožňuje e-mailové marketér používat snímky síti s vysokým rozlišením pro úžasné zkušenosti s uživatelem.

IOS10 se stal všemi, čím byly vyhledávány, protože uživatelé nyní mohou upravit počet řádků náhledového textu v e-mailech a dokonce se rozhodnout pro seznam-odhlášení. Nicméně, navzdory těmto silným bodům, iPhone nativní aplikace má také určité nedostatky. Podívejme se.

iOS10 users can opt for list-unsubscribe — Uživatelé IOS10 se mohou rozhodnout pro seznam-odhlášení

Výzva: Drobný text se automaticky změní velikost
Zaseknout: Minimální velikost písma pro záhlaví by měla být 22px, a pro text těla 14px

Výzva: Vydání nových modelů iPhone může způsobit problémy s poskytnutím
Zaseknout: Rozvržení tekutin zajišťuje správně zobrazení e-mailů na všech zařízeních

Výzva: V iOS9, kdy inline-blok Úroveň prvků jsou vedle sebe v kódu s prostorem mezi konce dvou prvků, vede k obalovému problému
Zaseknout: Jednoduše odstranit prostor

Výzva: iOS10 nepodporuje pevné polohování
Zaseknout: Žádný současný řešení ...

Gmail

Gmail je populární, protože je to tak vhodné použít. To však neznamená, že je to bez svých výzev.

Výzva: Pokud váš soubor HTML překročí 102KB, gmail ji klip
Zaseknout: Vyhněte se zbytečným stylům a atributům a nezkopírujte kód z aplikace Microsoft Word nebo jiné textové editory, protože je (toto přidá další značky do souboru HTML)

Výzva: Gmail odstraní CSS z & lt; styl & gt; blok, pokud překročí 8142 znaků nebo obsahuje chyby nebo vnořené @declarations.
Zaseknout: Ujistěte se, že vložené styly jsou krátké a bez překlepů

Výzva: Plováky, marže, odstavce a polstrování nejsou podporovány
Zaseknout: Použijte uspořádání na bázi stolu & lt; td & gt; Pro polstrování a okraje

Výzva: Obrázky na pozadí nefungují pro ID non-gmail nakonfigurované v gmailu
Zaseknout: Použijte barvu pozadí jako svazek

Výzva: Volič atributu nefunguje
Zaseknout: Použití .třída místo něj

Apple mail

Apple Mail je možná nejblíže ideálnímu e-mailovému klientovi, který máme. Hlavní výhodou Apple Mail je to, že je velmi odpouštějící, pokud jde o špatné kódování e-mailů. Navíc, stejně jako iPhone Native App podporuje interaktivitu v e-mailech, čímž se eliminuje potřebu zobrazit e-mail v prohlížeči.

Měli byste mít na paměti dvě věci, zatímco kódování e-mailů pro odběratele Apple Mail:

Nepoužívejte kalibri fonty
Hostujte svůj e-mail a uveďte odkazy na server, protože interní odkazy nefungují v Apple Mail

Yahoo! Pošta

Jako nové a lepší e-mailové klienti přišli, Yahoo! Mail je v těchto dnech méně často používán. Některé z jeho vykreslování výzev a hacky jsou diskutovány níže.

Challenge: Nepodporuje Center-Align. Atribut html.
Hack: použití ALIGN = "CENTER"

Výzva: Šířka min-zařízení a Šířka max-zařízení nejsou podporovány mediálními dotazy
Zaseknout: Použijte atribut Šířka & Amp; / nebo ve stylu namísto min nebo max-šířky
Použijte šířka Atribut místo min- nebo max-šířka , buď odděleně nebo vložené do & lt; styl & gt; štítek

Výzva: Float tagy nefungují
Zaseknout: Přidat ALIGN = "top" Dotyčný obraz

Na této poznámce jsme dosáhli konce diskuse o většině typických vykreslování výzev pro e-mailové klienty. Podívej se tady pro více výzev a zástupců. E-mail marketing, pokud se provádí správně, může připravit nové cesty pro vaši marketingovou strategii. Udržujte tyto jednoduché řešení v mysli a vaši odběratelé nikdy neuvidí rozbité rozvržení e-mailů ve vašich e-mailech.

Související články:

15 AWESOME EMAIL NEWSLETTER DESIGNES
10 Nejlepší e-mailové newsletter nástroje
Master HTML typografie v e-mailu

Vytvořte perfektní zprávy ve všech e-mailových klientech

Výhled

Outlook.com.

iPhone nativní aplikace

Gmail

Apple mail

Yahoo! Pošta

jak - Nejoblíbenější články

Smíšené mediální výukový program: Jak akvarel nad digitální umělecká díla

Jak skrýt kód JavaScriptu z zobrazení Zdroj

Jak modelovat pojetí umění v kině 4d

10 Tipy pro modelování tvrdého povrchu

Jak vytvořit retro logo s afinitním návrhářem

Vytvořit interaktivní 3D vizuály s třemi.js

Vytvořit digitální etch náčrtek

Jak vytvořit celou stránku webové stránky v úhlovém

Kategorie