Responsive Email 101 Webinar Domande e risposte: HTML e CSS di base

Poiché le aperture su dispositivi mobili continuano ad aumentare (sono aumentate di oltre il 500% negli ultimi quattro anni!), così si parla di strategie di posta elettronica mobile come il design reattivo. Nel nostro webinar Responsive Email 101: HTML and CSS Basics, abbiamo esaminato il panorama dell'e-mail mobile, le basi della creazione di e-mail reattive e il motivo per cui queste tecniche sono fondamentali per migliorare l'esperienza dell'abbonato. Abbiamo anche coperto il supporto del client di posta elettronica e dimostrato come codificare da zero un'e-mail reattiva.

Non sei riuscito a farcela? Non preoccuparti. Abbiamo registrato tutto! Inoltre, abbiamo anche reso disponibili le diapositive.

Ottieni le diapositive + registrazione →

Abbiamo avuto il tutto esaurito per il webinar, quindi mentre abbiamo cercato di rispondere a quante più domande possibile durante la parte di domande e risposte, non siamo riusciti a raggiungerle tutte. Di seguito, abbiamo raccolto alcune delle domande più frequenti.

INIZIARE CON UN DESIGN REATTIVO

Pensi che l'aumento delle aperture mobili abbia raggiunto la sua saturazione o pensi che continuerà ad aumentare?

Sebbene negli ultimi quattro anni abbiamo assistito a un enorme balzo in avanti nelle aperture di dispositivi mobili, oltre il 500%, abbiamo già visto che la sua crescita ha iniziato ad appiattirsi un po'. Tuttavia, pensiamo che le aperture mobili continueranno a crescere lentamente con la proliferazione di più dispositivi mobili.

Qual è la differenza tra design fluido, adattivo e reattivo?

Il design fluido è costituito da larghezze relative senza media query. Il design adattivo consiste in larghezze fisse o relative in più finestre/punti di interruzione. Il design reattivo consiste in larghezze relative in più finestre/punti di interruzione. Ecco alcune ottime risorse per aiutarti a capire meglio le differenze tra di loro:

• Scalabile, fluido o reattivo? Comprensione degli approcci di posta elettronica mobile
• Fisso vs Fluido vs Adattivo vs Reattivo
• Quale disposizione? Statico, liquido, adattivo o reattivo?
• Liquidapsive

Quale approccio ha il miglior supporto per i client di posta: fluido, adattivo o reattivo?

Dal punto di vista del puro supporto, le e-mail fluide hanno il miglior supporto. Sia il design adattivo che quello reattivo richiedono l'uso di query multimediali, che hanno un supporto limitato.

Tuttavia, ciò non significa che il design fluido sia l'approccio migliore per le e-mail. Il design fluido è un buon compromesso per la creazione di una versione mobile friendly di un'e-mail, ma mantiene al suo interno il design a tutta larghezza dell'e-mail. Dipende davvero dal tuo pubblico specifico, da dove aprono le loro e-mail e dalla tua strategia di progettazione per ottimizzare le esperienze dei tuoi abbonati.

Che cos'è una query multimediale?

Una media query (@media) è un'istruzione condizionale che attiva un insieme di CSS per un insieme specifico di regole. Puoi saperne di più su media query ed e-mail con le seguenti risorse:

• La guida pratica al design reattivo dell'email
• Comprensione delle query multimediali nell'e-mail HTML

Esistono dati sull'effetto che il design reattivo ha sulle e-mail?

Scommetti! Di recente abbiamo realizzato un rapporto con MailChimp sull'effetto che il design reattivo e il test della posta elettronica hanno sui clic. Abbiamo scoperto che il design reattivo si traduce in un aumento del 15% dei clic per gli utenti di dispositivi mobili.

Con un supporto misto e così tante soluzioni alternative, passare a un design reattivo sembra travolgente. Come posso iniziare?

Con un supporto così limitato dagli attuali client di posta elettronica, il design di posta elettronica reattivo può essere difficile da implementare. La nostra prima raccomandazione è di istruirti il ​​più possibile sulla progettazione di e-mail reattive prima di immergerti. Ti consigliamo di controllare le risorse su MailChimp, Campaign Monitor e Litmus per aiutarti a guidarti.

Se non ti senti a tuo agio nell'immergerti nello sviluppo effettivo di e-mail reattive, prendi in considerazione l'utilizzo di semplici editor di e-mail drag-and-drop per creare le tue e-mail. Prodotti come StampReady, Canvas e MailChimp elimineranno per te il fastidio della codifica e-mail.

Se hai dimestichezza con il codice, dai un'occhiata a Litmus Builder, un editor di codice creato appositamente per la progettazione di e-mail. Prova a implementare tecniche di posta elettronica reattiva di base come inizio: fornirà un'ottima esperienza per gli utenti che aprono la posta elettronica in client che supportano il design reattivo (principalmente dispositivi Apple).

Inoltre, assicurati di visualizzare in anteprima le tue e-mail prima di inviarle! Puoi inviare e-mail a te stesso utilizzando PutsMail o vedere come appare la tua e-mail in oltre 40 diversi client di posta elettronica con Litmus.

