Készítsen érzékeny e-maileket

Tartalom

• 01. Tisztázza az üzenetet
• 02. Képernyő típusai és méretei
• 03. Az ügyfél útja
• 04. Kezdjük
• 05. Úszó oszlopok
• 06. Tartalom elrejtése
• 07. Mobilbarát gombok
• 08. Tabletták
• 09. Tesztelés
• Tetszett ez? Olvassa el ezeket!

• Szükséges tudás: HTML, CSS
• Igényel: Szövegszerkesztő, webböngésző, média lekérdezésre képes mobil eszköz
• Projekt idő: 1 óra
• Támogatási fájl

Ebben az oktatóanyagban megvizsgáljuk az internet mobil technikáinak HTML-e-mailbe történő beillesztését. A mobil e-mailek felhasználói elterjedten vesznek részt: egyes e-mail kampányok több mobil megnyitást kapnak, mint asztali számítógépek, ugyanakkor sok marketing e-mail rosszul jelenik meg a mobileszközökön. Az internetes mobil támogatás még soha nem volt ilyen jobb - tehát ha olyan e-maileket küld, amelyek az ügyfeleket az internetre terelik, akkor célszerű a mobilbarát e-maileket is megtervezni.

A mobil e-mailek tervezési kihívásai hasonlóak a webes kihívásokhoz: van egy kis képernyőnk, egy érintőképernyős felületünk, és (néha) a felhasználók kint vannak - így a tervezési megközelítés hasonló. Egy további kihívásunk van, mivel sok idősebb mobil e-mail kliens nem rendelkezik megfelelő támogatással a média lekérdezésekhez.

Ezt szem előtt tartva a legjobb megközelítésünk az, ha olyan kampányt tervezünk, amely jól működik mind asztali számítógépeken, mind mobileszközökön, majd média lekérdezéseket használ, ahol támogatják őket, hogy további optimalizálási réteget hozzanak létre az okostelefonok számára. Tehát először nézzük meg, hogyan tehetnénk egy szokásos e-mail kampányt mobilbarátabbá.

• Olvassa el az összes adaptív webdesign cikkünket itt

01. Tisztázza az üzenetet

Ha van egy tendencia, amely az e-mail kampány készítése során újra és újra bekövetkezik, ez a következő: a marketing részlegek imádják rengeteg példányt írni, és a tervezők utálják azt az elrendezésbe tömöríteni. Korábban megpróbáltuk szétbontani a másolatot, és kiemelni a szakaszokat, de a mobil a legjobb példát nyújtja a rövid másolásra: az embereknek nincs idejük sok szövegre, és nincs helyünk. Még egy vonaton ülő felhasználónak is sok e-mailje lehet, hogy átjutjon. Le kell vágnunk a gofrit, és könnyen és gyorsan olvashatóvá kell tennünk.

A CSS segítségével lehetséges az asztali tartalom egy részének eltávolítása egy mobil eszközről, de ezt csak a design elemek finomítására kell használnunk, nem pedig az üzenet szerkesztésére. Ha nem tudja továbbítani az üzenetét 320 képpontos széles eszközön, nehéz látni, hogyan oldja meg ezt a tartalom hozzáadása asztali felhasználók számára.

02. Képernyő típusai és méretei

Akárcsak a mobilweb és az alkalmazások tervezésénél, itt is érintőképernyővel van dolgunk. Érdemes emlékezni az Apple Human Interface Guidelines hírhedt ujjmérésére: a kattintható terület minimális mérete 22x44 pixel legyen. A fő cselekvésre ösztönző linkeket (legalábbis) szépen és nagymértékben meg kell tennie, és érintőképernyőn könnyen kiválasztható. Ügyeljen arra is, hogy a linkek el legyenek helyezve egymástól, hogy ne lehessen őket rosszul kihasználni: ismét ajánlatos a 22 pixeles minimum.

Az álló iPhone képernyő mérete 320 pixel széles; A legtöbb asztali e-mail 600-600 képpontos. Olyan dolgot akarunk, amely mindkét esetben működik, ezért az érzékeny technikákat félretéve ez azt jelenti, hogy csökkenti a másolást, majd nagyobbá teszi a szöveg méretét.

03. Az ügyfél útja

