Odziven spletni design (RWD) danes poznamo vsi, manj ljudi pa pozna odzivne e-maile. Težava leži v tem, da e-mail nima standarda, zato smo prepuščeni na milost oz. nemilost bralnikov pošte, kot je Gmail in Outlook.
Zakaj nimamo RWD RED e-mailov?
Responsive Web Design(RWD) oz. slovensko odziven spletni design je način izvedbe, ki se prilagaja mediju na katerem se nahajamo. V praksi to pomeni, da imamo eno spletno stran do katere lahko dostopamo preko različnih naprav in brskalnikov. Njena vsebina pa bo vedno enaka in optimalno pripravljena za naš medij. Tako bi torej morali imeti za e-mail RED – Responsive Email Design.
Glavna težava je seveda e-mail standard, ki ga ni, kar pomeni da vsak bralnik e-mailov slednje prikazuje na svoj način. Največja težava pa Gmail in Outlook, ki imata veliko število uporabnikov in slabo podporo. Ostali e-mail klienti imajo sicer vsak svoje značilnosti, vendar imajo dobro HTML podporo.
Gmail e-mail klient odstrani “<style>” značko in tako prepreči postavljene e-mailov s pomočjo CSSja, ki ni vstavljen “inline”. V praksi to pomeni, da izgradnja odzivnih e-mailov ni možna. Outlook pa za prikazovanje e-mailov Wordovo okolje, ki ima zelo slabo CSS podporo. Zaradi tega smo še vedno primorani uporabljati tabele za pripravo e-mailov.
Na novejših napravah, predvsem iOS napravah je podpora naprednejšim CSS funkcijam dobro podprta. Vendar če želimo pokriti vse uporabnike moramo upoštevati Gmail in Outlook, ki tako celoten eko sistem priprave e-mailov zadržujeta v razvoju.
Odziven e-mail (RED e-mail)
Odzivni e-maili so e-maili, ki avtomatsko prilagodijo svojo postavitev napravi uporabnika na kateri se e-mail bere. Poleg tega pa nudi tudi optimalno berljivost in izkušnjo na preostalih medijih, kot so tablice in dekstop računalniki. Ključ do takšnih e-mailov tiči v uporabi prilagodljivih postavitev s “fluidnimi” tabelami, sorazmerno spreminjanje velikosti slik in optimizacijo velikosti pisave za različne naprave. Če nam ta izziv ni dovolj lahko dodamo še “dark-mode” podporo:)
Osnovni pristop:
- Prilagodljive postavitve: Za tabele in vsebnike uporabite širine, ki temeljijo na odstotkih, namesto fiksnih širin slikovnih pik, da se postavitev tekoče prilagodi kateri koli velikosti zaslona.
- Prilagodljive slike: Zagotovite, da se velikost slik samodejno in sorazmerno spreminja s postavitvijo, pri čemer ohranite njihovo kakovost na različnih zaslonih.
- Berljivost: Optimizirajte velikosti pisav in razmik med vrsticami za manjše zaslone, pogosto z uporabo večjih pisav in zagotavljanjem zadostnega kontrasta.
- Pristop, ki daje prednost mobilnim napravam (mobile-first): Najprej dajte prednost vsebini in oblikovanju za najmanjši zaslon, pri čemer zagotovite, da so najpomembnejše informacije enostavno dostopne na mobilnih napravah.
- Postavitev z enim stolpcem: Zasnova z enim stolpcem je pogosto enostavnejša za odzivnost in je enostavna za branje na mobilnih napravah. Velikokrat ta postavitev ostane tudi za dekstop uporabnike.
Najboljše prakse za implementacijo:
- Uporabite odzivne predloge: Številne platforme za e-poštno trženje ponujajo vnaprej izdelane, odzivne predloge, ki prihranijo čas in zagotavljajo, da je zasnova optimizirana že od samega začetka. Če imate izzive pa se lahko tega lotite sami. Potrebno je predvsem veliko testiranja.
- Oblikovanje za dotik: Ustvarite gumbe (CTA), ki so dovolj veliki, da se jih je mogoče enostavno dotakniti na zaslonu mobilne naprave, z minimalnim ciljnim območjem 44x 44px, v skladu z Applovimi smernicami.
- Uporabite nadomestne pisave: Pri uporabi spletnih pisav jih vedno deklarirajte z nadomestnimi pisavami, če e-poštni odjemalec prejemnika ne podpira želene pisave. Mobilne naprave niso enake računalnikom in fonti so precej drugačni.
- Dajte prednost vsebini: Odločite se, katera vsebina je najpomembnejša za manjše zaslone, in razmislite o skrivanju manj bistvene vsebine za mobilno postavitev.
- Razmislite o temnem načinu(dark-mode): Preizkusite svoja e-poštna sporočila in se prepričajte, da so videti dobro tako v svetlem kot temnem načinu, saj ima veliko število uporabnikov omogočen temni način.
- Poenostavite odjavo: Uporabnikom zagotovite jasen in enostaven način za odjavo, da izboljšate angažiranost in upoštevate najboljše prakse.
