9 trucuri pentru a proiecta Perfect HTML Newsletter

Un buletin informativ de e-mail este modalitatea perfectă de a păstra legătura cu clienții sau cu adepții dvs. Adesea, compania sau site-ul dvs. va avea numeroase actualizări de produse sau, eventual, evenimente viitoare pe care doriți să le distribuiți. Este întotdeauna posibil să postați informații noi în fluxul dvs. de blog sau social media, dar audiența dvs. poate merge până la atingerea dvs. În acest caz, poșta electronică nu este cu siguranță o tehnologie moartă, doar un potențial neexploatat.

Procesul de creare și trimitere a unui buletin informativ este mult mai ușor decât s-ar putea gândi, ci pentru a crea un șablon personalizat și pentru a vă crea propriul cod - acest lucru poate dura mai mult.

Am compilat câteva sfaturi fantastice pentru a vă ajuta să proiectați buletine informative HTML de înaltă calitate, ca niciodată. Chiar dacă sunteți un începător la subiect veți găsi cu siguranță câteva informații neprețuite pentru a vă începe procesul de marketing prin e-mail.

Obiectivele unui buletin informativ

Înainte de a intra în aspectele de proiectare, trebuie să vă clarificăm scopul pentru realizarea unui buletin informativ. În funcție de tipul de site web pe care îl utilizați, informațiile conținute în newsletter-ul dvs. pot varia dramatic de celelalte, dar scopul principal al unui buletin informativ este de a oferi actualizări convenabile direct în căsuța de e-mail a cititorului.

Utilizatorii de Internet grei vor verifica e-mail-ul de mai mult de două ori pe zi. Chiar și cei care sunt în mod constant ocupați vor avea timp să-și transmită mesajele cel puțin o dată pe zi. Acesta este momentul perfect pentru capta atenție chiar și fără a necesita vizite pe site-ul dvs. Chiar dacă nimeni nu face clic pe link-urile tale, informațiile sunt încă primită, care este excelent pentru construirea unui brand.

Luați în considerare unele dintre subiectele pe care ar trebui să le oferiți în designul dvs. Includeți linkuri către înscrierea pentru serviciul dvs. eventual link-uri de blog, sau cele mai recente articole publicate pe site-ul dvs.? Formatul buletinului dvs. de știri va reflecta modul în care doriți cititorii dvs. să răspundă, dar, în cele din urmă, căutați să aduceți interes și să treceți în jurul unor informații interesante de informare a maselor.

1. Utilizați tabelele în planurile dvs.

Acest lucru poate părea un pic contradictoriu față de standardele web moderne de astăzi, dar e-mailurile sunt încă arhaice în motoarele lor de redare, astfel încât trebuie să construiți modele mai vechi. Din păcate, tabelele sunt cea mai ușoară cale pentru a face totul să funcționeze corect între diferiți clienți de e-mail. În funcție de cunoștințele dvs. de a construi machete pe bază de machete, acest lucru ar putea veni de fapt ca o veste bună!

De asemenea, vă puteți întreba de ce div și alte elemente bloc nu sunt o idee bună. Majoritatea clienților de e-mail sunt construit pentru a elimina orice CSS străin conţinut. Aceasta înseamnă că nu veți putea folosi prea mult decât orice altceva inline CSS (și chiar sprijinul deplin este neclar). Clienții precum Microsoft Outlook 2007 și Gmail de la Google au un suport foarte slab pentru elementele plutitoare și poziționarea directă.

Cea mai bună soluție ar fi asamblați mai multe mese în interiorul celuilalt. Suprapunerile și marginile nu sunt stabilite la o anumită scară între mulți clienți de e-mail. Acesta este un motiv să rămânem la folosire width = "valoare" pe toate elementele celulei tablei. Acestea vor afișa întotdeauna aceeași lățime, indiferent de clientul de e-mail pe care îl folosesc cititorii dvs., deci este foarte mult mai sigur și mai consecvent pentru a seta umplutura și margini folosind celule de tabel goale.

2. Poziționarea cu lățime fixă

Aveți câteva opțiuni atunci când construiți schițele layout-ului dvs. de newsletter, dar cea mai bună opțiune de urmat este pentru a seta lățimi fixe pentru tabelul care conține. Există multe rezoluții diferite ale monitorului - nu veți putea să vă mulțumim tuturor. Dacă nu aveți elemente particulare cu lățimi statice, puteți utiliza întotdeauna width = "100%" pe masa ta. Acest lucru va permite conținutului dvs. să umple întreaga lățime a tuturor clienților de e-mail.

Cu toate acestea, pentru mulți, această metodă este puțin prea lejeră. Buletine informative constructive va necesita o lățime fixă în majoritatea cazurilor, mai ales dacă veți folosi bannere și imagini setate la o anumită dimensiune. Vă recomandăm să lucrați cu Lățimea maximă a documentelor 500px - 600px. Dimensiunea orizontală a ecranului iPhone și a anumitor modele BlackBerry este limitată la 320 pixeli, astfel că, chiar la 500 pixeli, șablonul dvs. de e-mail va fi micșorat pentru a se potrivi în mod corespunzător.

Având în vedere că mulți utilizatori mobili aleg să vizualizeze e-mail fără HTML oricum, aceasta nu ar trebui să fie o problemă enormă. Utilizatorii de clienți desktop și webmail vor avea probabil o configurație similară, indiferent de sistemul de operare pe care îl utilizează. Cand ai dubii creați câteva modele șablon și alegeți cele pe care le preferați cel mai bine!

3. Unități de pixeli

Cu excepția cazului în care veți folosi elemente lichide în buletinul dvs. de știri, probabil că veți avea nevoie să dimensionați câteva lucruri. Încercați să o păstrați pixeli (px) mai degrabă decât într-un alt tip de unitate. Procentajele se pot amesteca ușor cu mulți clienți webmail și ferestre de software. Cu mai puține elemente de pagină, structurile fluide pot ieși neatinsă, deși cu câteva bug-uri.

Dar pixelii sunt întotdeauna un lucru sigur. Lucrând în limita maximă a lățimii de 600px, puteți să potriviți într-adevăr o mulțime de conținut în interior. Expunerea este mai ușoară dacă împărțiți aspectul în două sau trei coloane și scrieți mereu dimensiunile în pixeli. Singura excepție poate fi dimensiunile fontului Unde ems poate sprijini cititorii dvs. mai bine, dar em dimensionarea va diferi într - un mod similar procentual pentru simplitate, lipiți de alinierea bazată pe pixeli.

4. Posibilitățile cu CSS

Poate părea că designul de e-mail este în afara pentru a distruge utilizarea stilurilor CSS. Deși există o mulțime de caracteristici neacceptate, CSS este în continuare perfect acceptabilă în multe cazuri. Monitorizarea campaniei are o masă frumoasă de proprietăți CSS acceptate listate de clientul de e-mail. Toți vor susține elementele de bază cum ar fi familie de fonturi și stilul fontului, astfel încât să puteți sări peste dacă doriți.

Fiți precauți cu privire la stilurile de fonturi, pentru a nu împinge granițele prea mult. Dacă vă simțiți incomod cu stilurile inline, este întotdeauna posibil să utilizați eticheta de fonturi HTML chiar dacă a fost depreciată. Dacă sunteți un designer CSS, nu este nevoie să renunțați la sistem, dar orice codare CSS scurtătură poate avea ca rezultat modele de buggy. Ca un exemplu font: 12px / 14px Arial, sans-serif; stenograma poate ajuta la salvarea mult spațiu, dar nu este pe deplin acceptată pentru designul de e-mail, chiar și atunci când este folosit cu stiluri inline.

Chiar și alegerile dvs. de culoare ar trebui să fie scrise lung. Hex culori, cum ar fi #ccc sau # e3f trebuie să fie scris în întregime ca #cccccc sau # ee33ff, respectiv. Dacă puteți construi ceea ce aveți nevoie fără CSS, aș recomanda această cale, dar nu fiți complet timizi departe de CSS în desenele de e-mail, deoarece contrar credinței populare este susținută în majoritatea cazurilor.

5. Ancor Link-uri bune practici

Veți dori cu siguranță să includeți câteva link-uri în newsletter-ul dvs. Acestea ar putea fi link-uri de ieșire către alte pagini de pe web sau, poate, link-uri către cele mai populare pagini de pe site-ul dvs. În plus, majoritatea subsolurilor vor conține un link de dezabonare pentru cititorii dvs. pentru a renunța la procesul de e-mail, dar cum ar trebui să faceți față tuturor acestor linkuri în design?

Ei bine, trebuie să remarcăm mai întâi că clienții de e-mail sunt foarte finici cu desenele lor. Mulți vor alege să suprascrie stilurile de legătură, chiar și cu CSS inline. Un truc bun ar trebui să fie includ atât culoarea inline, cât și o etichetă suplimentară de span în cadrul elementului de ancorare. Dacă culoarea și stilul legăturilor dvs. sunt importante pentru designul general, veți dori să luați măsurile de precauție suplimentare. Am adăugat mai jos un exemplu de cod mic:

un text de legătură

Efecte de hover sunt nu sunt acceptate în Outlook 2007/2010, Gmail, iOS sau Android. Este posibil să doriți să includeți în continuare a: hover stil pentru toți clienții care suportă: Outlook 2000/2003, Hotmail, Apple Mail și Yahoo! mail, dar personal nu văd prea multe beneficii în experiența de utilizare parțială, deoarece selectorii de ancoră nu sunt puternic sprijiniți Vă recomandăm oferind doar 2-3 culori de link-uri pentru a vă folosi pe tot parcursul designului.

Ca prezumție, utilizatorii se vor aștepta, de asemenea, ca legăturile dvs. să se deschidă într-o nouă filă sau fereastră. În mod ideal target = "_ blank" atributul ar trebui să fie suficient pentru ca toate browserele să recunoască această funcționalitate, iar includerea acestui atribut pe legăturile de ancorare nu ar trebui să afecteze în mod negativ programele de e-mail cum ar fi Lotus Notes sau Outlook.

6. Testarea la toți clienții majori

Un studiu recent al celor mai cunoscuți clienți de e-mail (realizat de Monitorul de campanie) prezintă zece dintre cei mai cunoscuți clienți de e-mail din ultimul an. Ar putea părea un pic obositor, dar designeri ar trebui să aibă obiceiul de a verifica buletinele de știri pe toți clienții majori de e-mail, cel puțin pe unii dintre clienții mai cunoscuți, cum ar fi Gmail, Hotmail sau Yahoo! Poștă.

Aceasta nu include numai webmail-ul, ci și software-ul de operare atât pe Mac OS X, cât și pe Windows. De asemenea, în funcție de diagrama lor iOS Mail și Android au atat in ultimii ani in top 10 lista. De fapt, iPhone, iPod Touch și iPad Mail se situează pe locul 2 drept cel mai popular din Outlook! Din păcate, nu există o modalitate de a le testa fără a deține unul dintre dispozitive - deci va trebui să rezolvi alte opțiuni.

Un bug cu suportul mobil vine în multe modele iPhone și Android. Redarea prin e-mail mobil va fi adesea redimensionați textul din interiorul șablonului. Acest lucru nu poate afecta designul dvs. foarte mult, dar poate fi enervant pentru unii cititori. Utilizarea CSS -webkit-text-size-adjust: nici unul;, voi asigurați o dimensiune standard a textului în toate motoarele de parsing fără a fi nevoie să o testați.

Dacă știți orice prieteni sau colegi care folosesc software alternativ, vă recomandăm să faceți acest lucru cereți ajutorul pentru testarea buletinului informativ. Poți și tu trimiteți-le o copie a e-mailului pentru a verifica dispozitivul sau împrumutați dispozitivul pentru a elimina în mod activ bug-uri de codificare. Din fericire, Outlook oferă o versiune de instalare Mac, astfel încât nu veți avea nevoie să urmăriți un utilizator Windows pentru acele optimizări, dar când vine vorba de Lotus Notes sau Windows Mail, este posibil să nu aveți noroc.

Alternativa este să plătiți pentru o soluție cum ar fi previzualizarea e-mail-ului meu, din păcate, nu oferă conturi demo gratuite, dar serviciul lor este bine renumit pentru oferirea unor previziuni teribile ale designului. E-mail pe Acid este un serviciu similar care oferă un cont gratuit, dar nu te lasă să testezi pe toți clienții, care fel de a învinge scopul. Serviciile de randare online ar trebui să fie utile dacă trebuie să testați mai multe șabloane de buletine informative pe termen lung fără utilizarea calculatoarelor alternative, cu toate acestea acestea nu sunt fundamentale, deci nu stresați dacă nu le puteți testa pe toate!

7. Oferiți întotdeauna viziuni bazate pe Web

Cititorii nu vor avea întotdeauna posibilitatea (sau să fie dispuși) să vă vizualizeze mesajul e-mail. Oferind o altă versiune undeva pe Web va da un sentiment de ușurință și compatibilitate. Acest proces nu poate fi complet automatizat decât dacă doriți să includeți a text simplu versiune.