Fontos, hogy az e-mail megfelelő legyen, de azt is figyelembe kell vennünk, hogy a felhasználók hova mennek tovább. Miután rákattintott az e-mailről, optimalizálja a céloldalt a kisebb képernyőkhöz? Végezhetnek ugyanazt a cselekvésre ösztönzést egy mobil eszközön? Ez nem tartozik ezen oktatóanyag körébe, de ezen el kell gondolkodni.

A mobilon is rendben lévő asztali tervezés elkészítésének egyszerű módja az egyszerű elrendezés: mindent egy oszlopban kell tartani, a tartalmat pedig rövidnek. Ezzel előreléphet, és megfelelő biztonsági másolatot ad nekünk, ahol a média lekérdezések nem támogatottak (nevezetesen a Blackberrys és az Android Gmail alkalmazásban). De nézzük meg, hogyan használhatjuk a média lekérdezéseket a jobb támogatás hozzáadásához.

Mint minden e-mail kódnál, itt is vannak retro dolgok. Ha hozzá van szokva a szemantikus webkódok tisztításához, érdemes felvenni a védőszemüveget.

04. Kezdjük

Kezdjük néhány stílusunk beállításával és a nézet metacímkéjének hozzáadásával. Mint azt Ön is tudja, az asztali e-mail kliensek néha figyelmen kívül hagyják a fejléc stílusdeklarációit, ezért tanácsot fog kapni, hogy ne használja őket. Csak a mobil formázás ellenőrzésére használjuk őket itt, tehát jól vagyunk.

fej>
meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
style type = "text / css">
@media képernyő és (max-szélesség: 480px) {
tábla [class = emailwrapto100pc], img [class = emailwrapto100pc]
{szélesség: 100%! fontos; magasság: auto! fontos;}
}
/ stílus>
/ fej>
body style = "kitöltés: 0; margó: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust:
100%; háttérszín: #ffffff; "bgcolor =" # ffffff ">

Láthatja, hogy kissé furcsa CSS-t használunk. Attribútumválasztókkal kell meghatároznunk a mobil CSS-t, különben a Yahoo! A Mail alkalmazza a média lekérdezéseket az asztalon. Ez azt jelenti, hogy külön meg kell határoznunk azokat az elemeket, amelyekre egy osztály vonatkozhat. Ha a stílusát nem megfelelően alkalmazzák, akkor általában ez az első hely, ahol meg kell nézni. Az osztályoknak kissé homályos neveket is adunk: a nyilvánvalóak egy részét a webmail kliensek használják, és nem akarunk stílusütközéseket velük.

A test címkénél a kitöltést és a margót 0-ra állítottuk, különben fehér szegélyt kapunk az e-mail körül az iOS levelekben. Letiltottuk az automatikus szövegméret-beállítást: egyes mobil e-mail kliensek automatikusan felpörgetik a szöveg méretét az olvashatóbbá tétel érdekében, de ez megtörheti a dizájnt.Még mindig meg kell győződnünk arról, hogy a betűméretet megfelelően állítottuk-e be magunknak (12pt felett; 14pt jó).

Most éppen egy stílusnyilatkozatot kaptunk, amellyel felülírhatjuk a megadott szélességet, és 100% -osan szélessé tehetjük. A magasság: automatikus bit fontos, hogy a képek arányosan méretezhessenek.

Hozzunk létre egy 640 pixel széles táblázatot, amelybe beburkoljuk a tartalmunkat.

táblázat szélessége = "640" szegély = "0" cellatér = "0" cellapadagolás = "0"
>
tr>
td>
! - a tartalmunk ide kerül ->
img height = "200" width = "640" border = "0" src = "hero.webp"
style = "display: block;" />
span style = "font-size: 12px; fontfamily:
Arial, Helvetica, sans-serif; line-height: 18px; "> Lorem ipsum dolor sit
amet, consectetur adipiscing elit./span>
/ td>
/ tr>
/ táblázat>

Képet is tettünk oda. Ez átméretezi az eszköz szélességének 100% -át, és a magasság is ennek megfelelően fog igazodni. Portré iPhone-on 320x100 képpontos lesz: mivel gyakorlatilag felére méretezzük a képet, Retinára készen állunk.

Ahol szükséges, 100% széles asztalokat fészkelünk ebbe a főtáblába, így önállóan alkalmazkodnak.

