Cum se creează un șablon de e-mail cu HTML și CSS?

În calitate de designeri și dezvoltatori, într-o zi clientul dvs. vă va cere un șablon de e-mail pentru un fel de buletin informativ. Trebuie să spun că șabloanele de e-mail nu sunt atât de interesante, pur și simplu pentru că există un mare decalaj în suportul pentru HTML și CSS. V-ați imagina că în epoca actuală nu ar fi cazul, deoarece avansăm cu HTML5 și CSS3. Cu toate acestea, sunt trist să spun că atunci când vine vorba de redarea e-mailurilor, nu este nici pe departe cazul.

Primul lucru de reținut atunci când creați un șablon de e-mail HTML este faptul că toate stilurile CSS ar trebui să fie făcute inline. În orice alt caz, acesta este un nu foarte mare. Dar, pentru că există foarte puțin suport pentru CSS extern și chiar CSS în cap, inline este modalitatea de a face acest lucru. În plus – și sunt sigur că ați mai auzit despre asta înainte – șablonul trebuie creat cu TABELE, nu cu DIV. Încă o dată, acest lucru este regretabil, dar este calea de urmat. Având în vedere că e-mailurile nu sunt atât de mari în general, proiectarea și crearea lor nu este dificilă – este doar plictisitoare în comparație cu designul web sau mobil.

Design-ul

 Recomandat pentru dvs.: Cum să vă accelerați procesul de proiectare folosind cadre CSS moderne?

Structura

În corpul paginii HTML, lipiți codul de mai jos. Privind pur și simplu codul, vă puteți da seama că nu există mare lucru în structura acestui e-mail. Acesta este de fapt un lucru foarte bun, deoarece e-mailurile nu ar trebui să fie niciodată complexe. Până acum, există, de asemenea, o cantitate minusculă de stiluri, doar ceea ce specifică lățimea totală a tabelului și că nu există nimic între celulele tabelului.

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"></td> </tr> <tr><!-- Second row --> <td colspan="2"></td> </tr> <tr><!-- Third row --> <td></td> <td></td> </tr> <tr><!-- Fourth row --> <td></td> <td></td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2" ></td> </tr> </table>

Stilul