În acest fel, ați face-o elimina toate etichetele HTML din aspectul buletinului de știri. Nu ați putea să includeți link-uri sau stiluri pentru nimic. Toată conținutul ar fi pur și simplu să fie prezentat ca un fișier text simplu pentru cititori fără capacitatea de redare. Aceasta este cu siguranță o alternativă bună, dar când oferiți o versiune completă Web a aceluiași buletin informativ elimină daunele cauzate de orice eroare de redare. Majoritatea cititorilor vor rula un browser web actualizat, pe care îl puteți modela și construi pe buletinul informativ și la perfecțiune.

Modul în care ați configurat pagina este în întregime alegerea ta. Unele site-uri web vor dedicați o întreagă postare pe blog pentru a duplica conținutul e-mailului, poate cu unii informatii suplimentare. Alții vor creați o pagină separată de pe site-ul principal fără link-uri directe în navigație. Această metodă poate fi benefică deoarece cititorii nu vor fi distrași de șablonul principal al site-ului sau de conținutul barei laterale.

8. Adăugarea conținutului imaginii

Imaginile reprezintă un alt motiv pentru a oferi cititorilor dvs. o soluție bazată pe web. Implicit, clienții de e-mail sunt setate să elimine imaginile din conținut. Dacă adresa dvs. este adăugată la o listă sigură, toate imaginile vor fi afișate în mod prestabilit, dar utilizatorul trebuie să accepte această configurație deci cu siguranță nu este o garanție. Doar asigurați-vă că imaginile nu sunt necesare ca parte a conținutului principal, dar inclusă ca un top suplimentar pentru estetica paginii.

Odată ce ați ajuns la exportul de grafice, există câteva sfaturi pentru a construi imagini special pentru e-mail. Veți dori întotdeauna setați atât atributele de lățime cât și înălțimea img Etichete. Fără aceste specificații în ordine, unii clienți vor denatura conținutul imaginii. Un Alt tag-ul se va dovedi de asemenea util, astfel încât vizitatorii vor ști ce conțin conținutul imaginii înainte de a fi încărcat.

După cum am menționat anterior, poziționarea imaginilor în e-mail poate deveni complicată. Evitați utilizarea plutitoarelor cu orice pret! Imaginea align = "left" atributul va funcționa mult mai bine sau alternativ harta celulelor de tabel pentru a vă potrivi imaginile de-a lungul părții de sus, stânga sau dreapta a buletinului dvs. de știri. Nu veți putea obține o potrivire perfectă cu atât de mulți clienți acolo (în special clienți mobili), dar optimizați imaginile și păstrați dimensiunile fișierelor mici pentru rezultate optime.

În ceea ce privește stocarea imaginilor, vă recomandăm păstrați toate fișierele în propriul server Web. Aceasta este cea mai bună opțiune în loc de a utiliza o altă gazdă de imagini sau prin încărcarea fișierelor într-un serviciu de buletine informative online. În plus, ar trebui separați conținutul buletinelor de știri de restul imaginilor într-o structură de directoare ca astfel / Img / e-mail sau / Img / e-mail / 2011.

9. Evitați folderul Spam!

Acest lucru poate fi dificil de auzit, dar nu toți clienții de e-mail sunt prietenoși față de buletine de știri. Există miliarde de e-mail-uri trimise în fiecare zi și majoritatea conțin spam sau conținut rău intenționat, având astfel aceste măsuri de securitate încorporate în căsuța de e-mail este clar pentru măsuri de siguranță.

Cu toate acestea, atunci când vine vorba de marketing pe Internet, puteți fi ușor descurajat pentru a vedea cele mai recente newsletter-ul dvs. cu junk. Pentru a reduce șansele de a întâmpla acest lucru ar trebui curățați-vă designul pentru simplitate. Nu creați imagini enervante sau arunca în aer textul titlului cu sute de cuvinte cheie.

De asemenea, încercați să țineți-vă conținutul scurt și pe subiect. Nu este nevoie să includeți conținut complet pentru toate articolele sau paginile dvs. Încercați să adăugați o propoziție sau două cu o legătură alternativă spre site-ul dvs. în locul unei liste lungi. pentru a vă informa mai repede despre e-mail, cu atât este mai probabil că va trece inspecția de spam.

Buletin informativ de design

Ce distracție ar fi un articol de buletin informativ prin e-mail fără câteva exemple fantastice? Există tone de modele de știri și șabloane de e-mail pentru a fi verificate în Google. HTML E-mail Gallery este o sursă foarte populară pentru inspirație.

Mai jos am inclus capturi de ecran din numeroasele buletine de știri din galeria Monitorului Campaniei. Sperăm că aceste structuri teribile vă pot oferi câteva idei minunate pentru propriile dvs. modele.

Distrează-te desenând ideile tale ideale!

Alertful pentru afaceri