HTML și CSS: concepte de codificare a e-mailului

Pătrunderea în lumea codificării poate părea descurajantă dacă nu ai mai făcut-o până acum. Codarea e-mailului, în special, are propriul set de reguli. Dacă sunteți nou în codificare, iată câteva lucruri de luat în considerare înainte de a vă scufunda direct în HTML și CSS pentru e-mail.

Trebuie să îmi codific e-mailul?

Dacă nu aveți experiență de codare, codarea unui e-mail de la zero poate să nu fie o soluție practică pentru dvs. și cu siguranță nu este necesară. VerticalResponse oferă o selecție largă de șabloane pentru dispozitive mobile și oferă un editor ușor de utilizat, astfel încât să puteți personaliza șabloanele noastre gata de utilizare cu propriul conținut.

Dacă aveți experiență și un anumit nivel de confort în utilizarea sau învățarea HTML, atunci codarea unui șablon de e-mail personalizat ar putea fi o opțiune excelentă. Ca și în cazul codării unei pagini web, trebuie să luați în considerare comportamentul browserului și al dispozitivului. În plus, luați în considerare stilurile implicite unice ale zeci de clienți de e-mail precum Gmail, Yahoo, Outlook și altele. Dacă sunteți obișnuit să codați o pagină web în HTML și să aplicați o foaie de stil CSS externă, va trebui să vă obișnuiți să lucrați cu CSS intern și inline, astfel încât stilurile dvs. să nu fie suprascrise de aceste valori implicite ale clientului de e-mail.

Vocabular de știut

Dacă sunteți cu totul nou în codificare, iată ce trebuie să știți despre HTML și CSS:

HTML este un limbaj pe care îl veți folosi pentru a structura și a descrie conținutul dvs. HTML înseamnă Hypertext Markup Language. Când codificați în HTML, vă marcați conținutul cu etichete care spun browserului web cum să afișeze informații precum imagini și cuvinte pe o pagină web.

CSS este un limbaj care afectează prezentarea conținutului dvs. Folosind CSS, puteți atribui stiluri elementelor HTML. CSS înseamnă Cascading Style Sheet. Cuvântul cascadă este semnificativ deoarece declarațiile de stil, sau regulile, vor fi onorate în ordinea apariției. Dacă faci două declarații pentru același element, acesta din urmă va fi onorat pentru că suprascrie ceea ce vine înainte.

Iată modalitățile de a lega CSS-ul de HTML:

CSS extern: folosind o foaie de stil externă (un fișier denumit în mod obișnuit style.css) la care se face referire în fișierul HTML. Acest lucru este grozav pentru site-uri web, deoarece dacă aveți 100 de elemente comune care se întind pe peste 100 de pagini, le puteți modifica pe toate simultan cu o singură declarație CSS.

CSS intern, alias CSS încorporat: inclusiv codul dvs. CSS în etichetele <style> din partea de sus a fișierului HTML. Când codați un e-mail, acest lucru poate fi excelent pentru alocarea de stiluri generale care se aplică elementelor comune. Cu toate acestea, această metodă nu este întotdeauna acceptată prin e-mail.

CSS inline: atașarea codului CSS la un singur element HTML chiar în codul HTML. În codificarea e-mailului, această metodă asigură că anumite stiluri nu sunt suprascrise de browserul și de valorile implicite ale clientului de e-mail.

Dacă sunteți obișnuit să vă configurați CSS-ul extern sau intern, îl puteți construi în acest fel și apoi utilizați un instrument de inline ca acesta de la PutsMail pentru a vă converti stilurile în CSS inline.

Relația dintre HTML și CSS

Pentru a vă face o idee mai bună despre modul în care HTML și CSS sunt legate și despre modul în care separarea CSS de HTML poate elibera prezentarea HTML-ului dvs., accesați fantasticul și celebrat site web CSS Zen Garden, unde puteți vizualiza același marcaj HTML cu CSS drastic diferit. , codificat de designeri remarcați.

Se apropie de codificarea e-mailului

Când codificați un e-mail de la zero, păstrați-l cât mai simplu posibil. Folosiți un editor de text simplu, cum ar fi TextWrangler, Notepad sau Sublime și stați departe de editorii vizuali precum Dreamweaver, deoarece pot adăuga elemente inutile la codul dvs.

În ceea ce privește aspectul, încercați să adoptați o abordare bazată pe mobil. Aceasta înseamnă să proiectați pentru ecrane mici și să vă dezvoltați. Cu vizionarea pe mobil în continuă creștere, este mai important ca niciodată să vă asigurați că e-mailul dvs. arată bine pe telefoane și tablete; nu există niciun motiv pentru a crea un design complicat care să arate bine doar pe un desktop. Menținerea mesajului și a designului dvs. suficient de simple pentru cele mai mici dispozitive va fi, de asemenea, mai ușor de codificat, va fi accesibil utilizatorilor tuturor dispozitivelor și va menține atenția cititorului dvs. concentrată pe chemarea principală la acțiune.

Odată ce aspectul și codarea sunt finalizate, asigurați-vă că utilizați un instrument precum Litmus sau VerticalResponse's Inbox Preview for HTML editor pentru a previzualiza cum arată e-mailul dvs. în diferite browsere și clienți de e-mail, astfel încât să puteți depana orice problemă înainte de a apăsa pe trimitere.

De unde să începi să înveți

Există multe tutoriale online în care puteți învăța practic, în detaliu cum să codificați un e-mail. O modalitate bună de a vă scufunda în codificarea e-mailului este să găsiți un șablon simplu care vă place și să petreceți ceva timp examinând codul. Familiarizați-vă cu etichetele principale, cum ar fi <body>, <head> și <div>, apoi observați cum etichetele sunt uneori definite mai mult în ID-uri sau clase, cum ar fi <div class="half-column">. Observați că denumirea într-un șablon HTML de calitate va fi clară și logică, astfel încât să fie mai ușor de spus ce se întâmplă atunci când apare în CSS.

Dacă sunteți pregătit pentru o lecție pas cu pas, căutați tutoriale recente (în ultimul an). Abordarea codificării este în mod constant reconsiderată. O metodă prietenoasă cu dispozitivele mobile care a câștigat popularitate în ultimii doi ani, de exemplu, este abordarea fluidă/hibridă. Acest tutorial fluid/hibrid de la Envato Tuts+ este grozav pentru cei care au deja o anumită înțelegere a HTML. Pentru începători, Lynda.com oferă multe cursuri de codificare specifice pentru e-mail. Un curs bun vă va ghida printr-un exercițiu de codificare și vă va oferi un exemplu de fișier de proiect descărcabil pe care îl puteți utiliza ca referință.

Petreceți mai puțin timp ajungând la mai mulți clienți

ÎNCERCAȚI VERTICALRESPONSE AZI

(Este gratis!)

Nota editorului: această postare de blog a fost publicată inițial în martie 2016 și a fost renovată și actualizată pentru acuratețe și relevanță.