Email Standards Project acid teszt
A tesztről
Az acid tesztet a webstandards.org által készített teszt inspirálta. A webstandards.org tesztje a webszabványok általános, alapos tesztje, de az ESP verziója korlátozott számú, pontosan meghatározott célú CSS property-t vizsgál.
A Campaign Monitor oldalon, egy posztban jelentették be az Email Standards Project beindulását. A cél az volt, hogy ne egy kötött tesztelési eljárás legyen, hanem a webes designer/fejlesztő közösségtől kértek a projekt elindítói javaslatokat, visszajelzéseket. Azt akarták megtudni, hogy melyek azok a logikus, és megfelelő módon alátámasztható dolgok, amelyek elvárhatók az email-kliensek fejlesztőitől, illetve mi az az alap támogatás a kliensekben, amely lehetővé teszi, hogy szabványos HTML alapú emaileket készíthessünk.
A visszajelzések összegzését követően állt össze az acid teszt. Ez az, amelyet a projekt szervezői és mi a b2bonline blog írói is használunk arra, hogy elemezzük, teszteljük a különböző klienseket.
Hogyan állt össze az Acid teszt?
Egy olyan e-mail klienst (akár web-alapú, akár asztali szoftver) lefejleszteni, amely minden szempontból megfelel a webes szabványoknak, nem egyszerű feladat. Éppen azért, hogy a fejlesztések kivitelezhetők legyenek és beilleszthetőek a folyamatos fejlesztési folyamatokba, a tesztet úgy állították össze, hogy a legalapvetőbb szabvány támogatást tartalmazza.
Ezáltal azok a fejlesztők, akik hajlandóak segíteni, részt venni, alakítani a kliens programokat, nem kell, hogy mindent eldobva, az alapoktól kezdjék átírni a szoftvereiket, hanem lépésről lépésre alakíthatják át a szolgáltatást.
Mit tesztel az Acid teszt?
A cél az, hogy a következő CSS tulajdonságok és elemek közül minél többet, minél jobban, pontosabban, hibamentesen jelenítsenek meg a kliensek:
- Background-image
- Background-position
- Background-position a:hover
- Border
- Color/background-color
- Descendant-selectors
- Float/clear
- Font family/size/weight/style
- Font-family names with quotes
- Font inheritance
- Line-height
- List-style-image
- Margin
- Padding
- Varying link-colors
- Width/height
A LEGFONTOSABBAK!
Background-image
A html alapú levélben lévő képek (termékképek, zsáner képek, stb.) legtöbbször inline vannak meghívva a kódban. Legjobb azonban ezeket CSS-ből meghívni, definiálni.
Ez nem csak a tartalom/design különválasztását segíti, de lehetővé teszi a CSS-t nem vagy nem megfelelően kezelő eszközöknek a tartalom pontos megjelenítését, még ha pl. a háttérkép nem is jelenik meg.
Az előnyök között említhető még a sávszélesség-csökkenés, a jobb teljesítmény, valamint CSS esetén jobb a szöveg alapú és a vakok és gyengén látók számára készült email kliensek megjelenítő képessége is. Ha a kliens a background-image CSS tulajdonságot nem támogatja, akkor marad az a megoldás, hogy a képeket inline kell meghívni.
Background-position
Ha a háttérképek megjelenítését támogatja a kliens, akkor az említett képek pozícionálása létfontosságú lesz az olvashatóság érdekében! A háttérképek gyakran olyan blokk-szintű elemekben kapnak helyet, amelyek HTML szöveget is tartalmaznak. A background-position CSS tulajdonság segít pozícionálni a háttérképeket, így a környezetében található szöveg nem válik olvashatatlanná.
Ha a pozícionálás nem működik megfelelően, akkor a tartalom elérhetősége, olvashatósága sajnos problémákba ütközhet, esetenként olvashatatlanná is válik a szöveg.
Color/background-color
A színek. Talán a design legalapvetőbb része, a design alapja a (megfelelő) színhasználat. Nem csak az a fontos, hogy az előtér/háttér színeket támogassa a kliens, hanem azt teljes körűen. Részleges támogatottság ugyanis problémákat okozhat! Ha például a fekete háttérszín nem jelenik meg, miközben a tartalom fehér betűkkel jelenik meg, az eredmény fehér szöveg fehér alapon, azaz végeredményben olvashatatlan és használhatatlan html e-mail.
Leszármazott (descedant) szelektorok
Egy remek módja a kód „tisztán tartásának”, illetve a CSS újrafelhasználhatóságának a leszármazott szelektorok alkalmazása. A támogatásuk nélkül minden CSS-sel formázott elemhez ID-kat, osztályokat kell fűzni. Ez feleslegesen növeli a file méretét, és bonyolítja a kódolást.
Float/clear
A float tulajdonság alapvető a szabvány alapú kód tervezéséhez. Amikor a table kikerült a tervezők (designer) szerszámkészletéből, a float tulajdonság a layout alapjává vált. A támogatása nélkül a teljes design összeomolhat!
Ha az elemek floattal vannak beállítva, a clear tulajdonság nélkülözhetetlen a további elemek pozícionálásához. Ez teszi ugyanis lehetővé, hogy a float-olt elemek nem fednek le velük szomszédos tartalmakat.
Margin
Margin támogatás nélkül, a design elhibázottnak látszik. Amellett, hogy az e-mail külalakját szétrombolja, ha a kliens nem támogatja a margint, de ha az elemek távolságtartás nélkül kerülnek egymás mellé, margin hiányában a bennük található szöveg könnyen olvashatatlanná válhat.
Padding
Ha a padding tulajdonságot nem támogatja a kliens, kevésbé fájdalmas, mint a margók hiánya, de ettől még szintén fontos hiányosság lehet. Ha együtt használjuk más elemekkel (background-color, list-style-image, border) akkor lesz igazán feltűnő a probléma. Ekkor ugyanis a támogatás hiányának következményei megsokszorozódnak, és összeomlik mind a design, mind a tartalom.
A linkek színeinek változatása
A link színe egy HTML dokumentumban gyakran a háttérszín variációja, ezért az olvashatóság megőrzése érdekében a linkek színét ennek megfelelően kell tudni változtatni. Ha egy szülő link-szín hatálytalanít egy őt követő link színt, az az olvashatóság rovására mehet. Mivel ez túlmutat egyszerű esztétikai megfontolásokon, elengedhetetlenül fontos az accesibility szempontjából.
Width/height
A szélesség attribútum gyakrabban jelenik meg mint a magasság, ez utóbbit gyakran csak az esztétikai egyensúly megőrzése érdekében használják (háttérszínek kiterjesztése, stb.). De mindkettő létfontosságú bármilyen designban, hiányuk a a layout összeomlásához és a tartalom kezelhetetlenségéhez vezet.
A szélesség kiemelten fontos. Kifejezetten olyan tulajdonságok működése szempontjából, mint float és text-align, hiszen azok ezen alapulnak. Ha a szélesség nincs támogatva, a float céltalanná válik, a jobbra vagy középre igazított elemek nem lesznek pozícionálva, mivel a blokk szintű elemek alapértelmezett szélessége 100%.
Normál prioritással
Background-position a:hover
A hover használata a tagben használt háttérkép pozíciójának megváltoztatására széles körben elterjedt technika. Leggyakrabban a HTML szöveget tartalmazó navigációs elemek és gombok háttérszínének/képének megváltoztatására használják. Tulajdonképp, a támogatása nem kritikus az email design szempontjából, de javítja a linkek felismerhetőségét.
Border
A design nem hullik szét keretek hiányában. De ha hiányoznak, vagy pontatlanul kerülnek megjelenítésre, egyértelművé válik, hogy valami nincs rendben, még ha ezt a „valamit” nem is tudjuk hirtelen megfogalmazni, felismerni. Egyszerűen csak érezzük, hogy valami nem stimmel.
Font family/size/weight/style
Ha a kliens a font tulajdonságokat nem támogatja, a szöveg az alapértelmezett beállításokkal jelenik meg. Ettől nem lesz olvashatatlan az email, de megbonthatja az email-design egységét. Legjellemzőbb mikor egy serif font sans-serif lesz, vagy fordítva. A betűk alapvető részei a külalaknak, ezért pontos támogatásuk sarkalatos pont.
Betűtípusok nevei idézőjellel
Bár a leggyakoribb HTML fontnevek egyszavasak (Georgia, Arial, stb.), vannak olyanok, amelyeket több szóval jelölünk (Trebuchet MS, Lucinda Grande, stb.). A CSS irányelveknek megfelelően, a többszavas betűtípusok neveit idézőjelbe kell tenni. A web designerek eleve limitált számú fontkészletet használnak/használhatnak, ezt a listát tovább csökkenteni értelmetlen. A többszavas fontkészletek támogatásának hiánya nem okoz kritikus problémát, de tovább csökkenti az eleve szűkös lehetőségeket.
Font öröklődés
Kitűnő módja a kód tisztántartásának és a CSS "újrahasznosíthatóságának", ha kihasználhatjuk a font öröklődés előnyeit. Ha minden használt szelektornál meg kell adni a font formázást, megnöveli a fájl méretet és az email elkészítését felesleges munkával nehezítjük.
Line-height
A támogatás hiánya nem okoz problémát az olvashatóság és accesibility területén. De levegőssé teszi a designt és megnöveli az olvasáshatóságot. Mindenképp plusz megoldás ha ez a tulajdonság használható a kliensben.
List-style-image
Az UL-ek pontjainak kicsinosítása feldobja a designt. A két legnépszerűbb eljárás, az alapértelmezett list-style-image tulajdonság használata, a másik sokkal „kézre állóbb” eljárás: háttérképek és padding használata. Ha van list-style-image definiálva, és a megjelenítő motor nem támogatja, nincs nagy probléma, hiszen az alapértelmezett pötty jelenik meg. Ettől függetlenül használata jelentősen feldobja a designt.
Jövöbeni acid tesztek
A teszttel az a cél, hogy a mindennapi html email készítéshez/fejlesztéshez szükséges webes szabványokkal összhangban legyen. A jelenlegi teszt számtalan email komponens tesztelésével töltött órán, valamint a tapasztalatok blogposztokban történt megosztásán alapszik.
Minden poszttal és az érkezett hozzászólásokkal, az információkkal bővül, javul, változik a teszt. A cél továbbfejleszteni mind a tesztet, mind a projektet a globális web-design közösség visszajelzései alapján.
A projekt résztvevői, rajtunk keresztül is, üdvözölnek minden hozzászólást akár webdesigner, akár email-kliens fejlesztő, akár email készítő, vagy akár hírlevél olvasó is teszi. Hiszen a végső cél az, hogy olyan html alapú e-mail levelek és kliensek legyenek, amelyek élményt, szórakozást nyújtsanak egyformán mindenkinek országtól, böngészőtől, klienstől, mindentől függetlenül.
Jelen fordítás az http://www.email-standards.org engedélyével készült / The following is translated by permission from http://www.email-standards.org.