A szövegnek automatikusan be kell burkolóznia, de érdemes a mobilok betűméretét feldobni, ezért adjunk ehhez néhány stílust. p> a címkék örökölhetik a formázást a webmail kliensekben, ezért átfedéseket használtunk.

span [class = emailbodytext], a [class = emailbodytext] {font-size: 16px! fontos; vonal-magasság: 21px! fontos;}

Tehát sikerült szabályoznunk a szöveg- és képformázást, amikor az e-mail megjelenik egy mobil kliensben - próbálkozzunk valami nagyobb kihívással.

05. Úszó oszlopok

Tervezésünkben két oszlopra osztható tartalom lehet; mondj két hírcikket. Jobban működne mobilon, ha ezeket egy hosszú oszlopba raknánk. Ahogy az interneten tennénk, az oszlopokat is lebegtetjük néhány CSS-sel.

td [class = emailcolsplit] {szélesség: 100%! fontos; lebeg: balra! fontos;}

Ezzel a kóddal kényszerítettük a szélességet 100%, majd lebegtette a td> amely tartalmazza a tartalmunkat. Sokkal könnyebb egy jobb oldali oszlopot lebegtetni a bal keze alatt, de meg lehet fordítani.

tábla szegély = "0" cellatér = "0" cellapadagolás = "0" szélesség = "640"
>
tr>
td align = "left" valign = "top" width = "320"
style = "padding-left: 10px; padding-right: 10px;">
img height = "100" width = "300" border = "0" src = "article1.webp"
style = "display: block;" />
span style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Headline One / span> br />
span style = "font-size: 12px; font-family: Arial,
Helvetica, sans-serif; "> Lorem ipsum dolor sit amet, consectetur adipiscing
elit./span>
/ td>
td align = "left" valign = "top" width = "320"
style = "padding-left: 10px; padding-right: 10px;">
img height = "100" width = "300" border = "0" src = "cikk2.webp"
style = "display: block;" />
span style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Második cím / span> br />
span style = "font-size: 12px; font-family: Arial,
Helvetica, sans-serif; "> Lorem ipsum dolor sit amet, consectetur adipiscing
elit./span>
/ td>
/ tr>
/ táblázat>

Két oszlopunk van, amelyek most egybe rakódnak egy mobil eszközön. Ha van egy táblázatcella két elrejteni kívánt oszlop között, a következőket teheti: használhatja kijelző: nincs.

06. Tartalom elrejtése

Ha már a kezdetektől fogva mobileszközöket tervezett, akkor nem kell sok tartalmat elrejtenie, de előfordulhat, hogy az oldalbútorok darabjai eltávolításra kerülnek. Tudjuk használni kijelző: nincs ezt csináld meg; íme a CSS:

tábla [class = emailnomob], td [class = emailnomob], img [class = emailnomob] {display: nincs! fontos;}

Elég könnyű elrejteni az asztali tartalmat egy mobil eszközön; kevésbé fordítva: kijelző: nincs például a Gmail nem veszi figyelembe az interneten, így a mobil tartalom továbbra is megjelenik bizonyos asztali platformokon. Hallottam, hogy hozzáadhat egy 1 pixeles átlátszó GIF-et, kibővítheti egy média lekérdezéssel és háttérképet csaphat maga mögé, de ezt nyilvánosan nem ismerné el, nem?

07. Mobilbarát gombok

Kedvesebb vállalkozás a navigációs linkek barátságosabbá tétele a mobil felhasználók számára. Számos e-mail kampányban vannak navigációs sávok, amelyeket nehéz használni a mobileszközökön, de mégis fontosak, ezért körültekintően kell eljárnunk a kivitelükről. Ehelyett változtassuk őket gombokra:

tábla szegély = "0" cellspacing = "0" cellpadding = "0" width = "100%">
tr>
td align = "center"> a href = "#" style = "fontsize:
14px; font-family: Arial, Helvetica, sans-serif; "> Weboldalunk / a>
span> | / span>
a href = "#" style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Termékek / a>
span> | / span>
a href = "#" style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Vegye fel velünk a kapcsolatot / a> / td>
/ tr>
/ táblázat>

És a CSS:

