Responsive Email Design

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.

hírlevél képe egy mobilon, ami kicsi, zsúfolt, olvashatatlan és átláthatatlan

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.

Anatomy of the perfect mobile email infografika a Litmustól

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.

UPDATE
A Google végre 2016. szeptember végére megígérte, hogy Gmailben támogatni fogja a media query-k használatát! \o/

Kolozsi István

Egy fickó, akit a UX és a pszichológia foglalkoztat. Szimplán designernek, azaz tervezőnek tartja magát. Sokan kolboid néven ismerik. Legfőképpen digitális tanácsadással foglalkozik.

A tudásmegosztás jó dolog.
Mindenkinek ezt kellene tennie.



Ez bizony kár!

Sajnáljuk, ha így gondolod, de ez szíved joga.
Olvasd el ezt a posztot, hátha változik a véleményed!

Elolvasom

Egyetértünk!

Küldetésünk a tudásmegosztás, ezért is küldünk havonta hírlevelet. Jelenleg 4503 tudáséhes embernek. Érdemes feliratkoznod!


Gratulálunk!

Nagyszerűen döntöttél. Te is oszd meg a tudásod a világgal.

Hozzászólások