Miten suunnitella vastaava HTML-sähköposti
Viimeksi kuluneiden vuosien aikana suurten mobiilikäyttäytyminen on herättänyt kehitystä tai ehkä vallankumousta tavalla, jolla lähestymme sisällön toimittamista verkkokäyttäjille. Lopullinen tavoite on nestemäinen, mobiili ja laite-agnostinen verkko, ja yksi ajatuskoulu on noussut laajalti suosimiksi keinoiksi: reagoiva suunnittelu. Kuitenkin, kun reagoiva zeitgeist on kerännyt höyryä, sähköpostien suunnittelu ja kehittäminen ovat kamppaillut pysymään.
Tämä johtuu osittain siitä, että HTML-sähköpostit ovat tunnetusti hankala väline, jota kehittäjät voivat työskennellä. Arkakaalinen sähköpostiasiakastusteknologia ja standardien puute ovat tehneet monien modernin, semanttisen koodin säännöt hyödyttömiksi. Sähköposti on kuitenkin tärkeä markkinointikanava liian tärkeä, jotta sitä ei voi jättää huomiotta: yli puolen vuoden ajanjaksolla Litmus ilmoitti 80%: n kasvun sähköpostin avaamisesta mobiililaitteille. Samana vuonna kampanjamonitori paljasti, että ensimmäistä kertaa heidän mobiilimainonta-avomaksunsa oli ylittänyt työpöydän ja webmailin.
On selvää, että on tärkeää suorittaa asianmukaiset analyysit yleisösi ennen päätöksentekoa investoida mobiilioptimointiin. Mutta hyvin toteutettu vastaava sähköpostiominaisuus voi taata erinomaisen käyttökokemuksen sekä työpöydälle että mobiilikäyttäjille - ja laajalle levinneelle 4G: lle aivan nurkan takana suuntaus mobiililaitteisiin on kiistaton, joten miksi ei tule tulevaisuutta?
Neliö, pyöreä reikä
Jos sinulla on koskaan ollut epäonnistuminen avata kiinteä leveä sähköposti mobiililaitteessa, ymmärrät, että tarvitset vastaavaa sähköpostiominaisuutta. Näytön purskahtelut, monipilariset asettelut voivat näkyä pienentää niin, että kirjasinkokoa pienennetään epäluotettavuuteen asti. Käyttäjät voivat lähentää, mutta joutuvat jatkuvasti ja kipeästi tarvitsemaan vierittämään vaakasuunnassa vasemmalta oikealle ja takaisin sisällön lukemiseen. Linkit näyttävät pieniltä ja ruuhkaisilta, eikä rasvaisia sormeja kosketa kosketusnäyttöä. Pienet kontrastirakenteet pienillä näkökulmilla, himmennettynä säästämään energiaa, ovat usein lukukelvottomia. On selvää, että mobiilioptimointi on tärkeää, mutta mikä on paras tapa edetä?
Mobiili parhaita käytäntöjä
Ennen kuin kirjoitat yhden koodin, suunnittelutoimintojen huomioon ottaminen voi suuresti parantaa käyttäjien käyttökokemusta liikkuville käyttäjille, vaikka ne ovatkin suositeltavia myönnytyksiä näytön koosta riippumatta.
- Selkeä, suppea sisältö: pienet näytöt merkitsevät, että nyt on entistä tärkeämpää käyttää käyttäjää mahdollisimman tehokkaasti.
- Yhden sarakkeen layout: yksinkertaisuus on avainasemassa. Layoutit, jotka eivät ole laajempia kuin 640px, heikkenevät gracefully. Yhden sarakkeen avulla sisältöä ei kadota kokonaan katselukentän ulkopuolella suurennettaessa.
- Kiinnostava aihealue: tämä on yksi sähköposti markkinoijista tehokkaimmista aseista ylikuormitetussa postilaatikossa. Pidä se lyhyt ja mukava.
- Suuri kutsu toimintaan (CTA): älä rankaise rasvan sormia! Applen iOS Human Interface -suositukset suosittelevat 44 × 44 pisteen vähimmäiskokoisen kohdepinnan.
- Runsas fonttikoko: varmista, että viestisi on helppo lukea.
- Pre-header: toinen avainalue, kun kyse on näkyvyydestä postilaatikossa. Yritä välttää yksinkertaisesti näkymää selaimen tekstinä.
- Vasemmanpuoleinen teksti: on olemassa useita syitä kohdistaa tärkeät elementit sisältöalueen vasemmalle puolelle. (Eye tracking -tutkimus viittaa siihen, että länsimaiset käyttäjät keskittävät enemmistön huomionsa sähköpostisisällön vasemmalle puolelle, mikä on tuskin yllättävää, koska olemme lukeneet tekstiä vasemmalta oikealle, tietyt käyttöjärjestelmät, erityisesti android, eivät skaalaa sisältöä sopivaksi näyttö näyttää siten vain sähköpostin vasemmalla puoliskolla. Ergonomiasta näkökulmasta useimmilla käyttäjillä on helpoin vuorovaikutus elementtien kanssa kädessä pidettävän näytön vasemmassa alakulmassa tai keskellä.)
- Pystysuuntainen hierarkia: pienentynyt näytön kiinteistöt lisää entistä enemmän luottamusta ajatukseen "fold". Merkittävät CTA: t olisi sijoitettava mahdollisimman lähelle; jos niitä ei näe heti, ehkä niitä ei käytetä.
- Käytä kuvia huolellisesti: älä ota kuvia kuvien katseluun. iPhone n alkuperäisessä sähköpostisovelluksessa näyttää kuvat oletuksena, mutta monet asiakkaat eivät.
Nämä vinkit voivat parantaa käyttökokemusta mobiilikäyttäjille, mutta voit ja todennäköisesti optimoida edelleen. Kiitos kasvavasta CSS3-tuesta mobiilit sähköpostiasiakkaat, vastaava sähköpostiominaisuus on nyt mahdollista.
Päästä alkuun
Kuten aiemmin mainitsin, HTML-sähköpostit kärsivät vaatimattomasta standardien puutteesta - jumittumattomaan, paljon seuraavista seikoista on aika ajoin verkkokehityksen alkuaikoina. Layouts on järjestettävä taulukoilla joidenkin sähköpostiohjelmien vanhentuneiden HTML-renderointimoottoreiden vuoksi, ja CSS: ää on sovellettava sisäisesti. Useat sähköpostiasiakkaat jättävät täysin huomiotta minkä tahansa tyyliin tehdyt ilmoitukset
osa asiakirjasta.On olemassa joitain upeita sähköpostilaatikoita, suosittelen Sean Powellin erinomaista HTML-sähköpostitila lähtökohtana, mutta demonstroinnin vuoksi aloitetaan tyhjästä.
Niille teistä, jotka haluavat seurata koodia yhdessä, voit lataa tämän artikkelin malli täältä.
dOCTYPE
Hotmail ja Gmail lisää automaattisesti XHTML 1.0 Strict -tyypin. Siksi ei ole huonoa ajatusta käyttää sitä, mutta on tärkeää testata perusteellisesti sähköpostiviestejäsi ilman jaettavia asiakirjoja, koska monet sähköpostiasiakkaat yksinkertaisesti poistavat sen kokonaan.
Sähköposti Acidissa on suorittanut laajan tutkimuksen sähköpostitodisteista tässä.
Mediakyselyt
Voimme nyt lisätä näkymän sisällönkuvauskentän, jotta sähköpostiosoitteemme näytetään oikein mobiililaitteissa. On myös hyvä määritellä myös sisältötyyppi ja otsikkokoodi. Monet sähköpostiasiakkaat jättävät ne huomiotta, mutta ne ovat hyvä idea, jos aiot tarjota linkin sähköpostisi "selaimen versioon".
Koska sisältötyyppi todennäköisesti jätetään huomiotta, on suositeltavaa koodata kaikki sähköpostiviestissä olevat erikoismerkit HTML-kokonaisuuksina.
Lisäksi meillä on muutamia järkeviä tyyliasetuksia, jotta voimme varmistaa, että sähköpostimme on tehty, miten haluamme sen olevan eri alustoilla.
Email subject or title Huomaa, että näkymän sisällönkuvauskentässä on negatiiviset vaikutukset Blackberryen.
Nyt voimme lisätä median kyselyihin; kuinka moni riippuu siitä, millaista spesifisyyttä haluat toimittaa jokaiseen laitteeseen. Tässä esimerkissä aiomme käyttää vain yhtä - mikä tekee kohtuullisen oletuksen, että useimmat laitteet, joiden näytön koko on enintään 600 pikseliä, ovat moderneja, mobiileja ja kosketusnäytöksiä ja hyötyvät mobiilioptimoidusta tyylistä. Lisäksi oletamme, että noudattamalla aikaisemmin kuvattuja yleismaailmallisia mobiilikäytäntöjen tekniikoita, mobiilikäyttäjät suurilla laitteilla, jotka vastaanottavat työpöydän ulkoasun, eivät ole merkittäviä käyttökelpoisuusongelmia.
Käytämme mediakyselyitä samalla tavoin kuin rakennamme verkkosivustossa; jos näkymän koko on mediakyselyssä asetetuissa rajoitteissa, sovelletaan sitä tyyliä.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}Yllä olevassa esimerkissä kerrotaan joitain elementtejä, joiden luokka on "piilota": ei yhtään näytöllä, joka on kapeampi kuin 600px. Tärkeä ominaisuus varmistaa, että kaikki inline-tyylit ohitetaan. Tämä on periaatteellinen reagoivan sähköpostisuunnittelun periaate: HTML-asiakirjan ruudussa tehdyt in-line-tyyppiset julistukset ovat tärkeitä!
osio ja näiden tyylien kohdistaminen ohittaa tiettyjä näyttökertoja mediakyselyissä. Ylivoimainen poikkeus on gmail-sovellus, joka sivuuttaa minkä tahansa tyyppisen ilmoituksen osiossa. Kuitenkin huomaavainen vasemmanpuoleinen sisältö pitää varmistaa tyydyttävä käyttökokemus gmail-faneille sähköpostilistalla. Tämä ei tietenkään ole ihanteellinen ratkaisu, mutta tällä hetkellä vastaava sähköpostiominaisuus on yhtä paljon kuin harkittuja kompromisseja, koska se koskee huipputekniikkaa.On syytä huomata, että kohdistamme HTML-elementteihimme CSS-attribuuttien valitsimilla renderöinti tarina Yahoo! Mail.
Joten voimme nähdä, että mediakyselyt ovat hyödyllinen työkalu sisällön selektiiviseen näyttämiseen, mutta voimme myös käyttää niitä muokkaamaan ulkoasun muita ominaisuuksia. Ehkäpä kaikkein tärkeintä, voimme rajoittaa sähköpostin sarakkeen leveyttä - avain erinomaiseen mobiilikokemukseen.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}Olemme ilmoittaneet mediakyselyn mukaan, että kaikilla "content_block" -luokilla varustetuissa taulukoissa pitäisi skaalata 92%: n leveys laitteille, joiden näytön koko on korkeintaan 600px. Nyt meidän on vain määritettävä leveysattribuutti inline (600px) mille tahansa taulukolle content_block -luokalla ja meillä on kiinteä leveysastia, joka sitten laskee suhteellisesti tiettyyn kokoon näytöissä. Edellyttäen, että tämän kontin lapsielementtien leveysominaisuudet määritellään prosenttiosuuksina, tämä on peruslähtöinen sähköpostimalli.
Ole varovainen, kun poistat webkit-automaattisen tekstin koon säätämisen kehon tunnisteen käytöstä peukalona, yritä säilyttää kirjasinkoko 12 pikseliä pienemmäksi.
painikkeet
Käynnissä olevat toimet (CTAs) ovat yleensä tärkein osa markkinointisähköpostia. Niiden pitäisi olla silmiinpistäviä, hyvin sijoitettuja ja ennen kaikkea käyttökelpoisia. Hyvän CTA: n kriteerit ovat erilaisia riippuen siitä, valitaanko kursori vai sormi. Tämä on tehokas reagoivan sähköpostin toiminto; tarjota käyttäjille pienempiä kosketusnäytön laitteita, joissa on sormenpitäviä painikkeita, joihin kuvan salpaajat eivät vaikuta.
Valitettavasti tällaisia painikkeita ei voida näyttää yleisesti, koska ne perustuvat pinoihin, joita ei ole tuettu joissakin työpöytäympäristöissä.
@media only screen and (max-width:600) {a[class="button"]{display: block;padding: 7px 8px 6px 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff!important;background: #f46f62;text-align: center;text-decoration: none!important;}}Edellä esitetyt tyyliilmoitukset muuttavat tunnisteita, kuten "alla olevasta" painikkeesta, suuriksi, kiinnostaviin, värillisiin painikkeisiin, jotka ulottuvat sisältöalueen leveyteen, kunhan laitteen näytön leveys ei ole suurempi kuin 600px. CSS3-tuki ei saisi olla ongelma, koska voimme olettaa, että mobiiliteknologiamme, jonka kohdistamme, on kohtuullisen moderni.