Hvernig á að hanna móttækilegan HTML Email
Á undanförnum árum hefur svífa farsímanotkun valdið þróun, eða kannski byltingu, á þann hátt sem við nálgumst að skila efni til netnotenda. Endanlegt markmið er vökva-, farsíma- og tækjagreinarvefur og ein hugsunarskóli hefur komið fram sem víðtæka leið til þessarar endar: móttækileg hönnun. Hins vegar, þegar móttækilegur zeitgeist hefur safnað gufu, hefur tölvupósthönnun og þróun barist við að halda áfram.
Þetta stafar að hluta til af því að HTML tölvupóstur er algjörlega erfiður miðill fyrir hönnuði til að vinna með. Archaic email viðskiptavinur tækni og skortur á stöðlum hefur gert mörg af reglum nútíma, merkingartækni kóða gagnslaus. En tölvupóstur er enn lykillinn að markaðssviðinu of mikilvægt að gleymast. Á sex mánaða tímabili árið 2012, greint Litmus 80% aukning í tölvupósti opnar á farsímum. Sama ár sýndu herferðarskjár að í fyrsta skipti hefði hreyfanlegur opinn vextir þeirra í raun verið umfram skrifborð og vefpóst.
Augljóslega er mikilvægt að framkvæma rétta greiningu á áhorfendum þínum áður en þú tekur ákvörðun um að fjárfesta í farsíma-hagræðingu. En vel útfærður móttækilegur tölvupósthönnun getur tryggt framúrskarandi notendaupplifun fyrir bæði skrifborð og farsímanotendur - og með útbreiddum 4G bara handan við hornið, er stefnan í átt að farsímanum ómeðvitað, svo hvers vegna ekki framtíðarsvörun?
Square peg, umferð gat
Ef þú hefur einhvern tímann haft ógæfu um að opna fastbreidda tölvupóst á farsímanum þá skilur þú þörfina fyrir móttækilegan tölvupósthönnun. Skjásprettur, skipulag með mörgum dálkum getur birst útdráttur þannig að leturstærðin er lækkuð að því marki sem er óljós. Notendur geta súmað inn en þá þarf stöðugt og infuriatingly að skruna lárétt frá vinstri til hægri og aftur til að lesa efni. Tenglar eru lítill og þétt, án tillits til feitur fingur á skjánum. Og litlar skýringar á litlum sjónarhornum, dimmt til að spara orku, verða oft ólæsilegar. Augljóslega er hreyfanlegur hagræðing mikilvægt en hvað er besta leiðin til að fara um það?
Farsælasta starfsvenja
Áður en hægt er að skrifa eina línu af kóða getur umfjöllun um hönnunareiginleika verulega bætt upplifun notenda fyrir þá sem eru í farsíma, þó að öllum líkindum séu ráðlegir ívilnanir óháð skjástærð.
- Hreinsa, hnitmiðaða efni: lítil skjár þýðir að það er mikilvægara núna en nokkru sinni fyrr að taka þátt notanda eins skilvirkt og mögulegt er.
- Einfaldur dálkur skipulag: einfaldleiki er lykillinn. Layouts ekki breiðari en 640px mun draga gracefully. Ein dálkur tryggir að ekkert efni sé alveg glatað fyrir utan sjónarhornið þegar hún er innsniðið.
- Óákveðinn greinir í ensku grípandi efni lína: Þetta er einn af árangursríkustu vopn tölvupóstur markaður í yfirfylla innhólf. Haltu því stuttum og gleðilegum.
- Stór aðgerð (CTA): Ekki refsa feitur fingur! IOS leiðbeiningarnar um mannauðsleiðbeiningar mæla með lágmarkssviðinu sem er "tappable" á 44 × 44 stigum.
- Öflug leturstærð: Vertu viss um að skilaboðin þín geti hæglega lesið.
- Forskeyti: Annað lykilatriði þegar kemur að sýnileika í pósthólfið. Reyndu að forðast einfaldlega að sýna "skoða í vafra" texta.
- Vinstri-lagaður texti: Það eru nokkrar ástæður fyrir því að laga mikilvæga þætti á vinstri hlið efnisins. (Eye tracking rannsóknir benda til þess að vestrænir notendur einbeita sér að meirihluta athygli þeirra vinstra megin við tölvupósts innihald. Þetta er ekki á óvart þar sem við lesum texta frá vinstri til hægri. Vissar stýrikerfi, einkum Android, munu ekki mæla efni til að passa Skjárinn sýnir því aðeins vinstri hluta tölvupóstsins. Frá vinnuvistfræðilegu sjónarhorni mun meirihluti notenda auðveldast að hafa samskipti við þætti í neðri vinstra megin / miðju handhöndunar skjásins.)
- Lóðrétt stigveldi: minnkað skjár fasteignasvæðum meira trúverðugleika en nokkru sinni fyrr á hugmyndinni um "brjóta". Verulegar CTAs ætti að vera sett eins nálægt topp og mögulegt er; ef þau eru ekki séð strax, gætu þau ekki verið notuð.
- Notaðu myndir vandlega: ekki ráð fyrir að myndir verði að sjást. Innfæddur tölvupóstforrit iPhone mun sýna myndir sjálfgefið en margir viðskiptavinir munu ekki.
Þessar ráðleggingar geta bætt notendaviðmót fyrir farsíma viðskiptavini, en þú getur og sennilega ætti að hagræða frekar. Þökk sé vaxandi CSS3 stuðningi við farsíma tölvupóst viðskiptavini, móttækilegur email hönnun er nú mögulegt.
Að byrja
Eins og ég nefndi áður, þjást HTML tölvupóstur af óheppilegum skortum á stöðlum - til ótímabundinna, mikið af því sem fylgir mun verða ferð aftur í tímann til upphafsdaga vefþróunar. Skipulag verður að vera raðað með töflum vegna útdated HTML flutningsvélar frá sumum tölvupóstþjónum og CSS verður beitt inline. Nokkrir tölvupóstþjónar munu alveg líta á allar stíllýsingar sem gerðar eru í
hluti skjalsins.Það eru nokkur frábær email boilerplates í boði, ég mæli með Sean Powell framúrskarandi HTML Email Boilerplate sem upphafspunktur, en fyrir sakir sýningarinnar, skulum byrja frá byrjun.
Fyrir þá sem vilja fylgja eftir með kóðanum geturðu sækja sniðmát fyrir þessa grein héðan.
Doctype
Hotmail og Gmail setur sjálfkrafa XHTML 1.0 Strict doctype. Það er því ekki slæmt hugmynd að nota það en það er mikilvægt að prófa tölvupóstinn þinn með og án aðgerða eins og margir email viðskiptavinir munu einfaldlega rífa það út alveg.
Email on Acid hefur gert mikla rannsóknir á gerðum tölvupósts hér.
Media fyrirspurnir
Við getum nú sett upp metaplata með útsýni til að tryggja að tölvupósturinn okkar sé réttur birtur á farsímum. Það er líka góð hugmynd að tilgreina innihaldstegund og titilmerki líka. Þetta verður hunsað af mörgum tölvupóstþjónum en það er góð hugmynd ef þú ætlar að bjóða upp á tengil á 'vafraútgáfu' í tölvupóstinum þínum.
Þar sem líklegt er að innihaldstegundin verði hunsuð, er það ráðlegt að umrita öll sérstafi í tölvupósti þínum sem HTML-aðila.
Einnig munum við fela í sér nokkrar skynsamlegar endurstillingar stíl til að tryggja að tölvupósturinn okkar sé gefinn hvernig við viljum að hann sé yfir vettvangi.
Email subject or title Athugaðu að viewport metatakið hefur neikvæðar afleiðingar fyrir BlackBerry.
Nú getum við sett inn fjölmiðlafyrirspurnir okkar; hversu margir veltur á því hversu nákvæmni þú vilt afhenda hverju tæki. Í þessu dæmi ætlum við að nota aðeins einn - gerir það skynsamlegt að flest tæki með skjástærð sem eru ekki stærri en 600px eru nútíma-, farsíma- og snerta skjár og munu njóta góðs af farsíma-bjartsýni stíl. Ennfremur ætlum við að gera ráð fyrir að með því að fylgja alhliða tækni fyrir farsælasta starfshætti, sem lýst er hér að framan, mun hreyfanlegur notandi á stærri tækjum sem fá skrifborðsútlitið ekki lenda í neinum meiriháttar nothæfi.
Við notum fjölmiðlafyrirspurnir á sama hátt og við myndum við að byggja upp vefsíðu; ef viewport stærðin er innan þvingunarinnar sem sett er í fjölmiðlafyrirspurninni skaltu þá nota þá stíl.
@media only screen and (max-width: 600px) {table[class="hide"], img[class="hide"], td[class="hide"] {display:none!important;}}Í dæminu hér að ofan erum við að segja sumum þáttum með flokki "fela" til að sýna: enginn á skjánum þrengri en 600px. The! Mikilvægt eign tryggir að allir inline stíl er overrideden. Þetta er grundvallarreglan um móttækilegan tölvupósthönnun: yfirlýst innlínuskilríki sem gerðar eru í líkama HTML skjalsins með mikilvægum stílyfirliti sem gerðar eru í
kafla og miða á þessar stílsgreinar yfir í tilteknar skjástærðir með fjölmiðlunarfyrirspurnum. A áberandi undantekning er gmail app sem mun hunsa hvaða stíl yfirlýsingar í kafla. Hins vegar skal samviskusamur vinstri aðlaga innihald tryggja fullnægjandi notendaupplifun fyrir gmail-aðdáendur á póstlistanum þínum. Augljóslega er þetta ekki hugsjón lausn en nú er móttækilegur tölvupósthönnun eins mikið um talið málamiðlanir eins og það er um háþróaða tækni.Það er athyglisvert að við miðum á HTML-þætti okkar með CSS eiginleiki til að sigrast á flutningur á Yahoo! Póstur.
Þannig getum við séð að fjölmiðlafyrirspurnir eru gagnleg tól til að sýna innihaldsefni valið, en við getum líka notað þau til að vinna með aðra eiginleika útlitsins. Kannski mikilvægast, við getum dregið úr dálkbreidd tölvupóstsins okkar - lykillinn að frábærri farsímaupplifun.
@media only screen and (max-width: 600px) {table[class="content_block"] {width: 92%!important;}}Við höfum nú tekið fram í fjölmiðlum að öll töflur með flokki "content_block" ætti að vera 92% breidd á tæki með skjástærð allt að 600px. Núna er allt sem við þurfum að gera til að tilgreina breiddargetu inline (600px) fyrir hvaða borð sem er með bekknum content_block og við höfum fasta ílátsbreidd sem síðan er í réttu hlutfalli við skjái undir ákveðinni stærð. Að því gefnu að breiddareiginleikar barnaþáttanna í þessari íláti eru tilgreindar sem hundraðshlutar, þá er þetta einfalt svarandi tölvupóstsniðmát.
Gakktu úr skugga um að slökkt sé á því að slökkva á vefmyndatöku sjálfvirkri textastærð á líkamsmerkinu, þumalfingur, reyndu að halda leturstærð yfir 12 punkta lágmarki.
Hnappar
Símtöl til aðgerða (CTA) eru yfirleitt mikilvægasta hluti markaðsbréfsins. Þeir ættu að vera augljós, vel staðsett og umfram allt nothæf. Viðmiðanirnar fyrir frábæran CTA eru mismunandi eftir því hvort það er valið með bendil eða fingri. Þetta er öflug virkni móttækilegur tölvupóstur; Til að veita notendum á minni snertiskjá tæki með fingra vingjarnlegum hnöppum sem ekki hafa áhrif á myndavélar.
Því miður geta slíkir hnappar ekki verið birtar almennt þar sem þeir treysta á padding eiginleikum sem ekki eru studdir í sumum skrifborð tölvupósti viðskiptavinum.
@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;}}Stíll yfirlýsingarnar hér að framan munu umbreyta merkjum með flokki "hnapp", eins og hér að neðan, í stórar, spennandi, lituðu hnappar sem breiða breidd efnisins, svo lengi sem skjárbreiddur tækisins er ekki meiri en 600px. CSS3 stuðningur ætti ekki að vera vandamál þar sem við getum gert ráð fyrir að farsímatækni sem við erum að miða á er nokkuð nútíma.