egy [class = emailmobbutton] {display: block! fontos; font-size: 14px! fontos; betű-súly: félkövér! fontos; párnázás: 6px 4px 8px 4px! fontos; vonal-magasság: 18px! fontos; háttér: #dddddd! fontos; határ-sugár: 5px! fontos; margó: 10 képpont automatikus; szélesség: 80%; text-align: center; szín: # 111; szövegdíszítés: nincs; text-shadow: #fff 1px 0 0;}

Eltávolítjuk a linkeket elválasztó csöveket, majd CSS-t alkalmazva nagy mobilbarát gombokká alakítjuk őket. A gombot 80% szélességre állítottuk be, ezért középre kell igazítania, de nagyobb mobil képernyők esetén is ki kell terjesztenie. Az osztály alkalmazása a horgonycímkére azt jelenti, hogy kibővíthetjük az összekapcsolt területet, így az egész gomb összekapcsolódik. A CSS3-at használjuk a hasonlóak hozzáadásához határsugár és szöveg-árnyék; a támogatás néhány e-mail kliensben hiányos, de a média lekérdezéseket támogatók is ezt támogatják, ezért itt nem fogunk szembeszállni ezekkel a problémákkal.

08. Tabletták

Könnyű feltételezni, hogy az asztali levelezés rendben működik egy táblagépen: a legtöbb e-mailt 600-700 pixel szélesre tervezték, így azok elférnek egy táblagép képernyőjén. De a táblagépeknek van egy érintőképernyős felülete, így van optimalizálás, amelyet hozzáadhatunk, ha sok felhasználónk van.

@media képernyő és (min-width: 480px) és (max-width: 1024px) {
tábla [class = emailwrapto100pc], img [class = emailwrapto100pc] {szélesség: 100%
!fontos; magasság: auto! fontos;}
span [class = emailbodytext], a [class = emailbodytext] {font-size: 16px! fontos;
vonal-magasság: 21px! fontos;}
egy [class = emailmobbutton] {display: block! fontos; font-size: 14px! fontos;
betű-súly: félkövér! fontos; párnázás: 6px 4px 8px 4px! fontos; vonalmagasság:
18px! Fontos; háttér: #dddddd! fontos; határ sugara: 5 képpont
!fontos; margó: 10 képpont automatikus; szélesség: 70%; text-align: center; szín: # 111; szövegdekoráció:
egyik sem; text-shadow: #fff 1px 0 0;}
}

Ebben a média lekérdezésben még mindig átméretezzük a tartalom egy részét, és linkjeinket szép nagy gombokká tesszük, de kivettük a kódot az oszlopok halmozásához, mert erre több helyünk van egy táblagépen.

Megnéztük tehát a főbb technikákat - a legtöbb mobil tervezési kihívás megoldható ezek kombinálásával, amíg meg nem éri a kívánt eredményt. De milyen további kihívásokkal kell szembenéznünk?

Egyes e-mail küldő platformok automatikusan átveszik a stílus információkat a fejlécből, és beillesztik azokat. Ez többnyire hasznos, de itt megtörheti a média kérdéseit. A jó platformok adnak némi ellenőrzést arról, hogy ez megtörténik-e vagy sem, de érdemes felhívniuk a támogatásukat, ha problémái adódnak az eszközzel. Utolsó megoldásként azt tapasztaltam, hogy a stílus címkét ki a fejlécből, és az első közé teszi táblázat> és tr> a címkék segíthetnek ebben is (igen, tudom ...).

09. Tesztelés

Az e-mailek kódolásakor szokásos módon a végső küldés előtt ajánlott alaposan tesztelni a kampányokat a különféle kliensekben. A Litmus és az Email On Acid felbecsülhetetlen értékű a kód előnézetének megtekintéséhez a különböző e-mail kliensekben, és hasonló funkciók érhetők el, mint például a Campaign Monitor és a MailChimp. A Fractal segít e-mailben kompatibilis kód megírásában, majd tesztelésében is. Természetesen semmi sem múlja felül a tényleges eszközöket, ha sikerül hozzájuk férni.

Elliot Ross az Action Rocket, az e-mail fejlesztésre szakosodott kreatív ügynökséget vezeti.

Tetszett ez? Olvassa el ezeket!

• Egyszerű, de hatékony e-mailes hírlevelek
• Hogyan készítsünk egy alkalmazást
• Ingyenes graffiti betűtípus kiválasztás
• Illustrator oktatóanyagok: lenyűgöző ötletek, amelyeket ma kipróbálhatunk!