In caso di domande o di problemi di codifica con la progettazione di e-mail reattive, basta andare alla community di Litmus per chiedere aiuto.

Mi consigliate dei framework responsive?

Sì! Ti consigliamo di dare un'occhiata al framework reattivo Ink di ZURB (attenzione: questo framework richiede una soluzione alternativa per eseguire correttamente il rendering in Outlook 2007-2013). Se ti piace Sass, Faust Gertz ha realizzato una versione Sass di Ink e Alex Ilhan ha un framework di posta elettronica Sass chiamato Zenith. Inoltre, Dan Denney di Code School ha un fantastico flusso di lavoro di posta elettronica chiamato Emayll e Brian Graves ha una straordinaria collezione di modelli di posta elettronica reattivi.

OTTIMIZZAZIONE PER CLIENTI CHE NON SUPPORTANO MEDIA QUERY

Se un client non supporta il design reattivo, cosa verrà visualizzato in quel client?

Ogni singolo client di posta elettronica rende le e-mail in modo diverso, soprattutto quando si tratta di app di posta elettronica mobili. In sostanza, se non supportano il design reattivo, tornerà a una versione dell'e-mail a larghezza intera. A volte sarà una versione a tutta larghezza "ingrandita", a volte sarà una versione "ingrandita" ingrandita e, a volte, un client come Gmail potrebbe aumentare automaticamente le dimensioni dei caratteri per creare una versione "mobile friendly" dell'e-mail.

La cosa migliore da fare è sempre visualizzare in anteprima la tua email prima di inviarla. Puoi inviare e-mail a te stesso utilizzando PutsMail o vedere come appare la tua e-mail in oltre 40 diversi client di posta elettronica con Litmus.

Qual è il modo migliore per affrontare il responsive design per i clienti che non lo supportano, come l'app Gmail per Android? Che tipo di "backup" dovremmo avere in atto?

Ti consigliamo di rendere le tue e-mail ottimizzate per i dispositivi mobili per cominciare. Ciò significa avere una quantità minima di contenuto e-mail e progettare un caso d'uso mobile, come caratteri più grandi e dimensioni dei pulsanti. Un design a una colonna pronto all'uso semplifica anche il rendering della tua email per l'app Gmail.

Per chi ha dimestichezza con le tecniche di codifica avanzate, il modo migliore per sviluppare le proprie e-mail e tenere conto della mancanza di supporto reattivo nell'app Gmail è l'"approccio di codifica ibrido". Utilizza essenzialmente un approccio mobile-first e ridimensiona l'e-mail fino a una larghezza desktop utilizzando alcuni hack specifici per l'e-mail. Puoi leggere di più su come implementare l'approccio di codifica ibrida qui:

• L'approccio alla codifica ibrida
• Codifica ibrida Redux: alzare l'asticella
• Lezioni vinte a fatica nel design reattivo dell'e-mail

DOMANDE CODICE

Puoi inserire le tue query multimediali in un documento CSS separato e collegare a quel documento nella testa?

Non è consigliabile utilizzare fogli di stile collegati (tag <link>) per le e-mail a causa del supporto limitato del client di posta elettronica. Tutti gli stili devono essere incorporati nell'<head> di un'e-mail.

Quali sono i punti di interruzione più comuni per la progettazione e-mail reattiva? Quanti breakpoint è l'ideale?

Con la maggior parte delle aperture che si verificano su iPhone, è importante che le tue e-mail inizino a implementare punti di interruzione a un minimo di 414 px, che è la larghezza del nuovo iPhone 6 Plus.

Non esiste un numero "ideale" di punti di interruzione per un determinato design: tutto si riduce al tuo design individuale e all'ottimizzazione dell'esperienza per i tuoi abbonati. È ideale tenere conto di almeno un punto di interruzione per rendere la tua email reattiva.

Consigli di usare tabelle o div?

La progettazione della posta elettronica richiede assolutamente l'utilizzo di un layout e una struttura basati su tabelle. La ragione di ciò è la mancanza di supporto per <div> da parte dei client di posta elettronica, come i client desktop di Outlook, in quanto riguarda la struttura e le basi effettive dell'HTML. Alcuni client di posta elettronica supportano <div> e possono essere estremamente potenti da utilizzare per determinati hack e soluzioni alternative, in particolare per la posta elettronica reattiva.

È possibile modificare gli attributi align="left" o align="right" all'interno di una tabella utilizzando le query multimediali? Oppure, è solo per le modifiche allo stile?

Non puoi tecnicamente modificare l'attributo align HTML in CSS, ma esistono altre soluzioni alternative. Puoi avvolgere ogni singola tabella in un <div> vuoto e utilizzare la proprietà float o la proprietà display per scambiare le tabelle. ActionRocket ha un ottimo post sul blog sull'utilizzo di questa tecnica avanzata.

Con le e-mail reattive, com'è il supporto per le immagini di sfondo? Quali sono le dimensioni ideali per salvare le immagini di sfondo se voglio che siano a larghezza intera?

