Share
L'email è un mezzo fantastico. Va dritto nella casella di posta elettronica e il suo ROI è ampiamente riportato come al di sotto del tetto al 4000%. È anche perennemente frainteso e troppo spesso è fatto male. Con la recente esplosione di smartphone, stiamo più spesso leggendo la nostra posta sul nostro iPhone o Galaxy, ma sfortunatamente un sacco di email marketing non è riuscito a tenere il passo. La vedo come un'enorme opportunità mancata perché un'e-mail ben eseguita può essere piacevole da aprire e di grande successo.
Se hai già provato la progettazione e lo sviluppo di email HTML, probabilmente hai già stabilito che può essere piuttosto difficile. E non lo stai immaginando, è piuttosto difficile. Ecco perché:
[Continueremo a utilizzare Word per la creazione di messaggi di posta elettronica perché crediamo che sia la migliore esperienza di creazione di e-mail in giro.
Il team di Outlook
Quando esegui il codice per il Web, puoi almeno contare sul fatto che tutti i principali browser (Chrome, Firefox, Internet Explorer, Safari e Opera) stanno cercando di aderire agli standard Web per il rendering di HTML e CSS.
Quando si tratta di client di posta elettronica, si sta testando su un gran numero di vecchi e nuovi programmi. Si va dai nuovi telefoni in esecuzione su Android e iOS ai Lotus Notes di IBM o Microsoft Office 2007 (che rende tristemente il tuo HTML amorevolmente creato con il motore di rendering HTML di Word. Le versioni precedenti di Outlook utilizzavano un browser per renderizzare il loro HTML - che in realtà è logico, perché passare a un elaboratore di testi per renderizzare l'HTML che si chiede? Bene, per "ragioni di sicurezza", dicono). E nessuno di questi programmi deve rispettare alcuno standard. Fondamentalmente si limitano a inventare tutto. Puoi vedere che aspetto ha il supporto degli standard per alcuni dei client di posta più popolari nel progetto Email Standards.
Se ciò non è abbastanza brutto, accoppialo con il fatto successivo: ci sono circa un milione di combinazioni di modi diversi che la posta elettronica può rendere su desktop e dispositivi mobili.
Le possibilità di rendering sono (quasi) infinite. Ecco un elenco di alcuni dei client di posta elettronica più comuni:
Client mobili:
Client desktop:
Client Webmail:
Sono molti dispositivi!
Se hai già familiarità con lo sviluppo web, dimentica tutto ciò che sai.
A complicare tutto ciò, anche lo stile condizionale non è una gran scelta. Ci sono alcune cose che puoi fare con i commenti condizionali, ma è limitato al targeting di certe versioni di Outlook o di tutto tranne alcune versioni di Outlook.
Se hai già familiarità con lo sviluppo web, dimentica tutto ciò che sai. Il singolo ostacolo più grande a te è che ti aspetti che le cose funzionino come lo sviluppo web "normale". Questo ti frustrerà e ti trattenerà. La cosa peggiore che puoi fare è arrabbiarsi perché non puoi usare DIV o quello margine non è completamente supportato. Quindi dimentica tutto ciò che sai sull'HLML semantico e le ultime specifiche CSS. Fidati di me, ti aiuterà.
Diamo un'occhiata ad alcuni suggerimenti sul flusso di lavoro per la creazione di e-mail.
Costruire la struttura della tua email in primo luogo può aiutarti a evitare molti bug e problemi in seguito lungo la traccia. Non costruire mai il tutto e poi testare: spesso ci si imbatte in troppi bug e potrebbero influenzarsi a vicenda.
Lavora fino a raggiungere un traguardo di sviluppo minore (ad esempio, al termine della struttura di base) e quindi eseguire un test. Il modo migliore per testare è usare Litmus o Email su Acid. Raccomando di stipulare un piano illimitato con una di queste aziende, perché la possibilità di testare frequentemente è davvero importante.
Mi piace anche molto lasciare tutti i bordi del tavolo in modo da poter vedere cosa sto creando, quindi li spengo tutti alla fine. Puoi anche colorare lo sfondo di alcune celle per vedere quali sezioni sono dove. Il mio flusso di lavoro ideale è creare uno scheletro, testare, aggiungere il mio contenuto, testare, colorare i caratteri e i caratteri, testare di nuovo e infine rimuovere i miei bordi e testare di nuovo prima di inviare.
Convalidalo usando il validatore W3C più spesso che puoi. Questo ti aiuterà a stirare piccoli dettagli e raccoglierà errori come tag mancanti o aperti.
Ci sono un numero enorme di opzioni quando si tratta di inviare la tua email. I due servizi che uso di più sono MailChimp e Campaign Monitor. Offrono prezzi competitivi e sono molto facili da usare. Ci sono anche tantissime piattaforme commerciali - tutto dipende dalle tue esigenze. Iscriviti per un account gratuito con uno di questi e avere un po 'nei loro sistemi per vedere quale ti piace. Assicurati di utilizzare i dati utili che entrambi i servizi raccolgono sulle tue e-mail, come orari di apertura e utilizzo del client di posta elettronica. Questo può davvero aiutarti a concentrare i tuoi sforzi nell'area giusta la prossima volta che invii.
Quando si tratta di SPAM; contenuto, design e sviluppo vanno tutti di pari passo. È importante evitare le tipiche tattiche di spam, come l'utilizzo di maiuscole e molti punti esclamativi nella riga dell'oggetto. Ci sono alcune parole che possono attivare anche i filtri SPAM (come 'free' e 'investi'). Più il tuo codice è pulito, meno è probabile che la tua email sia contrassegnata come SPAM e anche il rapporto tra immagini e testo ha un effetto. Le e-mail basate sull'affidabilità senza testo hanno più probabilità di essere contrassegnate come SPAM e quindi le e-mail con nomi di file immagine molto lunghi.
Il mondo dei punteggi SPAM è complicato ed è importante eseguire un test SPAM attraverso il tuo account di prova con Litmus o Email su Acid prima di inviare la tua email, per assicurarti che tutto il tuo duro lavoro non sia diretto per la cartella Junk.
Ora, per il grintoso sviluppo della posta elettronica ...
Avrai bisogno di un editor di testo che ti piace (io uso Sublime Text) e un account di prova con Litmus o Email su Acid. Consiglio vivamente di avere un account di prova illimitato con una di queste aziende in quanto renderà la tua vita molto più facile. Se non paghi un canone mensile, finirai per pagare tra $ 3 e $ 5 per test che possono sommarsi abbastanza rapidamente.
Penso che sia bene iniziare con una lavagna vuota. I framework come HTML Email Boilerplate sono pieni di trucchi e snippet meravigliosi che puoi implementare pezzo dopo pezzo. Tuttavia, se sei appena agli inizi, non è consigliabile utilizzarlo come punto di partenza in quanto contiene molti elementi che non ti serviranno. I piatti caldi possono spesso rendere più difficile la risoluzione di eventuali problemi se nel tuo file c'è un sacco di codice inutilizzato.
Nota: Poiché può essere molto precario usare qualsiasi tipo di editor (specialmente quando è il momento di risolvere i problemi), non dovresti mai usare un editor WYSIWYG o qualsiasi tipo di editor che promette di prendere il tuo design formattato e trasformarlo magicamente in HTML valido per l'invio via email . Questa roba non funziona mai.
Questo potrebbe sembrare un dettaglio tecnico per cominciare, ma è necessario un modello vuoto per iniziare a lavorare, e quel modello ha bisogno di un Doctype. Un doctype è essenzialmente una linea di codice che informa il programma che lo legge e che i tag HTML aspettano e quale insieme di regole rispettano l'HTML e il CSS. Un bel po 'di clienti spogliano il tuo Doctype, e alcuni addirittura applicano il loro. Molti clienti onorano il tuo doctype e possono rendere le cose molto più semplici se puoi validare costantemente contro un Doctype.
L'uso di un doctype XHTML generalmente ha il minor numero di stranezze e incoerenze tra i documenti. Io uso XHTML 1.0 Transitional perché ha dimostrato di essere il doctype più affidabile della mia esperienza. Nel seguente tutorial, durante il quale costruiremo un modello di email HTML completo, utilizzeremo il seguente codice per iniziare il nostro documento:
Demistificare la progettazione di email
Il Tipo di contenuto il meta tag serve a dire al motore di rendering di destinazione come elaborare il testo e caratteri speciali. In realtà, devi comunque codificare tutti i tuoi personaggi speciali (ad es., Diventa & per l'e commerciale) per essere sicuro, ma vale comunque la pena di mantenere questa riga.
Il meta tag viewport indica al dispositivo di impostare l'area visibile alla larghezza dello schermo del dispositivo. Imposta anche la scala iniziale su 'normale' che non è né ingrandita né ridotta. Se non lo specifichi, molti smartphone potrebbero ridimensionare il tuo contenuto in modo che il contenuto si adatti all'area visibile, ma non a nessuno dei suoi padding o margini. Ciò può comportare il testo e le immagini, ma fino al bordo dello schermo.
Infine, inserisci sempre un titolo significativo perché questo è ciò che le persone vedranno quando visualizzano l'email in un browser o lo condividono con i loro amici.
A causa della mancanza di supporto degli standard nella posta elettronica, non è possibile utilizzare div, sezioni o articoli, ma è necessario utilizzare tabelle. Inoltre, è necessario utilizzare un sacco e un sacco di tabelle nidificate, perché né il colspan né rowspan gli attributi sono supportati correttamente.
Ancora una volta, a causa della mancanza di supporto per gli standard, non è una buona idea usare tag standard come h1, h2, h3 o p. Trovo che questi possono rendere davvero incoerentemente attraverso i client di posta elettronica e possono creare alcuni grattacapi abbastanza grandi.
La soluzione migliore è posizionare ogni blocco di testo nella propria cella e applicare lo stile in linea a quella cella, ad esempio:
Testo
Questo è più una scelta personale. Preferisco mantenere tutti i miei stili in linea (es .: all'interno dei tag HTML stessi) perché mi piace sapere esattamente dove si trova tutto e cosa influenza ciò che. Puoi codificare usando gli stili e poi portarli tutti in linea alla fine (Campaign Monitor e MailChimp possono farlo automaticamente, puoi anche usare Premailer o qualcosa di simile) ma la ragione per cui non mi piace è che ti rendi conto il tuo codice, eseguilo attraverso un inliner, e quindi il tuo codice può diventare in qualche modo irriconoscibile. Trovo che questo rende più difficile la risoluzione dei problemi. Dicendo che, se questo è il modo in cui vuoi lavorare, va bene; non c'è una ragione tecnica per cui non dovresti farlo.
Non dimenticare: Non è possibile applicare più classi a cose nell'email HTML perché non è supportata. Ogni elemento può avere un massimo di una classe.
Inoltre, non dimenticare: Non è possibile utilizzare la stenografia per elementi come la dimensione del carattere (ad esempio) perché non è supportata.
Quando salvi le immagini, ricorda che è bene dare ai tuoi nomi delle immagini brevi e significativi perché miglioreranno il tuo punteggio di spam. Nomi come "campaign_054_design_0x0_v6_email-link.gif" hanno probabilmente un punteggio SPAM molto più alto di "email.gif".
È anche una grande idea cercare di mantenere la tua intera e-mail il più possibile umanamente: meno di 100kb è l'ideale, ma non sempre possibile, sotto i 250kb è piuttosto standard. Utilizza un'app di compressione come JPEGmini o tinyPNG per ridurre tutte le immagini il più possibile prima di inviare. I tempi di caricamento più lenti, in particolare sui dispositivi mobili, possono causare o interrompere la tua posta elettronica se la dimensione complessiva del file è troppo grande.
Non lasciare nulla al client di posta elettronica. Specificare tutte le larghezze, altrimenti si potrebbero ottenere risultati imprevisti. Per i tuoi elementi del contenitore principale, imposta sempre la dimensione in pixel. Puoi quindi utilizzare le percentuali all'interno del tuo elemento di contenimento, se lo desideri.
C'è molto da prendere in considerazione quando si progetta e si sviluppa l'e-mail in HTML, la maggior parte delle quali implica standard di "non-apprendimento" che sono stati incoraggiati a praticare per il web design nel corso degli anni. Tuttavia, questo tutorial dovrebbe darti una solida base su cui lavorare e ora sei pronto per saltare nel processo di compilazione reale. avanti!
Ho fatto riferimento a alcune cose durante questo tutorial, quindi eccole di nuovo tutte in un unico posto.
Accentsconagua