Cum se face o scrisoare HTML. Cum să creați și să trimiteți e-mailuri HTML în Gmail folosind Stripo? Reguli de bază pentru aspectul scrisorilor

Potrivit site-ului Statista, în 2018, numărul utilizatorilor e-mail a ajuns la 3,8 miliarde. În timp ce Gmail este folosit de 1,4 miliarde de oameni. Dacă faci calculul, se dovedește că 36,8% dintre toți utilizatorii preferă acest client de e-mail.

Mulți dintre noi au încercat să creeze e-mail HTML în Gmail, dar toate încercările au eșuat. De ce? Deoarece acest client de e-mail nu are instrumentele încorporate necesare pentru aceasta. Și sincer vorbind, nu sunt necesare.

Există mulți constructori de mesaje HTML pe Internet. Multe dintre ele vă permit să creați șabloane receptive, dar doar câteva oferă posibilitatea de a le exporta în Gmail.

Vrei să faci același lucru în doar câteva minute?

Există mai multe motive pentru care ați putea dori să trimiteți mesaje prin Gmail. Dar motivul principal este că poți trimite mesaje în masă în Gmail fără a apela la ajutorul unor resurse terțe. În plus, am descris anterior 2 metode principale pentru trimiterea prin corespondență în masă în acest mailer.

In acest articol eu:

• Voi crea un șablon de mesaj HTML;
• Îl export în contul meu de Gmail;
• Voi evidenția câteva specificatii tehnice Mailer Gmail;
• și, în sfârșit, vom vedea cum se descurcă Stripo cu ei. Cu alte cuvinte, vă vom arăta exact de ce ale noastre sunt compatibile cu Gmail.

1. Creați un șablon de mesaj în Stripo

Înainte de a putea exporta un mesaj în contul Gmail, trebuie să-l creați.

Există mai multe moduri de a face acest lucru:

Prima cale Aceasta este crearea unui nou mesaj bazat pe al nostru.

La momentul scrierii, există 210 dintre ele în Stripo: mesaje de confirmare, mesaje de coș abandonat, promoții și, bineînțeles, șabloane de vacanță. Alege-o pe oricare pe gustul tău. Desigur, va trebui să-i schimbați ușor designul pentru a se potrivi gusturilor dvs., tipului de mesaj, indiferent dacă este declanșator sau promoțional, și cerințelor mărcii dvs. Dar toate acestea nu vor dura mai mult de 10 minute.

A doua cale- crearea unui șablon HTML de la zero.

Pentru a face acest lucru, va trebui să vă conectați la contul dvs., să accesați secțiunea „Șabloane”, apoi să selectați secțiunea „Șabloane de bază”. Acolo veți găsi „Șablonul principal”. Creați un șablon pentru toate ocaziile. Și pur și simplu combinați blocurile în conformitate cu obiectivele campaniei dvs. de marketing.

A treia cale- export/inserați cod HTML.

În acest caz, veți avea nevoie de dvs cont personal selectați fila „șabloane” și selectați HTML-ul meu.

Prima metodă este cea mai ușoară, desigur, dacă nu aveți un șablon HTML deja creat.

Deci, cum puteți personaliza șabloanele noastre?

În primul rând, trebuie să alegeți șablonul care vă place. Deschide-l în editor:

Pasul 1. Cum se instalează un preheader în Stripo. Și cum va arăta mesajul tău?

Este un fapt binecunoscut că primul lucru pe care destinatarii îl văd într-un mesaj este preheader-ul. Și haideți să fim sinceri: numele, subiectul și preheaderul dvs. judecă dacă un mesaj merită deschis.

Nota:În preheader-ul în sine, putem folosi absolut orice font atunci când creăm un e-mail. Cu toate acestea, Gmail îl va înlocui cu Arial atunci când afișează această parte a textului în previzualizarea e-mailului. Dar în corpul scrisorii, fontul tău va rămâne același cu cel pe care l-ai setat la început.

(font Arial, previzualizare post)

Pasul 2. Cum să adăugați un antet și un logo la un șablon în Stripo. Și cum va arăta mesajul tău?

S-a spus de multe ori că antetul, mai bine cunoscut sub numele de antet al scrisorii, este chipul mesajului tău și al brandului tău în ansamblu. Asigurați-vă că includeți sigla și numele companiei dvs. în șablon. Sunt ferm convins că scrisul informații de contactîn antet - aceasta este doar o idee grozavă.

Nota: dacă plasați un meniu deasupra unui banner, mulți îl pot confunda cu un element de antet.

Pasul 3. Cum să adăugați un banner în Stripo. Și cum va arăta mesajul tău?

Acesta este elementul meu preferat al șabloanelor. Bannerele dau tonul pentru întregul mesaj. Prin urmare, trebuie să lucrați din greu la asta. Selectează și inserează cea mai bună imagine după părerea ta în blocul banner.

Apropo, folosirea fotografiilor mari cu oameni mai degrabă decât a imaginilor desenate manual este o tendință pentru 2018. Sunt mândru să spun că în acest moment suntem singurul editor care vă permite să aplicați filtre speciale bannerului. După care puteți plasa textul deasupra bannerului și îl puteți „împacheta” frumos într-un font personalizat/decorativ.

Editorul nostru vă permite, de asemenea, să plasați o imagine suplimentară pe banner. Cu această funcție, puteți crea bannere cu mai multe straturi fără ajutorul unor editori foto terți.

Pasul 4. Cum să adăugați structuri la Stripo. Și cum va arăta mesajul tău?

Imagine și text, 2 fotografii și 2 blocuri de text la rând? Depinde de tine să decizi. Aceasta este o opțiune destul de comună. Multe editoare vă permit să plasați 2 sau 3 blocuri la rând. Dar numai noi permitem utilizarea a până la 4 blocuri într-o singură structură. Aici puteți insera imagini, text, butoane, videoclipuri etc.

Vă rugăm să aruncați o privire la acest exemplu de structură cu două blocuri:

Trei blocuri din structura:

Exemplul arată că în blocurile de sub imagini puteți plasa și o descriere a produsului și chiar butoane.

4 blocuri din structura:

Aplicați imagini de fundal sau culori pentru fiecare bloc separat sau utilizați un singur fundal pentru întreaga structură.

