Ce este un email responsive

Ce este un email responsive
Definitia unui  email responsive

In acest articol iti voi explica ce inseamna un email responsive si ce metode poti folosi.
Metodele folosite sunt: media queries si un layout fluid pentru a te asigura ca o sa ai o compabilitate maxima cu toti clientii de email.

Ce inseamna un email responsive:

- Conceptul de Responsive Design a fost introdus pentru prima oara de catre Ethan Marcotte in 2010, in articolul sau, Responsive Web Design, publicat pe A List Apart.

- Acesta se refera la capacitatea emailui sa se adapteze la rezolutia dispozitivului care este citit pe diverse dispozitive incat sa duca la disparitia/scoaterea scroll-ului orizontal si sa ai doar scroll vertical.

- In 80% din cazuri la crearea unui email responsive vom avea 2 tabele (griduri), care la o anumita rezolutie de la aranjarea pe orizontal (unul langa altul), se vor duce tabelele unul sub altul, astfel pe un dispozitiv cu o rezolutie mica de 320x480 vom vedea imaginea si textul clar ca pe un dispozitiv cu o rezolutie mai mare fara a fi nevoiti sa facem zoom. Pentru a obtine acest lucru avem nevouie de: media queries, tabel fluid si imagini flexibile.

Media Queries: Doar jumatate din solutie

Acestea sunt folosite pentru a incarca diferite stiluri de CSS pentru diferite rezolutii ce o sa-i ofere utilizatorului o vizualizare perfecta pe dispozitivul folosit.
A existat o perioada cand puteam folosi doar media queries pentru a avea un email responsive care functiona in sistemele de operare iOS si Android (ambele suporta media queries).
De atunci, a existat o proliferare a aplicatiilor de email create atat pentru iOS cat si pentru platformele android, cu diferite metode de dezvoltare si grade de sprijin pentru emailuri.
Datorita faptului ca media queries nu poate fi citit de unii clienti de email, precum Gmail, o sa folosim tabele fluide.

Tabele fluide


Cu ceva timp in urma foloseam o dimensiune fixa in crearea template-ului unui email si anume 780px ori 680px, chiar si 600px. Acum se folosesc din ce in ce mai mult unitati relative si procente, ceea ce ne ajuta ca dimensiunea template-ului sa se adapteze la rezolutia dispozitivului folosit pentru a citi emailul.
Desi la crearea unui template responsive folosesc procente, continutul care contine textele le pun intr-un tabel cu o dimsensiune fixa de 640px si apoi in 2 tabele de 320px pe care le voi folosi pentru a pastra responsive-ul. Aici intervine media queries.

Imagini fluide


Ultimul element folosit sunt imaginile fluide. La fel ca tabelele fluide vom folosi procente care ne vor ajuta ca imaginile sa-si modifice latimea si inaltimea in functie de rezolutia dispozitivului. Daca se foloseste o imagine mare vom adauga si un max-width care va fi in procente pentru a ne asigura ca nu va strica template-ul pe varianta desktop.



Se incarca ...