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
Vágjunk bele
Oké, kezdjük az üres dokumentumunkkal.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html> 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:
<body yahoo>
Ezután becélozhatsz konkrét osztályokat úgy, hogy az attribútum szelektort használod a body tagedhez a CSS-ben.
body[yahoo] .class {} 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:
<!--[if (gte mso 9)|(IE)]> <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="content" align="center" cellpadding="0" cellspacing="0" border="0"> <tr> <td> Hello! </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
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.
<style type="text/css">
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
}
</style> 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:
<td class="header" bgcolor="#c7d8a7"> Hello! </td>
És aztán a CSS-edben adj meg térközt a fejlécnek:
.header {padding: 40px 30px 20px 30px;} 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:
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="70" style="padding: 0 20px 20px 0;"> <img src="images/icon.gif" width="70" height="70" border="0" alt="" / > </td> </tr> </table>
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.
Mindaddig, amíg hagysz legalább 25px-nyi helyet, a táblázataid úgy fognak viselkedni, ahogyan azt elvárod.
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á:
<!--[if mso]> </td><td> <![endif]-->
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.
<!--[if (gte mso 9)|(IE)]> <table width="425" align="left" cellpadding="0" cellspacing="0" border="0"> <tr> <td> <![endif]--> <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">style="width: 100%; max-width: 425px;"> <tr> <td height="70"> </td> </tr> </table> <!--[if (gte mso 9)|(IE)]> </td> </tr> </table> <![endif]-->
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.
.col425 {width: 425px!important;} Most a cellánkon belül hozzá fogjuk adni a stilizált fejrészt.
<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="subhead" style="padding: 0 0 0 3px;"> CREATING </td> </tr> <tr> <td class="h1" style="padding: 5px 0 0 0;"> Responsive Email Magic </td> </tr> </table>
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:
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;} 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).
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.
<tr> <td class="innerpadding borderbottom"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="h2"> Welcome to our responsive email! </td> </tr> <tr> <td class="bodycopy"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr> </table> </td> </tr>
A CSS-ünk ehhez a részhez:
.innerpadding {padding: 30px 30px 30px 30px;}
.borderbottom {border-bottom: 1px solid #f2eeed;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;} 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.
<tr>
<td class="innerpadding borderbottom">
<table width="115" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="115" style="padding: 0 20px 20px 0;">
<img src="images/article1.png" width="115" height="115" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bodycopy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
<tr>
<td style="padding: 20px 0 0 0;">
<table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="button" height="45">
<a href="#">Claim yours!</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr> 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:
.button {text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;}
.button a {color: #ffffff; text-decoration: none;} 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:
@media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
} 
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.
<tr> <td class="innerpadding borderbottom"> <img src="images/wide.png" width="100%" border="0" alt="" /> </td> </tr>
A CSS-ünkben:
img {height: auto;} 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:
<tr> <td class="innerpadding borderbottom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. </td> </tr>
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.
<tr> <td class="footer" bgcolor="#44525f"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" class="footercopy"> &reg; Someone, somewhere 2013<br/> <a href="#"><font color="#ffffff">Unsubscribe</font></a> from this newsletter instantly </td> </tr> <tr> <td align="center" style="padding: 20px 0 0 0;"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.facebook.com/"> <img src="images/facebook.png" width="37" height="37" alt="Facebook" border="0" /> </a> </td> <td width="37" style="text-align: center; padding: 0 10px 0 10px;"> <a href="http://www.twitter.com/"> <img src="images/twitter.png" width="37" height="37" alt="Twitter" border="0" /> </a> </td> </tr> </table> </td> </tr> </table> </td> </tr>
Hozzáadjuk a kívánt stílusokat a láblécünkhöz a CSS-ben:
.footer {padding: 20px 30px 15px 30px;}
.footercopy {font-family: sans-serif; font-size: 14px; color: #ffffff;}
.footercopy a {color: #ffffff; text-decoration: underline;} 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.
@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body[yahoo] .buttonwrapper {background-color: transparent!important;}
body[yahoo] .button a {background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;}
} 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:
<a href="#" class="unsubscribe"> <font color="#ffffff">Unsubscribe</font> </a> <span class="hide">from this newsletter instantly</span>
és hozzáadjuk a következő CSS-t a media query-hez:
body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;} body[yahoo] .hide {display: none!important;} 
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:
