fészekrakó betűk
előszó
Azt javaslom, hogy fontolja meg a finomságok és árnyalatok az elrendezés html-maileket - az egyszerű sablon megoldásokat kortárs adaptív megközelítés.
Ezzel szemben a szokásos elrendezés, helyes megjelenítésének, amely szükséges, hogy a különböző böngészőkben, a html-írásban lehet nyitni vagy postai úton szolgáltató web-alapú felület, vagy egy e-mail kliens, melynek számos változata ró számos korlátozást létrehozásáról szóló levél.
Oroszországban, a legtöbb internet-felhasználók által használt e-mail:
És a legnépszerűbb e-mail kliens:
fontos funkciók
Annak érdekében, hogy a megfelelő kijelző a betűk a különböző e-mail kliensek és webes felületek használt táblázatkezelő megközelítés.
Üzenet írása közben tisztában kell lenniük azzal, hogy sok e-mail kliensek alapértelmezett ne töltse le a képeket, amely szükséges, hogy egy elfogadható képek megjelenítését anélkül, hogy a háttér színe, alternatív szöveg képek (alt), stb
A legtöbb webes felületek vannak vágva az összes stílus között szerepel
és , és csak korlátozott támogatást CSS stílusokat. Nem tudja használni a rövid formában, mint például: border: 1px solid # 000000:Igen, a színkódot is lehet csökkenteni (post #fff hibás lesz).
„Nem a méret számít” - webes felületek Gmail és a Yahoo vágott levél, a karakterek száma, amelyek meghaladják egy bizonyos összeget (102Kb és 100 kb-kal), így próbálja meg minimalizálni a kódot.
Fejlesztése egy egyszerű levél html-template
Mindegy elrendezés - ez több gyakorlatot, mint elmélet, ezért azt javaslom, hogy fontolja meg egy konkrét példát.
Az általános elrendezés a levél
Levelek nem haladhatja meg a szélessége 700 képpont, mint a legtöbb web iterfeysov üzenet törzse nem több, mint 50% -át a teljes szélességét az aktív régió, és a megjelenése vízszintes görgetés romlott a használhatóság, és csak benyomás a levél.
A háttér színe a webes felület, ami a mi nézeti elrendezés eltérő lehet, így meg kell, hogy lezárja mindent egy táblázatot a kívánt háttérszínt, akkor is, ha fehér.
És így, az általános elrendezés a levél a következő alakban:
Amint azt az előzőekben az elrendezés a betűk táblázatos megközelítés. Így lehetővé kell tenni, hogy egy egyszerű szerkezet táblázatokat. Kerüljük kombinálásával sejtek (colspan, rowspan). Komplex táblázatok Outlook nem mindig jelennek meg megfelelően. Jobb felhasználása a beágyazott táblázatok. És ne felejtsük el megadni a paramétereket a align és valign sejtekben.
Jelentés cellpadding cellspacing és attribútumok kell állítani a „0” és nem használ semmilyen border attribútum értékek nem „0” a táblázatban, mivel nem minden e-mail kliensek helyesen értelmezni egyéb értékeket.
Horizontális és vertikális tér
Ennek eredményeként egy e-mailt, hogy megteremtse a szükséges időközönként vízszintesen kell használni padding (padding) tulajdon. Hogy tovább bonyolítsuk a dolgot, az Outlook e-mail kliens nem támogatja padding a kitöltés, kitöltés és a margó - támogatja.
Ebben a tekintetben, jobb elhagyni a használatát mind padding és margin. Vízszintes padding lehet tenni egy üres sejt (amely a szimbólum elhelyezéséhez nem törhető szóköz &bsp;), És behúzni a jobb és bal - akkor létrehozhat egy beágyazott táblázat kisebb.
Hspace lehet beállítani az alábbiak szerint:
Vagy a határon háttér színe.
Szöveget és linkeket
Így a szöveg kell tenni címkék - span. A szülő-sejt (vagy blokk), hogy jelezze line-height. Érdemes megjegyezni, hogy figyelmen kívül hagyja a lehetőséget outlook.com line-height.
Ha az elrendezés betűket kell használni szabványos betűtípusok (Arial, Verdana, Tahoma Times New Roman, stb.)
Különleges szöveg karakterek használata mindig a megfelelő speciális karakter kódok, hogy a címzettek láthatják megfelelően a szöveg megjelenítéséhez bármely platformon.
Tehát, mivel az összes fenti ajánlások megfogalmazása a szöveg a következő:
Mi hivatkozik meg kell adnia az attribútum target = „_ blank”, hogy elkerülje az esetleges problémákat a nyitás az oldalt az aktuális ablakban.
Gyakran szükség van, például egy kifogás nem volt elválasztani a szavakat, hogy biztosítsák ezt használjon nem törhető szóköz karakter:
És ha azt szeretnénk, hogy át a szót a szimbólum Ez akkor hasznos, például a hosszú linkek, amelyek „rip” minta.
A második esetben, akkor regisztrálnia kell a típusú kapcsolat: href = „tel: +79876543210”
Képek és a háttér
Létrehozása html-levél nem lehet elkerülni használata nélkül a képeket, de ne feledje, számos funkcióval. Mint már korábban említettük, sok e-mail kliensek alapértelmezett ne töltse be a képet, így ha ez hordoz némi értelmet (amellett, hogy az esztétikai), akkor meg kell adni az alt attribútumot. (Alt attribútum minden esetben jelen kell lennie, de lehet, hogy üres alt = „”). És annak érdekében, hogy tervezzen egy alternatív szöveget következetes tervezés és a jobb olvasni, a kép lehet csomagolni, mint a szöveges rész, a korábban tárgyalt.
Képek mindig jelzi a magasságot és a szélességet.
Elkerülhető a képek megjelenítési problémákat számos web-alapú, ezeket be kell mutatni a blokk szintű elemek:
Nem minden e-mail kliens támogatja a háttérképet (különösen Outlook), ezért csak óvatosan alkalmazható, vagy elkerülni teljesen. Feltétlenül szerepeljen a megfelelő értéket a BGCOLOR háttérszíne, a szöveg jelenik meg a képen egy adott szakaszban volt látható, még azok a felhasználók, akik a háttérben képek nem jelennek meg, és / vagy az összes kép le van tiltva.
Összefoglalva, alkotunk levélsablonba tartalmazó preheder, fájl fejléc, tartalom és a lábléc részében.
Adaptive elrendezése levelek
Kezdeni, meg kell jegyezni, hogy hogyan viselkednek normál postai mobil képernyőkön: az iOS-eszközökön összes levél skálázott úgy, hogy teljesen illeszkedik a képernyőn (így a betűk olvashatatlanná válik, és szükség manuális zoom).
Eszközeit az Android megjelenítéséhez írni a skálán 100%, és ezért, azt látjuk, csak egy kis töredéke egy levelet, és nem tudja teljes mértékben értékelni bármilyen tervezési, vagy tartalmat, amely jelentősen csökkenti a százalékos kattintások (CLR).
Adaptive betűk nyújt megfelelő kijelző bármely eszközön, ezáltal növelve az előfizetői lojalitás, és ennek eredményeként - ezekben a levelekben felett CLR. Között a hiányosságokat lehet jegyezni csak az, hogy több időre van szükség, hogy fejlesszék a megtervezése és elrendezése adaptív betűk - azaz meghaladja az önköltségi ára.
Típusú mobil alkalmazkodás
Számos levél alkalmazkodni megközelítések a mobil eszközök:
- mobil elrendezése;
- Gumi kódolás;
- valamint a média kéri;
- kombinációja több megközelítéseket.
Mobile elrendezés
Ez a megközelítés csak akkor alkalmazható, ha a sorrendben 70% -a tett felfedezések mobil eszközök.
gumi elrendezése
A megközelítés szinte az ellenkezője a fentieket. A „tiszta” formában használják elég ritkán.
Ez áll a következő: csak relatív méretei és képek minden blokk (százalékban). Miáltal a levél veszi fel a teljes képernyőt, a méretétől függetlenül. Ennek a megközelítésnek számos korlátozás elrendezés tárgyak szerkezetét.
Használata médialekérdezéseket
Ahogy a neve is mutatja, ez alapján a CSS3 médialekérdezés. Biztosítja a legjobb kijelző a betűk a képernyőn bármilyen méretű, segítségével változtatni a paramétereket a szöveg, tömbök, stb helyen Szinte teljes szabadságot =)
Jelenik meg a számítógép, monitor Mail alkalmazás iOS és Android gmail fektetve
Többfajta megközelítést
Az a megközelítés alkalmazásával médialekérdezéseket kétségtelenül jó, mert lehetővé teszi, hogy a lehető legjobb kijelző, de sajnos, ad egy kis mobil közönségelérést. Ezért azt javaslom, hogy fogadjanak el több megközelítés, azaz - a gumi elrendezés + használni médialekérdezés.
Ez a kombináció biztosítja a jó kijelző üzenetek bármilyen eszközön és bármilyen alkalmazás, függetlenül a támogatás médialekérdezés.
A jövőben fogom leírni ezt a megközelítést.
Fejlesztése közös levelét adaptív elrendezése
Meg kell érteni, hogy a levelet kell helyesen jelennek meg a mobil eszközök és az asztali e-mail kliens és webes felületek. Ezért, a módszereket és a korlátozásokat, hogy a korábban leírt adunk, amikor = új adaptív elrendezés)
És így, a teljes minta az adaptív leveleket fog kinézni:
Itt kell látnunk: néhány mobil alkalmazásokhoz, beleértve a szabványos iOS Mail az alapértelmezett növeli a betűtípust a levelet (ami kisebb, mint 13px), hogy elkerülje ezt hozzá kell adni a stílus:
Amikor leírja a stílus, mint szelektor attribútumok használatával - ez azért van szükség, hogy elkerüljék a problémákat a webes felületen, yahoo, amely tévesen értelmezi azokat.
A teszt és referencia itt semmi új mondani nem lehet vezérelni fenti szabályok.
kép
A kiemeli a korábban leírt, nem lesz hozzá csak, hogy közvetlenül kapcsolódik az adaptív elrendezése.
«Retina» - képernyők, vagy inkább a képernyők magas pixelsűrűség specifikusak a mobil eszközök, így az e-mail tűnhet egy kicsit homályos a képernyőn, mint a iPhone. Ennek elkerülése érdekében használja a képeket a 2-szer nagyobb. Például ahelyett, hogy a 40x40 ikonok, 80x80 ikonok használata, amelyek előírják méretű, mint a 40x40.
A hatás a lebegő kép (a sortörés a kép körül jobbra vagy balra) lehet beszerezni a következő:
Vagy fordítva - egy töredék kód, amely figyelmen kívül hagyja a kilátások:
Technikák létre adaptív betűk
Annak érdekében, hogy cross-platform van, hogy használják a különböző trükköket, amelyek szeretnék lakni külön-külön.
Moduláris alkalmazkodás
Újjáépítés mobil egységek egymással.
Ez valósul meg az alábbiak szerint:
Ahol minden egyes ismertetett blokkok szerkezete a következő:
Most alkalmazni ezt a tudást a gyakorlatban, és alkalmazkodni a levél, hogy már azelőtt a mobil eszközök.