Share
Le e-mail di Tuts + (newsletter, digest, ecc.) Sono state recentemente sottoposte a una revisione completa, inclusi nuovi progetti e una nuova piattaforma. Questo case study spiegherà come li ho costruiti in HTML e CSS, in base ai progetti della prima parte di questa serie.
Quando è arrivato il momento di iniziare a costruire i nuovi modelli di e-mail Tuts +, ho avuto la fortuna di conoscere abbastanza bene i progetti. Durante la fase di progettazione, Ian mi ha messo in contatto con le principali decisioni e mi ha fatto un sacco di domande per assicurarmi di evitare qualsiasi classico trucco elettronico. Questo processo è stato per me un'ottima base ed ero pronto ad immergermi subito quando i progetti erano completi.
Ian mi ha inviato i disegni, una panoramica dei layout, una guida per il layout della griglia e una guida di stile con tutte le dimensioni e i colori dei caratteri necessari. Ero pronto per iniziare.
Il mio primo passo è sempre il disegno. Lo scopo di questo è identificare tutti i moduli distinti, ignorando le piccole differenze estetiche. Questo processo mi dà una serie finale di moduli chiave da costruire che posso lavorare uno per uno per costruire la struttura primaria.
Dopo averli identificati, in molti casi li avrei creati tutti in un'unica pagina prima di separarli in una fase successiva, ma i layout sono piuttosto difficili da recensire in quello stato. Invece, ho sviluppato ogni layout secondo i disegni in modo che potessero essere rivisti e approvati più facilmente.
Facendo riferimento al mio riassunto dei moduli, sono stato in grado di ricordare quando un modulo doveva essere riusabile tra più modelli e costruirlo di conseguenza. Più tardi avrei impostato le classi sul corpo di ogni variante, come var-admin e var-digerire, permettendomi di creare stili specifici per ogni particolare layout.
Ho iniziato impostando alcune variabili LESS per elementi che sapevo che avrei usato ripetutamente, come colori e misure.
Una guida alla maggior parte degli stili tipografici Alcune delle mie variabili (nella sintassi LESS) sono mostrate di seguito.
// Variabili @ bg-body: # f2f2f2; @ palette-text: # 58595a; @ palette-navy: # 212a34; @ palette-design: # c94e4b; @ palette-code: # 4cc1be; @ palette-web: # 49b293; @ palette-photography: # 8360a8; @ palette-game: # 72BF40; @ palette-computer: # 5d7dba; @ palette-business: # f38844; @ palette-3d: # f95858; @ palette-music: # 56a4ca; @ palette-footer: # 5a6e7a; @ palette-address: # 999999; @ divider-color: #EAEAEA; @ link-color: # 136fd2; @ alt-color: @ palette-text; @width: 640px; @ outer-gutter: 53px; @ content-width: @width - (@ outer-gutter * 2); @ grid-unit: 16px; .rounded (@radius: 1px) border-radius: @radius; -webkit-border-radius: @radius;
Applico sempre i miei colori con tavolozza per tenerli insieme. Questo mi rende più facile scegliere un colore dal menu a discesa dei suggerimenti che appare nel testo sublime:
Il prossimo passo importante è stato la creazione dei webfonts usati nei disegni. Il carattere tipografico è Roboto disponibile da Google Fonts, quindi ho aggiunto questo tag a del modello:
Questo è generato da Google Fonts e link al loro CSS per i quattro diversi pesi di Roboto che stiamo usando.
Ho applicato il carattere al tag body e alla mia tabella wrapper principale per quei client che ignorano il body tag o ne privano la formattazione.
body, .wrapper font-family: 'Roboto', sans-serif;
Quindi, per evitare che Outlook 2007-2016 in Windows visualizzi Times New Roman, come tende a fare di fronte a un font sconosciuto, ho impostato un codice solo per Outlook condizionale nel del modello:
Questo assicura che ogni istanza del webfont sia sovrascritta in Outlook con un sans-serif. Lo applico a tabelle e div, gli unici due elementi che vengono utilizzati per contenere il contenuto nel modello. Non è necessario andare a un livello inferiore rispetto a questo, poiché tutti gli altri tag erediteranno ciò in Outlook.
Successivamente è stato su codifica strutturale. Ho iniziato con il primo modulo che avevo delineato: il masthead. Una sfida qui era il logo, perché per alcuni modelli sembra leggermente diverso sul cellulare:
Per raggiungere questo obiettivo, sul cellulare ho nascosto il logo principale e il testo in alto. Ho anche nascosto il logo e aggiunto la minuscola foglia come immagine di sfondo alla testa d'albero.
.logo img display: none! important; .logo background-image: url (images/[email protected]); altezza: 17px; posizione di sfondo: centro; dimensione di sfondo: 15px 17px; background-repeat: no-repeat;
La sezione successiva che ho affrontato era l'articolo "eroe" nelle e-mail Digest; la prima parte difficile qui sono le etichette. Nei disegni sono apparsi accanto al testo dell'intestazione sul desktop, ma sopra il testo sul cellulare. Per ottenere questo risultato nel codice, possiamo usare alcune proprietà di visualizzazione per farle spostare.
Innanzitutto, ho creato il tag di intestazione con il contenuto all'interno diviso in due span, uno per il testo e uno per l'etichetta.
Utilizzo di Curve in Adobe Photoshop CORSO IN EVIDENZA
Styling-saggio, il .testo span eredita lo stile h2 e quindi il .etichetta span è uno stile separato per renderlo più piccolo e dargli uno sfondo colorato:
.label display: inline-block; margin-left: 5px; imbottitura: 3px 8px; vertical-align: 4px; border-radius: 3px; -webkit-border-radius: 3px; colore: #ffffff; font-size: 8px; altezza della linea: 10px; stile font: normale; letter-spacing: 0.1em;
Quindi, utilizzando le query multimediali, scambiamo gli elementi intorno a finestre più piccole:
@media screen e (max-width: 700px) h2 display: table! important; h2 .text display: table-footer-group! important; h2 .label margin-bottom: 12px! important;
L'h2 è il nostro contenitore, e lo impostiamo per essere visualizzato come un tavolo in modo che possiamo dire al .testo span per agire come il gruppo footer di quel tavolo e spostarsi fino in fondo al layout. Il .etichetta mostra quindi in alto, e aggiungiamo un margine al di sotto di esso per dargli un po 'di respiro.
Non sorprende che Outlook su Windows (2007-2016) non abbia voluto visualizzare correttamente le etichette, dal momento che non rispetta il raggio di confine, né gli piace aggiungere padding agli elementi in linea. I risultati in realtà non erano buoni, quindi ho impostato uno stile alternativo per Outlook che ho inserito nel codice condizionale del modello:
Ciò significava che in Outlook apparirebbero come semplici testi colorati:
Il modello promozionale ha una caratteristica molto particolare: un eroe da bordo a bordo con un'immagine di sfondo.
Ringraziamento a Marco Goran Romano per la brillante immagine usata come segnaposto Le immagini di sfondo nell'email non sono supportate ovunque. I due principali client di posta elettronica che presentano problemi sono Outlook 2007-2016 (Windows) e Gmail.
prospettiva non mostra affatto sfondi normali, richiede un certo Vector Markup Language per farli funzionare. (Lo sfondo di Stig at Campaign Monitors.cm è un ottimo strumento per generare questo codice). Il problema con esso, tuttavia, è che si finisce con due blocchi di codice: uno in HTML e uno in VML. Questo è rischioso quando si sa che gli altri devono essere in grado di aggiornare facilmente l'immagine di sfondo: se qualcuno cerca di farlo senza leggere correttamente le istruzioni, probabilmente si sbagliano.
Gmail mostra immagini di sfondo, tuttavia non rispetta il background-size o background-position proprietà, che possono rendere piuttosto difficile la messa in piega.
Abbiamo esaminato i numeri degli iscritti e siamo stati in grado di effettuare la chiamata su Outlook: andrebbe bene se gli utenti di Outlook vedessero un solido colore di riserva invece dell'immagine.
Per gli utenti di Gmail, dovremmo impostare alcune linee guida intorno alle immagini accettabili quando vengono utilizzati i modelli. Lo sfondo dovrebbe essere uno sfondo a ripetizione continua o impostato in modo tale da apparire sempre al 100%, bloccato nell'angolo in alto a sinistra.
È interessante notare che Gmail fa supporto verticale background-position proprietà sul lato sinistro: in alto a sinistra , in basso a sinistra e centro sinistra . Sfortunatamente non puoi posizionare orizzontalmente, che di solito è ciò che vuoi fare facendolo visualizzare centro .
Su alcuni dei blocchi di annunci, siamo stati in grado di avere immagini di sfondo in Gmail, perché sono bloccate in basso a sinistra. Anche questi blocchi sono stati ripristinati in un colore di sfondo a tinta unita in Outlook.
Mi sono divertito con due modi per far funzionare il margine superiore negativo sulla testata, dove la scatola bianca del contenuto appare sovrapposta alla masthead stessa.
Nello sviluppo web, si aggiunge un negativo margin-top nella scatola dei contenuti, spolvera le mani e continua la giornata.
Nello sviluppo della posta elettronica, tuttavia, questo non è possibile. I margini negativi sono supportati solo da una manciata di client di posta, lasciando un sacco di quelli comuni nella sporcizia (come Gmail, Yahoo e Outlook.com).
Rimaneva comunque la nostra prima opzione: usare un negativo margine superiore come un miglioramento progressivo, che verrà visualizzato con un margine di 0 in tutti i client non supportati (visualizzato in basso a sinistra). Il rovescio della medaglia è che molti clienti vedrebbero questa versione senza margini e il layout certamente ha perso qualcosa senza di esso.
L'altra alternativa era di falsificare il margine negativo creando un tavolo bianco vuoto all'altezza e alla larghezza corrette. Il lato negativo di questo approccio è che l'app Gmail mostra spesso piccole linee di demarcazione quando ridimensiona i contenuti su dispositivi mobili in cui è presente un contenuto più leggero su uno sfondo scuro o viceversa. Queste non sono in realtà linee o confini reali, solo minuscoli problemi che non possono essere risolti con il codice. Abbiamo deciso di andare con questo scenario, perché ha beneficiato il maggior numero di lettori, e le linee principali erano generalmente impercettibili. Abbiamo anche deciso di tenere d'occhio il problema e rivisitarlo se non fossimo soddisfatti dei risultati. (Sfortunatamente questi template non possono essere costruiti usando il metodo fluid-hybrid perché sia MailChimp che Campaign Monitor pongono grossi problemi nel farlo).
Nessuna sovrapposizione
Sovrapposizione, con la piccola linea di Gmail tra le sezioniSapevo che avrei consegnato i modelli a Ian per l'integrazione con più piattaforme di invio e-mail: MailChimp e Campaign Monitor. Poiché il mio codice doveva funzionare bene con entrambi i linguaggi dei modelli, ho seguito alcuni suggerimenti per rendere questo processo il più agevole possibile.
Nota dell'editore: dalla fase di progettazione e sviluppo siamo passati da MailChimp, utilizzando invece Campaign Monitor. Detto questo, i seguenti suggerimenti sono molto utili!
Ad esempio con lo stile del testo, l'ho applicato a tutti I modelli di Campaign Monitor richiedono a Uno dei modelli aveva bisogno di avere una serie di diverse intestazioni colorate per ogni argomento che poteva essere scelto durante la creazione di una newsletter in MailChimp. Ho impostato una serie di stili di intestazione che è possibile selezionare da un menu a discesa in MailChimp, utilizzando la sintassi corretta per definire la loro Ma… Ho fornito questo a Ian che ha scoperto che non funzionava affatto; nessuno di questi stili di titolo era visualizzato nel menu a discesa quando ha modificato il testo. Ha armeggiato con esso e ha scoperto che MailChimp in realtà non mostra queste opzioni come stili di titolo selezionabili a meno che non abbiano un qualche tipo di proprietà relativa ai font come Inoltre non ha funzionato perché l'ho fornito separatamente, e qualsiasi codice speciale di template MailChimp per aree modificabili o stili personalizzati deve apparire nel Ora che tutti i nostri layout erano stati visionati e approvati, i problemi risolti e i compromessi sono stati decisi, era giunto il momento di completare i test e preparare tutti i file per l'implementazione. Ho iniziato a fare un sacco di estenuanti test finali in Litmus e Email on Acid. Uso Trello per tenere traccia dei requisiti, delle attività e dei bug di ciascun progetto su cui sto lavorando. Ho lavorato con i miei elenchi di bug e attività fino a quando non rimaneva nulla e i file erano pronti per la distribuzione. Il team di Envato voleva essere in grado di immergersi nel codice per mescolare e abbinare diversi layout, quindi avevo bisogno di fornire commenti HTML e CSS chiari, oltre a garantire che il trasferimento dei moduli tra i modelli non causasse una catastrofe maggiore. Ho impostato ciascun modello con la sua classe fisica: Quindi imposta una classe che potrebbe essere aggiunta per passare facilmente da uno sfondo bianco a uno grigio: Ho anche separato gli stili specifici del layout (sia mobili che desktop) in singoli fogli di stile per salvare le dimensioni del file: Ho dato istruzioni per aggiungere un collegamento a ciascun foglio di stile in cui venivano utilizzati gli elementi di quel layout. Ad esempio, se un modulo Digest viene trasferito al modello Newsletter, il collegamento CSS Digest deve essere aggiunto al Per elementi comuni, come la barra pubblicitaria e i blocchi di annunci, mi sono assicurato che lo stile fosse completamente indipendente dal layout, in modo che potessero essere spostati liberamente. Ho incluso tutte queste istruzioni in un file README e l'ho compresso con tutto il codice HTML e le immagini da inviare. E poi abbiamo finito! Ho spedito tutto a Ian che ha intrapreso personalmente il resto dell'integrazione. È un po 'mordace per consegnare i file di modello senza la possibilità di testare e ripetere l'ossessività durante l'integrazione, ma ho avuto la massima fiducia in Ian, ovviamente! Una volta che il suo lavoro era finito ed era giunto il momento di iniziare l'invio, Ian ha inviato copie di prova ai miei account Litmus ed Email su Acid in modo da poter esaminare le anteprime di rendering e segnalare eventuali problemi. Un paio di immagini di sfondo sono cadute qua e là, che abbiamo risolto prima che i modelli fossero finalmente pronti per essere inviati. Nella prossima e ultima parte di questa serie, porteremo i nostri modelli statici al livello successivo, mostrando come li abbiamo integrati in Campaign Monitor! , nessuno dei suoi figli, in modo che se le celle oi paragrafi fossero convertiti in aree modificabili non si corre il rischio di perdere lo styling da nessuna parte. I contenuti della tabella ereditano lo stile del testo dal genitore su tutti i client di posta elettronica. L'unica eccezione è posta AOL, che spesso non riesce ad ereditare il
colore proprietà a meno che non la posizioni sulla singola cella. Usa i paragrafi per il testo
multilinea elemento da definire quando si desidera un blocco di testo modificabile che consente di rompere le linee, grassetto / corsivo / sottolineato, collegato al testo selezionato e così via. Inoltre, avvolge automaticamente tutto il testo all'interno di multilinea con un p tag, che può davvero infrangere il tuo layout se non hai autorizzato i paragrafi. Quando si utilizza un'interruzione di riga in Campaign Monitor, termina il paragrafo corrente e ne inizia uno nuovo. MailChimp non lo fa, e quando crei un'interruzione di riga, aggiunge semplicemente a Rendi le varianti selezionabili dall'utente
@stile blocchi:/ ** * @style topic-design * / .topic-design color: # c94e4b; .topic-design a color: # c94e4b; / ** * @style topic-code * / .topic-code color: # 4cc1be; .topic-code a color: # 4cc1be; / ** * @style topic-web * / .topic-web color: # 49b293; .topic-web a color: # 49b293; / ** * @style topic-photography * / .topic-photography color: # 8360a8; .topic-photography a color: # 8360a8; / ** * @style topic-game * / .topic-game color: # 72BF40; .topic-game a color: # 72BF40; / ** * @style topic-computer * / .topic-computer color: # 5d7dba; .topic-computer a color: # 5d7dba; / ** * @style topic-business * / .topic-business color: # f38844; .topic-business a color: # f38844; / ** * @style topic-3d * / .topic-3d color: # f95858; .topic-3d a color: # f95858; / ** * @style topic-music * / .topic-music color: # 56a4ca; .topic-music a color: # 56a4ca;
famiglia di font o font-weight . del tuo modello; non può essere un file esterno. Quindi, abbiamo aggiunto un font-weight: bold dichiarazione ai nostri stili di intestazione, spuntato il CSS in testa, e ha funzionato tutto.Test finali e avvolgimento
Devono amare Trello per la gestione delle attività Impostazione di un kit di modelli
capo del modello Newsletter prima di copiare il modulo HTML.
Forniture via email spedizione
Link correlati
Accentsconagua