email-uri html layout

Fundamentele aspect mesajele HTML

Orice dezvoltator web se confruntă mai devreme sau mai târziu, necesitatea de a typeset scrisori pentru corespondență și notificări de pe site. Acest lucru nu este valabil numai pentru magazine online în care există o nevoie urgentă de un convenabil și de dorit, scrisori frumoase de notificare cu privire la starea comenzii, dar, de asemenea, alte site-uri, care au posibilitatea de a înregistra sau abona la un buletin informativ.

După cum se arată, în segmentul românesc al articolelor de Internet detaliate cu privire la acest subiect nu este atât de mult - cea mai mare parte sunt recomandări foarte generale. Și, după cum am luat recent această temă, nu pot rata ocazia de a vorbi un pic despre cititori =)

Aici vom vorbi despre scrisori obișnuite.

Sarcini principale:

Există destul de o mulțime de nuanțe să ia în considerare.


1. Doctype:

Scrisoarea ar trebui să aibă DOCTYPE:

codificarea poate fi posibilă, dar este mai bine să utilizați utf-8


2. Planul mesei:

Utilizați un aspect tabular.
Astfel, ar trebui să fie posibil să se utilizeze un simplu tabele de structură. încearcă să evite combinarea celulelor (colspan. rowspan). tabele complexe Outlook nu este întotdeauna corect reproduse. Prin urmare, este o mai bună utilizare imbricate tabele.
Toate scris ar trebui să fie înfășurat într-un tabel cu o lățime de 100% și o culoare de fundal alb (bgcolor = „# FFFFFF“) (sau culoarea de fond corespunzătoare proiectarea scrisorii dumneavoastră)
Și nu uitați să specificați align și valign în celule.

3. Textul și link-uri:

Acesta poate fi schimbat la sau . În acest caz,

, Nu se recomandă utilizarea.
Atunci când se face textul ar trebui toate caracterele speciale înlocuite cu codul corespunzător:

Vorbind despre proiectarea textului, sunt de multe ori se confruntă cu problema să atârne prepoziții. Pentru ao rezolva, utilizați un caracter spațiu non-rupere:  

Și nu uitați cratimă ­ . în cazul în care dintr-o dată trebuie să transferați pe podea. Acest lucru este deosebit de util pentru link-uri foarte lungi care se pot sparge tiparul.

4. Imagini:

Ar trebui să fie întotdeauna luate în considerare. că un utilizator încarcă o imagine nu este întotdeauna atât de litere clearance-ul fără imagini, de asemenea, este important. Intotdeauna uita-te la modul în care va arăta scrisoarea dumneavoastră în imagini în modul deconectat.

Imagine 5. Context:

bgcolor = "# CCCCCC" background = "img / bg.png" style = "background-image: url-ul (img / bg.png)"

Și pentru a forța Outlook pentru a afișa fundaluri, utilizați următoarea structură:

6. Stiluri și CSS:

Antetul nu trebuie să specifice stiluri ca Aproape toate interfețele web pentru a ignora. Acestea ar trebui să fie prescris ca inlaynovye în parametrestyle. Acest lucru nu este de a utiliza forma scurtă, cum ar fi: frontieră: 1px solid # 000000:
Versiunea corectă este:

Da, culoarea este, de asemenea, nu se poate reduce (post-#fff fi incorecte).

spațiu orizontal și vertical

Sau folosind culoarea de fundal de frontieră.

7. Dezvoltarea unui șablon de scrisoare

Pentru a rezuma, vom forma șablon scrisoare: