Ako ste se ikada pitali zašto svi email-ovi liče kao nešto što ste videli nekada davno na vašem omiljenom Netscape browser-u ili prvim verzijama internet explorera, zapravo postoji razlog za to.
Web dizajneri daju sve od sebe da naprave nezaboravno korisničko iskustvo kada neko poseti vebsajt (UX ili user experience), međutim to generalno može da se izvede, sve dok taj sajt-web strana je otvorena pomoću nekog savremenog browser-a, dok kada se spustimo na nivo email klijenta, odnosno programa koji koristimo za čitanje email-ova, odjednom sve pada u vodu i počinjemo da uviđamo da odjednom nema video klipova, nema animacija, nema promene stanja elementa na prelaz mišem preko istog i slično.
Reč „nemoguće“ se često može čuti iz ugla gde programeri obitavaju, kada dizajner smisli nešto inovativno u pravcu dizajna email template-a, odnosno izgleda samog email-a. Zašto je to tako i šta to programeri znaju kada tako lako koriste termin „nemoguće“.
Postoje pravila koje moramo ispuniti kako bi naš email izgledao identično ako ga gledamo kroz različite email klijente poput Microsoft Outlook-a, Thunderbird-a, Yahoo mail ili Gmail-a itd. Kao što website, može ponekad izgledati različito u različitim browser-ima, tako i email može izgledati različito, ali to nije nešto što najčešće želimo i uglavnom to predstavlja neki problem u formi polomljene strukture email-a, pojavi se deblja bordura, ili bordura druge boje od željene, link druge boje od željene ili rastojanja jednostavno ne odgovaraju onome što smo isprogramirali u jednom od gore pomenutih email klijenata, dok u drugim možda sve radi kako treba.
Pa kako ovo sve onda spojiti da email-ovi svuda izgledaju identično? Odgovor je dvostran. Sa jedne strane dizajn mora biti prost i nezahtevan – dizajner treba da ima u glavi excel tabelu kada dizajnira, vodeći računa o kolonama – grid layout, dok sa druge strane, programer mora da zna šta radi, šta će proći i šta neće proći, a to iskustvo/osećaj dolazi sa vremenom, ali napisaćemo par pravila, kako za dizajn, tako i za programiranje.
Priča počinje
Nekada davno, najpopularniji email klijent je bio Microsoft Outlook. Windows kao dominantni operativni sistem, gurao je svoj email klijent i tako smo silom prilika dobili neku polaznu osnovu prema kojoj smo morali da se prilagođavamo. Outlook se umnogome oslanjao na problematični Internet Explorer, koji, možemo da kažemo slobodno, nije mnogo voleo internet (niti je internet voleo njega), bio je trom i css noviteti su teško bili prihvaćeni i podržane od strane istog. Inače ovo ponašanje je internet explorer iliti exploder zadržao do poslednje verzije.
Budući da adekvatne outlook verzije i dalje se oslanjaju na svoje verzije internet explorer-a, a internet exploreri imaju ograničen pogled na CSS svet (CSS – cascading style sheet, iliti šminkeraj za web), a pošto i dan danas veliki procenat ljudi koristi Outlook kao default-ni email klijent, dolazimo do toga da je presek da HTML tabele su nešto što je podržano od strane svih verzija email klijenata, pa samim tim to predstavlja osnov svakog modernog email template-a (izgleda email-a).
Primera radi, outlook 2003, se oslanja na famozni i dobro poznati Internet Explorer 6, gde mnogo stvari nije bilo podržano – slike su morale biti u RGB, a ne u CMYK formatu npr, ali dobro ne moramo da pišemo HTML koristeći velika slova, iako neki email klijenti i to traže, ali sva sreća procentaža takvih email klijenata je zanemariva.
Zato je iznad napisano da dizajneri moraju da razmišljaju u smeru priprostog dizajna, baziranog na tabelarnom izgledu – grid layout.
Kako da napravim email da liči na nešto onda?
Iako je problem očigledan i dalje prisutan (da, i u 2021) , postoji lista pravila koje možeš pratiti kako bi napravio nešto što i ne izgleda tako loše, a da ne čuješ „Nemoguće“, a to su:
- Ne komplikuj – jednostavnost je ključna reč kada pričamo o dizajnu email-ova. Dizajneri treba da inspiraciju nađu u tabelarnom prikazu, gde su elementi pozicionirani jedni ispod drugih, jer će programeri koristiti upravo tabele da sprovedu dizajn u HTML.
- Širina email-a bi trebala da bude što manja npr od 650px – 700px. Odzivni layout, zavisno od širine vašeg uređaja je nešto što se polako provlači i što je postojano u novim email klijentima, ali ne i u svim, pa je zato bitno da širina ne bude 100% širine ekrana, nego fiksno 650px ili 700px. Razlog zašto nije dobro da imate ultra širok dizajn (1200+ piksela) je taj što će najverovatnije biti teško da neko pročita sve, ako email gleda na svom telefonu, pa gledajte da širina bude što manja moguća.
- Dizajn bi trebalo da koristi samo sistemske fontove poput Arial, Tahoma, Verdana itd – međutim sistemski font jednog operativnog sistema ne mora da znači da je taj font prisutan i na drugom operativnom sistemu. Najbolje je da pogledate listu sveprisutnih sistemskih fontova npr na ovom linku. Ako se ipak odlučite da koristite neki nesistemski font – ne komplikujte(prvo pravilo) – napravite sliku od tog elementa i u alt atribut img html tag-a stavite tu reč, kako bi, kada email ne učita, ipak lepo moglo pročitati o čemu se radi.
- Glavni cilj sa email-ovima, nisu slike, već tekst, odnosno informacija koju želite da prosledite. Imajući to u vidu, cilj je da imate što manje slika u dizajnu. Slike, inicijalno, nisu vidljive, sve dok ne stavite pošaljioca u listu kontakata(što se nikad neće desiti sa vašim newsletter-om), pa je sva prilika da niko neće videti nijednu sliku inicijalno sve dok ne klikne na dugme za preuzimanje slika. Do tada, čitajući tekst, bi trebalo da stekne ideju o čemu se tu radi, a tad mu neće ni trebati slike. Takođe, neučitane slike zauzimaju mesto, pa email može izgledati čudno sa razbacanim tekstom svuda unaokolo dok se slike ne učitaju i sve dobije smisao opet.
- Oborene ivice na elementima, gradijenti, slike ispod teksta – ove omiljene okuke svih dizajnera treba zaobilaziti prilikom dizajna email-ova, jer će biti rešeni kroz dodatne slike, koje želimo da smanjimo. Oborene ivice, kao css stil su moguće u jednom email klijentu, dok u drugom ili drugima npr nisu, a pošto želimo da sve i svuda izgleda lepo, onda slika :/
- Ne ubacujte video ili flash materijale u newsletter-e. Čak i animirani gif formati često ne rade kako treba – prikaže se samo prvi frejm gif animacije u mnoštvu email klijenata.
- Programeri ne mogu implementirani skrolovanje na nekom elementu email-a, pošto tabele nativno ne podržavaju skrolovanje u nekoj od njenih ćelija. CSS pravila i HTML tagovi koji bi potencijalno ovo mogli da reše, u email klijentima, u najvećem procentu ne rade kako treba.
- Kažeš mnogo je ovo, mislim da je pametno da pošaljem ogromnu sliku email-a, pre nego sadržaj? Loša ideja, slika se neće učitati inicijalno, pa će primaoci pomisliti da su dobili prazan email. Takođe nije pametno poslati email sa visokom uvodnom slikom, jer iz istog razloga, ova slika će zauzeti mesto, a neće se inicijalno prikazati, pa će sav sadržaj pogurati nadole, što u zavisnosti od veličine prozora za pregled sadržaja email-a može dovesti do utiska dobijanja praznog email-a – pa ako želiš uvodnu sliku, neka bude do 100px visine.
Zašto moram da koristim html tabele za email template
Razlog je prost – kada presečemo podršku prema HTML tag-ovima velike većine email klijenata, vidimo da je HTML table tag podržan svuda.
Stvari postaju problematičnije prilikom programiranja email-a
Developer-i / programeri će putovati kroz vreme prilikom razvoja email template-a. Koristiće tabelarne atribute poput rowspan i colspan za spajanje tabelarnih ćelija kroz redove ili kolone, ili cellpadding i cellspacing ili font. Takođe će dosta pisati dosta tzv. inline css-a(css stilovi pisani unutar style atributa npr <td style=“color:red“>Pera</td>), kako bi osigurali da svi ili približno svi email klijenti na identičan način prikazuju email.
Možda sam ja prestrog prema Outlook-u ili Majkrosoftu, jer čak i moderni email klijenti imaju svoje probleme. Gmail, primera radi, obožava da dodaje linkove na nečemu što mu se učini da je broj telefona i tako menja html kod vašeg newsletter-a, jer je definitivno pametniji od outlook-a, ali i to pravi problem, jer nešto što je zamišljeno kao tekst crvene boje npr, odjednom dobije prirodno plavu boju linka i postane podvučeno, što menja dizajn i ne izgleda konzistentno svuda.
Takođe nešto što sam naučio na teži način, nikada ne razdvajaj tekst od ivica koristeći css padding ili margin, jer neki email klijenti koriste padding, a ignorišu margin, dok drugi implementiraju margin, a ignorišu padding. Umesto toga koristi ćelije tabele za unos vertikalnog ili horizontalnog razmaka.
Odzivni layout, odnosno mogućnost prilagođavanja širine email-a širini ekrana korisnika, je i dalje u domenu naučne fantastike za neke email klijente, kao što već rekoh, pa se nemojte oslanjati na media query-je da će raditi kako treba, ali ne kažem da ih ne treba implementirati i time unaprediti iskustvo čitanja email-a život nekima od nas koji koriste moderne email klijente koji podržavaju tako nešto, ako možete tj.
Za inicijalno testiranje email-a, možete koristiti neku matoru verziju internet explorera, firefox-a i hrome-a, kako biste videli da li je sve onako kako treba da bude.
Kada tvoj email prođe ovaj inicijalni test, onda produži na email klijente i to outlook 2003, outlook 2007, yahoo email, gmail, hotmail. Možeš testirati svoj email koristeći besplatni servis, npr mailchimp.
Srećno!
Komentari