Luo täydelliset viestit kaikissa sähköpostiohjeissa

Jan 29, 2026

Miten tehdään

Jokaiselle sähköpostimarkkinointikampanjalle toimivat sähköpostiviestin on saatava postilaatikkoon ja erottuu kaikista muista. Tarina ei kuitenkaan pääty sinne. Sähköpostiosoitteesi on tehtävä hyvin, jos haluat tilaajallesi avata sähköpostisi, klikkaa CTA: ta ja muuntaa.

Renderointi on ongelma, koska jokainen sähköpostiohjelma ja laite havaitsee koodin eri tavalla. Koodi, joka toimii hyvin yhdellä sähköpostiohjelmalla, voi luoda esitystilanteen toisessa. Jotta asiat olisivat vieläkin haastavampia, jopa kaikkein laajimmin käytetyt sähköpostiohjelmat tulevat esityksiin ja ongelmiin. Tässä artikkelissa tarkastelen haasteita ja kiertoratkaisuja jokaiselle tärkeimmistä sähköpostiohjelmista.

Näkymät

Se ei olisi hyperbole sanoa, että me lähetämme kehittäjien shudderin ajatukseen Outlook. Ilmeinen syy on lukuisat tämän sähköpostiohjelman esittämät haasteet. Mikä on yllättävää, että kaikki yritykset ovat edelleen näkymiä, koska niiden standardi sähköpostiohjelma ja pieni osa tilaajistasi ovat edelleen uskollisia.

Tutustu joitain haasteita ja hajauksia Outlook:

Haaste: Outlook ei tue marginaaleja & lt; p & gt; ja & lt; a & gt;
Hakata: Jos haluat tarjota marginaaleja, käytä & lt; td & gt; tag; isoja kirjaimia tulisi käyttää tunnisteen ulkopuolella ja pienet kirjaimet

Haaste: Pehmusteet tuetaan vain tietyissä HTML-ominaisuuksissa (ei myöskään & lt; div & gt; tai & lt; p & gt; Tunnisteet)
Hakata: Taulukkopohjainen ulkoasu on turvallisin panos tämän ongelman ratkaisemiseksi

Haaste: Outlook on ainoa sähköpostiohjelma, joka ei tue GIF: ää
Hakata: Koska jotkut asiakkaat näkevät vain ensimmäisen animaation ensimmäisen kehyksen, tämä olisi sisällytettävä kaikki tärkeät tiedot, vain muutaman millisekunnin ajan ja järkevänä itsenäisenä kuvana

Haaste: Outlook ei tue Google-fontteja ja toteuttaa aikoja uudet roomalaiseksi salauksena
Hakata: Upota seuraava koodi ...

 & lt; - [Jos MSO] & GT;
& lt; tyylinen tyyppi = "Text / CSS" & GT;
.fallback-teksti {
Fontti-perhe: Arial, Sans-Serif;
}
& lt; / tyyli & gt;
& lt;! [endif] - & gt;

Outlook.com

Uusi Outlook.comin versio otettiin käyttöön vuoden 2016 alkupuolella, mutta perintöversio ei ole vielä käytössä. Tässä ovat haasteet ja hacks erityisesti kyseiselle asiakkaalle:

Haaste: Lisätään tarpeettoman 4-5px: n aallon
Hakata: Aseta näytön ominaisuus "img {näyttö: lohko;}" Poista pehmuste

Outlook.com introduces unnecessary spacing between your images — Outlook.com esittelee tarpeettoman etäisyyden kuvien välillä

Haaste: Ei tue RGB-rajoja
Hakata: Käytä HEX-koodia asettaaksesi HTML taustavärin

Haaste: Lisäys # sisään href Linkit rikkoo ankkuritunnisteen ja siirtyy CSS: n toiseen paikkaan
Hakata: Käytä verkkotunnusta pikemminkin kuin href #

iPhone Native App

Alkuperäinen iPhone-sähköpostisovellus on eniten käytetty asiakas, ja se tukee kaikkia interaktiivisia elementtejä, jotka ovat tyypillisesti löytäneet sähköpostissa: Gifit, valikot, harmonikkaat, laskimet, liukusäätimet ja niin edelleen. Lisäksi se mahdollistaa myös sähköpostin markkinoijan käyttää High-Definition Retina -kuvia mahtavaan käyttäjäkokemukseen.

IOS10 on tullut entistä halvempia, koska käyttäjät voivat nyt säätää esikatselun viivojen määrää sähköpostiviesteissä ja valita jopa luettelon tilauksen. Tästä huolimatta näistä vahvoista pisteistä huolimatta iPhone Native APP: llä on myös tiettyjä puutteita. Katsotaanpa.

iOS10 users can opt for list-unsubscribe — IOS10-käyttäjät voivat valita luettelon tilauksen

Haaste: Pieni teksti muuttuu automaattisesti
Hakata: Otsikoiden minimifonttikoko pitäisi olla 22PX ja kehon teksti 14px