Le immagini di sfondo sono molto ben supportate per i client di posta elettronica mobili. Non esistono dimensioni "ideali" per il salvataggio delle immagini di sfondo. Dovresti sempre cercare di avere file di dimensioni relativamente piccole in modo che i tuoi abbonati possano scaricare rapidamente la tua email. Puoi utilizzare la funzione Controllo immagine in Litmus per testare la velocità di download delle immagini.

Gli stili devono essere in linea per farli funzionare con molti dei client di posta elettronica?

Sì. Diversi client di posta rimuovono qualsiasi stile CSS nella <head> delle e-mail, in particolare Gmail, rendendo gli stili CSS incorporati una necessità per le e-mail.

È meglio usare pixel o ems per la dimensione del carattere nelle e-mail?

È meglio usare i pixel per definire le dimensioni dei caratteri nelle e-mail, poiché molti client di posta elettronica non supportano ems.

È possibile sostituire le immagini utilizzando le query multimediali?

È possibile sostituire le immagini di sfondo utilizzando le query multimediali, ma non le immagini in linea ( tag <img>).

Qual è il modo migliore per ottimizzare le immagini in modo che vengano visualizzate in modo nitido sui display retina?

Per la retina, in genere si desidera rendere l'immagine due volte più grande della sua visualizzazione finale. Ad esempio, un'immagine 100×100 dovrebbe essere effettivamente 200×200, ma ridimensionata a 100×100 utilizzando gli attributi HTML o lo stile CSS. In genere, questa tecnica dovrebbe essere utilizzata solo per immagini più piccole che devono essere nitide, non immagini grandi come le foto. Ci sono un paio di grandi discussioni sulla Litmus Community sulla progettazione per la retina:

• Progettare per la retina
• Immagini con inviti all'azione di testo e display retina

Visualizza: nessuno; o display:blocco; lavorare in e-mail reattiva?

Non è importante se la proprietà di visualizzazione funziona nella posta elettronica reattiva, ma se è supportata dai client di posta elettronica. Come la maggior parte dei CSS, è supportato da alcuni e non da altri. In particolare, non è supportato da Gmail.

Esiste un client di posta elettronica equivalente all'"elemento di ispezione" di un browser Web? Sarebbe utile per risolvere i miei progetti reattivi.

Non esiste un equivalente esatto dell'"elemento di ispezione" di un browser web. Tuttavia, la funzione Interactive Testing in Litmus è estremamente utile. Inoltre, Litmus Builder ha funzionalità di test e re-test con 1 clic per eseguire l'iterazione sull'e-mail molto rapidamente.

In caso contrario, consigliamo solo la risoluzione dei problemi in un browser WebKit (Chrome o Safari). Poiché la maggior parte delle aperture mobili avviene su WebKit, che ha un ottimo supporto CSS, lo sviluppo e la risoluzione dei problemi in un browser WebKit è una buona replica di ciò che accadrà per quei client di posta elettronica.

Il riempimento è universalmente supportato tra i client di posta elettronica?

Il riempimento è quasi universalmente supportato tra i client di posta elettronica. La proprietà margin, d'altra parte, non ha un grande supporto. Consigliamo vivamente di utilizzare l'imbottitura.

Come si impilano correttamente tre colonne usando l'allineamento? Dovresti usare l'allineamento centrale oltre a sinistra e destra? Oppure, non consigli affatto di utilizzare layout a tre colonne?

Sì, puoi impilare tre colonne in un design e-mail reattivo, sebbene le tue opzioni per impilarle e invertirle siano più limitate o più difficili da fare rispetto a un design a due colonne. L'allineamento delle tabelle dipende da come si desidera impilarle, ma in genere si allineeranno tutte e tre le tabelle a sinistra.

ActionRocket ha un ottimo post su una tecnica avanzata per l'impilamento inverso dei tavoli.

COSTRUTTORE DI TORCIA

Cos'è il costruttore di tornasole?

Litmus Builder è il primo editor di codice al mondo creato per i progettisti di posta elettronica da progettisti di posta elettronica. È completamente gratuito creare, modificare e condividere e-mail.

Emmet è integrato direttamente in Litmus Builder?

È! La nostra integrazione Emmet rende la codifica abbreviata un gioco da ragazzi.

Dove possiamo trovare modelli di email reattivi all'interno di Litmus Builder?

Litmus Builder ha una galleria di oltre 20 modelli di email nella sezione Modelli. Tutti i modelli sono completamente gratuiti. Consulta la nostra documentazione di aiuto completa per Litmus Builder.

Prova i nostri modelli reattivi gratuiti e pre-testati

L'e-mail reattiva ti consente di mettere a punto i tuoi progetti per un pubblico sempre più mobile. Semplifica il processo di progettazione della posta elettronica con una serie di modelli gratuiti e pre-testati su Litmus Community.

Presentazione dei modelli di community di tornasole Avvia la tua prossima campagna con uno dei modelli pre-testati di Litmus. Accedi ai modelli →