Share
E-mailurile Tuts + (buletine de știri, chestionare, etc.) au suferit recent o revizuire completă, incluzând noi modele și o nouă platformă. Acest studiu de caz va explica modul în care le-am construit în HTML și CSS, pe baza modelelor din prima parte din această serie.
Când a venit vremea să începem să construim șabloanele noi de email Tuts +, am fost destul de norocoasă pentru a fi destul de familiarizat cu desenele. În timpul fazei de proiectare, Ian mi-a încasat decizii importante și mi-a cerut o mulțime de întrebări pentru a ne asigura că am evitat orice etichete de e-mail clasice. Acest proces a fost o bază excelentă pentru mine și am fost gata să mă scufund direct în momentul în care desenele au fost finalizate.
Ian mi-a trimis desenele, o privire de ansamblu asupra layout-urilor, un ghid pentru aspectul grilei și un ghid de stil cu toate dimensiunile și culorile necesare. Eram gata să încep.
Primul meu pas este întotdeauna schițarea. Scopul este de a identifica toate modulele distincte, ignorând diferențele cosmetice minore. Acest proces îmi dă un set final de module-cheie pentru a construi că pot lucra unul câte unul pentru a construi structura primară.
După identificarea acestora, în multe cazuri le-aș construi pe toate într-o singură pagină înainte de a le separa într-o etapă ulterioară, dar aspectul este destul de ciudat de revizuit în acel stat. În schimb, am dezvoltat fiecare aspect în conformitate cu desenele, astfel încât acestea să poată fi revizuite și aprobate mai ușor.
Referindu-mă la rezumatul schițat al modulelor, am reușit să țin cont de faptul că un modul a trebuit să fie reutilizabil pe mai multe șabloane și să-l construiesc în consecință. Mai târziu aș fi organizat cursuri pe corpul fiecărei variante, cum ar fi var-admin și var-digest, permițându-mi să creez stiluri specifice fiecărui aspect particular.
Am început prin stabilirea unor variabile mai mici pentru elementele pe care le știam că le folosesc mereu, cum ar fi culorile și măsurătorile.
Un ghid pentru majoritatea stilurilor tipografice Unele dintre variabilele mele (în sintaxa LESS) sunt prezentate mai jos.
// Variabile @ bg-body: # f2f2f2; @ paletă-text: # 58595a; @ paletă-navy: # 212a34; @ paletă-design: # c94e4b; @ paletă-cod: # 4cc1be; @ paletă web: # 49b293; @ paletă-fotografie: # 8360a8; @ paletă-joc: # 72BF40; @ paletă-calculator: # 5d7dba; @ paletă de afaceri: # f38844; @ paletă-3d: # f95858; @ paletă-muzică: # 56a4ca; @ paletă-subsol: # 5a6e7a; @ paletă-adresa: # 999999; @ divider-color: #EAEAEA; @ link-color: # 136fd2; @ alt-color: @ paletă-text; @ width: 640px; @ jgheab exterior: 53px; @ content-width: @width - (@ jgheab exterior * 2); @ grid-unit: 16px; .inclus (@radius: 1px) raza de graniță: @radius; -webkit-border-radius: @radius;
Întotdeauna îmi prefac culorile paletă pentru a le păstra împreună. Acest lucru îmi ușurează alegerea unei culori din meniul derulant de sugestii care apare în textul Sublime:
Următorul pas important a fost înființarea webfonturilor utilizate în desene sau modele. Tipul de text este disponibil pentru Roboto de la Google Fonts, așa că am adăugat această etichetă la din șablon:
Acesta este generat de Fonturile Google și de linkurile către CSS pentru cele patru greutăți diferite ale Roboto pe care le folosim.
Am aplicat fontul pe eticheta corporală și pe tabelul principal de împachetare pentru acei clienți care nu iau în considerare eticheta corporală sau îi dezbate formatarea.
corpul, .wrapper font-family: "Roboto", sans-serif;
Apoi, pentru a împiedica Outlook 2007-2016 pe Windows să afișeze Times New Roman - așa cum tinde să facă atunci când se confruntă cu un font-face necunoscut - am configurat un cod condiționat numai pentru Outlook în din șablon:
Acest lucru asigură că fiecare instanță a webfont este suprascrisă în Outlook cu o sans-serif. Aplic acest lucru la table și divs, singurele două elemente care sunt folosite pentru a conține conținutul în șablon. Nu este necesar să mergeți la un nivel inferior, deoarece toate celelalte etichete vor moșteni acest lucru în Outlook.
Apoi a fost pe codificarea structurală. Am început cu primul modul pe care l-am schițat: masthead. O provocare aici a fost logo-ul, pentru că pentru unele dintre modele se pare puțin diferit pe mobil:
Pentru a realiza acest lucru, pe mobil am ascuns sigla principală și textul de sus. Am ascuns și logo-ul, și am adăugat frunza mică ca imagine de fundal la masthead.
.logo img afișare: nimic! important; .logo imagine-imagine: url (imagini/[email protected]); înălțime: 17px; fundal-poziție: centru centru; dimensiune de fundal: 15px 17px; background-repeat: nu-repeta;
Următoarea secțiune pe care am abordat-o a fost articolul "erou" din e-mailurile Digest; prima parte complicată fiind etichetele. În desene sau modele au apărut lângă textul de pe desktop, dar de mai sus textul pe mobil. Pentru a realiza acest lucru în cod, putem folosi câteva proprietăți de afișare pentru a le face să se deplaseze.
În primul rând, am creat eticheta de titlu cu conținutul în interiorul împărțit în două deschideri, unul pentru text și unul pentru etichetă.
Utilizarea curbelor în Adobe Photoshop CURS CURSAT
În stil, în stil .text span mosteneste stylingul h2, si apoi .eticheta span este desemnat separat pentru a face mai mic și pentru a da un fundal colorat:
.etichetă display: inline-block; margin-stânga: 5px; padding: 3px 8px; vertical-align: 4px; raza de graniță: 3 pixeli; -webkit-border-radius: 3px; culoare: #ffffff; font-size: 8px; linia-înălțime: 10px; font-style: normal; împărțirea literelor: 0,1;
Apoi, folosind interogările media, vom schimba elementele în jurul ferestrelor de vizualizare mai mici:
Ecranul @media și (max-width: 700px) h2 display: table! important; h2 .text display: table-footer-group important; h2 .label marginea-jos: 12px! important;
H2 este containerul nostru și l-am setat să fie afișat ca o masă, astfel încât să putem spune .text span să se comporte ca grupul de subsol al acelei mese și să se mute în partea de jos a layout-ului. .eticheta Span apoi afișează în partea de sus, și vom adăuga o margine sub ea pentru a da o cameră de respirație.
Normal, Outlook pe Windows (2007-2016) nu a vrut să afișeze etichetele în mod corespunzător, deoarece nu respectă raza de graniță și nici nu le place să adauge elemente de inserție în elemente inline. Rezultatele nu erau bune, așa că am creat un stil alternativ pentru Outlook pe care l-am plasat în codul condiționat în șablonul:
Acest lucru înseamnă că în Outlook ele vor apărea ca un text simplu colorat:
Șablonul de promovare are o caracteristică foarte distinctivă: un erou de la marginea la margine cu o imagine de fundal.
Credit pentru Marco Goran Romano pentru imaginea strălucită folosită ca loc de substituție Imaginile de fundal din e-mail nu sunt acceptate pretutindeni. Principalii doi clienți de e-mail care prezintă probleme sunt Outlook 2007-2016 (Windows) și Gmail.
perspectivă nu afișează fundaluri obișnuite, necesitând o anumită limbă de marcă vectorică specială pentru a le face să lucreze. (Stig la backgrounds.cm din Campaign Monitor este un instrument excelent pentru generarea acestui cod). Problema cu aceasta este însă că veți termina cu două blocuri de cod: unul în HTML și unul în VML. Acest lucru este riscant când știți că alții trebuie să fie capabili să actualizeze cu ușurință imaginea de fundal: dacă cineva încearcă să facă acest lucru fără să citească instrucțiunile în mod corespunzător, probabil că ar greși.
Gmail afișează imagini de fundal, dar nu respectă background-size sau background-position proprietăți, ceea ce le face destul de greu stilul.
Ne-am uitat la numărul de abonați și am putut efectua apelul pe Outlook: ar fi bine dacă utilizatorii Outlook au văzut o culoare solidă în locul imaginii.
Pentru utilizatorii Gmail, ar trebui să setăm câteva linii directoare în jurul imaginilor acceptabile când se utilizează șabloanele. Fundalul ar trebui fie să fie un fundal repetat fără sudură, fie să fie configurat astfel încât să arate întotdeauna bine la 100%, fixat în colțul din stânga sus.
Interesant, Gmail face suport vertical background-position proprietati pe partea stanga: stânga sus , stânga jos și centru stânga . Din păcate, nu puteți poziționa pe orizontală, ceea ce este de obicei ceea ce doriți să faceți făcând afișarea centru centru .
Pe unele blocuri de anunțuri, am putut să avem imagini de fundal în Gmail, deoarece sunt fixate în partea stângă jos. Aceste blocuri au revenit, de asemenea, la o culoare de fundal solidă în Outlook.
Am jucat în jurul valorii de două moduri de a obține marginea negativă de top pe masthead pentru a lucra, în cazul în care caseta albă de conținut apare suprapus pe masthead în sine.
În dezvoltarea web, ați adăuga un negativ margin-top la cutia de conținut, praf mâinile și pentru a merge mai departe cu ziua ta.
În dezvoltarea e-mailurilor, acest lucru nu este posibil. Marjele negative sunt suportate doar de o mână de clienți de e-mail, lăsând o mulțime de comune în mizerie (cum ar fi Gmail, Yahoo și Outlook.com).
A rămas însă prima noastră opțiune: folosiți un negativ top-marja ca o îmbunătățire progresivă, care ar afișa cu o marjă de 0 la toți clienții ne-sprijiniți (văzută mai jos). Dezavantajul este că o mulțime de clienți ar vedea această versiune fără margini și aspectul a pierdut cu siguranță ceva fără ea.
Cealaltă alternativă a fost aceea de a falsifica marja negativă, creând o masă albă necompletată la înălțimea și lățimea corectă. Dezavantajul acestei abordări constă în faptul că aplicația Gmail afișează adesea linii minuscule atunci când scade conținutul pe mobil în cazul în care conținutul este mai ușor pe fundalul întunecat sau invers. Acestea nu sunt de fapt linii reale sau frontiere, doar glitches minuscule care nu pot fi fixate cu cod. Am decis să mergem cu acest scenariu, pentru că a beneficiat de cel mai mare număr de cititori, iar parul a fost, în general, imperceptibil. De asemenea, am decis să privim cu atenție problema și să o revedem dacă nu am fost mulțumiți de rezultate. (Din păcate, aceste șabloane nu au putut fi construite utilizând metoda fluid-hibrid deoarece atât MailChimp, cât și Monitorul de campanii prezintă mari probleme în acest sens.)
Nu se suprapun
Se suprapune, cu linia minusculă a secțiunilor GmailȘtiam că voi transmite șabloanele către Ian pentru integrarea cu mai multe platforme de expediere de e-mail: MailChimp și Monitorizarea campaniei. Deoarece codul meu a trebuit să funcționeze bine cu ambele limbi șablon, am urmat câteva sfaturi pentru a face acest proces cât mai neted posibil.
Nota editorului: de la faza de proiectare și dezvoltare am mutat de la MailChimp, în schimb, folosind doar Monitorul de campanie. Acestea fiind spuse, următoarele sfaturi sunt foarte utile!
De exemplu, cu stil de text, am aplicat totul la Șabloanele de monitorizare a campaniei necesită a Una dintre șabloanele necesare pentru a avea un set de diferite titluri colorate pentru fiecare subiect care ar putea fi alese atunci când creați un buletin informativ în MailChimp. Am creat un șir de stiluri de rubrici care ar putea fi selectate dintr-o meniuri în MailChimp, folosind sintaxa corectă pentru definirea lor Dar… Am furnizat-o lui Ian, care a descoperit că nu funcționează deloc; nici unul dintre aceste stiluri de titlu nu a apărut în meniul derulant atunci când a editat textul. El a scos cu ea și a descoperit că MailChimp nu arată de fapt aceste opțiuni ca stiluri de titluri selectabile, cu excepția cazului în care acestea au un fel de proprietate legate de font ca De asemenea, nu a funcționat deoarece l-am furnizat separat și orice cod de șablon special pentru MailChimp pentru zone editabile sau stiluri personalizate trebuie să apară în Acum, că toate planșele noastre au fost vizualizate și aprobate, problemele sortate și compromisurile hotărâte, a fost timpul să finalizăm testarea și să pregătim toate fișierele pentru implementare. M-am gândit să fac multe încercări finale în Litmus și e-mail pe Acid. Eu folosesc Trello pentru a urmări cerințele, sarcinile și bug-urile pentru fiecare proiect pe care lucrez. Am lucrat prin listele de bug-uri și sarcini până când nu mai rămăsese nimic și fișierele erau gata să se desfășoare. Echipa Envato a vrut să se îmbine în cod pentru a amesteca și potrivi diferitele aspecte, așa că am fost nevoit să ofer comentariile HTML și CSS clare, precum și să mă asigur că transferul de module între șabloane nu ar cauza catastrofa majoră. Am creat fiecare șablon cu clasa proprie de corp: Și apoi aranjați o clasă care să poată fi adăugată pentru a comuta cu ușurință între fundal alb și gri: De asemenea, am separat stilurile specifice layoutului (atât mobile cât și desktop) în foi de stil individuale pentru a salva dimensiunea fișierului: Am dat instrucțiuni pentru a adăuga o legătură la fiecare foaie de stil unde s-au folosit elemente din acel aspect. De exemplu, dacă un modul Digest este portat în șablonul Newsletter, linkul Digest CSS trebuie adăugat la Pentru elementele comune, cum ar fi bara de anunțuri și blocurile de anunțuri, am asigurat că stilul a fost complet independent de aspect, astfel încât acestea să poată fi mutate în mod liber. Am inclus toate aceste instrucțiuni într-un fișier README și l-am încheiat cu toate codurile HTML și imaginile care urmează să fie trimise. Și apoi am terminat! Am trimis totul spre Ian, care a făcut el însuși restul integrării. Este oarecum o muscatura de mana pentru a inmana fisierele de template fara a avea capacitatea de a testa obsesiv si de a retesta in timpul integrarii, dar am avut cea mai mare incredere in Ian, desigur! Odată ce lucrarea sa a fost terminată și a sosit momentul să înceapă trimiterea, Ian a trimis copii de test la conturile mele de Litmus și e-mail pe Acid, pentru a putea trece prin previzualizarea redării și să semnalez orice problemă. Câteva imagini de fundal au scăzut aici și acolo, pe care am rezolvat înainte ca șabloanele să fie în cele din urmă gata să fie trimise. În următoarea și ultima parte a acestei serii, vom lua șabloanele noastre statice la nivelul următor, arătând modul în care le-am integrat în Campaign Monitor! , nu oricare dintre copiii săi, astfel încât, dacă celulele sau paragrafele au fost convertite în zone editabile, nu a existat riscul de a pierde orice stil de oriunde. Conținutul tabelului moștenește stilul textului de la părinte la toți clienții de e-mail. Singura excepție este poșta AOL, care de multe ori nu reușește să moștenească
culoare cu excepția cazului în care o plasați pe celula individuală. Utilizați paragrafe pentru text
multilinie element care trebuie definit atunci când doriți un bloc de text editabil care să permită ruperea liniilor, bold / italic / subliniază, textul selectat asociat și așa mai departe. Se înfășoară automat tot textul din interiorul multilinie cu p tag, care vă poate sparge aspectul dacă nu ați permis paragrafele. Când utilizați o pauză de linie în Monitorul de campanie, acesta va încheia paragraful curent și va începe unul nou. MailChimp nu face acest lucru și atunci când creați o ruptură de linie, pur și simplu adaugă a Alegeți variantele selectabile de către utilizator
@stil blocuri:/ ** * @style topic-design * / .topic-design culoare: # c94e4b; . design tematic a culoare: # c94e4b; / ** * @style topic-code * / .topic-code culoare: # 4cc1be; . code-top a culoare: # 4cc1be; / ** * @style topic-web * / .topic-web culoare: # 49b293; .topic-web a culoare: # 49b293; / ** * @style topic-photography * / .topic-fotografie culoare: # 8360a8; . fotografie fotografică a culoare: # 8360a8; / ** * @style topic-game * / .topic-game culoare: # 72BF40; . joc tematic a culoare: # 72BF40; / ** * @style topic-computer * / .topic-computer culoare: # 5d7dba; .topic-computer a culoare: # 5d7dba; / ** * @style topic-business * / .topic-business culoare: # f38844; .topic-business a color: # f38844; / ** * @style topic-3d * / .topic-3d culoare: # f95858; .topic-3d a culoare: # f95858; / ** * @style topic-music * / .topic-muzică culoare: # 56a4ca; .topic-music a culoare: # 56a4ca;
familie de fonturi sau grosimea fontului . din șablonul dvs.; acesta nu poate fi un fișier extern. Deci, am adăugat a font-weight: bold declarație la stilurile noastre de rubrici, a lansat CSS în cap și a reușit să lucreze.Testarea finală și înfășurarea
Trebuie să-i iubești pe Trello pentru gestionarea sarcinilor Configurarea unui set de șabloane
cap din șablonul Newsletter înainte de a copia peste modulul HTML.
Livrare prin e-mail livrare
Link-uri conexe
Accentsconagua