Frissült a Gmail is – Reszponzív hírlevelek és beágyazott stílusok

gmail-updates-header

A Google végre felhagyott azzal, hogy az Outlook-kal holtversenyben vezesse a "Gyönyörűen megformázott hírlevelek szétbombázása" versenyt. Ugye nem is volt olyan egyszerű megírni egy kampánylevelet, ami tele van szemkápráztató vizuális tartalommal úgy, hogy az minden levelezőrendszerben ugyanúgy, vagy inkább hasonlóan jelenjen meg.

A GMAIL MIATT KELLETT INLINE IS KÓDOLNI.

Akik már több száz hírlevelet készítettek, bizonyára találkoztak azokkal kompatibilitási hibákkal, amit a különböző levelezők szabályrendszere és készlet támogatása állít fel. A világ egyik elsőszámú levelezője sem támogatott olyan általános szabályokat, amiket a webfejlesztők nap mint nap használnak weboldalak, hírlevelek készítésére. Nem foglalkozott a mobilbarát kinézetet meghatározó bejegyzésekkel és nem vette figyelembe a fontos CSS osztályokat sem. Ráadásul támogatásbeli eltérések voltak a webes Gmail, az Inbox, az Android alkalmazás, az iOS applikáció, a G Suite és a Gmail mobil alkalmazások között, főleg a nem Google által kezelt e-mail fiókok esetében (GANGA).


webmal-market-share

movers-shakers

A Litmus 2015-ös felmérése szerint a webes levelezőrendszerek között 40% piaci részesedést szerzett a Google.

 

A Gmail frissítések pontokban:

  • Támogatja a media query technikát a levelek mobilbaráttá alakításáért (max-width, max-device-width, min-width, min-device-width)
  • Beágyazott CSS3 osztályok és ID (csak arészbe)
  • Használható a :hover pseudo, de csak a webes Gmailben aktivál
  • Elfogadja a háttérre vonatkozó background-position és background-size osztályokat
  • Mobil felhasználói élmény felelőssége mostmár a designer kezében van
  • Dokumentáció a használathoz

Várnunk kell még:

  • Web fontokat nem olvassa be (pl. Google Fonts betűkészlet behívása)
  • Animációkat, áttűnéseket nem jeleníti meg
  • Absolute és Fixed pozíciók
  • Videóbeágyazás
  • :hover pseudo Mobilon és alkalmazásokban, valamint az Inboxban
  • Interaktív e-mailek

Beágyazott és inline kódolás

Melyik Gmail klienseket érinti a frissítés?



  • Asztali Webmail
  • Mobile Webmail
  • G Suite Basic (Google Apps for Work)
  • Android alkalmazás
  • Inbox (asztali, iOS, Android)


  • Gmail Apps Free Edition
  • Gmail App idegen email címmel (GANDA)
  • iOS App


Teljes lista a támogatott CSS osztályokról: