Share
În acest tutorial vă voi arăta cum să creați un simplu e-mail HTML receptiv, care să funcționeze în fiecare client de e-mail, inclusiv toți noii clienți și aplicații de poștă electronică smartphone. Utilizează interogări media minime și o abordare cu lățimea fluidului pentru a asigura compatibilitatea maximă.
Dacă sunteți în căutarea unei soluții pregătite, profesionale, luați unul dintre cele mai bune modele de e-mail responsabile de e-mail pe Envato Market. Avem sute de opțiuni receptive de la 5 dolari, cu facilități ușor de personalizat pentru a începe.
Cel mai bine vandut template-uri de e-mail responsabile pe Envato MarketNu ceea ce căutați? Nicio problemă, acest tutorial vă va învăța cum să vă construiți propriul.
A existat o perioadă în care interogările media au fost destul de suficiente pentru a obține e-mailuri receptive care să lucreze în aplicații iOS și Android, ambele care acceptă interogări media.
De atunci, a existat o proliferare a aplicațiilor de e-mail create pentru platformele iOS și Android, cu diferite grade de suport pentru metode de dezvoltare a e-mailului.
Cel 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 implicită pentru utilizatorii de Android (care acum cuprinde 11% din totalul de deschideri). Niciodată nu a acceptat interogări media, și totuși nu, totuși vă scade e-mailurile prin comprimarea dimensiunii mesei exterioare pentru a se încadra în aria vizibilă a ecranului. Este greu de controlat și, atunci când întregul e-mail se bazează pe interogările mass-media pentru a fi afișate corect pe mobil, generează câteva rezultate foarte neplăcute.
Vestea bună este că tu poate sa proiectați și construiți un e-mail care să arate excelent în fiecare aplicație de e-mail, inclusiv cele care nu acceptă interogări media. Puteți face acest lucru folosind un aspect fluid.
Există totuși câteva compromisuri pe care trebuie să le faceți. Aceste minunate dimensiuni ale coloanelor egale care stivuiesc o singură coloană nu funcționează atât de bine utilizând această metodă. Dacă puteți învăța să trăiți fără ele, există câteva modele foarte funcționale care pot funcționa extrem de bine.
Iată ce vom crea astăzi:
Ok, să începem cu panza neagră.
Un e-mail HTML simplu
|
Ceea ce cream aici este pagina noastră de bază cu ea antet, doctype și tabelul de containere cu o culoare de fundal aplicată (atât pentru corp cât și pentru o masă de învelire mare, deoarece styling-ul etichetei de caroserie nu este pe deplin suportat). Pentru mai multe informații despre această configurație de bază, consultați Construirea unui șablon de e-mail HTML de la zero.
Apoi am adăugat tabelul cu conținut principal la centru cu o clasă de "conținut".
Notă: Veți observa că în acest tutorial voi introduce CSS în capul documentului nostru. În general, plasez stiluri în cap atunci când o să le folosesc din nou și păstrez stilurile unice în linie.
Important: Ori de câte ori utilizați reguli CSS în capul documentului, tu trebuie sa utilizați un instrument pentru a le aduce toate în linie la sfârșitul procesului. Dacă utilizați un serviciu, cum ar fi MailChimp sau Monitorul de campanie, aceștia vă vor oferi în mod automat să vă aducă stilurile în linie atunci când importați designul. Trebuie să faceți acest lucru deoarece anumiți clienți, cum ar fi Gmail, vă vor ignora sau elimina Acum vom adăuga primul rând din tabelul nostru - antetul. Adăugați următoarele la stilul rândului pe care l-am creat deja: Apoi, în CSS, adăugați căptușeala pentru antet: Acum vom crea primul rând de reacție. Modul în care facem acest lucru este crearea a două tabele care "plutesc" una lângă cealaltă, utilizând proprietatea HTML "align". Înlocuiți micul nostru "Bună ziua!" Salut cu următoarele: Creați masa noastră de 70px și adăugați, de asemenea, niște cearceafuri care vor acționa ca jgheabul nostru între cele două coloane. Plăcuța de pe partea inferioară va adăuga cameră de respirație verticală atunci când cele două coloane se pun pe mobil. Vom crea coloana din dreapta aliniind din nou spre stânga un tabel. Acest tabel va avea o lățime de 445 de pixeli, ceea ce ne va lăsa la 25 de pixeli pe partea dreaptă. Acest lucru este foarte important deoarece Outlook vă va stivă în mod automat mesele dacă nu există cel puțin 25 de pixeli pe un rând dat. Atâta timp cât permiteți cel puțin 25 pixeli de cameră de respirație, mesele dvs. se vor comporta conform așteptărilor. Pentru a obține această chestiune, puteți utiliza și codul condiționat pentru a înșela Outlook să creadă că ați închis o celulă și ați deschis o nouă. După eticheta de închidere a primului tău tabel și înainte de eticheta tabelului de deschidere pentru al doilea, adăugați pur și simplu: Pe masa mai largă din partea dreaptă, vom folosi aceeași abordare pe care am folosit-o în tabelul nostru de containere, care implică crearea unei clase și adăugarea codului de împachetare condiționată. Vrem ca această masă să fie 100% lată pe mobil, unde va apărea sub masa din stânga. Aici puteți vedea că am creat o clasă numită "col425" pentru acest tabel, coloana noastră de 425px. Am înfășurat masa în codul condițional care o va închide într-o tablă largă de 425 pixeli. Apoi adăugăm clasa noastră la Media Query pe care am creat-o și pentru Apple Mail. Acum, în interiorul celulei, vom adăuga titlul stilat. Am adăugat câteva clase în fiecare celulă pentru stil, precum și unele stiluri pe care le voi folosi pentru alte tipuri de text mai târziu: Antetul nostru este acum complet, și puteți vedea mai jos cum vor sta două coloane pe mobil. (Pentru a previzualiza acest lucru în timp ce lucrați, va trebui să comentați temporar interogările media pe lățimea dispozitivului, deoarece acestea aplică o lățime fixă pe desktop). Pentru a crea un singur rând de text pentru coloană, pur și simplu adăugăm un rând nou în tabelul ".content". Vom adăuga o clasă "interiorpadding" acestor rânduri cu câteva valori de umplere reutilizabile. De asemenea, vom adăuga o clasă de "borderbottom" pentru a aplica o margine pentru fiecare rând. CSS-ul nostru pentru această secțiune: Acum vom crea un rând receptiv exact ca antetul nostru, dar cu dimensiuni ușor diferite, astfel încât să putem avea o imagine mai mare. Am adăugat un buton aici cu clasa "buttonwrapper". Conține o celulă căptușită cu un set de culori de fundal și apoi o legătură text înăuntru. Prefer să folosesc această metodă deoarece vă permite să aveți butoane de lățime a fluidului, care este foarte utilă atunci când creați un șablon reutilizabil, unde lățimea fiecărui buton va fi diferită de fiecare dată când este utilizată. Dacă aveți o lățime fixă pentru butoanele dvs., puteți prefera să utilizați Generatorul de butoane pentru bulletproof la Monitorul de campanie. Stilurile noastre pentru buton: Pe lângă lățimea setată pentru această nouă clasă "col380", vom adăuga dimensiunea noastră pe lista de stiluri pentru a avea grijă de Apple Mail. Acum arată astfel: Acesta este un rând foarte simplu; vom seta pur și simplu o imagine pentru a fi 100% din lățimea e-mailului și asigurați-vă că înălțimea sa este setată să fie automată utilizând CSS. În CSS: În cele din urmă, vom adăuga un rând de text fără marginea din partea de jos: Pentru a crea subsolul, vom adăuga un rând nou cu un tabel înăuntru. Unul dintre rânduri va conține un alt tabel pentru icoanele noastre de social media. Vom adăuga stilurile necesare pentru subsolul nostru în CSS: Pe mobil, este ideal dacă întregul buton este un link, nu doar textul, deoarece este mult mai greu să vizați un mic link text cu degetul. Deoarece nu este posibil ca această lucrare să fie făcută tuturor clienților de pe desktop (suprapunerea nu este pe deplin acceptată Va trebui să eliminăm culoarea din Voi folosi ambele Acum când atingeți oriunde pe butonul colorat de pe mobil, este un link! Dacă ați fi vrut, puteți începe acum să faceți îmbunătățiri pentru aspectul dvs., aplicând nume de clase elementelor pe care doriți să le controlați și apoi creând noile reguli din interogarea media pe care tocmai am creat-o mai sus. De exemplu, vom transforma linkul nostru de dezabonare într-un buton, adăugând o clasă la link: și adăugarea următorului CSS la interogarea media: De asemenea, ați putea viza clasele .innerpadding, .header și .footer pentru a reduce cantitatea de umplutură pe clienții care suportă interogările media. În sfârșit, ca întotdeauna, asigurați-vă că validați (utilizând validatorul W3C - ar trebui să obțineți o singură eroare pentru atributul "yahoo" de pe eticheta corporală) și să testați cu adevărat folosind dispozitive live și un serviciu de previzualizare a paginilor, cum ar fi Litmus sau e-mail Acid. Bucurați-vă de crearea de e-mailuri receptive care arată excelent în fiecare client de e-mail! Dacă aveți nevoie de o soluție profesională, gata de utilizare, atunci un șablon de e-mail receptiv ar putea fi doar opțiunea potrivită pentru dvs.. Pentru a lua ceea ce ați învățat la nivelul următor, consultați următoarele tutoriale: Crearea antetului
Salut! .header padding: 40px 30px 20px 30px;
Adăugarea primului rând receptiv
Coloana stângă
Coloana corectă
Permiteți cel puțin 25 de spațiu de respirație pentru a opri Outlook din stivuirea meselor Stop! Sfat alternativ pentru păstrarea Outlook
Continuă…
style = "lățime: 100%; max-width: 425px;">
.col425 width: 425px! important;
CREAREA DE E-mailul reactiv Magic .subcapitolul font-size: 15px; culoare: #ffffff; font-family: sans-serif; spațierea literelor: 10px; .h1 font-size: 33px; linia-înălțime: 38px; font-weight: bold; .h1, .h2, .bodycopy culoare: # 153643; font-family: sans-serif;
Crearea rândului de texte pentru o singură coloană
Bine ați venit la e-mailul nostru receptiv! Lorem ipsum dolor stați amet, consectetur adipiscing elit. În tempus adipiscing felis, stați amet blandit ipsum volutpat sed. Încălțăminte, vă rugăm să luați decizia, să vă aflați liberi în ultima vreme,. .Încadrarea în interiorul padding: 30px 30px 30px 30px; .borderbottom border-bottom: 1px solid # f2eeed; .h2 umplutura: 0 0 15px 0; font-size: 24px; linie-înălțime: 28px; font-weight: bold;. bodycopy font-size: 16px; line-height: 22px;
Crearea articolului din coloana dublă
Lorem ipsum dolor stați amet, consectetur adipiscing elit. În tempus adipiscing felis, stați amet blandit ipsum volutpat sed. Încălțăminte, vă rugăm să luați decizia, să vă aflați liberi în ultima vreme,.
Revendicați-vă pe dvs.! .butonul text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; umplutura: 0 30px 0 30px; .button a culoare: #ffffff; text-decoration: none;
@media numai pe ecran și (min-device-width: 601px) .content width: 600px! important; .col425 width: 425px! important; .col380 width: 380px! important;
Crearea imaginii coloanei unice
img height: auto;
Crearea liniei textului final simplu
Lorem ipsum dolor stați amet, consectetur adipiscing elit. În tempus adipiscing felis, stați amet blandit ipsum volutpat sed. Încălțăminte, vă rugăm să luați decizia, să vă aflați liberi în ultima vreme,. Crearea subsolului
® Cineva, undeva 2013
Dezabonare din acest buletin informativ instantaneu
.footer padding: 20px 30px 15px 30px; .footercopy font-family: sans-serif; font-size: 14px; culoare: #ffffff; .footercopy a culoare: #ffffff; text-decorare: subliniază;
Butoane de optimizare pentru mobil
tag-uri), este ceva pe care îl adaug la versiunea mobilă utilizând interogările media. la care este aplicată în prezent, și apoi să o restituie eticheta împreună cu o mulțime de padding. lățimea maximă și max-device-width în această interogare media, în încercarea de a evita o eroare în Outlook.com pe IE9.@media numai ecran și (max-width: 550px), ecran și (max-dispozitiv-lățime: 550px) body [yahoo] .buttonwrapper fundal-color: transparent! -color: # e05443; padding: 15px 15px 13px! important; afișare: bloc important!
Îmbunătățiri suplimentare cu ajutorul interogărilor media
Dezabonare din acest buletin informativ instantaneu corp [yahoo] .unsubscribe afișare: bloc; margin-top: 20px; padding: 10px 50px; fundal: # 2f3942; raza de graniță: 5px; text-decoration: nimic important; font-weight: bold;
corp [yahoo] .hide display: none! important;
Testați și mergeți!
Accentsconagua