Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Email Design
Webdesign

Egy egyszerű, reszponzív HTML email létrehozása

by
Length:LongLanguages:

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

Ebben a bemutatóban megmutatom neked, hogyan lehet egy olyan egyszerű, reszponzív HTML email létrehozni, ami mindegyik email kliensen működik, beleértve az új okostelefonok mail klienseit és appjait. Minimális media query-t és fluid width megközelítést használ a lehető legjobb kompatibilitás érdekében.

Media query-k: Csak félmegoldás

Volt olyan idő, amikor a media query-k elegendőek voltak ahhoz, hogy a reszponzív emailek működjenek az iOS és Android mail alkalmazásokon, mert mindkettő támogatja a media query-ket.

De azóta az iOS és Android platformokon elburjánztak a mail alkalmazások, különböző fokú támogatással a reszponzív emailek fejlesztési módszereit illetően.

A legjelentősebb az Androidos Gmail app legújabb frissítése, ami kétszer olyan népszerű, mint az Android felhasználók alapértelmezett mail appja (ami most már 11%-os összes megnyitásnál jár). Sem korábban, sem most nem támogatja a media query-ket, ugyanakkor leskálázza az emailjeidet úgy, hogy a külső táblázat méretét letömöríti annyira, hogy beleférjen a képernyő megtekinthető területébe. Ezt nehéz szabályozni, és amikor a teljes emailed attól függ, hogy a media query-k megfelelően jelennek-e meg mobilon, akkor néhány nagyon kellemetlen eredménnyel járhat a használata.

Miért pont a fluid most a menő

A jó hír, hogy képes vagy tervezni és készíteni olyan emailt, ami kiválóan néz ki minden mail appban, beleértve azokat is, amik nem támogatják a media query-ket. Ezt a fluid elrendezés használatával tudod megtenni.

De ugyanakkor van néhány tervezési kompromisszum, amit meg kell tenned. Azok a szeretnivaló, egyforma széles oszlopú elrendezések, amik egy oszlopossá válnak, nem működnek olyan jól ezzel a módszerrel. Ha megtanulsz élni nélkülük, akkor van néhány nagyon gyakorlatias dizájn, ami elképesztően jól tud működni.

Ezt fogjuk ma elkészíteni

Final-Product-Both

Vágjunk bele

Oké, kezdjük az üres dokumentumunkkal.

Itt elkészítjük az alap oldalunkat a headerrel, a doctype-pal és a tartalmazó táblázattal, amihez háttérszínt rendelünk (a bodyhoz és a nagy összefogó táblázathoz egyaránt, mivel a body tag stilizálása nem teljes mértékben támogatott). További információkért ennek az alapnak a beállításához nézd meg a HTML email sablon létrehozása az alapoktól kezdve cikket.

Ezután hozzáadtam a fő tartalmi táblázatunkat a közepére a 'content' osztállyal.

Figyelj oda

Megjegyzés: Észlelni fogod, hogy ebben a bemutatóban a CSS-t a dokumentumunk fejrészébe fogom elhelyezni. Én általában a fejrészben tartom a stílusokat, ha újra akarom hasznosítani őket, és az egyénieket pedig beágyazom.

Fontos: Még ha a CSS szabályokat a dokumentumod fejrészében használod is, akkor is kell egy eszköz, amivel mindet beágyazottá teszed a folyamat végén. Ha olyan szolgáltatásokat használsz, mint a MailChimp vagy a Campaign Monitor, akkor azok automatikusan felajánlják a stílusaid beágyazását amikor importálod a dizájnodat. Ezt azért kell megtenned, mert néhány olyan kliens, mint a Gmail, figyelmen kívül fogja hagyni vagy lecsupaszítja a <style> tag tartalmát. Használhatsz a Premailerhez hasonló eszközt is a CSS-ed beágyazására. Ha Premailert vagy hasonló eszközt használsz, ne feledd el kivenni a media query-ket feldolgozás előtt (mivel azt szeretnénk, hogy azok sértetlenek maradjanak), majd a végén újra beszúrni őket. A MailChimp és a Campaign Monitor automatikusan gondoskodik erről számodra.

A mobil stílusok elrejtése a Yahoo! elől

Észre fogod venni, hogy a body tagnek van egy extra attribútuma. A Yahoo Mail szereti egyénileg értelmezni a media query-jeidet, és ennek megakadályozására szükséged lesz az attribútum szelektor használatára. Ezt találtam a legkönnyebb módnak (ahogy azt az Email on Acid javasolta) ahhoz, hogy egy egyszerű és tetszőleges attribútumot adhassak a body taghez. Én a javasolt 'yahoo'-t használom, de lehet bármi, amit szeretnél:

