Share
In questo tutorial ti mostrerò come creare una semplice e-mail HTML reattiva che funzionerà in ogni client di posta elettronica, inclusi tutti i nuovi client e app di posta degli smartphone. Utilizza le query sui media minime e un approccio a larghezza di fluido per garantire la massima compatibilità.
Se stai cercando una soluzione professionale pronta per l'uso, prendi uno dei nostri modelli di email reattivi più venduti su Envato Market. Abbiamo centinaia di opzioni reattive da un minimo di $ 5, con funzionalità facili da personalizzare per iniziare.
Modelli di email reattivi best-seller su Envato MarketNon è quello che stai cercando? Nessun problema, questo tutorial ti insegnerà come costruire il tuo.
C'è stato un tempo in cui le query sui media erano sufficienti per ricevere e-mail reattive che funzionano nelle applicazioni di posta iOS e Android, che supportano entrambe le query multimediali.
Da allora, c'è stata una proliferazione di applicazioni di posta create per piattaforme iOS e Android, con vari gradi di supporto per i metodi di sviluppo di email reattivi.
Il più notevole è l'ultimo aggiornamento dell'app Gmail per Android, che è due volte più popolare dell'applicazione di posta predefinita per gli utenti Android (che ora costituiscono l'11% del totale aperto). Non ha mai supportato le query multimediali, e continua a non esserlo, tuttavia ora ridimensiona le e-mail comprimendo le dimensioni del tavolo esterno per adattarle all'area visibile dello schermo. È difficile da controllare e, quando tutta la tua posta elettronica si basa su query multimediali per essere visualizzate correttamente sui dispositivi mobili, genera risultati molto spiacevoli.
La buona notizia è che tu può progetta e costruisci un'email che apparirà eccellente in ogni app di posta, compresi quelli che non supportano le query multimediali. Puoi farlo usando un layout fluido.
Ci sono, tuttavia, alcuni compromessi di progettazione che devi fare. Questi deliziosi layout di colonne uguali che si impilano su una singola colonna non funzionano così bene con questo metodo. Se puoi imparare a vivere senza di loro, ci sono alcuni progetti molto funzionali che possono funzionare molto bene.
Ecco cosa creeremo oggi:
Ok, iniziamo con la nostra tela bianca.
Una semplice email HTML reattiva
|
Quello che stiamo creando qui è la nostra pagina di base con il suo intestazione, DOCTYPE e tabella contenitore con un colore di sfondo applicato (sia al corpo che a una grande tabella wrapper, poiché lo stile del tag body non è completamente supportato). Per ulteriori informazioni su questa configurazione di base, vedere Creare un modello di email HTML da zero.
Ho quindi aggiunto la nostra tabella dei contenuti principale al centro con una classe di "contenuti".
Nota: Noterai che in questo tutorial inserirò i CSS nella testa del nostro documento. Generalmente inserisco gli stili nella testa quando li ri-utilizzo e mantengo gli stili one-off in linea.
Importante: Ogni volta che usi le regole CSS nella parte iniziale del tuo documento, tu dovere usa uno strumento per portarlo tutto in linea alla fine del processo. Se si utilizza un servizio come MailChimp o Campaign Monitor, questi si offriranno automaticamente per portare in linea i propri stili quando si importa il disegno. Devi farlo perché alcuni client, come Gmail, ignoreranno o elimineranno il tuo Ora aggiungeremo la prima riga della nostra tabella: l'intestazione. Aggiungi il seguente per lo stile alla riga che abbiamo già creato: E poi nel tuo CSS, aggiungi il padding per l'intestazione: Ora creeremo la nostra prima riga reattiva. Il modo in cui lo facciamo è creare due tabelle che "galleggiano" l'una accanto all'altra usando la proprietà HTML "align". Sostituisci il nostro piccolo "Ciao!" Saluto con il seguente: Creiamo il nostro tavolo 70px e aggiungiamo anche un padding che fungerà da grondaia tra le due colonne. L'imbottitura sul fondo aggiungerà un respiro verticale quando le due colonne si impilano sul cellulare. Creeremo la colonna giusta allineando nuovamente una tabella a sinistra. Questo tavolo sarà largo 445 px, il che ci lascerà 25px da vendere sul lato destro. Questo è molto importante perché Outlook impilerà automaticamente le tabelle se non c'è almeno 25 px da risparmiare su una determinata riga. Se permetti almeno 25px di respiro, i tuoi tavoli si comporteranno come previsto. Per aggirare questa stranezza, potresti anche usare il codice condizionale per indurre Outlook a pensare che hai chiuso una cella e ne hai aperta una nuova. Dopo il tag di chiusura della tua prima tabella e prima del tag della tabella di apertura per la tua seconda, aggiungi semplicemente: Nella più ampia tavola di destra, useremo lo stesso approccio che abbiamo usato sulla nostra tabella dei contenitori, che prevede la creazione di una classe e l'aggiunta del codice del wrapper condizionale. Vogliamo che questa tabella sia larga al 100% sui dispositivi mobili, dove verrà visualizzata sotto la tabella a sinistra. Qui puoi vedere che ho creato una classe chiamata "col425" per questa tabella, la nostra colonna larga 425px. Ho avvolto la tabella nel codice condizionale che lo racchiude in una tabella larga 425px. Quindi aggiungiamo la nostra classe alla Media Query che abbiamo creato anche per Apple Mail. Ora all'interno della nostra cella aggiungeremo l'intestazione in stile. Ho aggiunto alcune classi a ogni cella per lo styling, nonché alcuni stili che utilizzerò per altri tipi di testo in seguito: La nostra intestazione è ora completa e puoi vedere di seguito come impilano le due colonne sui dispositivi mobili. (Per visualizzare l'anteprima mentre lavori, devi commentare temporaneamente le query dei supporti di larghezza minima del dispositivo, poiché impongono una larghezza fissa sul desktop). Per creare una riga di testo a colonna singola, aggiungiamo semplicemente una nuova riga alla nostra tabella '.content'. Aggiungeremo una classe 'innerpadding' a queste righe con alcuni valori di riempimento riutilizzabili. Aggiungeremo anche una classe di 'borderbottom' per applicare un bordo a ciascuna riga. Il nostro CSS per questa sezione: Ora creeremo una riga reattiva esattamente come la nostra intestazione, ma con dimensioni leggermente diverse in modo che possiamo avere un'immagine più grande. Abbiamo aggiunto un pulsante qui con il 'pulsante wrapper' classe. Contiene una cella imbottita con un set di colori di sfondo e quindi un collegamento di testo all'interno. Preferisco utilizzare questo metodo in quanto consente di avere pulsanti a larghezza fluida, molto utile quando si crea un modello riutilizzabile, in cui la larghezza di ogni pulsante sarà diversa ogni volta che viene utilizzata. Se hai una larghezza fissa per i pulsanti, potresti preferire di usare il Bulletproof Button Generator su Campaign Monitor. I nostri stili per il pulsante: Oltre alla larghezza impostata per questa nuova classe 'col380', aggiungeremo le nostre dimensioni al nostro elenco di stili per occuparci di Apple Mail. Ora sembra così: Questa è una riga molto semplice; imposteremo semplicemente un'immagine al 100% della larghezza dell'e-mail e assicuriamoci che la sua altezza sia impostata per essere automatica usando i CSS. Nel nostro CSS: Infine aggiungeremo una riga di testo senza il bordo in basso: Per creare il piè di pagina, aggiungeremo una nuova riga con una tabella all'interno. Una delle righe conterrà un'altra tabella per le nostre icone dei social media. Aggiungeremo gli stili necessari per il nostro footer al CSS: Sul cellulare, è ideale se l'intero pulsante è un collegamento, non solo il testo, perché è molto più difficile indirizzare un piccolo collegamento testuale con il dito. Perché non è possibile avere questo lavoro su tutti i client desktop (il riempimento non è completamente supportato su Dovremo togliere il colore dal Userò entrambi Ora quando tocchi ovunque sul pulsante colorato sul cellulare, è un collegamento! Se lo volessi, ora potresti iniziare a migliorare il tuo layout applicando i nomi delle classi agli elementi che desideri controllare e quindi creando le nuove regole all'interno della query multimediale appena creata sopra. Ad esempio, trasformeremo il nostro link di annullamento dell'iscrizione in un pulsante, aggiungendo una classe al link: e aggiungendo il seguente CSS alla query multimediale: Puoi anche scegliere come target le classi .nernerpadding, .header e .footer per ridurre la quantità di padding sui client che supportano le query multimediali. Infine, come sempre, assicurati di convalidare (usando il validatore W3C - dovresti solo ottenere un errore per l'attributo proprietario "yahoo" sul tag body) e testare davvero bene usando i dispositivi live e un servizio di anteprima web come Litmus o Email on Acido. Divertiti a creare email reattive che sembrano grandiose in ogni client di posta elettronica! Se hai bisogno di una soluzione professionale pronta per l'uso, un modello di email reattivo potrebbe essere l'opzione giusta per te. Per prendere ciò che hai imparato al livello successivo, guarda le prossime esercitazioni: Creazione dell'intestazione
Ciao! .header padding: 40px 30px 20px 30px;
Aggiungere la prima riga reattiva
Colonna sinistra
Colonna destra
Consenti almeno 25 px di spazio per respirare per impedire a Outlook di impilare i tavoli Stop! Suggerimento alternativo per Tricking Outlook
Proseguire…
style = "width: 100%; max-width: 425px;">
.col425 width: 425px! important;
CREAZIONE Responsive Email Magic .subhead font-size: 15px; colore: #ffffff; font-family: sans-serif; letter-spacing: 10px; .h1 font-size: 33px; altezza della linea: 38px; font-weight: bold; .h1, .h2, .bodycopy color: # 153643; font-family: sans-serif;
Creazione della riga di testo a colonna singola
Benvenuto nella nostra email reattiva! Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque presso erat. .innerpadding padding: 30px 30px 30px 30px; .borderbottom border-bottom: 1px solid # f2eeed; .h2 padding: 0 0 15px 0; font-size: 24px; altezza della linea: 28px; font-weight: bold; .bodycopy font-size: 16px; line-height: 22px;
Creazione dell'articolo a doppia colonna
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque presso erat.
Richiedi il tuo! .pulsante allineamento del testo: centro; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px; .button a color: #ffffff; testo-decorazione: nessuno;
@media solo schermo e (min-device-width: 601px) .content width: 600px! important; .col425 width: 425px! important; .col380 width: 380px! important;
Creazione dell'immagine a colonna singola
img height: auto;
Creazione della riga di testo normale finale
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque presso erat. Creazione del piè di pagina
® Qualcuno, da qualche parte nel 2013
Annulla l'iscrizione da questa newsletter all'istante
.footer padding: 20px 30px 15px 30px; .footercopy font-family: sans-serif; font-size: 14px; color: #ffffff; .footercopy a color: #ffffff; decorazione del testo: sottolineatura
Ottimizzazione dei pulsanti per dispositivi mobili
tag), è qualcosa che aggiungo alla versione mobile utilizzando le query multimediali. a cui è attualmente applicato, quindi applicarlo nuovamente al etichetta con un sacco di imbottitura. larghezza massima e max-device-width in questa query multimediale nel tentativo di evitare un bug in Outlook.com su IE9.@media solo schermo e (max-larghezza: 550px), schermo e (max-device-width: 550px) body [yahoo] .buttonwrapper background-color: transparent! important; body [yahoo] .button a background -color: # e05443; imbottitura: 15px 15px 13px! importante; display: block! important;
Ulteriori miglioramenti con le query multimediali
Annulla l'iscrizione da questa newsletter all'istante body [yahoo] .unsubscribe display: block; margin-top: 20px; imbottitura: 10px 50px; sfondo: # 2f3942; border-radius: 5px; decorazione del testo: nessuna! importante; font-weight: bold;
body [yahoo] .hide display: none! important;
Prova e vai!
Accentsconagua