Pasul 5. Cum să inserați pictogramele rețelelor sociale. Și cum va arăta mesajul tău?

Pune-le oriunde îți dorește inima. Ce au special pictogramele noastre din rețelele sociale? Oferim mai mult de 45, fără a se limita la standardele Facebook, Youtube și Instagram. Pentru confortul dumneavoastră, le-am adunat pe toate împreună. Și ca bonus, puteți alege culoarea lor și setați forma dorită.

Acest lucru este foarte ușor de făcut: trebuie să trageți blocul " Rețelele de socializare» în structura necesară, selectați forma pictogramelor, culoarea și introduceți linkuri în câmpul corespunzător.

Pasul 6: Biblioteca de blocuri și cum vă ajută să creați e-mailuri pentru Gmail

Desigur, prețuiești foarte mult timpul tău. Prin urmare, nu doriți să creați același tip de mesaje zi de zi. Și noi. Din acest motiv am creat Biblioteca de blocuri. Este destul de ușor de lucrat. După crearea unui șablon, pur și simplu salvați blocurile acestuia în bibliotecă, dându-le fiecăruia un nume. Când creați următoarea campanie, trebuie doar să glisați și să plasați blocul necesar în șablonul de mesaj.

Puteți salva containere și chiar structuri întregi în acest fel.

2. Exportați mesajul HTML în Gmail

Acesta este pasul meu preferat.

Cu toate acestea, înainte de a exporta mesajul creat, trebuie să utilizați opțiunea „Previzualizare”. Cum? Doar faceți clic pe butonul „Previzualizare”, acesta se află direct deasupra șablonului și are forma unui ochi:

Aici veți vedea atât desktop, cât și versiunea mobilă scrisori. Apoi puteți continua la export. Faceți clic pe butonul „Export”.

Veți vedea o fereastră pop-up ca aceasta:

Nota: Asigurați-vă că utilizarea ferestrelor pop-up este permisă de setările browserului dvs. Dacă nu, atunci este destul de ușor de făcut.

Desigur, trebuie să selectați „Gmail” din listă. Dacă aveți un singur cont Gmail și sunteți conectat la acesta, mesajul dvs. va fi exportat imediat. Dacă, la fel ca mine, aveți 2 conturi active, atunci sistemul nostru vă va solicita să alegeți către care dintre ele să trimiteți scrisoarea.

Nota: Când exportați, mesajul dvs. intră în dosarul Ciorne.

Trebuie doar să specificați subiectul mesajului, să introduceți un destinatar dacă intenționați să trimiteți mesajul unei singure persoane sau un grup de destinatari dacă intenționați să trimiteți un mesaj în masă. Gata!

Nota: Mesajul mai poate fi editat.

3 și 4. Limitările tehnice ale Gmail și modul în care Stripo le tratează

Înainte de a începe să scriu articolul, am citit multe ipoteze despre capacitățile tehnice ale Gmail și am decis să le testez.

Ipoteza 1: Imaginile necesită link-uri.

Experții Gmail spun online că orice imagine fără link într-un mesaj HTML poate fi descărcată.

L-am testat si s-a dovedit a fi adevarat. Cu toate acestea, s-ar putea să nu vă placă să aveți un buton de descărcare pe imagini, deoarece poate distruge designul general al postării dvs. În plus, un mesaj cu acest tip de „trucuri” pare neprofesional.

Soluţie: Chiar și atunci când încărcați imagini din biblioteca dvs. într-un șablon de postare, aveți opțiunea de a furniza un link. Dar dacă uitați să faceți acest lucru, site-ul nostru va introduce automat linkul „implicit”.

Desigur, nu va conduce clienții nicăieri, dar îi va salva pe abonații de la enervantul buton „Descărcare”.

Ipoteza 2. Imaginile fără un atribut alt ajung în Spam

Sunt sigur că ați auzit și că mesajele ajung imediat în dosarul de spam dacă atributul alt nu a fost atribuit imaginilor din interiorul acestuia.

Am trimis în mod deliberat multe mesaje fără un atribut alt setat, dar toate au fost livrate cu succes în căsuța de e-mail. Aș dori să remarc că astăzi am testat un singur client de e-mail - Gmail.

Prin urmare, nu pot spune că situația va fi similară cu Outlook și Apple Mail. Prin urmare, dacă intenționați să trimiteți mesaje nu numai utilizatorilor Gmail, atunci va trebui să introduceți text alternativ pentru a trece cu succes filtrele de spam.

Dar dacă uitați să adăugați unul, sistemul nostru va copia automat numele imaginii, oricare ar fi aceasta. Cu toate acestea, chiar dacă în mod accidental sau intenționat îmi place, eliminați numele imaginii și atributul alt, atunci când exportați mesajul, sistemul nostru îl va înlocui înapoi. Dacă nu ați specificat niciun nume și text alternativ, atunci Stripo va înlocui automat atributul alt=“”.

Nota: Pentru puritatea experimentului, am dezactivat această funcție pentru a verifica dacă mesajele fără un atribut alt ar putea trece de filtrele de spam ale mailului Gmail.

Cu editorul nostru nu trebuie să vă faceți griji cu privire la atributul alt. Și chiar dacă e-mailul blochează imaginile în sine, destinatarii vor înțelege despre ce este mesajul tău atunci când vor vedea textul alternativ. Desigur, îl puteți edita cu noi. Încercați să vă asigurați că textul alternativ descrie conținutul imaginii cât mai mult posibil.

Ipoteza 3: Gmail trunchiază mesajele

Da, este adevărat. Gmail „trunchează” toate mesajele care cântăresc mai mult de 102 kB. În partea de jos a mesajului, Gmail va afișa un buton „Afișează mesajul complet”. Momentan nu există nicio modalitate tehnică de a evita acest lucru. Dar, cu ajutorul nostru, puteți cântări mesajul:

• faceți clic pe butonul „export”;
• selectați „HTML”;
• descărcare HTML;

• apoi faceți clic dreapta și bifați „Proprietăți”.

Proprietățile fișierului au arătat că greutatea șablonului este de 65 kB. am verificat aceste informații prin alte aplicații și au confirmat greutatea scrisorii.

Este foarte simplu!

Ipoteza 4: Gmail nu acceptă clasa