Ezután becélozhatsz konkrét osztályokat úgy, hogy az attribútum szelektort használod a body tagedhez a CSS-ben.

Két trükk a Fluid módszer elsajátításához

Ahogy láthatod, a 'content' táblázatunk 100% szélesre lett állítva, így fluid lesz és az okostelefon vagy tablet képernyők teljes szélességét felveszi. Ezen kívül beállítjuk a maximális 600px szélességet is annak elkerülésére, hogy az email elfoglalja az egész képernyőt nagyobb eszközökön.

Következzék két viszonylag trükkös dolog, amit meg kell tennünk annak érdekében, hogy minden a terveknek megfelelően jelenjen meg minden email kliensen. Ez a két javítás Tina Ye kiváló bemutatójának köszönhető, ami a FogCreek Blogon érhető el

1. Túllépni a max-width támogatás hiányán

Sajnos a max-width-et nem minden email kliens támogatja. Annak érdekében, hogy az emailünk megfelelően jelenjen meg Outlookon és Lotus Notes 8 és 8.5-ön, minden táblázatot néhány feltételes kód közé kell csomagolnunk, ami létrehoz egy táblázatot egy beállított szélességgel, benne mindennel. Ez az IE-t (ami a Lotus Notes által használt renderelő motor) és Microsoft Outlookot célozza meg.

A táblázatunkat némi feltételes kódba csomagoljuk:

2. Egy javítás Apple Mailhoz

Furcsamód az Apple Mail (ami normál esetben egy nagyon előremutató email kliens) sem támogatja a max-width tulajdonságot. Ugyanakkor támogatja a media query-ket, így hozzáadhatunk egy olyat, ami azt mondja, hogy a 'content' osztályú táblánk szélességét állítsa be, amennyiben a viewport képes megjeleníteni a teljes 600px szélességet.

A fejléc elkészítése

Most hozzá fogjuk adni a táblázatunk első sorát – a fejlécet. Add hozzá a következő stílust a már létrehozott sorhoz:

És aztán a CSS-edben adj meg térközt a fejlécnek:

Az első reszponzív sor hozzáadása

Most el fogjuk készíteni a legelső reszponzív sorunkat. Ezt úgy csináljuk meg, hogy létrehozunk két táblázatot, amik 'beúsznak' egymás mellé az 'align' HTML tulajdonság használatával.

Baloldali oszlop

Cseréljük le a kis "Hello!" üdvözletünket a következőre:

Létrehozzuk a 70px-es táblázatunkat, és némi térközt is adunk hozzá, ami elválasztóként fog működni a két oszlop között. Az alsó térköz egy függőleges szabad területet ad hozzá, amikor a két oszlop egymás alá kerül a mobilon.

Jobboldali oszlop

Úgy fogjuk létrehozni a jobb oszlopot, hogy ismét egy táblázatot igazítunk bal oldalra. Ez a táblázat 445px széles lesz, ami 25px helyet hagy nekünk a jobb oldalon. Ez nagyon fontos, mivel az Outlook automatikusan fel fogja halmozni a táblázatot, ha nincs legalább 25px szabad hely valamelyik sorban.

Responsive-AlignedTables

Mindaddig, amíg hagysz legalább 25px-nyi helyet, a táblázataid úgy fognak viselkedni, ahogyan azt elvárod.

Allow at least 25px of breathing room to stop Outlook from stacking your tables
Hagyj legalább 25px-nyi teret, hogy az Outlook ne halmozza fel a táblázataidat

Stop! Alternatív tipp az Outlook átverésére

Ennek a megkerülésére szintén használhatsz feltételes kódot, hogy az Outlook azt higgye, lezártál egy cellát és megnyitottál egy újat. Az első táblázatod zárótagje után és a második táblázat nyitótagje előtt egyszerűen add hozzá:


Folytassuk...

A szélesebb, jobb oldali táblázaton ugyanazt a megközelítést alkalmazzuk, mint a container táblázatunkon, ami magába foglalja egy osztály létrehozását és feltételes kód hozzáadását is. Azt szeretnénk, ha ez a táblázat 100% széles lenne mobilon, ahol a táblázat a bal oldali alatt bukkan majd fel.

Itt láthatod, hogy létrehoztam egy 'col425' osztályt ehhez a táblázathoz a 425px széles oszlopunknak. A táblázatot feltételes kódba csomagoltam, ami magába fog foglalni egy 425px széles táblázatot. Ezután add hozzá a Media Query osztályunkat is, amit az Apple Mailhoz hoztunk létre.

Most a cellánkon belül hozzá fogjuk adni a stilizált fejrészt.

Hozzáadtam néhány osztályt minden cellához a stilizálás miatt, valamint pár stílust amit más szövegtípusoknál fogok később használni:

A fejlécünk már kész, és lentebb láthatod, hogyan fognak az oszlopok összecsoportosulni mobilon. (A munka közbeni előnézethez ideiglenesen ki kell majd kommentelned a min-device-width media query-ket, mivel azok erőltetik a fix szélességet az asztali klienseknél).

01-header

Egy egyoszlopos szövegsor elkészítése

Egy egyoszlopos szövegsor elkészítéséhez csak adjunk hozzá egy új sort a '.content' táblázatunkhoz. Hozzá fogunk adni egy 'innerpadding' osztályt is ezekhez a sorokhoz, némi újrahasználható térköz értékkel. Egy 'borderbottom' osztályt is hozzáadunk, hogy minden sorhoz elhelyezhessünk egy szegélyt.

A CSS-ünk ehhez a részhez:

A dupla oszlopos cikk elkészítése

Most létre fogunk hozni egy, a fejlécünkkel egyező reszponzív sort, de egy apró méretkülönbséggel, így egy nagyobb képet kaphatunk.

Hozzáadtunk ide egy gombot 'buttonwrapper' osztállyal. Ez egy térközzel ellátott, háttérszínes cellát tartalmaz, benne egy szöveglinkkel. Én szívesen használom ezt a módszert, mivel lehetővé teszi, hogy fluid szélességű gombjaim legyenek, ami nagyon hasznos, ha újrahasznosítható táblázatot hozol létre, ahol minden gomb szélessége különböző lesz minden használatkor. Amennyiben fix szélességű gombjaid vannak, akkor célszerű a Bulletproof Button Generatort használni a Campaign Monitoron.

A stílusunk a gombhoz:

Azon kívül, hogy beállítottuk a szélességet ehhez az új 'col380' osztályhoz, hozzáadjuk a szélességet a stílusainkhoz is, hogy az Apple Maillal is működjenek. Most valahogy így néz ki:

Email-TwoCol

Egyoszlopos kép létrehozása

Ez egy nagyon egyszerű sor; csak beállítjuk a képet az email 100% szélességére és gondoskodunk róla, hogy a magasság CSS használatával automatikus legyen.

A CSS-ünkben:

A végső sima szöveges sor létrehozása

Végezetül hozzáadunk egy sor, szegély nélküli szöveget az aljára:

A lábléc létrehozása

A lábléc létrehozásához hozzá fogunk adni egy új sort, benne egy táblázattal. Annak egyik sora egy másik táblázatot fog tartalmazni a közösségi média ikonjainkkal.

Hozzáadjuk a kívánt stílusokat a láblécünkhöz a CSS-ben:

Gombok optimalizálása mobilra

Mobilon az az ideális, ha az egész gomb egy link, nem csak a szöveg, mivel sokkal nehezebb egy kis szöveges linket eltalálni az ujjunkkal. Mivel nem lehetséges, hogy ez minden asztali kliensen működjön (a térköz nem teljesen támogatott az <a> tageknél), ezért ez olyasmi, amit a mobil változathoz media query-k használatával adok hozzá.

El kell távolítanunk a <td>-ről a jelenlegi színt, és utána visszatenni azt az <a> tagre, rengeteg térközzel.

Ebben a media query-ben egyaránt használom a max-width-et és a max-device-width-et, hogy megpróbáljak elkerülni egy bugot az Outlook.com-ban az IE9 alatt.

Mostmár bárhová érsz hozzá a színes gombhoz a mobilon, az egy link lesz!

További fejlesztések media query-kkel

Ha szeretnéd, most már elkezdheted fejleszteni az elrendezésedet osztálynevek hozzárendelésével azokhoz az elemekhez, amiket vezérelni szeretnél, majd létrehozhatod az új szabályokat azon media query-n belül amit épp most készítettünk fentebb.

Például a leiratkozás linkünket egy gombbá alakítjuk úgy, hogy egy osztályt adunk a linkhez:

és hozzáadjuk a következő CSS-t a media query-hez:

Email-Footer-MQs

Megcélozhatod az .innerpadding, a .header és a .footer osztályokat is, hogy csökkentsd a térközök mennyiségét azokon a klienseken, amik támogatják a media query-ket.


Teszteld és hajrá!

Végezetül, mint mindig, ne felejtsd el validálni (a W3C validator használatával – csak egy hibát kell, hogy kapj, a 'yahoo' attribútum miatt a body tagnél) és letesztelni élőben különféle eszközökön és olyan webes előnézeti szolgáltatásokon, mint a Litmus vagy az Email on Acid.

Készítsd el a reszponzív emaileket, amik nagyszerűen néznek ki minden email kliensen!

Ha a következő szintre akarod vinni a tanultakat, nézd meg a következő bemutatókat:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.