Iată câteva sfaturi pentru a crea scrisoarea de răspuns perfectă.
Serviciile de corespondență mari au un editor de blocuri încorporat. Colectează e-mailuri simple receptive și acestea sunt incluse în prețul abonamentului. Nu va funcționa să completați o scrisoare creativă complexă în editor - aceasta este munca designerului și a designerului de layout. Mai întâi, să ne dăm seama ce literă este clasificată ca complexă și care este simplă.
Urmează „cipurile”. Undeva puteți seta dimensiunea exactă pentru blocuri individuale, dar undeva nu puteți. Într-un editor, puteți colecta doar litere cu o singură coloană, în celălalt nu există restricții privind numărul de coloane. În unele editoare, puteți chiar să personalizați ce blocuri să afișați pe versiunea desktop și care sunt numai pe dispozitivele mobile.
Designerul și designerul de layout oferă soluții individuale, editorul oferă soluții standard. Rețineți că atunci când asamblați o scrisoare în editor, sunteți în orice caz limitat, de exemplu, de setul de fonturi și dimensiunile acestora.
Designerul o va face așa cum ți-ai dorit. Designerul de layout se va gândi la cum să rearanjați blocurile pe dispozitivele mobile - așa cum ați planificat. Când lucrați într-un editor de blocuri, vă bazați pe soluțiile oferite de dezvoltatori.
Editorul adaptează scrisoarea conform propriului algoritm; algoritmul nu poate fi modificat.
Dacă ați elaborat structura, ați scris textul și ați ridicat imaginile, atunci va dura de la treizeci de minute până la două ore pentru a crea o scrisoare. Permiteți-ne să vă reamintim că nu plătiți pentru aspect, lucrul cu editorul este inclus în costul contului dvs.
O echipă de designer independent și designer de layout va face o scrisoare în două sau trei zile, va costa între 5.000 și 15.000 de ruble. Dacă comandați de la o agenție, va fi mult mai scump. Îți amintești povestea din introducere? Pentru Serghei, alegerea este evidentă: el va colecta singur scrisoarea, în situația lui este mai ieftină și mai rapidă.
Este mai bine să asamblați o scrisoare simplă de răspuns în editorul încorporat. Dacă doriți soluții non-standard, externalizați.
Cum să asamblați o scrisoare în editorul încorporat
Cei care asamblează o scrisoare în editor nu trebuie să cunoască codul. Singurul lucru de care aveți nevoie este să vă gândiți la structura scrisorii, să luați imagini și să scrieți textul. Fără tipărire „manuală” - veți asambla o scrisoare din blocuri, la fel ca în generatorul de pagini de destinație.
Pasul 1. Contur sau prototip al scrisorii
Începeți cu o schiță brută, desenați pe hârtie o diagramă a viitoarei litere: unde va fi titlul, unde este poza, unde este butonul etc. Dacă aveți timp, puneți împreună un prototip cu drepturi depline în Balsamiq sau NinjaMock. Nu este o rușine să arăți un astfel de prototip regizorului și să-l transferi în munca designerului.
Pasul 2. Aspectul scrisorii în editor
- Adăugați numărul necesar de coloane pe baza unei scheme sau a unui prototip gata făcut
- Trageți elementele necesare în corpul scrisorii
De obicei, principiul drag-and-drop funcționează în editorii încorporați. Dacă al tău nu este așa, uită-te la articolele din Baza de cunoștințe - principiile de lucru în editor sunt descrise acolo.
- Personalizați conținutul elementelor: umplutură, spațiere, aliniere și stil
Aici introduceți textul dorit, adăugați o fotografie sau ilustrație, cu sau fără linkuri. Nu uitați că puteți adăuga o imagine animată, majoritatea editorilor acceptă formatul GIF.
Doar nu exagerați cu dimensiunea fișierului. Clienților de e-mail nu le plac literele „grele” și își pot ascunde conținutul sub butonul „Afișați complet” - ca, de exemplu, Gmail. Selectați fișierele astfel încât litera finală să nu cântărească mai mult de 600 KB, aceasta este dimensiunea optimă.
Nu uitați să personalizați butoanele și să adăugați legături de navigare la ele.
Pasul 3. Testarea capacității de răspuns în editorul încorporat
Când e-mailul este gata, verificați cum apare pe diferite dispozitive.
În 90% din cazuri, totul va fi în ordine, blocurile vor fi „reconstruite” automat. Dacă aspectul încă „zboară” sau rezultatul nu vă convine - verificați valorile indentărilor din blocuri, ar trebui să fie aceleași. Dacă un bloc se retrage cu 10 puncte, iar celălalt cu 30, este posibil ca acestea să nu fie rearanjate corect în versiunea mobilă. Dacă ambele blocuri scad cu 10 puncte, cel mai probabil vei fi bine.
Pasul 4. Verificarea adaptabilității pe serviciile terțelor părți
Verificați rezultatul prin Litmus sau Email pe Acid. Aceste servicii vă vor arăta cum va fi afișat e-mailul pe diferite dispozitive, în diferite browsere și diferiți clienți de e-mail.
În unele editoare, verificarea prin Litmus este integrată implicit. Dacă editorul dvs. nu are această opțiune, trimiteți o copie de test a scrisorii la un e-mail special, care va fi dat după înregistrarea la Litmus.
Serviciul este cu plată, un abonament lunar în Litmus începe de la 79 USD, în Email on Acid - de la 45 USD. Dacă trimiteți o scrisoare o dată pe lună, poate fi costisitoare. Ca ultimă soluție, încercați Browser Shots, este vechi și incomod, dar gratuit. Rețineți că astfel de servicii nu sunt garantate 100%. Chiar dacă totul este în regulă în Litmus, acesta nu este un motiv pentru a începe imediat lista de corespondență. Trimite scrisoarea la adresa ta personală și deschide-o acolo.
Alegeți un editor care vă arată cum arată scrisoarea pe diferite dispozitive. Ideal dacă editorul este integrat cu serviciul Litmus. Dacă nu există integrare, verificați adaptabilitatea manual prin e-mail personal.
Cum să evaluați rezultatul muncii - propriul dvs. sau un designer de layout
Dacă colectați singur scrisoarea, verificați adaptabilitatea din interiorul editorului și uitați-vă la scrisoarea din corespondența dvs. personală - este suficient. Dacă doriți să testați adaptabilitatea pe mai multe dispozitive, browsere și clienți de e-mail simultan - atunci cumpărați un cont în Litmus sau Email pe Acid, vedeți rezultatul acolo.
Cei care externalizează layout-ul nu trebuie să-și cumpere un cont, cereți designerului de layout capturi de ecran de la Litmus. Dacă este un profesionist, atunci verifică scrisorile despre astfel de servicii, trimiterea unei capturi de ecran nu este o problemă pentru el. Când verificați, uitați-vă mai atent la clienții de corespondență, în cea mai mare parte, aici apar jamburi. Asigurați-vă că verificați cum se deschide o scrisoare în Outlook, Gmail, Yandex și Mail.ru - aceștia sunt cei mai populari clienți de e-mail din Rusia.
Nu ar trebui să pierdeți timpul reparând aspectul dacă este afișat incorect pe al treilea iPhone, în a șaptea versiune de Internet Explorer sau în clientul de e-mail The Bat. Da, vor exista întotdeauna cei care folosesc al treilea iPhone, dar sunt o minoritate. Merită să reluăm aspectul pentru 1-2% din baza totală? Depinde de cantitatea și „calitate” bazei.
Sperăm că l-ai segmentat și știi totul despre abonații tăi. Dacă 1-2% sunt 10.000 de oameni, atunci merită deranjul. Dacă lucrați în b2b și acești 1-2% sunt companii de management, proprietari de afaceri și alți clienți VIP, va trebui să adaptați scrisori pentru ei.
Asigurați-vă că scrisoarea este afișată corespunzător în Outlook, Gmail, Yandex și Mail.ru - este suficient.
Notă de marketing
- Decideți formatul scrisorii, care va fi: standard și simplu sau complex și creativ. Oferiți scrisori cu o structură complexă designerului și designerului de layout. Colectați scrisori simple în editorul serviciului de corespondență, acestea sunt adaptate implicit.
- Verificați rezultatul în editorul încorporat și, dacă bugetul dvs. permite, pe servicii terțe. Când acceptați o scrisoare de la un designer de aspect, solicitați capturi de ecran care confirmă că scrisoarea este afișată corect - cel puțin în clienții de e-mail populari și browserele populare.
- Asigurați-vă că vizualizați scrisoarea prin corespondență personală, cel puțin în principalii clienți de corespondență și din modelele actuale de smartphone-uri pe iOS și Android.
Plus
Unul dintre cititorii blogului Web Council a cerut să vorbească despre aspectul listei de corespondență. Eu însumi practic nu fac asta. Îmi amintesc că la un moment dat m-am jucat cu șabloane pentru Subscribe.ru și îmi amintesc că era o afacere tristă. Problema este că serviciile de e-mail nu funcționează bine cu aspectul bloc. Și chiar mai rău cu stilurile CSS. Au trecut atât de mulți ani, iar lucrurile sunt încă acolo. Acum, majoritatea covârșitoare a scrisorilor pentru corespondență sunt tipărite la fel în mod vechi - folosind tabele. Și asta în 2016, când html5, css3 și alte dulciuri moderne au condus site-urile de mult timp.
În principiu, articole exhaustive despre aspectul scrisorilor sunt deja pe Habré, aici și aici. De asemenea, recomand să citești un locuitor local pe nume Arthur Koch, care a scris o mulțime de articole utile despre aspectul scrisorilor. Exemple: link 1, link 2.
Dar pentru ca postarea să nu fie goală, voi exprima totuși pe scurt principalele puncte ale aspectului scrisorilor pentru buletinele informative prin e-mail.
În primul rând, trebuie să uiți de aspectul blocului și de o foaie de stil separată. Totul este așezat în tabele, iar stilurile sunt scrise direct la locul lor, sau altfel - Inline. Arata cam asa:
În al doilea rând, ar trebui să resetați întotdeauna forțat valorile indentărilor, marginilor și marginilor, deoarece fiecare client de e-mail încearcă să le afișeze în felul său:
În al treilea rând, nu trebuie să vă deranjați cu etichetele doctype, head și body. Fără un doctype, scrisorile tale vor fi la fel peste tot, capul și corpul sunt aproape inutile, pentru că va fi în continuare tăiat de majoritatea serviciilor de corespondență (dovadă).
În al patrulea rând, dacă utilizați imagini cu litere, asigurați-vă că le notați dimensiunile.
dispunerea adaptivă a literelor
Foarte des, e-mailerii blochează imaginile în litere, iar dacă nu le setați dimensiunile, scrisoarea va arăta stângace. De asemenea, asigurați-vă că adăugați style = "display: block ;. Acest lucru va scăpa de problemele cu indentarea de neînțeles (de exemplu, în gmail):
Și în niciun caz nu utilizați imagini cu un singur pixel ca distanțiere pentru celulele tabelului! Scrisoarea dvs. este garantată să ajungă în spam. Dacă aveți nevoie de un distanțier, atunci ar trebui să utilizați o imagine cu dimensiuni de cel puțin 20x20 pixeli, care în stiluri ar trebui să fie forțată la dimensiunea 1x1 pixel.
În al cincilea rând, este posibil să se realizeze un aspect adaptiv pentru litere. Pare la fel de neîndemânatic ca toate lucrările cu mese în general, dar fără pește... Înțelegi singur. Pe scurt, pentru ca scrisoarea dvs. să aibă o oarecare aparență de receptivitate, partea sa de conținut ar trebui să fie încadrată cu o etichetă centrală cu stiluri adecvate:
Și în sfârșit, câteva link-uri utile. Aici puteți vedea ce etichete sunt acceptate de diferite servicii de e-mail. Și aici veți găsi câteva lucruri mai utile - „Features of HTML-literare layout”.
Dacă articolul s-a dovedit a fi util pentru dvs., vă rugăm să-l evaluați și să distribuiți pe rețelele de socializare:
(2 voturi, medie:
Intrări înrudite:
Aspectul e-mailurilor receptive: o notă de marketing
Majoritatea e-mailurilor nu se afișează corect pe dispozitivele mobile. Desenele diferă, iar textul trebuie să fie derulat și scalat. Aspectul receptiv este esențial pentru ca e-mailurile să arate bine pe diferite platforme.
Acest curs se adresează programatorilor HTML, dezvoltatorilor și agenților de marketing prin e-mail cu cunoștințe de bază despre HTML și CSS. Veți învăța ce sunt aspectul mobil și fluid, adaptarea blocului și a flancurilor. Aflați cum să pregătiți imagini pentru scrisori și luați în considerare instrumentele de bază de aspect.
După curs, vei putea crea litere care să se afișeze la fel de bine pe computer și pe dispozitive mobile.
2. Caracteristici ale aspectului receptiv
3. Abordări ale adaptării e-mailului
4. Șablon de e-mail receptiv de bază
5. Tehnici de adaptare mobilă
6. Instrumente de layout HTML
7. Rezumarea cursului
8. Email marketing responsive: test final
Posibilitățile nesfârșite de aranjare creativă a newsletterelor prin e-mail, utilizarea elementelor grafice și a conținutului interesant atrag atenția clientului. Astfel de e-mailuri nu sunt trimise către spam.
Crearea unei scrisori de corespondență
Pentru o aplicare cu succes a sistemului de email marketing nu este suficient sa ai o simpla logica a unui newsletter si a unei scrisori cu oferta.
30 de șabloane de e-mail receptive gratuite
Pentru a atrage atenția, informațiile ar trebui să fie prezentate într-un „înveliș” frumos, cu link-urile potrivite și imagini atractive. Prima impresie a literei este învelișul exterior, umplutura este secundară.
Utilizatorii primesc aproximativ o sută de scrisori în fiecare zi, trebuie să atragi atenția publicului cu un titlu și o propunere „luminoasă” și captivantă în interior. Pentru implementarea cu succes a designului și aspectului scrisorilor de corespondență, trebuie să vă gândiți la o strategie de implementare a proiectului:
- gândiți-vă la o idee și construiți corect o serie de litere;
- evidențiați principalul lucru, câștigați încrederea clientului oferind un produs interesant;
- scrisorile ar trebui să acționeze, să motiveze să cumpere un produs;
- design atractiv, profesioniștii vor face un aspect html a scrisorilor pentru corespondență.
Specialiștii se vor ocupa de aspectul receptiv al mesajelor de e-mail, astfel încât designul să arate grozav pe orice dispozitiv. Dacă magazinul dvs. online nu are o identitate corporativă, atunci vom realiza un aspect general al scrisorilor de marcă, care va sta la baza trimiterii prin corespondență. Marketingul este capacitatea de a evoca emoții într-o persoană, de a-și forma dorința de a cumpăra ceva. Suntem profesioniști în acest domeniu, așa că rezultatul muncii noastre este întotdeauna excelent.
Așezați litere html
- Ideea de a promova un produs/serviciu și implementarea acestuia în format text.
- Design de scrisori pentru corespondență.
- Aspectul e-mailurilor.
- Testarea rezultatului pe toate platformele și serviciile de e-mail.
Efectul maxim al literelor poate fi atins dacă fiecare verigă a procesului va îndeplini în mod clar și eficient sarcina atribuită. Un designer profesionist de layout și designeri vor prelua setarea funcționalității și a bazei tehnice a scrisorii, ținând cont de aspectul pentru anumiți clienți de e-mail. Scrisoarea se va afișa corect pe toate platformele - aceasta se numește cross-mailing.
Șabloane simple de recunoscut, lățimea potrivită, informații despre companie și un formular de dezabonare - atunci când toate acestea sunt luate în considerare, newsletter-ul tău va inspira încredere, iar clientul nici nu se va gândi să apese butonul „spam”.
Ce obții?
- Cross-mailing scrisori alcătuite conform tuturor regulilor
- Design frumos precis
- CTR ridicat
- Rată scăzută de dezabonări, adăugând la spam
- Text bine gândit, care vizează buletinele informative
- Segmentare eficientă
- Afișarea corectă a literelor în majoritatea clienților de e-mail
- Configurarea tehnică corectă a procesului de corespondență
Nu doar estetica contează - funcționalitatea este importantă. Dacă ești gata să începi să-ți primești scrisorile corect - va invitam la o consultatie gratuita.
Material actualizat 20.06.2018
Aspectul literelor diferă de aspectul web obișnuit datorită particularităților de interpretare în diverse interfețe web și clienți de e-mail.
Să aruncăm o privire la exemple despre cum să obțineți o afișare bună a scrisorii în toate tipurile de ISP și clienți de e-mail.
Cum arată un șablon de e-mail receptiv generic:
|
Pentru a remedia problema cu scalarea automată a e-mailurilor în iOS 10 și iOS 11, am adăugat:
Exemplu de eroare de autoscale
Următorul hack:
Webkit-text-size-adjust: niciunul; -ms-text-size-adjust: niciunul;
împiedică dispozitivele iOS să modifice conținutul scrisorii pentru lizibilitate. Acest lucru contrazice de obicei designul și poate rupe aspectul:
Să trecem la corpul scrisorii - secțiunea de corp. Culoarea de fundal a interfeței web poate fi diferită, așa că trebuie să înfășurați totul într-un tabel cu culoarea de fundal dorită, chiar dacă este albă, ca în acest caz:
| … |
Datorită suportului limitat pentru proprietățile de stil, cum ar fi lățimea maximă, de către clienții de corespondență Outlook 2007-2016, precum și clienții de corespondență similari IE Outlook 2003 și Lotus Mail, este necesar să se construiască o structură de tabel auxiliară în comentarii condiționate care să limitați lățimea mesajului în acești clienți de e-mail:
| Blocul 1 | Blocul 2 |
Cod cuprins intre:
va fi ignorat de toți clienții de e-mail, cu excepția Outlook 2007-2016 și clienții de e-mail similari IE.
Și fiecare dintre blocuri va avea următoarea structură:
| bloc |
De asemenea, în litere, uneori există o situație în care blocurile sunt eșalonate, totuși, la reconstrucție, este recomandabil să păstrați succesiunea logică a blocurilor și să reconstruiți nu blocul din dreapta sub stânga, ci invers - blocul din stânga sub dreapta. Acest lucru se poate face prin schimbarea direcției textului, acesta va arăta astfel:
|
Alte elemente și tehnici
Preheader invizibil
Aproape toate interfețele web afișează și primul text lângă linia de subiect:
În listele de corespondență, acestea sunt de obicei informații tehnice, cum ar fi „dezabonare” și „deschidere într-un browser”, care în mod clar nu motivează abonatul să deschidă scrisoarea, totuși, controlând textul afișat, puteți crește semnificativ șansa de a deschizând scrisoarea.
Pentru a face acest lucru, adăugați un cod cu următoarea structură chiar la începutul corpului html al literei:
Utilizarea unui preheader invizibil poate avea un impact negativ asupra livrării, așa că utilizați această tehnică cu atenție și monitorizați cu atenție livrarea prin postmaster.
Video în e-mailuri
Clientul de e-mail standard Mail a început din nou să redea html5-video, totuși - un link direct către youtube-video, plasat pe imagine.
Cu această implementare, videoclipul va fi afișat pe un strat în interfețele web Mail.ru (aproximativ 55%) și Gmail (aproximativ 14%). În acest caz, pe majoritatea dispozitivelor mobile, videoclipul va fi deschis în aplicația Youtube, fără a deschide un browser.
Dezavantajul acestei abordări este incapacitatea de a colecta statistici privind clicurile, deoarece linkul către Youtube trebuie să fie direct, iar urmărirea clicurilor pentru această listă de corespondență va trebui să fie dezactivată în ESP.
Testare
Cea mai importantă etapă a aspectului este testarea scrisorilor. Cel mai bun mod este încă de a verifica manual afișarea scrisorii în diverse interfețe web și clienți de e-mail, acest lucru poate ajuta la trimiterea unui aspect „brut” de scrisori sub forma unei arhive. Trebuie să știi ce platforme folosesc abonații tăi, ce furnizori de e-mail preferă și să le verifici manual cel puțin pe cele mai populare.
Pentru a accelera procesul de testare, puteți utiliza serviciile Litmus și EmailOnAcid, dar acest lucru nu evită necesitatea de a verifica manual afișarea fiecărei litere individuale.
Articolul a menționat câteva servicii, resurse și instrumente care, fără îndoială, vor fi utile unui designer de scrisori și nu numai. Iată o mică listă de resurse utile.
Instrumente și servicii:
Butoanele de e-mail este un generator de butoane care utilizează VML.
- Inserarea imaginilor de fundal în e-mailuri folosind VML.
Turnesol - testarea afișajului literelor.
Email On Acid este o alternativă la Litmus: testarea afișajului e-mailurilor.
Materiale utile:
Blog Litmus este lider pe piața de testare a e-mailului. Cazuri interesante și cele mai recente știri din lumea marketingului prin e-mail și a aspectului de e-mail.
Blog Email On Acid - cazuri interesante și cele mai recente știri din lumea marketingului prin e-mail și a aspectului de e-mail.
- primul blog despre marketing prin e-mail, vorbește despre cum să faci e-mailurile eficiente.
Blogul Tod's - cazuri interesante și materiale utile despre aspect și dezvoltare.
- Traducere
Oricine își citește periodic e-mailurile pe telefon știe că experiența poate fi pe cât de plăcută, pe atât de îngrozitoare. Faptul că un e-mail dintr-o listă de corespondență arată grozav pe un desktop nu înseamnă că totul va fi bine într-un client de e-mail mobil - pe un ecran mic, există adesea probleme cu fonturile, afișarea coloanelor și aspectul șabloanelor pur și simplu se întrerupe jos.
De ce trebuie să adaptați e-mailurile pentru dispozitivele mobile
O proporție semnificativă a audienței diferitelor companii de marketing prin e-mail vizualizează e-mailurile pe dispozitive mobile. Un studiu Campaign Monitor din 2011 a constatat că aproape 20% din deschiderile de e-mail au avut loc pe smartphone-uri și tablete, față de doar 4% în 2009. Aproape 90% dintre aceste descoperiri au fost făcute pe dispozitive iOS. Acum cifrele sunt chiar mai mari.În acest tutorial, vom analiza mai multe modalități de a îmbunătăți afișarea pe dispozitivele mobile (de la utilizarea interogărilor media pentru un aspect receptiv la tehnici mai avansate). În plus, vom analiza diverse probleme de design care apar chiar și în etapa de planificare a unei liste de corespondență, precum și despre cum să plasăm formulare de abonare pentru a primi scrisori pe smartphone-uri și tablete.
Tehnici de proiectare
Înainte de a ne scufunda în lumea tipăririi literelor, să vorbim despre aspectul vizual al acestui caz. Un punct interesant este că în timpul analizei materialului, vom crea două versiuni ale aceleiași scrisori - un șablon este conceput pentru a arăta bine pe clienții de e-mail desktop, iar al doilea ar trebui să fie plăcut de citit pe dispozitivele cu ecrane mici.De exemplu, iată cum ar putea arăta o astfel de scrisoare în Outlook:
Mai jos este același e-mail, dar deschis în aplicația Mail pentru iPhone. Diferența dintre cele două șabloane este clar vizibilă. Versiunea mobilă este mai restrânsă, are mai puține elemente vizuale opționale, dar este la fel de ușor de citit ca și versiunea desktop. Diferența de aspect dintre cele două opțiuni mobile este utilizarea CSS.
Litera din dreapta nu este diferită de cea din stânga, dar CSS nu a fost folosit în aspectul său. Unele părți ale textului s-au dovedit a fi prea mici și este aproape imposibil pentru utilizator să înțeleagă ceea ce este scris acolo - aceasta este problema milioanelor de scrisori de știri pe care proprietarii de dispozitive mobile le primesc în fiecare zi.
Considerații la crearea șabloanelor
A face e-mailuri care să arate bine pe mobil este mult mai dificilă decât utilizarea CSS personalizat. Notă și pentru alte lucruri:- Pe dispozitivele mobile, șabloanele cu o singură coloană nu mai largi de 500-600 de pixeli funcționează cel mai bine. Sunt mai ușor de citit și, chiar dacă există unele defecte în ele, toate „băncile” în orice caz arată mai bine.
- Conform ghidurilor Apple, zona țintă minimă pentru butoane și linkuri ar trebui să fie de 44 x 44 pixeli. Nu există nimic mai „neutilizat” decât o grămadă de mici link-uri greu de accesat pe micul ecran al unui dispozitiv mobil.
- Fontul minim care poate fi afișat pe un iPhone este de 13 pixeli. Este necesar să se țină cont de acest fapt la crearea textului scrisorii - dacă textul din șablon este introdus într-un font mai mic, atunci acesta va fi mărit automat, ceea ce poate rupe întregul aspect.
- Scrisoarea ar trebui să fie concisă și toate informațiile importante trebuie plasate în partea de sus. Derularea pe ecranele tactile cu degetul este mai dificilă decât pe un desktop cu un mouse.
- Dacă este posibil, utilizați afișajul: nicio proprietate; pentru a ascunde elementele șablonului opționale. Butoanele de partajare a rețelelor sociale sunt adecvate pe un desktop, dar nu sunt întotdeauna convenabile de utilizat pe un smartphone.
Acum că am acoperit unele dintre problemele importante de design pentru listele de corespondență mobile, putem trece direct la diferite aspecte ale aspectului lor.
Compunerea literelor mobile
Când vine vorba de stiluri mobile, cel mai adesea nu este vorba de un fișier de stil separat, ci de interogări media. Așa arată ele:
Să aruncăm o privire mai atentă asupra modului în care funcționează declarația @media. În primul rând, pentru a crea CSS „mobil”, trebuie să implementați un anumit criteriu prin care clientul de e-mail va determina ce stiluri să folosească.
Pentru a face acest lucru, este utilizat operatorul @media only screen - indică faptul că clientul de e-mail ar trebui să fie afișat pe ecran (în loc, de exemplu, să fie tipărit pe o imprimantă). După aceea, în exemplul de cod de mai sus, setăm lățimea maximă a ecranului a dispozitivului la 480 de pixeli. Acest lucru este important deoarece multe (dar nu toate) dispozitivele mobile au o zonă de afișare pe ecran de 480 de pixeli sau mai puțin.
Prin urmare, se folosește adesea max-device-width: 480px (aceasta este și lățimea de afișare a iPhone-urilor anterioare în modul peisaj), dar puteți extinde descrierea pentru a acoperi alte dimensiuni de ecran:
@media ecran și (device-width: 480px) și (device-height: 360px), ecran și (device-width: 360px) și (device-height: 480px), ecran și (device-width: 320px) și (dispozitiv -înălțime: 240px) (...)
Să revenim la șablonul de e-mail mobil discutat mai sus. Așa arată în Apple Mail:
Acest exemplu folosește clasa contenttable pe tabelele HTML care conțin text și imagini. Iată un exemplu de cod:
Această clasă joacă un rol interesant - atunci când e-mailul este deschis pe un dispozitiv cu un ecran de 480 de pixeli sau mai lat, nu afectează nimic. Cu toate acestea, atunci când ecranul este de 480 sau mai mic, atunci lățimea tabelului este redusă la 320 de pixeli. Selectorii de atribute sunt folosiți pentru a evita o eroare neobișnuită în e-mailul Yahoo. În caz contrar, se folosește CSS „normal”. În plus, puteți include următoarele reclame:
Ecran numai @media și (max-device-width: 480px) (/ * stilurile CSS specifice pentru dispozitive mobile merg aici * / table (lățime: 325px! important;) img (lățime: 325px! important;) p (afișare: niciunul! important;))
În continuare, vom analiza tehnici mai avansate pentru adaptarea e-mailurilor mobile la dispozitivele mobile.
Creați machete de coloane receptive, două la unu
Utilizarea șabloanelor cu o singură coloană este o modalitate bună de a vă optimiza buletinul informativ pentru dispozitivele mobile. Acestea fiind spuse, există modalități de a crea machete receptive pe două coloane fără a fi nevoie să utilizați CSS lung în interogări media.Aspectul cu două coloane vă permite să puneți mai mult conținut în partea de sus a mesajului afișat în clienții de e-mail desktop sau web, dar citirea și navigarea unor astfel de e-mailuri pe dispozitivele mobile este încă o plăcere. Puteți remedia acest lucru cu un cod vechi bun.
Regula de aur a aspectului e-mailului este: folosiți HTML în loc de CSS ori de câte ori este posibil. Gradul în care CSS este acceptat de diferiți clienți de e-mail poate varia semnificativ, dar toate funcționează la fel cu HTML. De exemplu, atribute precum align = ”left” și cellpadding = ”10” sunt instrumente mult mai fiabile decât omologii lor CSS float: left; și umplutură: 10px; ... Acestea sunt atributele care vor fi folosite la crearea literelor în formatul „două la o coloană”.
Iată cum ar putea arăta o scrisoare similară în Outlook 2007:
Exemplul de mai sus folosește un tabel container lat de 640 px care conține două tabele de 320 px care formează coloane. Aceste coloane au cellpadding = "20" - acest lucru se face astfel încât conținutul să nu se lipească de margini.
Când se codifică pentru web, se folosește de obicei float: stânga; pentru a alinia coloanele. Cu toate acestea, align = ”stânga” poate fi folosit în schimb. Deoarece lățimea tabelului container este egală sau mai mare decât lățimea combinată a celor două tabele imbricate, utilizarea HTML funcționează bine. Mai jos este un cod simplificat pentru un model similar cu două coloane:
|
Rezultatul arată astfel:
Tabelul container are o lățime de 640 de pixeli, așa că aspectul va fi pe două coloane. Dar în cazul în care lățimea ecranului este mai mică decât aceasta, atunci conținutul coloanei din dreapta va fi „înfășurat” sub stânga. Dacă lățimea tabelelor imbricate este egală cu 320 de pixeli, atunci când sunt afișate pe un dispozitiv mobil, veți obține o literă cu o singură coloană care nu trebuie să fie „mărită” deloc. Acest efect poate fi obținut prin adăugarea unei linii de interogare media la codul HTML:
Primul titluAscunde emisiunea
|
Pellentesc locuitor morbi...
Se încarcă ...