Haaste: Uusien iPhone-mallien julkaiseminen voi aiheuttaa ongelmia
Hakata: Nesteen ulkoasu takaa sähköpostit näyttävät kunnolla kaikissa laitteissa

Haaste: IOS9: ssa, milloin inline-lohko Tason elementit ovat toistensa vieressä koodissa, joissa on tilaa kahden elementin päiden välillä, se johtaa kääreeseen
Hakata: Poista tila vain

Haaste: IOS10 ei tue kiinteää sijaintia
Hakata: Ei nykyistä työtä ...

Gmail

Gmail on suosittu, koska se on niin kätevä käyttää. Tämä ei kuitenkaan tarkoita sitä ilman sen haasteita.

Haaste: Jos HTML-tiedostosi ylittää 102kB, Gmail leikittyy sen
Hakata: Vältä tarpeettomia tyylitunnisteita ja attribuutteja, äläkä kopioi koodia Microsoft Wordista tai muista tekstin toimittajista, koska se on (tämä lisää ylimääräisiä tunnisteita HTML-tiedostoon)

Haaste: Gmail poistaa CSS: stä & lt; tyyli & gt; lohko, jos se ylittää 8142 merkkiä tai sisältää virheitä tai sisäkkäisiä @DecLarations
Hakata: Varmista, että sulautetut tyylit ovat lyhyitä ja vapaa typistä

Haaste: Kellukkeet, marginaalit, kohdat ja pehmusteet eivät ole tuettuja
Hakata: Käytä taulukkopohjaista ulkoasua & lt; td & gt; Padding ja marginaalit

Haaste: Taustakuvat eivät toimi Gmailissa määritettyihin ei-gmail-tunnuksiin
Hakata: Levitä taustaväri salauksena

Haaste: Attribuuttivalitsin ei toimi
Hakata: Käyttää .Class Sen sijaan valitsin

Apple Mail

Apple Mail on ehkä lähin asia täydelliseen sähköpostiohjelmaan, jota meillä on. Apple Mailin tärkein etu on se, että se on hyvin anteeksiantava, kun kyseessä on huono sähköpostin koodaus. Lisäksi, kuten iPhonen natiivi sovellus, se tukee vuorovaikutteisuutta sähköpostiviesteissä, mikä estää tarvetta tarkastella sähköpostia selaimessa.

Sinun pitäisi pitää mielessä kaksi asiaa, kun koodataan sähköposteja Apple Mail-tilaajille:

Vältä Calibri-fonttien käyttöä
Isäntä sähköpostiosoitteesi ja anna linkit palvelimeen, koska sisäiset linkit eivät toimi Apple Mailissa

Yahoo! Posti

Uudet ja paremmat sähköpostit ovat saapuneet, Yahoo! Mailia käytetään harvemmin näinä päivinä. Joitakin sen tekemistä haasteita ja hakkareita käsitellään alla.

Haaste: Se ei tue keskipiste HTML-attribuutti
Hack: Käytä Align = "Center"

Haaste: Min-laitteen leveys ja Max-laitteen leveys Mediakyselyt eivät tue
Hakata: Käytä leveä attribuuttia & amp; / tai tyylillä min tai max-leveyden sijasta
Käytä leveys attribuutti sijasta min- tai max-leveys , joko erikseen tai upotettu & lt; tyyli & gt; tag

Haaste: Float-tunnisteet eivät toimi
Hakata: Lisätä Align = "top" Kyseiseen kuvaan

Tästä muistiinpanosta olemme päässeet keskustelun loppuun tyypillisimmistä haasteista sähköposti-asiakkaille. Katso tässä lisää haasteita ja kiertotapauksia. Sähköpostimarkkinointi, jos se on tehty oikein, voi nostaa uusia keinoja markkinointistrategialle. Pidä nämä yksinkertaiset kiertokuvat mielessä ja tilaajat eivät koskaan näe rikki sähköpostiosoitteita sähköpostisi koskaan.

Aiheeseen liittyvät artikkelit:

15 Awesome Sähköposti Uutiskirje Designs
10 parasta sähköpostin uutiskirjeen työkalut
Master HTML typografia sähköpostitse

Luo täydelliset viestit kaikissa sähköpostiohjeissa

Näkymät

Outlook.com

iPhone Native App

Gmail

Apple Mail

Yahoo! Posti

Miten tehdään - Suosituimmat artikkelit

HTML-koodin kirjoittaminen nopeammin

Adobe Fresco Tutorial: Luo muotokuva maalaussovelluksessa

Luo mukautettu slack bot

Maalaa muotokuva kuin van Gogh

Luo kaatamalla vesivaikutus realflow

Miten tehdä fotorealistinen taivas

Kuinka saada lisää GIF: stä

Miten luoda animoitu web-banneri Photoshopissa

Luokat