Layout of letters

prefață

Vă propun să luați în considerare toate subtilitățile și nuanțele layout-ului literelor html - de la soluții de șablon simple la abordări adaptive moderne.

Spre deosebire de aspectul obișnuit, al cărui afișare corect este necesar să se prevadă în diferite browsere, HTML-scriere poate fi deschis, fie prin intermediul interfeței web furnizorului de mail, sau printr-un client de mail, o varietate de care impune o serie de restricții privind stabilirea scrisorii.

În Rusia, majoritatea utilizatorilor de Internet folosesc poșta:

Și de la clienții de mail sunt cele mai populare:

Caracteristici importante

Pentru a asigura afișarea corectă a literei în toate varietățile de clienți de e-mail și interfețe web, este utilizată o abordare tabulară.

Atunci când creați un mesaj, trebuie luată în considerare faptul că mulți clienți de e-mail nu descarcă imagini în mod implicit, adică este necesar să se asigure afișarea acceptabilă fără imagini, utilizând culoarea de fundal, textul alternativ pentru imagini (alt) etc.

Cele mai multe interfețe web elimină toate stilurile listate între și , și au, de asemenea, doar un sprijin limitat pentru stilurile CSS. Nu puteți utiliza o formă abreviată, cum ar fi: frontieră: 1px solid # 000000:

Da, și codul de culoare nu poate fi abreviat (intrarea #fff nu va fi corectă).

„Mărimea contează“ - Web interfețe gmail și Yahoo scrisoare tăiat, numărul de caractere care depășesc o anumită sumă (102Kb și 100 kb, respectiv), așa că încercați să reducă la minimum codul.

Elaborarea unui simplu html-șablon pentru scrisoare

Totuși, structura este mai multă practică decât teoria, așadar propun să iau în considerare un exemplu specific.

Aspect general al scrisorii

Literele nu trebuie să depășească lățimea de 700 de pixeli, ca cel mai corpul mesajului web iterfeysov să nu dureze mai mult de 50% din lățimea totală a regiunii active, precum și apariția de derulare pe orizontală a deteriorat gradul de utilizare, și doar impresia scrisorii.

Culoarea de fundal a interfeței web în cazul în care aspectul nostru va fi vizualizat poate fi diferit, deci trebuie să înfășurați totul într-un tabel cu culoarea de fundal dorită, chiar dacă este alb.

Și astfel, aspectul general al scrisorii va avea următoarea formă:

După cum sa menționat mai sus, abordarea tabulară este utilizată pentru dispunerea literelor. În acest caz, ar trebui să utilizați structura cea mai simplă a tabelelor. Încercați să evitați combinarea celulelor (colspan, rowspan). Tabele complexe nu sunt întotdeauna reproduse corect de Outlook. Este mai bine să utilizați tabele imbricate. Și nu uitați să specificați parametrii de aliniere și valign în celule.

Înțeles cellspacing cellpadding și atributele trebuie să fie setat la „0“ și nu utilizează nici un atribut FRONTIERĂ altele decât „0“ valorile din tabel, deoarece nu toți clienții de e-mail interpreta corect alte valori.

Puncte verticale și orizontale

Ca rezultat, trebuie să utilizați funcția de umplere pentru a crea distanțele orizontale necesare în e-mail. Chiar mai complicat situația este că clientul de poștă electronică Outlook nu suportă padding-ul, iar marjele îl acceptă.

În această privință, este mai bine să renunțăm la utilizarea atît a padding-ului, cît și a marjei. Originea orizontală poate fi făcută folosind o celulă goală (care este de a pune un caracter spațiu de rupere &bsp;) și pentru a specifica o indentare la dreapta și la stânga - puteți crea o masă imbricată de dimensiuni mai mici.

Amplasarea verticală poate fi definită după cum urmează:

Sau folosind fundalul de culoare de fundal.

Text și legături

Textarea trebuie făcută cu ajutorul etichetelor - span. Pentru celula mamă (sau bloc), specificați înălțimea liniei. Merită remarcat faptul că outlook.com ignoră opțiunea de înălțime a liniei.

Când compuneți litere, ar trebui să utilizați fonturi standard (Arial, Verdana, Tahoma, Times New Roman etc.).

Caracterele text speciale trebuie aplicate întotdeauna folosind codurile de caractere speciale corespunzătoare, astfel încât destinatarii să poată vedea textul afișat corespunzător pe orice platformă.

Astfel, având în vedere toate recomandările de mai sus, textul va arăta astfel:

Link-urile ar trebui să specifice atributul target = "_ blank" pentru a evita posibilele probleme legate de deschiderea unei pagini în fereastra curentă.

Este adesea necesar ca, de exemplu, prepositionul să nu fie rupt din cuvânt, pentru a garanta acest lucru, utilizați caracterul spațial care nu se rupe:

Și dacă trebuie să traduceți un cuvânt, utilizați simbolul Acest lucru este util, de exemplu, pentru linkuri lungi care pot "rupe" șablonul.

În al doilea caz, este necesar să se prescrie o legătură a formularului: href = "tel: +79876543210"

Imagini și fundal

Crearea literelor html nu se poate face fără utilizarea imaginilor, dar amintiți-vă o serie de caracteristici. Așa cum am menționat mai devreme, mulți clienți de e-mail nu descarcă imagini în mod implicit, deci dacă implică o sarcină semantică (pe lângă estetică), trebuie să specificați alt atribut. (Atributul alt trebuie să fie prezent în orice caz, dar poate fi și alt = ""). Și pentru a proiecta textul alternativ în concordanță cu designul și a citi mai bine, imaginea poate fi înfășurată ca un fragment de text, considerat mai devreme.

Pentru imagini, specificați întotdeauna înălțimea și lățimea.

Pentru a evita problemele de afișare a imaginilor într-un număr de interfețe web, acestea ar trebui să fie prezentate ca elemente de bloc:

Nu toți clienții de e-mail acceptă imagini de fundal (în special Outlook), astfel încât acestea să fie utilizate cu precauție sau evitate cu totul. Asigurați-vă că pentru a include valoarea corespunzătoare culoarea de fundal BGCOLOR, textul suprapus pe o imagine într-o anumită secțiune, a fost vizibilă chiar și acelor utilizatori care au imaginile de fundal nu sunt afișate și / sau toate imaginile sunt dezactivate.

Pentru a rezuma, vom compune un șablon pentru litera care conține pre-antetul, antetul, partea de conținut și subsolul.

Formatul adaptiv al literelor

Pentru început, trebuie remarcat modul în care se comportă standard de e-mail pe ecranele mobile: pe dispozitivele iOS este scalată toate scrisoarea, astfel încât complet se potrivesc pe ecran (astfel încât literele devin imposibil de citit și necesită zoom manual).

Dispozitivele de pe Android afișează o literă în scara de 100%, și de aceea, vom vedea doar un mic fragment dintr-o literă și nu pot aprecia pe deplin orice design sau conținut, ceea ce reduce semnificativ procentul de clicuri (CLR).

Scrisorile adaptive oferă afișarea corectă pe orice dispozitiv, mărind astfel loialitatea abonaților și, ca o consecință - pentru astfel de litere deasupra CLR. Din neajunsurile se poate observa numai faptul că dezvoltarea designului și dispunerea literelor adaptive durează mai mult timp - adică, costul lor este mai mare.

Tipuri de adaptare mobilă

Există mai multe metode de adaptare a e-mailurilor pentru dispozitivele mobile:

aspectul mobil;
aspectul cauciucului;
aplicarea interogărilor media;
o combinație de mai multe abordări.

Aspect mobil

Această abordare se aplică numai dacă aproximativ 70% din toate descoperirile sunt făcute de pe dispozitivele mobile.

Aspectul cauciucului

Abordarea este aproape opusul celor de mai sus. În forma "pură" se utilizează destul de rar.

Se compune din următoarele: sunt utilizate numai dimensiunile relative ale tuturor blocurilor și imaginilor (în procente). Din cauza a ceea ce scrisoarea ocupă întreaga zonă a ecranului, indiferent de mărimea acesteia. Această abordare are o serie de limitări în structura locației obiectelor.

Aplicarea interogărilor media

După cum sugerează și numele, aceasta se bazează pe utilizarea cererilor de conținut media CSS3. Oferă cea mai bună afișare a literei pe ecran de orice dimensiune, vă permite să modificați setările de afișare a textului, locația blocurilor etc. Aproape libertatea completă =)

