fps blog

Responsive Email Design

Egyre többen és egyre többet használjuk mobil eszközeinket emailek olvasására is. Egy amerikai kutatás szerint 2012. júniusától az USA-ban többen olvassák emailjeiket mobilon vagy tableten, mint számítógépükön vagy webmailen keresztül. A legérdekesebb, hogy az összes mobil eszközön megnyitott emailek 85%-kát Apple eszközön olvasták.

Tudom, ez Magyarország, de itthon is tanúi lehetünk a mobil eszközök hihetetlen terjedésének, így eljött az ideje, hogy az emailekkel is foglalkozz. A “hagyományos” html emailek (hírlevelek, különböző üzenetek, stb.) mobilon való megtekintésekor jelentkező problémákat az alábbi kép szemlélteti. Ez a hírlevél ma érkezett a postafiókomba (spam :)) és az iPhone-omon készítettem a képernyőképet.

Mi a gond ezzel?

• az elrendezés összecsúszik
• a szöveg mérete oly kicsi, hogy az olvashatatlan, ha elkezdem nagyítani, akkor nagyon hamar az idegeimre megy a tologatósdi
• a képek szintén aprók nem mondanak semmit
• a “tappolható” területek mérete nem felel meg az elvártnak, azaz az ujjammal képtelenség “eltalálni” azokat, csak nagyítás árán

Nyilvánvaló, hogy ez az állapot nem segít a hírleveled konverziós rátáján, tehát mindenképpen tenned kell valamit. A mobil vezeti az email forradalmat címmel a Return Path közreadta infografika formájában fél éves (2011. október - 2012. március) kutatásának eredményeit, melyet érdemes átnézned, és nem lesz kétséged afelől, hogy a hírleveleiden dolgoznod kell.

Mi a megoldás?

Ha olvastad a korábbi bejegyzésünket a Responsive Web Designról, akkor már sejtheted is, igen, a Responsive Email Design. Szerencsére az okostelefonok, tabletek levelező kliensei elégségesen támogatják a vonatkozó W3C ajánlásokat, így lehetőség van arra, hogy RWD-t alkalmazz(unk).

Mit kell tenned?

Újra kell tervezni a hírleveleket, több ok miatt is:

• szinte biztos, hogy a mostani html emailben a linkek, gombok “tappolható” mérete kicsi és nem felel meg a kényelmes érintőképernyős használatnak
• fogadok, hogy feleslegesen túl sok a szöveg
• az is valószínű, hogy sok képet és nagy méretben használsz. Erről le kell mondani, mert szükség van a gyors betöltésre. A mobil email kliensek azonnal letöltik a képeket is, szemben a desktopos kliensekkel, melyek alapértelmezetten megkérdezik, hogy le akarod tölteni azokat, vagy sem.

Ajánlom figyelmedbe a Luke Wroblewski által kitalált Mobile First paradigmát, illetve egy infografikát, ami bemutatja a tökéletes mobil email anatómiáját.

Talán a legfontosabb

Hajlamosak vagyunk nem folyamatokban gondolkodni. Megelégszünk azzal, hogy elkészítjük a szuper responsive email designos HTML emailünket és örülünk. Vajon a tökéletes call-to-action gombunkra kattintva a felhasználó egy mobilra optimalizált oldalra fog érkezni? Ha nem, felesleges volt minden erőfeszítés.

Kolozsi István - kolboid
webergonómus
Informatikai kompetenciáira alapozva kezdetben programozással foglalkozott, majd a felhasználóbarát megoldások, később a UX Design felé fordult. Területe a projekt koordináció és webergonómia.

Tetszett a poszt? Oszd meg Te is!