B2B online marketing blog

b2b online marketing - azaz online marketing üzleti oldala.

Cseh BalázsBalee
digitális divízióvezető
CompLex Kiadó, Wolters Kluwer


adwords_certified_partner_web_HU.gif

Aztmondják...

Jogszabály v. cégkereső:

CompLex

Jogszabályt Céget

Ezeket olvasgatom

Licenc

Creative Commons Licenc

Acid teszt

2008.02.28. 09:06 Cseh Balázs - Balee

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.



Az acid teszt megtekintése >>>

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
Ezek azok az elemek, amelyek alapvetőek ahhoz, hogy egy szabványos, html e-mailről beszélhessünk.

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.

Szólj hozzá!

Címkék: email standards project acid test acid teszt

Online marketing szótár
Szerzőtársammal, Julcsival kitaláltuk, hogy felépítünk egy online marketing szótárt, fogalomtárt, amely minden online marketing iránt érdeklődő épülésére és segítésére szolgálhat. Bízunk benne, hogy sikerrel járunk, kattints és nézd meg >>>

A bejegyzés trackback címe:

https://b2bonline.blog.hu/api/trackback/id/tr76357735

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

Nincsenek hozzászólások.