Afișați pe monitorul computerului, aplicația Mail pe iOS și gmail pe Android

Combinând abordări multiple

Abordarea utilizării interogărilor media este, fără îndoială, bună, deoarece permite să ofere cele mai bune afișări, dar, din nefericire, oferă un acces redus publicului mobil. Prin urmare, propun să adoptăm mai multe abordări simultan, și anume aspectul cauciucului + aplicarea cererilor media.

Această combinație oferă o bună afișare a literei pe orice dispozitiv și în orice aplicație, indiferent de suportul pentru solicitările mass-media.

În viitor, voi descrie această abordare.

Elaborarea unui plan general de scriere adaptivă

Este necesar să înțelegem că scrisoarea noastră trebuie afișată corect atât pe dispozitivele mobile, cât și pe clienții de e-mail de pe desktop și pe interfețele web. Prin urmare, la metodele și limitările care au fost descrise anterior cu aspectul adaptiv, se adaugă altele noi =)

Astfel, modelul general al scrisorii adaptive va arata astfel:

Aici este necesar să se clarifice: unele aplicații mobile, inclusiv standardul Mail pe iOS, în mod implicit măresc fontul din literă (care este mai mic de 13px), pentru a evita acest lucru, trebuie să adăugați un stil:

Când descriu stiluri, selectorii ar trebui să fie utilizați ca selectori - aceasta se face pentru a evita problemele din interfața web yahoo, care le interpretează incorect.

Despre test și link-uri aici nu este nimic nou să spun că nu pot fi ghidate de regulile descrise mai sus.

imagine

Principalele puncte au fost descrise mai devreme, aici voi adăuga doar ceea ce se referă direct la aspectul adaptiv.

Ecranele "Retina" sau, mai degrabă, ecrane cu o densitate crescută de pixeli sunt tipice pentru dispozitivele mobile, astfel că scrisoarea dvs. poate părea un pic neclară pe ecran, de exemplu, iPhone. Pentru a evita acest lucru, utilizați de 2 ori dimensiunea imaginii. De exemplu, în loc de pictograma 40x40, utilizați pictograma 80x80, înregistrând dimensiunile de 40x40.

Efectul unei imagini în flotare (astfel încât textul să curgă în jurul imaginii din dreapta sau din stânga) poate fi obținut după cum urmează:

Sau invers - o bucată de cod care va ignora Outlook:

Tehnici pentru crearea de scriere adaptivă

Pentru a asigura o platformă multiplă, trebuie să folosesc diferite tehnici, pe care aș vrea să le discutăm separat.

Adaptarea blocurilor

Reconstruirea blocurilor pe dispozitivele mobile sub ele.

Acesta este implementat după cum urmează:

În cazul în care fiecare bloc este descris de următoarea structură:

Să aplicăm acum cunoștințele primite în practică și să adaptăm scrisoarea pe care am făcut-o mai devreme pentru dispozitivele mobile.