Greşit. Gmail transferă și afișează corect aceste atribute. Verificat.

Ipoteza 5. Butonul „Anulare” nu funcționează atunci când trimiteți un e-mail în masă

Nu este absolut adevărat dacă utilizați Gmail în loc de Mail Merge. Tot ce trebuie să faceți este să intrați în setări, să selectați „Anulați trimiterea” și să selectați un timp de 5, 10, 20 sau 30 de secunde. Am folosit această opțiune când am trimis mesaje în masă în mailer-ul pe care îl testam și totul a funcționat corect. Nimeni nu a primit mesajul meu.

Ipoteza 6: Blocurile de text care conțin mai mult de 8500 de caractere sunt șterse

Ca copywriter sau doar ca femeie, iubesc frazele lungi, descrieri detaliate. Prin urmare, am decis să inserez unul dintre articole în blocul de text al scrisorii. Articolul conține mai mult de 10.000 de caractere, fără a număra spațiile. Am trimis acest mesaj prietenului meu. A fost livrat integral, inclusiv „poemul meu”. Aceasta înseamnă că ipoteza nu este confirmată. Ceea ce este de fapt grozav. Deși chiar mă îndoiesc că cineva ar trimite mesaje atât de lungi clienților lor.

Ipoteza 7. Legături în mesajele Gmail

Am auzit că Gmail inseră automat link-uri către adrese de e-mailși numerele de telefon în mesaje. Cu alte cuvinte, le face clicabile. Am testat o mulțime de litere cu numere de mobil și adrese de e-mail. Și ghici ce? Niciunul dintre numere nu a devenit accesibil. Mai trebuia să le evidențiez și să le copiez pentru a efectua apeluri.

Dar! Situația cu adresele mobile este puțin amuzantă. Fie au devenit gri când au fost trimise, dar erau încă pe care se putea face clic. Sau au devenit albaștri, dar nu erau activi.

5. Testare

Ar trebui să-l testați întotdeauna înainte de a exporta și de a trimite un mesaj HTML la Gmail.
Primul pas este să selectați modul " ". Al doilea este.

Iar al treilea - final - testează-l folosind al nostru. Vă va arăta cum apare un e-mail pe 70 de dispozitive și clienți de e-mail.

6. Concluzie

Acum că știi cum să creezi în Gmail și editorul Stripo este ușor, sperăm că clienții și prietenii tăi vor primi doar mesaje elegante de la tine.

În acest tutorial vă voi arăta cum să creați un șablon HTML simplu e-mail, care va fi afișat holistic în orice client de e-mail modern și aplicație a smartphone-urilor actuale.

Interogări media: doar jumătate din bătălie

A fost o perioadă în care a fost suficient să se determine tipul de dispozitiv pentru a crea un șablon de e-mail receptiv care să se afișeze la fel de bine atât în ​​clienții de e-mail iOS, cât și în Android, ambele familii de smartphone-uri acceptau proprietatea @media CSS.

De atunci, numărul de aplicații de e-mail pentru ambele platforme cu diferite niveluri suportul pentru metodele de dezvoltare a șabloanelor adaptive a crescut destul de semnificativ.

Cea mai notabilă este cea mai recentă actualizare a aplicației Gmail pentru Android, care este de două ori mai populară decât aplicația de e-mail Android stoc (reprezentând 11% din lansările totale). Nu a acceptat niciodată interogări media și încă nu o face, dar acum vă scala e-mailurile comprimând dimensiunea tabelului extern pentru a umple întreaga zonă de afișare a ecranului disponibilă. Acest proces este dificil de controlat și, dacă toate e-mailurile dvs. depind de interogările media, pentru a fi afișate corect dispozitive mobile, creează mai multe rezultate neplăcute.

De ce este modelul cal întunecat plutitor

Vestea bună este că puteți proiecta și dezvolta un șablon de e-mail care va arăta bine în orice aplicație de e-mail, inclusiv în cele care nu acceptă interogări media.

Cu toate acestea, există mai multe compromisuri de design pe care trebuie să le faceți. „Restrângerea” preferată a layout-urilor coloane într-un singur flux nu funcționează atât de bine cu această metodă. Dacă înveți să te descurci fără ele, poți folosi un design funcțional care funcționează cel mai bine.

Astăzi vom face asta.

Prima etapă

Să începem prin a crea un șablon gol.

Am centrat tabelul de conținut principal folosind clasa „conținut”.

Vă rugăm să rețineți

Nota: Pe măsură ce progresați prin acest tutorial, veți observa că voi plasa niște CSS în capul paginii. De obicei, plasez stiluri în capul paginii când le voi folosi din nou sau las stiluri unice în linie.

Important: Când utilizați CSS în capul documentului, vi se cere să utilizați instrumente la sfârșitul dezvoltării pentru a le converti în cele inline. Dacă utilizați servicii precum MailChimp sau Campaign Monitor, acestea vă vor solicita automat să convertiți aceste stiluri în stiluri inline atunci când importați marcajul. Trebuie să faceți acest lucru deoarece unii clienți de e-mail, cum ar fi Gmail, vor ignora sau vor elimina conținutul etichetei dvs

Crearea unui titlu

Creăm primul rând al tabelului - antetul. Adăugăm următoarele pentru a stila șirul pe care l-am creat:

Buna ziua!

Și apoi, în stilurile noastre CSS, setăm fundalul antetului nostru.

Antet (complet: 40px 30px 20px 30px;)

Crearea primului rând de răspuns

Acum vom crea primul rând adaptiv. Modul în care facem acest lucru este prin utilizarea a două tabele plutitoare aliniate cu proprietatea HTML „align”.

Coloana din stânga

Să înlocuim micul nostru salut cu cel de mai jos.

Creăm un tabel la 70px și adăugăm, de asemenea, un mic fundal care va arăta ca un spațiu între cele două coloane ale noastre. Spatele din partea de jos va adăuga spațiu vertical atunci când difuzoarele noastre sunt îngrămădite una peste alta pe un smartphone.

Coloana din dreapta

De asemenea, vom crea o coloană din dreapta aplicând din nou alinierea la stânga. Tabelul va avea 445px lățime, ceea ce ne va permite să economisim 25px pentru partea dreaptă. Acest lucru este foarte important deoarece Outlook vă va aglomera automat tabelele dacă nu lăsați cel puțin 25 de pixeli pentru fiecare rând pe care îl creați.