Bine, acum vom adăuga niște CSS în conținutul documentului. Nu este deloc elegant, doar o resetare și o definire a culorii și stilului link-ului. Aș fi foarte atent cu ce CSS ați introdus aici, deoarece este adesea ignorat de clienții de e-mail.

 <style> * { margin: 0; padding: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #464646; text-decoration:none; } </style>

Continutul

A sosit momentul să umplem tabelele cu conținut. Poți găsi imaginile în fișierul oferit mai sus – la începutul acestui tutorial. Acum ar trebui să completați tot textul și imaginile care vor fi în acest e-mail. Vă rugăm să rețineți că în tutorial nu trebuie să legați de fapt hyperlinkurile la nimic și sunteți liber să utilizați și propriile imagini. Până acum, în cod, am definit lățimea pentru toate cele trei imagini doar pentru a mă asigura că dimensiunea lor este setată.

Există ceva de care trebuie să fii extrem de conștient: imaginile sunt grozave pentru e-mailuri, atâta timp cât sunt a: de dimensiuni mici și b: au o etichetă alt care le descrie bine. Sunt sigur că știți că pentru ca imaginile să apară într-un e-mail, destinatarul acestui e-mail trebuie să permită imaginilor să apară. Dacă nu fac acest lucru, nu există nimic care să le spună la ce ar trebui să se aștepte. Este, de asemenea, o problemă de accesibilitate dacă nu furnizați o descriere pentru utilizatorii nevăzători. Cu toate acestea, aceasta este o altă poveste. Deci, lecția este: folosiți întotdeauna o imagine mică cu o etichetă alt!

 <table width="700" border="0" cellpadding="0" cellspacing="0" > <tr><!-- First row - header --> <td colspan="2"><a href="http://www.www.webdesignviews.com" target="_blank"><img src="images/logo.png" width="346" alt="DevGarage"/></a></td> </tr> <tr><!-- Second row --> <td colspan="2"> <h1><a href="http://www.www.webdesignviews.com" >We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr> <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr> <tr> <td><!-- Fourth row --> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <p>Read more</p> </td> <td> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designers perspective it was a creative disaster.</p> <p>Read more</p> </td> </tr> <tr><!-- Fifth row - footer --> <td colspan="2"> Copyright information and <a href="#">unsubscribe</a> link.</td> </tr> </table>

Stilul Inline

Ultimul lucru pe care îl vom face este să oferim stilul CSS inline pentru acest șablon de e-mail HTML. Este ceea ce face apariția e-mailului, așa cum puteți vedea până acum, acest e-mail nu a arătat deloc așa de frumos. Voi despărți această parte în bucăți mici, astfel încât să nu devină prea copleșitoare.

 De asemenea, s-ar putea să vă placă: 7 sfaturi utile pentru a vă face linia de subiect al e-mailului mai accesibilă.

Corp

Mai întâi, să setăm culoarea de fundal a întregii pagini de e-mail, precum și dimensiunea și culoarea fontului implicite.

 <body bgcolor="#f7d973" ></body>

Masa

Următorul lucru de făcut este să centrați conținutul e-mailului și să îi furnizați și propria culoare de fundal, astfel încât să iasă în evidență.

Primul rând – Antet

Sunt multe lucruri care se întâmplă în celula primului rând. Vă rugăm să rețineți că stilul inline este pe <td>, nu pe <tr>. Ceea ce facem aici este o nouă culoare de fundal care să se potrivească cu cea a logo-ului. În plus, există și o umplutură și o aliniere. Acum, schimb culoarea textului pentru a fi albă, deoarece textul alternativ va fi negru în mod implicit. Nu o veți putea vedea pe acest fundal, așa că mă asigur că puteți schimba culoarea textului. Vi se poate părea inutil, dar așa cum am spus, acest lucru este foarte important pentru persoanele care nu au imagini permise în mod implicit.

 <tr><!-- First row - header --> <td colspan="2"> <img src="images/logo.png" width="346" height="73" alt="DevGarage"/></a> </td> </tr>

Al doilea rând

În cadrul rândului, există, încă o dată, o singură celulă care se întinde pe două coloane. Această celulă este ușor manipulată prin adăugarea unei căptușeli și a unei linii de întrerupere în partea de jos pentru a separa conținutul ei de rândul de mai jos. Avem și un titlu mare care obține puțin spațiu prin margini. Și asta este pentru acest rând.

 <tr><!-- Second row --> <td colspan="2"> <h1> We launched our mobile site!</a></h1> <img src="images/screenshot.png" width="400" alt="Mobile blog screenshots."/> </td> </tr>

Al treilea rând

Pentru ambele celule aici setăm ambele, lățimea și umplutura. Sunt exact aceleași, astfel încât celulele sunt împărțite uniform în jumătate. În afară de asta, nu există nimic altceva, deoarece celulele sunt umplute cu o imagine și ceva text despre aceasta.

 <tr><!-- Third row --> <td><img src="images/screenOutlines.png" width="300" alt="PSD freebie"/></td> <td> <h2><a href="#">A PSD just for you!</a></h2> <p>We have decided to kick off our mobile launch by giving away an awesome PSD of device templates for you to showcase your next project - whether or not it is responsive. </p> </td> </tr>

Al patrulea rând

Aceasta este de departe cea mai stilizată secțiune a acestui șablon de e-mail HTML. După cum puteți vedea din codul de mai jos, se întâmplă multe. În primul rând, întregul rând primește o nouă culoare de fundal și culoare de text pentru a vă asigura că textul este vizibil - la fel ca în antet. Atât prima, cât și a doua celulă și conținutul lor primesc aceleași modificări de stil. În primul rând, celula în sine primește o nouă culoare de fundal și text. Apoi, linkul din titlul său este schimbat în galben. În cele din urmă, ultimul paragraf este subliniat și pentru a adăuga o anumită separare se adaugă și o marjă. După cum am spus, a doua celulă și conținutul ei primesc exact aceeași stilizare.

 <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer <tr bgcolor="#464646"> <!-- Fourth row --> <td> <h3><a href="#">The smell of whitespace</a></h3> <p>A short post that is very straightforward in which I will explain what are the benefits of whitespace in web design.</p> <pwidth:320px; padding: 30px;"> <h3><a href="#">Web typography trends</a></h3> <p>From a user's perspective web-safe fonts were great but from a designer's perspective it was a creative disaster.</p> <plwptoc12">Fifth Row – Footer
 Și în sfârșit, subsolul. Se întâmplă foarte puțin aici; doar niște spațiere prin umplutură și asta este!






<tr><!-- Fifth row - footer --> <td colspan="2"> Copyright info and unsubscribe info</td> </tr>
Cuvinte finale

Acest tutorial este puțin lung, dar sper că acum înțelegeți ce este nevoie pentru a crea un șablon de e-mail HTML de la zero. Nu este un concept complicat, dar poate fi plictisitor. Acum, este rândul tău să ieși și să începi să faci e-mailuri uimitoare, de ultimă generație! Puteți combina mai multe tehnici de creare a unui șablon de e-mail pentru a-l face mai unic.
Acest articol este scris de Hannah Butler. Lucrează ca dezvoltator și designer web. În plus, îi place să-și împărtășească experiența sub formă de articole. În acest caz, ea are propria ei secțiune pe site-ul WriteMyPaper4Me.co. În viitor, ea va începe să scrie un blog pentru a descrie altora metodele ei de lucru.