Dacă lăsați o marjă de cel puțin 25 de pixeli, tabelele dvs. vor fi ceea ce vă așteptați.

Pentru tabelul mai larg din dreapta, vom aplica aceeași tehnică ca și pentru tabelul nostru container, care implică crearea unei clase și, de asemenea, a unui cod de wrapper condiționat. Pentru acest tabel, am setat și 100% din lățimea disponibilă pe un smartphone, pe care va cădea în raport cu masa din stânga.

După cum puteți vedea, am creat o clasă numită „col425” pentru acest tabel și am stabilit lățimea la 425px. Am plasat un tabel care va conține un alt tabel lat de 425px în codul de stare. Apoi adăugăm clasa noastră la interogarea media pe care am creat-o și pentru Apple Mail.

Col425 (lățime: 425px! important;)

Acum vom adăuga un antet stilizat în interiorul celulei noastre.

Subtitlu (dimensiunea fontului: 15px; culoare: #ffffff; familia fontului: sans-serif; spațierea literelor: 10px;).h1 (dimensiunea fontului: 33px; înălțimea liniei: 38px; greutatea fontului: bold;) .h1, .h2, .bodycopy (culoare: #153643; familia de fonturi: sans-serif;)

Antetul nostru este complet și, după cum puteți vedea în imaginea de mai jos, așa se vor suprapune coloanele noastre pe un dispozitiv mobil.

Crearea unei linii de text cu o singură coloană

Pentru a crea o linie de text, vom adăuga pur și simplu o nouă linie la tabelul nostru cu clasa „.content”. La această linie vom adăuga clasa „.innerpadding” cu valori de umplutură reutilizabile. Vom adăuga, de asemenea, o clasă „borderbottom” pentru a crea un chenar pentru fiecare rând.

CSS pentru această secțiune:

Innerpadding (padding: 30px 30px 30px 30px;).borderbottom (border-bottom: 1px solid #f2eeed;).h2 (padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold ;).bodycopy (dimensiunea fontului: 16px; înălțimea liniei: 22px;)

Crearea unui articol cu ​​două coloane

Acum voi adăuga un rând responsive, exact același cu titlul nostru, dar cu dimensiuni puțin diferite, astfel încât să putem folosi o imagine mai mare.

Am adăugat un buton cu clasa „buttonwrapper”. Conține o celulă de distanță cu o umplere de culoare de fundal și, de asemenea, un link text în interiorul acesteia. Prefer să folosesc această metodă deoarece vă permite să utilizați butoane cu lățime flotantă, ceea ce este foarte util atunci când creați șabloane reutilizabile în care lățimea fiecărui buton poate fi diferită. Dacă lățimea butonului este fixă, este posibil să preferați să utilizați Generatorul de butoane antiglonț.

Stiluri pentru butonul nostru:

Buton (text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;).buton a (culoare: #ffffff; text-decor: niciunul) ;)

De asemenea, vom seta lățimea la o nouă clasă „col380” și vom adăuga dimensiunea noastră la stiluri pentru a avea grijă de Apple Mail. Și acum stilurile arată astfel:

Ecran numai @media și (min-device-width: 601px) ( .content (lățime: 600px !important;).col425 (lățime: 425px!important;).col380 (lățime: 380px!important;) )

Crearea unei coloane pe imagine

Aceasta este o linie foarte simplă. Să setăm imaginea la 100% lățimea literei și să ne asigurăm că înălțimea acesteia este setată la automat.

În CSS-ul nostru:

Imag (înălțime: automat;)

Crearea liniei finale de text simplu

În cele din urmă, vom adăuga o linie de text fără chenar în partea de jos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

Crearea unui subsol

Pentru a crea un subsol, adăugați un nou rând cu un tabel înăuntru. Unul dintre rânduri va conține un alt tabel pentru pictogramele noastre de rețele sociale.

® Cineva, undeva 2013 Dezabonați-vă din acest buletin informativ instantaneu

Să adăugăm stilurile necesare pentru subsol în CSS:

Subsol (padding: 20px 30px 15px 30px;).footercopy (familie font: sans-serif; dimensiune font: 14px; culoare: #ffffff;).footercopy a (culoare: #ffffff; text-decor: subliniat;)

Optimizarea butoanelor pentru dispozitive mobile

Pentru dispozitivele mobile, este ideal dacă întregul buton este un link și nu doar text, deoarece este mult mai dificil pentru degetul nostru să lovească un mic link text. Deoarece nu este posibil să implementez acest lucru pentru toți utilizatorii de desktop (eticheta a nu acceptă pe deplin proprietatea padding), acesta este ceva ce pot adăuga la versiunea mobilă folosind interogări media.

Să eliminăm culoarea din eticheta td la care a fost aplicată și apoi să o adăugăm la eticheta a cu un fundal mare.

Folosesc atât proprietățile max-width, cât și max-device-width în această interogare media, în încercarea de a evita eroarea Oulook.com IE9

@media numai ecran și (max-width: 550px), ecran și (max-device-width: 550px) ( body .buttonwrapper (background-color: transparent!important;) body .button a (background-color: #e05443); padding: 15px 15px 13px! important display: block!important;) )

Acum, când dați clic oriunde pe butonul colorat, va fi un link.

Îmbunătățiri suplimentare folosind interogări media

Dacă doriți, puteți începe acum să vă îmbunătățiți aspectul atribuind nume de clasă elementelor pe care doriți să le controlați și apoi adăugând reguli noi în interogarea media pe care am creat-o mai devreme.

Dezabonați-vă din acest buletin informativ instantaneu

și adăugați stilurile CSS corespunzătoare la interogarea media:

Corp .dezabonare (afișare: bloc; margine-sus: 20px; umplutură: 10px 50px; fundal: #2f3942; chenar-rază: 5px; text-decoration: niciuna!important; font-weight: bold;) body .hide (afișare) : niciunul! important;)

De asemenea, puteți sublinia clasele .innerpadding, .header și .footer pentru a reduce impactul padding-ului pentru clienții care acceptă interogări media.

Testează și mergi mai departe!

În cele din urmă, ca întotdeauna, asigurați-vă că sunteți validat (folosind validatorul W3C - puteți avea o singură eroare cu atributul „yahoo” al etichetei body) și testați că totul este în regulă folosind dispozitive reale și pe browsere web precum Litmus sau Email pe Acid.

Distrează-te creând e-mailuri receptive care arată grozav în orice client de e-mail!

Creăm un șablon individual de scrisoare HTM pentru Yandex / Mail.ru

Toate companiile (în special directorii lor) vor să iasă în evidență de restul prin stilul lor unic. Și scrisorile prin e-mail nu fac excepție.

Cum se trimite o scrisoare html prin Mail.ru

Dar mulți clienți și servicii de e-mail oferă posibilitatea de a schimba doar semnătura dintr-o scrisoare. Ei bine, toată lumea face asta, dar dacă trebuie să scrieți o scrisoare ca aceasta:

Cu condiția ca e-mailul corporativ să fie implementat pe platforma gratuită Yandex sau Mail.ru (nu luăm în considerare Gmail pentru afaceri, deoarece nu a fost gratuit de mult timp), sarcina devine destul de laborioasă, dar se poate rezolva!

Aşa, mai întâi de toate trebuie să desenați un design scrisoare viitoare. Este important de reținut că designul nu trebuie să aibă o lățime mai mare de 640 de pixeli și să ia în considerare „întinderea” corpului literei. Această regulă vă va permite să vă vizualizați e-mailurile chiar și pe ecranele celor mai mici dispozitive personale fără defilare orizontală (nu vorbim despre browsere mobile).

După aceea, trebuie să tastați litera. S-au scris destul de multe articole despre regulile de aranjare a scrisorilor de e-mail și găsirea lor nu este dificilă. După aspect, vă sfătuim să vă asigurați că majoritatea serviciilor de e-mail și clienților percep șablonul de scrisoare în mod adecvat. În primul rând, ar trebui să verificați

• Yandex - e-mail;
• mail mail.ru;
• e-mail Gmail;
• Mozilla Thunderbird;
• Liliacul;
• Microsoft Outlook.

Totul este în regulă cu aspectul literelor, așa că să trecem la ritualurile magice.

Dintre toate serviciile și programele de e-mail din acest moment, doar Mozilla Thunderbird și Microsfot Outlook acceptă inserarea e-mailurilor în format HTML. Dar toți utilizatorii din compania ta „au încredere categoric” în Yandex - mail (sau mail.ru), iar directorul însuși refuză să treacă la programe de neînțeles atunci când trimite de ani de zile scrisori cu tema sa preferată Star Wars. Și Yandex nu acceptă inserarea de litere în format HTML. Ce ar trebuii să fac?

Să mergem la un truc.

Instalăm și configurăm Mozilla Thunderbird pentru contul angajatului de care avem nevoie.

Asigurați-vă că specificați transferul de date prin IMAP - un protocol pentru e-mailurile primite și SMTP - un protocol pentru e-mailurile trimise. Această manipulare vă va permite să descărcați e-mailuri în Mozilla Thunderbird fără a le șterge pe serverele Yandex și să actualizați automat mesajele trimise de la Mozilla Thunderbird pe serverele Yandex.

Această funcție ne va ajuta să creăm un șablon de scrisoare în Mozilla Thunderbird în format HTML și să îl încărcăm automat într-unul dintre folderele din e-mail Yandex.

Lipiți codul HTML în scrisoare și salvați-l ca șablonîn Thunderbird:

După 1-2 minute, folderul „șablon” de care avem nevoie apare în Yandex, care conține scrisoarea pe care am compilat-o. Acest șablon poate fi corectat și salvat în forma de care avem nevoie în e-mail-ul Yandex:

Când creați o nouă scrisoare, apelarea unui șablon nu este dificilă - faceți clic pe linkul verde „șablon” și încărcați opțiunea de șablon necesară. Puteți vizualiza toate șabloanele pe care le-am creat în folderul cu același nume, care este imbricat în folderul „Ciorne”.

Problemă: imaginile din șablonul de e-mail nu sunt afișate pe partea de primire.

Da, există o astfel de problemă. Dacă încărcați imagini de pe un site terță parte (de exemplu, de pe site-ul web al companiei dvs.), atunci imaginile nu vor fi afișate destinatarului. Această problemă poate fi rezolvată în două moduri:

• Încărcați imaginile utilizate în aspectul scrisorii pe un disc Yandex (dacă trimiteți e-mail de la Yandex sau în cloudul Mail.ru dacă trimiteți e-mail de la mail.ru). Apoi, furnizați link-uri directe către aceste imagini în servicii. Vă rugăm să rețineți că linkul pe care îl furnizați ar trebui să deschidă o imagine și nimic mai mult.
• Este posibil să încărcați o imagine în corpul scrisorii, recodând-o în baza 64..jpg"/>

Cea mai bună opțiune este să re-codificați imaginea în codul de bază 64 - mai puține mișcări ale mouse-ului, mai multă fiabilitate (imaginea nu va fi ștearsă de pe discul Yandex, este deja încorporată în scrisoare).

Sarcina este finalizată. Thunderbird poate fi eliminat. Directorul și angajații sunt fericiți - acum scrisorile lor sunt complet diferite de ale celorlalți.

Una dintre cele mai populare funcții de pe site este cererea sau formularul de comandă, datele din care sunt trimise prin email proprietarului site-ului. De regulă, astfel de formulare sunt simple și constau din două sau trei câmpuri pentru introducerea datelor. Cum se creează un astfel de formular de comandă? Acest lucru necesită utilizarea limbajului de marcare HTML și a limbajului de programare PHP.

Limbajul de marcare HTML în sine este simplu, trebuie doar să vă dați seama cum și unde să puneți anumite etichete. Cu limbajul de programare PHP, lucrurile sunt puțin mai complicate.

Pentru un programator, crearea unui astfel de formular nu este dificilă, dar pentru un designer de layout HTML, unele acțiuni pot părea dificile.

Creați un formular de trimitere a datelor în html

În această etapă, trebuie să creați un fișier form.php și să adăugați codul html al formularului la acesta. Pentru detalii despre fiecare element de formular, citiți articolul Cum se face un formular în HTML pentru un site web.

Prima linie va fi după cum urmează

Acesta este un element foarte important al formularului. În el indicăm cum vor fi transferate datele și în ce fișier. În acest caz, totul este transferat folosind metoda POST în fișierul send.php. Programul din acest fișier trebuie să primească, în consecință, datele, acestea vor fi conținute în matricea de mesaje și să le trimită la adresa de e-mail specificată.

Să revenim la formă. Al doilea rând va conține un câmp pentru introducerea numelui complet. Are urmatorul cod:

Tipul formularului este text, adică utilizatorul va putea introduce sau copia text aici de la tastatură. Parametrul nume conține numele formularului. În acest caz, este fio, sub acest nume va fi transmis tot ceea ce utilizatorul a introdus în acest câmp. Parametrul substituent specifică ce va fi scris în acest câmp ca explicație.

Rândul următor:

Aici, aproape totul este la fel, dar numele câmpului este email, iar explicația este că utilizatorul își introduce adresa de email în acest formular.

Următoarea linie va fi butonul „trimite”:

Iar ultima linie din formular va fi eticheta

Acum să punem totul împreună.

Acum să facem obligatoriu câmpurile din formular. Avem următorul cod:

Creați un fișier care acceptă date din formularul HTML

Acesta va fi un fișier numit send.php

În fișier, în prima etapă, trebuie să acceptați date din matricea post. Pentru a face acest lucru, creăm două variabile:

Numele de variabile în PHP sunt precedate de un semn $ și un punct și virgulă este plasat la sfârșitul fiecărei linii. $_POST este o matrice în care sunt trimise datele din formular. În formularul html, metoda de trimitere este indicată ca method="post". Deci, sunt acceptate două variabile din formularul html. Pentru a vă proteja site-ul, trebuie să treceți aceste variabile prin mai multe filtre - funcții php.

Prima funcție va converti toate caracterele pe care utilizatorul va încerca să le adauge în formular:

În acest caz, variabilele noi nu sunt create în php, ci sunt folosite cele existente. Ceea ce va face filtrul este să transforme personajul "<» в ‘<’. Также он поступить с другими символами, встречающимися в html коде.

A doua funcție decodifică adresa URL dacă utilizatorul încearcă să o adauge în formular.

Cu a treia funcție vom elimina spații de la începutul și sfârșitul liniei, dacă există:

Există și alte funcții care vă permit să filtrați variabilele php. Utilizarea lor depinde de cât de îngrijorat sunteți că un atacator va încerca să adauge cod de program la acest formular de trimitere prin e-mail html.

Validarea datelor transferate din formularul HTML în fișierul PHP

Pentru a verifica dacă acest cod funcționează și dacă datele sunt transferate, îl puteți afișa pur și simplu pe ecran folosind funcția ecou:

A doua linie de aici este necesară pentru a separa ieșirea variabilelor php în linii diferite.

Trimiterea datelor primite dintr-un formular HTML la e-mail folosind PHP

Pentru a trimite date prin e-mail, trebuie să utilizați funcția de e-mail în PHP.

mail("la ce adresa se trimite", "subiectul scrisorii", "Mesajul (corpul scrisorii)", "De la: de la care email este trimisa scrisoarea \r\n");

De exemplu, trebuie să trimiteți date către e-mailul proprietarului sau managerului site-ului [email protected].

Subiectul scrisorii trebuie să fie clar, iar mesajul scrisorii trebuie să conțină ceea ce utilizatorul a specificat în formularul HTML.

Este necesar să adăugați o condiție care să verifice dacă formularul a fost trimis folosind PHP la adresa de e-mail specificată.

Astfel, codul de program al fișierului send.php, care va trimite datele formularului HTML la e-mail, va arăta astfel:

Trei rânduri pentru a verifica dacă datele sunt transferate în fișier sunt comentate. Dacă este necesar, acestea pot fi eliminate, deoarece au fost necesare doar pentru depanare.

Am plasat codul HTML și PHP pentru trimiterea formularului într-un singur fișier

În comentariile acestui articol, mulți oameni pun întrebarea cum să vă asigurați că atât formularul HTML, cât și codul PHP pentru trimiterea datelor la e-mail sunt într-un singur fișier, și nu în două.

Pentru a implementa această lucrare, trebuie să plasați codul HTML al formularului în fișierul send.php și să adăugați o condiție care va verifica prezența variabilelor în matricea POST (această matrice este trimisă din formular). Adică, dacă variabilele din matrice nu există, atunci trebuie să arătați utilizatorului formularul. În caz contrar, trebuie să primiți date din matrice și să le trimiteți destinatarului.

Să vedem cum să schimbăm codul PHP din fișierul send.php:

Verificăm existența unei variabile în tabloul POST cu funcția PHP isset(). Un semn de exclamare înaintea acestei funcție într-o condiție înseamnă negație. Adică, dacă variabila nu există, atunci trebuie să ne arătăm forma. Dacă nu aș fi pus semnul exclamării, condiția ar însemna literal „dacă există, atunci arătați forma”. Și acest lucru este greșit în cazul nostru. Desigur, îl puteți redenumi în index.php. Dacă redenumiți fișierul, nu uitați să redenumiți numele fișierului în linie

. Formularul ar trebui să trimită către aceeași pagină, de exemplu index.php. Am adăugat titlul paginii la cod.

Testați formularul de trimitere pe găzduirea dvs. cu o perioadă de testare gratuită de 30 de zile.

Erori frecvente care apar la trimiterea unui formular PHP de pe un site web

Prima, probabil cea mai populară greșeală, este atunci când vedeți o pagină albă goală fără mesaje. Aceasta înseamnă că ați făcut o eroare în codul paginii. Trebuie să activați afișarea tuturor erorilor în PHP și apoi veți vedea unde a fost făcută eroarea.

scrisoare HTML

Adăugați la cod:

Fișierul send.php trebuie rulat doar pe server, altfel codul pur și simplu nu va funcționa. Este recomandabil ca acesta să nu fie un server local, deoarece nu este întotdeauna configurat pentru a trimite date către un server de e-mail extern. Dacă rulați codul nu pe server, atunci codul PHP va fi afișat direct pe pagină.

O altă greșeală comună este atunci când apare notificarea „Mesaj trimis cu succes”, dar scrisoarea nu ajunge prin poștă. În acest caz, trebuie să verificați cu atenție linia:

În loc de [email protected] trebuie să existe o adresă de e-mail la care să fie trimisă scrisoarea, dar în schimb [email protected] trebuie să fie un e-mail existent pentru acest site. De exemplu, pentru site-ul webriz.ru va fi [email protected]. Doar în acest caz se va trimite o scrisoare cu datele din formular.

Citiți și articolul despre o versiune ușor modificată a acestui formular de depunere.

Trimiterea unui formular fără a reîncărca pagina

Pentru a trimite o scrisoare html frumoasă în Yandex Mail, nu trebuie să vă înregistrați la diferite servicii de corespondență, este suficientă o simplă cunoaștere a html, iar procentul de citire a scrisorilor dvs. va crește semnificativ.

Formatarea unei scrisori în e-mail Yandex

Să începem cu faptul că Yandex monitorizează cu gelozie conținutul și designul scrisorilor trimise de la diverse servicii de liste de corespondență, multe ajung în spam pentru conținutul mesajelor, iar unele pentru designul lor de spam prea pronunțat. De aceea, panoul standard din e-mail Yandex conține doar o parte din capabilitățile pe care le avem.

Printre care:

1. atașarea fișierelor,
2. formarea textului,
3. și emoticoane.

Cum să inserați o imagine în e-mail Yandex

Oricât de ciudat ar părea, nu există butoane „Adăugați videoclip” sau banale „Adăugați imagine”.

Cum se trimite e-mail HTML?

Din anumite motive, Yandex a dezactivat această funcționalitate, nu este clar. Dar puteți adăuga imagini în corpul scrisorii prin copierea fișierului și lipirea acestuia în corpul scrisorii.

Singurul lucru este că de cele mai multe ori totul pare strâmb și înclinat, dar aș vrea să trimit oferte comerciale frumoase, invitații formale sau pur și simplu felicitări pentru cutare sau cutare eveniment.

Cum să trimiteți o scrisoare html din e-mail Yandex

Din punct de vedere tehnic, această oportunitate este oferită de Yandex, iar pentru a trimite o scrisoare html aveți nevoie doar de șablonul html în sine și de e-mailul deschis în browser.

Șablonul finit trebuie introdus în codul corectat al elementului de pagină cu formularul de trimitere a scrisorii.

În acest fel, îți poți proiecta frumos buletinul informativ și chiar poți crea o pagină cu oferte de produse cu un buton de comandă sau de cumpărare.

În același mod, puteți schimba designul și puteți insera o imagine în semnătură în e-mail Yandex.

Salutări, Maxim

Cum se trimite o scrisoare HTML de la mail.ru, yandex.ru, gmail.com

Beneficiile e-mailurilor și buletinelor informative HTML

Marketing prin e-mail- Acesta este unul dintre cele mai eficiente tipuri de promovare pe Internet. Datorită acesteia, loialitatea crește, volumul vânzărilor noi și repetate crește și, de asemenea, menține o comunicare constantă cu publicul. Foarte des, în timp ce ne uităm prin poșta din cutia poștală personală, întâlnim scrisori interactive frumoase, direct din care putem face o comandă sau o altă tranziție direcționată.


Îmi doresc foarte mult să fac cunoștință cu o astfel de scrisoare; este strălucitoare, elegantă și plăcută vizual, în contrast cu textul uscat pe un fundal alb. Să ne dăm seama cum să creați singur o scrisoare HTML.

Implementarea e-mailului interactiv

Prin calcule simple, s-a dezvăluit că astfel de litere sunt implementate, ca și paginile web obișnuite, folosind HTML și CSS. În consecință, pentru a crea o astfel de scrisoare, trebuie să faci o pagină mică și îngustă, cu toate linkurile necesare. Adică, pentru început, puteți să vă închideți e-mailul complet și să vă scufundați în Photoshop și un editor de cod și să reveniți numai când mini-site-ul terminat este afișat în fila browser.

De unde să începeți și cum să creați?

Există multe șabloane pe Internet care vă permit să creați o scrisoare HTML prin simpla schimbare a acestora pentru a se potrivi nevoilor dvs. Este important de știut că nu există loc în scrisoare pentru a atașa fișiere grafice, link-uri către care vor fi folosite în structura în sine. În consecință, toate imaginile care trebuie încorporate în corpul unei scrisori interactive trebuie să fie încărcate în servicii de fișiere terțe care oferă o legătură directă către acest fișier, de exemplu imgur. O legătură directă este cea care are un format de fișier la sfârșit.

Crearea unui e-mail HTML folosind un șablon

Să creăm o scrisoare interactivă simplă cu un antet, titluri și un buton de tranziție. Îți ofer șablonul meu, îl poți descărca de pe link și îl poți modifica după stilul tău.


Pentru a vizualiza scrisoarea live, faceți clic pe imaginea de mai sus și se va deschide într-o filă nouă.

Cum se trimite un e-mail HTML?

Trimiterea unei scrisori interactive este poate cea mai extraordinară etapă a procesului. Să ne dăm seama cum se inserează html într-un e-mail. Deci, vom acționa pe exemplul mail.ru. Intrăm în căsuța poștală, facem clic pe „scrieți o scrisoare”, scriem un cuvânt în formular, apoi îl selectăm și facem clic pe „vezi codul elementului”.


În codul care se deschide, vom vedea imediat id-ul corpului de linie = „tinymce”, făcând clic dreapta pe el, trebuie să selectăm elementul „Edit As HTML”.


După ce am selectat, vom vedea un câmp de introducere din care putem șterge în siguranță tot conținutul și putem introduce acolo tot codul din fișierul șablon de scrisoare. După aceea, închideți pur și simplu fereastra de vizualizare a anului sursă și admirați rezultatul, gata pentru a fi trimis.


Tot ce rămâne este să indicați destinatarul și să faceți clic pe „Trimite”

mai vrei?

În mod evident, articolul arată un șablon de scrisoare destul de simplu, dar în același timp, dacă este prezentat corect, eficient. Nu este deosebit de frumos sau luminos. Dacă doriți să organizați o corespondență la scară largă și să aveți o scrisoare cu adevărat frumoasă și strălucitoare, contact la mine. Voi desena și proiecta un șablon individual special pentru tine la prețuri mici.

1. Cel mai dificil lucru este crearea unui șablon de scrisoare HTML pentru buletinul informativ prin e-mail.
2. Dificultatea este că scrisoarea dvs. trebuie să arate (afișează) la fel de bine în toate cele mai comune browsere și clienți de e-mail.

Care este diferența dintre o scrisoare în HTML și o scrisoare în text simplu?
Textul unui e-mail obișnuit poate conține doar caractere ASCII.
Aceasta înseamnă că textul scrisorii nu va avea elemente de formatare a textului: aldine, cursive, culoare etc.

Se pare că folosirea șabloanelor HTML în marketingul prin e-mail are o serie de avantaje:

• Puteți concentra atenția asupra unui anumit loc prin utilizarea elementelor grafice.
• Scrisoarea va fi scrisă în stilul dvs. corporativ.
• Puteți afișa mai clar produsele și serviciile (din nou prin imagini).

1. Acceptați și realizați că HTML-ul unui șablon de e-mail de buletin informativ nu este un site web. Nu este nevoie să introduceți unități flash, imagini uriașe, adnotări etc.
2. Lățimea mesajelor ar trebui să fie de 620 - 800 de pixeli. În caz contrar, unii destinatari vor trebui să folosească derularea orizontală pentru a vă citi scrisoarea.
3. Creați e-mailuri manual. Nu este nevoie să folosiți toți editorii „WYSIWYG” (What You See Is What You Get). Aproape toate introduc cod HTML suplimentar, care poate fi apoi afișat diferit în diferite programe de e-mail. Recomand să folosiți http://bluegriffon.org/
4. Nu ar trebui să folosiți DIV-uri pentru aspect, folosiți tabele.
5. Nu introduceți informații importante cu imagini, deoarece acestea pot să nu fie afișate implicit de multe servicii de e-mail și clienți.
6. Indicați întotdeauna lățimea și înălțimea imaginilor.
7. Vă rugăm să includeți text alternativ pentru toate imaginile. Dacă utilizatorului i se blochează afișarea imaginilor în e-mailuri, va vedea text alternativ.
8. Nu faceți mese imbricate.
9. Nu utilizați imagini de fundal, de obicei nu sunt afișate.
10. Postați imagini pe serverul dvs. nu trebuie să le includeți în e-mail. Includeți linkuri către imagini în șablonul de e-mail.
11. Este de dorit o dimensiune mică a mesajului (40 - 100 kb nu mai mult).
12. Nu utilizați scripturi în e-mailuri. Nu vor funcționa.
13. Puteți introduce un link către versiunea completă a mesajului în scrisoare. Dacă destinatarul nu deschide scrisoarea, o poate vizualiza oricând pe serverul dvs.
14. Creați-vă scrisoarea pe baza faptului că cea mai importantă parte a informațiilor ar trebui să se încadreze în primii 7 - 10 cm.
15. Nu vă fie teamă să trimiteți un link către site-ul dvs.
16. Adăugați capacitatea de „Trimite unui prieten”.
17. Asigurați-vă că adăugați capacitatea de a gestiona abonamentele în corpul e-mailului.

Și poate cel mai important lucru este că, dacă ai un designer în compania ta, roagă-l să facă un șablon în editorul tău grafic preferat și să caute un designer de layout HTML care să înțeleagă toate astea

Pentru a trimite o scrisoare html prin Mail.ru trebuie să fii puțin inteligent. Ne-am dat seama în mod independent cum să facem acest lucru și am pregătit instrucțiuni detaliate pas cu pas.

Pasul 1. Pregătirea scrisorii

În primul rând, aveți nevoie de șablonul în sine cu linkurile corecte către imagini. Ideea este că imaginile trebuie să fie încărcate pe server și fișierul trebuie să conțină link-uri către ele, și nu către imagini de pe computer. Aceasta este o regulă importantă, altfel nu vor fi poze în scrisoarea finală.

Dacă ați comandat dezvoltarea de la noi, atunci aveți deja un fișier separat pregătit pentru aceste nevoi, iar imaginile sunt încărcate pe serverul nostru. În caz contrar, va trebui să o faci singur.

Să începem. Deschideți fișierul șablon folosind un bloc de note obișnuit și copiați tot conținutul acestuia mai târziu, va trebui să-l lipim în corpul scrisorii în Mail.ru.

Pasul 2. Introducerea unei scrisori în Mail.ru

Accesați căsuța poștală de pe site și creați o nouă scrisoare. Asigurați-vă că aveți activată stilul literelor. Ar trebui să vedeți panoul prezentat mai jos.

Faceți clic dreapta pe câmpul pentru introducerea textului literei și selectați „vezi codul” (În fiecare browser acest articol este numit diferit, dar sensul este același). Se va deschide panoul de editare a codului paginii. (Panoul poate arăta diferit în funcție de browserul dvs. Vă prezentăm Google Chrome ca exemplu).

Codul care este responsabil pentru completarea scrisorii a fost evidențiat. Dar avem nevoie de linia principală de cod - html.

Acest bloc este responsabil pentru completarea scrisorii și trebuie să inserăm șablonul nostru. Pentru a face acest lucru, faceți clic dreapta pe bloc și faceți clic pe „Editați ca HTML”.

... și în locul lui lipiți codul scrisorii noastre, pe care l-am copiat pentru noi înșine chiar la începutul lecției. Apoi pur și simplu închideți panoul făcând clic pe crucea din dreapta în colț.

Dacă ați făcut totul corect, va apărea scrisoarea dvs. Nu vă alarmați de faptul că nu are poze. Destinatarul va primi o scrisoare cu poze. Dacă ești îngrijorat, trimite-ți o scrisoare și vezi rezultatul.

Pasul 3. Trimiterea unui e-mail HTML

Mai rămâne doar să corectăm conținutul scrisorii, dacă este necesar. Doar rescrieți textele. Puteți utiliza instrumentele de proiectare din panoul de sus.

Odată ce sunteți complet mulțumit de conținutul scrisorii, trimiteți-o. Și pentru a nu fi nevoit să faceți acest lucru de fiecare dată, îl puteți salva ca șablon în mail.ru.