Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email

Creare un'email responsive a prova di futuro senza le Media Query

by
Difficulty:AdvancedLength:LongLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Final product image
What You'll Be Creating

Ci sono già abbastanza mal di testa da affrontare quando programmate le email HTML. Quindi non mi sembra affatto giusto se dobbiamo anche tener d'occhio i nuovi client di posta elettronica e le dimensioni dei dispositivi che saltano fuori ogni settimana. Il supporto del CSS e delle media query può variare da un'applicazione a un'altra rendendo impossibile evitare di essere consumati dalla paura ogni volta che sentite che c'è una nuova ed eccitante app di posta che dovete ancora testare.

Ma cosa succede se potesse costruire un modello di email che era responsive, anche in ambienti con il supporto più povero per il CSS moderno? Cosa succede se, ogni volta che sentite parlare di qualche nuova app per email che tutti stanno provando, invece di tremare di paura, potreste sentirvi al sicuro nella consapevolezza che le email probabilmente si vedano bene?

Il metodo che sposo sotto è tutto sulla creazione di una buona esperienza per i client di posta elettronica che non includono un supporto per le media query qualunque.

Si chiama metodo ibrido fluido, a volte indicato come il metodo spugnoso di sviluppo delle email. La parte fluida si riferisce al fatto che usiamo un sacco di percentuali. La parte di ibrido è perché usiamo anche max-width per limitare alcuni dei nostri elementi sugli schermi più grandi.

Sei principali problemi punteremo a risolvere

1. L'app di Gmail per Android e iOS è una scocciatura

È più popolare dell'applicazione di posta predefinita su Android, ma Gmail non supporta le media query, alle quali tradizionalmente ci affidiamo per ridimensionare e riformattare le nostre email per schermi di piccole dimensioni. Questo tutorial vi mostrerà come fare email che siano responsive, anche nell'applicazione Gmail.

2. Le nuove app per email vengono rilasciate continuamente

È difficile tenere traccia di tutte le nuove applicazioni di posta che continuano a comparire. Alcuni di loro veramente curano il rendering dell'email e hanno grande supporto per il CSS e le media query, ma alcuni di loro si concentrano maggiormente sui flussi di lavoro email e non supportano affatto le media query. Questo tutorial vi mostrerà come fare un'email che è sempre responsive, non importa il livello di supporto CSS.

3. Il numero delle possibili dimensioni dello schermo del dispositivo è quasi infinito

Non solo abbiamo desktop grandi e smartphone piccoli, ma ci sono anche grandi smartphone e computer portatili piccoli. Solo perché qualcuno accede a Gmail tramite il loro computer portatile non significa che il loro schermo sia abbastanza grande da visualizzare un email grande 700px, e le persone che utilizzano un iPhone 6+ potrebbero gestire un layout a due colonne, ma invece di solito sono bloccati su una singola colonna. Questo tutorial vi mostra come creare un layout che si riformatta per adattarsi allo spazio disponibile, anche nella webmail.

4. Creare un'email responsive impilando <td> sul mobile non funziona ovunque

Alcuni client di posta elettronica (su iOS e anche alcune delle applicazioni di posta native sulle versioni precedenti di Android) non impilano correttamente due celle sulla stessa riga; impileranno solo due singole tabelle. Questo tutorial utilizza un metodo completamente diverso che è pienamente supportato da tutte le applicazioni e i dispositivi. La solita soluzione al problema consiste nell'utilizzare tabelle con l'attributo align="left" o align="right", ma che presenta un altro trabocchetto:

5. Quando si utilizza il metodo di tabella allineata per lo sviluppo responsive, le tabelle sono bloccate allineate a sinistra o a destra nelle applicazioni per cellulari che non supportano le media query

Il metodo in questo tutorial utilizza un approccio diverso che assicura che le colonne si impilino tutte al centro del cellulare, anche nell'applicazione Gmail. (Potete anche facilmente impostarle allineate a sinistra o a destra se si preferisce.)

Le tabelle allineate a sinistra o destra rimangono nelle loro posizioni nelle app mobili che non supportano le media query. Non potete regolarle usando i CSS specifici per i dispositivi mobili
Questo tutorial vi mostrerà come avere la vostra pila di colonne al centro, anche in applicazioni che non supportano le media query

6. Quando utilizzate il metodo della tabella allineata per lo sviluppo responsive, perdete la capacità di allineare verticalmente il contenuto nelle colonne adiacenti

Questo tutorial vi mostrerà anche come allineare verticalmente due colonne sulla stessa riga in alto o al centro, come se fossero tutte celle della tabella sulla stessa riga che stava usando l'attributo valign.

Questo tutorial vi insegnerà il metodo 'ibrido fluido', che consente di allineare verticalmente le colonne nella parte superiore, centrale o inferiore

1. Iniziamo

Iniziate con un file vuoto e salvatelo come index.html, quindi copiate e incollate questo codice:

Diamo una scorsa rapida a tutti gli elementi nel codice precedente:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" è il DOCTYPE che mi piace di più — trovo che produce il minor numero di stranezze.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> ci dà il supporto per tutti i caratteri Unicode nel nostro documento.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> e <meta name="viewport" content="width=device-width, initial-scale=1.0"> vengono utilizzati qui così che i telefoni Windows visualizzeranno correttamente la nostra versione mobile.

Includeremo <title></title> anche se è consigliabile lasciarlo vuoto. Un tag title è richiesto per XHTML valido, ma alcuni client di posta nativi di Android visualizzeranno questo titolo appena prima dell'intestazione nell'anteprima della posta in arrivo, che solitamente non è l'ideale.

Vedrete che sto usando un foglio di stile esterno per questo tutorial, ma l'approccio adottato dipende da voi. Per proseguire, ora dovreste creare un nuovo documento denominato styles.css e salvarlo nella stessa directory come il vostro file HTML. Metteremo il nostro CSS inline alla fine.

Successivamente, tra <!--[if (gte mso 9)|(IE)] > e <![endif]--> abbiamo alcuni CSS condizionali per Outlook per forzarlo a collassare i bordi su tutte le tabelle ed evitare vuoti indesiderati. Questa espressione condizionale è destinata a tutte le versioni di Microsoft Outlook (mso) maggiori o uguali alla versione 9 (che sono tutte poiché la versione 9 è la prima: Outlook 2000) così come le versioni di Outlook che utilizzano Internet Explorer per eseguire il rendering (essendo Outlook 2000 – 2003).

Sotto il body, in primo luogo abbiamo un tag <center>, per centrare il suo contenuto e agire come nostro messaggero di poche utili proprietà CSS globali (poiché il tag body spesso viene tolto nei client webmail). Abbiamo anche <div class="webkit"> per le versioni precedenti dei client di posta basati su WebKit (praticamente solo Apple Mail 6 e inferiori, e Outlook 2011 in alcuni casi). Queste versioni precedenti supportano solo max-width sugli elementi di blocco e il modo più semplice per garantire che il nostro layout visualizzi le dimensioni corrette è quello di avvolgerlo in questo div, che ci fa risparmiare di dover impostare le larghezze in una media query come nel mio precedente tutorial. (Un ringraziamento a zerocents per questa correzione.)

2. Stili iniziali

Successivamente, create un file vuoto CSS denominato  styles.css. Nel file appena creato, incollate il seguente:

Qui sto azzerando i margini e il padding del body, la tabella e le celle della tabella e azzerando qualsiasi bordo che appare sulle immagini collegate. I nostri stili per i tag table e td devono prendere il posto degli attributi HTML cellpadding e cellspacing. Dipende interamente da voi se preferite utilizzare invece gli attributi HTML; in passato che ho sempre sostenuto di utilizzare un attributo HTML invece di una proprietà CSS, dove possibile, tuttavia poiché ho lavorato su progetti su più larga scala ho trovato che può essere più gestibile  specificarli nel CSS, specialmente se di solito lavorate su una piattaforma che gestisce automaticamente i CSS inline per voi.

Io di solito includo un min-width al 100% sul tag <body> per evitare eventuali situazioni in cui il contenuto non occupa l'intera larghezza del riquadro di visualizzazione sul cellulare è sempre una buona idea impostare il colore di sfondo, anche se è bianco puro, per evitare difetti del colore di sfondo in Outlook o Lotus Notes.

Abbiamo anche i nostri stili per .wrapper con alcune proprietà per fermare il ridimensionamento del testo in modo strano su Windows Phone e iOS, così come table-layout: fixed per garantire che il nostro contenuto centrato in realtà sarà centrato su Yahoo mail. Imposteremo un max-width a 600px sul nostro div .webkit per contenere tutto in Apple Mail 6 (e precedenti) e Outlook 2011.

Infine abbiamo una correzione del viewport che, in combinazione con i nostri due meta tag nell'head, garantirà che tutto vada bene su Windows Phone.

3. Creare il contenitore esterno strutturale

Inizieremo con uno degli elementi cardine per questo metodo: una tabella condizionale per Outlook che è nascosto a tutti gli altri client. Abbiamo bisogno di questa perché stiamo andando a utilizzare la proprietà max-width che Outlook non supporta. Pertanto abbiamo bisogno di creare tabelle speciali solo per Outlook con larghezze in pixel esplicite per contenere tutto in Outlook.

La nostra tabella condizionale viene utilizzata per Outlook perché Outlook non supporta la proprietà max-width

Così nel nostro file HTML, eliminate la variabile [content goes here] e incollateci il seguente codice. Tendo a mantenere i miei tag di codice condizionale tutti allineati a sinistra allo stesso livello di rientro per migliorare la leggibilità, ma come lo formattate dipende da voi.

Nota: non c'è nessun styling sui miei tag della tabella condizionale. Ho intenzione di usare lo inliner di Campaign Monitor, inliner.cm, che anche mette inline gli stili sulle tavole condizionali. Se avete intenzione di utilizzare un diverso inliner allora non potete farlo, quindi assicuratevi di aggiungere cellpadding = "0" cellspacing = "0" border = "0" per le tabelle condizionali di Outlook.

All'interno della nostra tabella condizionale, vedrete che abbiamo una <table class="outer"> che è la nostra chiave esterna all'elemento portante per ogni client ad eccezione di Outlook.

Vogliamo che questa tabella esterna sia 100% larga sugli schermi di piccole dimensioni ma sugli schermi più grandi vogliamo solo che sia ampia al massimo 600px. Quindi stiamo andando per impostarne la larghezza al 100% e darle una larghezza massima di 600px.

La nostra tabella è impostato per essere ampia al 100% fino a raggiungere un massimo di 600px

Consiglio pratico: per un caricamento rapido e facile sul telefonino, senza dover armeggiare con il padding o le media query, modificate il width della tabella dal 100% al 95%.

Quindi incolliamo questi stili nel nostro file styles.css:

Abbiamo anche Margin: 0 auto; impostato qui per centrare la nostra tabella su Yahoo su Chrome. Anche se questo uso del margine è amore di Yahoo, metto sempre in maiuscolo Margin affinché Outlook.com non se ne sbarazzi-un hack pulito e piccolo grazie al commento di Wiktor su questo post del blog.

Ora abbiamo la nostra struttura esterna, è il momento di iniziare ad aggiungere alcuni contenuti.

4. Aggiungere un'immagine Banner a larghezza intera

In primo luogo, scaricate i file del tutorial e spostate la cartella /images, in modo che è nella stessa cartella del file index.html.

Ora aggiungiamo una classe di full-width-image al td all'interno della nostra tabella .outer e poi sostituiremo la nostra variabile [content goes here] con un tag immagine, in modo che l'intera tabella è ora simile alla seguente:

Noterete che non mi sono proccupata di mettere qualsiasi attributo width o height sull'immagine. Ho intenzione di gestire tutto nel CSS che stiamo andando ad aggiungere, che assomiglia a questo:

Questo ci porta ad un punto estremamente importante per quanto riguarda le immagini quando si utilizza questo metodo.

Le immagini devono essere sempre inserite nelle loro dimensioni di pixel fisici

Questo metodo è tutto sull'uso delle percentuali per mantenere le cose belle e fluide. Pertanto, vogliamo quasi sempre che la larghezza delle nostre immagini sia impostata al 100% del loro contenitore. Se vogliamo farlo, dobbiamo inserire le nostre immagini con le dimensioni dei pixel fisici corretti. Questo perché Outlook 2007, 2010 e 2013 non scaleranno le immagini su o giù dalle loro dimensioni fisiche se non si imposta una larghezza pixel esplicita sull'immagine. Se doveste posizionare un'immagine estesa 1200px in una cella di larghezza 600px e impostarne la larghezza al 100%, Outlook potrebbe visualizzare tale immagine a 1200px. Pertanto, se si dispone di una cella di larghezza 600px (sul desktop), è necessario utilizzare un'immagine estesa 600px.

Per le immagini che sono più piccole rispetto alla larghezza minima supportata dallo schermo, è possibile impostare una larghezza in pixel esplicita su questi (ad esempio, 100px) e utilizzare immagini ad alta risoluzione, perché nelle applicazioni non-media-query la loro larghezza sarà sempre di 100px, che si adatta ordinatamente all'interno di qualsiasi viewport mobile. Se aveste una colonna larga 350px però, non potreste impostare l'immagine a 350px, perché se doveste vedere quell'immagine nell'applicazione Gmail su una finestra ampia 320px, sarebbe troppo ampia.

È spesso utile assicurarsi che tutte le immagini abbiano la loro larghezza impostata su 100%, anche se sono più strette del più piccolo viewport mobile, perché vi dà più flessibilità quando si aggiunge il miglioramento progressivo con le media query.

La mia regola è che qualsiasi immagine deve sempre apparire nelle sue dimensioni di pixel fisici a meno che non è un'icona più piccola di 100px.

Quindi con tutto ciò che in mente, abbiamo salvato un'immagine chiamata header.jpg che è ampia esattamente 600px e l'abbiamo collocata nella nostra directory di immagini. Prendetela, o salvatela, e ora potete visualizzare in anteprima il file HTML e vedere come l'immagine viene ridimensionata fluidamente in base alle dimensioni del viewport.

5. Aggiungere un layout a colonna singola

Aggiungete un'altra riga alla tabella .outer con questo markup:

E aggiungete questo stile al vostro file CSS:

Noterete che ho usato il tag <p> e un set di classi per il loro stile. Mi piace usare i paragrafi per lo stile del testo, e in realtà potete gestirli molto facilmente a causa dell'hack con M maiuscola Margin che ho citato prima. Uso anche <p class="h1"> invece di <h1> perché Outlook.com ha qualche stile h1, h2 e h3 che ignora sempre il vostro stile.

Così nel CSS precedente abbiamo creato un padding di 10px per la nostra colonna, abbiamo abbiamo reimpostare tutti i margini di <p>, impostato alcuni stili di base per i collegamenti e le mie classi .h1 e .h2, quindi accertato che il contenuto della nostra colonna è allineato a sinistra con i paragrafi in stile.

Ora passiamo a cose più entusiasmanti... più colonne!

6. Aggiungere un Layout a due colonne*

*che saranno centrato quando impilate.

Ci accingiamo a creare un layout a due colonne sul desktop che impila a una colonna singola e centrata sul cellulare

Prima aggiungiamo questa nuova riga alla tabella .outer. Essa contiene una cella con la classe .two-column e, all'interno di questo, una tabella condizionale per Outlook con due colonne larghe 50%:

Queste colonne condizionali sono importanti, perché senza di loro Outlook non ci lascerà le nostre due tabelle fluttuanti siedono ordinatamente fianco a fianco. Poiché Outlook non supporta max-width, queste colonne consentono di limitare ogni colonna alla dimensione corretta.

Visualizzare come appare la nostra struttura a due-colonne

Ora sostituite ogni variabile [column to go here] con questo:

Il modo con cui stiamo ottenendo due colonne che fluttuano affiancate sul desktop, ma impilate al centro sul mobile, è di utilizzare una combinazione di text-align: center e display: inline-block. Tutti gli elementi inline-block e inline obbediscono alla proprietà text-align. Pertanto, se avvolgiamo le nostre tabelle in un div che è impostato su inline-block, possiamo facilmente impostare il loro allineamento quando si impilano impostando la proprietà text-align sul loro contenitore. È possibile scegliere tra l'allineamento del testo a sinistra, al centro o a destra, e il div inline-block obbedirà. Potete infatti semplicemente impostare la tabella stessa per essere display: inline-block, ma solo se non state per nidificare qualsiasi altra tabelle all'interno. Le cose possono iniziare a comportarsi stranamente se nidificate le tabelle all'interno di tabelle inline-block, quindi se avete bisogno di annidare, garantite sempre che il contenitore di inline-block è un div.

Diamo uno stile alla nostra cella del contenitore .two-column con il nostro allineamento selezionato. Stiamo anche aggiungendo font-size: 0 per sbarazzarci di eventuali spazi vuoti tra le nostre colonne all'interno di questa cella.

Ora avremo lo stile del nostro div inline-block che agisce come la nostra colonna:

Stiamo usando una larghezza del 100% fino a una larghezza massima di 300px affinché questa particolare colonna sarà 100%  per le finestre che sono minori di 300px.

È possibile impostare il vostro vertical-align su qualunque vogliate: top, center o bottom. Impostare vertical-align su top significa che ogni colonna si comporta come se fosse una cella della tabella utilizzando la proprietà HTML valign = "top", mentre l'impostazione middle è come se fosse valign = "middle". Notate che potete avere molte righe di questi div all'interno della stessa cella e l'allineamento verticale detterà sempre l'allineamento verticale su una base di riga per riga. È piuttosto carino! Assicuratevi anche che qualunque cosa scegliate qui corrisponda al valign che avete impostato sulla vostra tabella condizionale per Outlook perché Outlook non supporta vertical-align. Se riscontrate una mancata corrispondenza con l'allineamento in Outlook, di solito il colpevole è dimenticare di impostare valign sulle tabelle condizionali.

Poi, aggiungeremo una tabella con due righe per ogni colonna. Questo è così quando tutto si impila su mobile, ogni immagine ha il suo testo corrispondente direttamente sotto.

Quindi sostituiamo le nostre due variabili [content goes here] con il seguente:

La nostra immagine qui è ampia 280px. Come discusso sopra, è stata salvata esattamente alle giuste dimensioni in pixel per adattare la cella in cui la stiamo mettendo. Ogni colonna è ampia 300px con 10px di padding su entrambi i lati, lasciando 280px per la nostra immagine.

Successivamente abbiamo dato uno stile alla classe .contents dandogli una larghezza del 100%:

E poi aggiungiamo il nostro stile sotto il layout a due colonne per impostare la nostra dimensione del carattere e l'allineamento del testo, garantiamo alle nostre immagini di visualizzarsi al 100% e diamo al nostro testo sotto un po' di padding:

Ora dovreste avere un layout a due colonne, che si impila in verticale quando si ridimensiona il browser e si restringe a seconda dei casi quando rendete il viewport più stretto di 300px.

7. Aggiungere un layout a tre colonne

Ancora una volta ci accingiamo a creare delle colonne affiancate che si impilano su mobile utilizzando la combinazione text-align: center e display: inline-block.

Ci accingiamo a utilizzare text-align: center affinché la nostra colonna si impili al centro, ma è anche sempre possibile utilizzare l'allineamento del testo a sinistra o a destra. Ecco un esempio di come gli elementi al centro e allineati a sinistra si impileranno:

Esempio di come tre colonne si impileranno, utilizzando text-align: center sul contenitore
Esempio di come tre colonne si impileranno, utilizzando text-align: left il contenitore

Così ripeterete il processo delle due colonne con una colonna aggiuntiva. Aggiungete questa nuova riga alla tabella .outer. (Solitamente preferisco utilizzare larghezze in percentuale per le celle nelle tabelle condizionali Outlook, ma in questo caso è più facile impostare la larghezza di ognuna a 200).

Ora aggiungere il seguente codice CSS per dare del padding supplementare a questa riga, nonché di impostare tutte le proprietà che abbiamo usato nel layout a due colonne per far sì che le nostre colonne si comportino come vogliamo. Imposterà anche i nostri stili per le colonne div che stiamo per aggiungere, che sarà in questo caso ampia 200px.

Ora inseriamo le nostre colonne sostituendo la variabile [column to go here] con una tabella ciascuna:

E questo è tutto! Ora si dovrebbe avere un layout a tre colonne, dove le colonne si impileranno su viewport più stretti.

A causa del fatto che questo layout ha un numero dispari di colonne, a volte vi troverete con due colonne visualizzate sulla riga in alto e con una sola colonna sotto. Mentre penso che potete davvero fare questo look fantastico se progettate per questo scenario, a volte può sembrare un po' sbilanciato. Spesso il modo migliore per aggirare il problema è quello di utilizzare l'allineamento a sinistra, oppure utilizzare più righe di tre colonne, in modo che quando il contenuto si impila su risoluzioni medie ci sono ancora un numero pari di colonne per riga.

Aggiungere un layout a tre colonne con più righe

Quando volete aggiungere più righe nel vostro layout multi-colonna, potete aggiungere quanti più elementi inline-block a un unico contenitore della cella come più vi piace. In questo modo, quando il viewport diventa troppo stretto per adattarsi a tutte le colonne, semplicemente si ridimensiona per adattarsi allo spazio disponibile.

Mentre non è necessario separare le righe dei div per la maggior parte dei client, è necessario aggiungere ulteriori <tr> alla vostra tabella condizionale per Outlook.

Questo è come funziona la nostra tabella condizionale su Outlook per separare le nostre righe e colonne

Proviamo questo partendo da una nuova riga nella nostra tabella .outer con la classe .three-column. Qui abbiamo una nuova riga di tre colonne con una tabella condizionale all'interno. Vedrete che ci sono tre colonne nella nostra tabella condizionale e poi terminiamo la riga della tabella condizionale con </tr> e apriamo un nuovo <tr>, che contiene altre tre celle larghe 200px.

Successivamente aggiungeremo una tabella come questa a ogni cella condizionale, sostituendo la variabile [column to go here]:

Ora se ridimensionate la finestra, vedrete ancora una volta che le colonne si impilano per riempire lo spazio disponibile. Le tre colonne si ridurranno a due colonne con tre righe, fino a collassare infine a una singola colonna con sei righe.

Aggiungere ancora più colonne

Non aggiungeremo altri layout multi-colonna in questo tutorial, ma siete liberi di avere tante colonne in un layout quante ne desiderate. Tutto quello che dovete fare è garantire che i blocchi di contenuto si sommino tutti fino alla larghezza del contenitore, e che la tabella condizionale per Outlook abbia il numero corretto di celle e righe che le contenga.

8. Aggiungere un layout 'Barra laterale' a due colonne

Successivamente creeremo un layout a due colonne con una colonna larga 500px e quindi una barra laterale più piccola larga 100px per un'icona.

In primo luogo aggiungeremo una riga e una cella con la classe di .left-sidebar e dentro questa uscirà la nostra tabella condizionale per Outlook che ha una singola riga e due colonne irregolari:

Quindi in ogni colonna, sostituendo la variabile [column to go here], aggiungeremo una tabella. Questa volta ne chiameremo una .column .left e una .column .right perché hanno larghezze diverse.

Nota: qui sto usando classi multiple su un singolo elemento. Alcuni strumenti inliner e/o ESP possono non supportare questa operazione, pertanto verificate prima il vostro sistema o la vostra piattaforma. Come accennato in precedenza, io uso inliner.cm per rendere inline il mio CSS, che supporta più classi.

Nella prima colonna, aggiungete la tabella a sinistra che contiene la nostra icona:

Poiché queste immagini sono così minuscole e vogliamo sempre che vengano visualizzate le stesse dimensioni, è meglio dare loro una larghezza in pixel.

Quindi nella seconda colonna, aggiungete la tabella di destra con il testo e il link:

Queste tabelle sono super-semplici con niente nidificato all'interno, così per salvare il markup imposterò le tabelle stesse su display: inline-block, piuttosto che inserirle in un div. Come discusso in precedenza, questo è solo pratico quando non state per annidare nessun altro elemento all'interno. Se farete un sacco di annidamenti, avvolgete questa tabella in un div e mettete la classe .column .right su quello.

Successivamente diamo uno stile al contenitore e impostiamo le colonne:

E infine impostiamo alcuni stili di testo e un colore al link:

Ora dovreste avere il layout della barra laterale sinistra e quando ridimensionate il browser per renderlo più piccolo, l'icona salterà sopra al testo e si poserà al centro.

9. Aggiungere un layout 'Barra laterale' invertito

Ora vogliamo duplicare il nostro layout della barra laterale, e questa volta vogliamo che l'icona sia sul lato destro per creare un interesse visivo sul desktop. Ma sul mobile vogliamo che il contenuto si impili esattamente nello stesso ordine come il nostro precedente layout della barra laterale, così che che l'icona è in cima al testo.

In primo luogo, copieremo e incolleremo l'intera riga con nostro .left-sidebar alla cella e l'unica cosa che ci accingiamo a cambiare è la classe della cella contenitore da .left-sidebar a .right-sidebar:

Assolutamente tutto il resto è esattamente lo stesso.

Quello che  faremo è utilizzare dir="rtl" ( che significa che la direzione è da destra a sinistra) a nostro vantaggio. Questa proprietà è per denotare gli alfabeti che vanno da destra a sinistra, come l'arabo. Ma nel nostro caso semplicemente racconteremo a ogni client di posta elettronica di eseguire il rendering dei nostri elementi in ordine inverso.

I nostri elementi si impileranno nell'ordine opposto se dir="rtl" è impostato sul loro contenitore

In primo luogo, al contenitore (.right-sidebar), è necessario aggiungere dir="rtl". Questo gli dirà di rendere le nostre tabelle fluttuanti all'interno da destra a sinistra. Così il nostro tag di apertura dovrebbe assomigliare a questo:

Quindi, nel codice condizionale Outlook, dobbiamo anche aggiungere dir="rtl" a <table> perché stiamo dicendo alla tabella di eseguire il rendering dei <td> nell'ordine opposto.

Così il nostro commento condizionale di apertura dovrebbe assomigliare a questo:

E infine, abbiamo bisogno di aggiungere dir="ltr" alle nostre tabelle .column-left e a .column-right, perché hanno il contenuto al loro interno, e dal momento che il contenuto è in inglese, è necessario eseguire da sinistra a destra. Se non lo abbiamo impostato su questi elementi, avranno ereditano la direzione destra-sinistra dagli elementi genitore.

La nostra .column-left dovrebbe apparire come questo:

E la nostra .column-right dovrebbe apparire come questo:

Quindi per ricapitolare, la nostra intera riga dovrebbe risultare come questa:

E infine, aggiungiamo il nostro stile, che è tutto esattamente lo stesso per quanto riguarda la nostra .left-sidebar, fatta eccezione per il colore del link:

Ecco fatto! Così ora abbiamo due barre laterali sui lati opposti, ma quando tutto si impila sul mobile entrambe le barre laterali appaiono sopra al testo.

10. Aggiungere il Progressive Enhancement con le media query

Ora avete un modello di email completo che è responsive ovunque senza una singola media query in vista! Ma naturalmente ci sono alcuni client di posta elettronica che anzi supportano le media query, così ora possiamo darci da fare a migliorare progressivamente il nostro template già favoloso con alcuni ritocchi per far sì che tutto sia bello in un client come iOS Mail.

In primo luogo, faremo in modo che tutte le nostre colonne vengono visualizzate a una larghezza del 100% del viewport fino ad arrivare a 400px. Limiteremo anche le nostre immagini di tre colonne al 50% di ampiezza affinché non si ingrandiscano eccessivamente. Tutto quello che dobbiamo fare è reimpostare la larghezza massima di queste colonne, perché, come ricorderete, tutte già hanno una larghezza del 100% ed è solo max-width che le sta limitando.

Quindi aggiungete questo al file CSS:

Quindi, tra 401px e 600px di larghezza, aggiungeremo le seguenti operazioni per far assomigliare i layout a due e tre a colonne come farebbero sul desktop, ma restringendosi per adattarsi.

Queste sono aggiustamenti alquanto arbitrari per dimostrare cosa è possibile — potete armeggiare e giocare con questo tanto quanto vi piace per ottenere il risultato desiderato tra un'ampia gamma di dimensioni dei dispositivi che supportano le media query.

11. Inserite il vostro codice inline

Infine, se avete bisogno dimettere inline il vostro codice, prendere il contenuto di style.css e incollatelo nella <head> del documento index.html tra i tag <style type="text/css"></style>. Quindi copiate e incollate l'intero file nella casella su inliner.cm e attendete i risultati. Una volta elaborato, copiate il contenuto della casella e siete pronti ad andare!

Ed eccolo a voi!

Ben fatto! Ora abbiamo un'email HTML responsive perfettamente funzionante utilizzando meno di venti righe di media query.

Alcune note finali e suggerimenti

  • Ho trovato con questo metodo di sviluppo delle email che la chiave è semplicità e uniformità. Le cose iniziano a sfuggire di mano quando si hanno diversi padding su colonne diverse. Per questo tutorial, noterete che ho tenuto il padding uniforme al 10px sulla classe .inner, che si applica a ogni singolo layout. Questo è importante perché quando tutto si impila sul mobile si desidera che il padding sia uniforme.
Abbiate sempre la stessa quantità di padding a sinistra e a destra degli elementi di modo che il padding sia uniforme su mobile nei client che non supportano nessuna media query
  • A volte potrebbe essere necessario calcolare verso l'esterno per stabilire quale sarà la larghezza più esterna del layout, basata su ciò che è il miglior valore uniforme di padding, piuttosto che decidere la larghezza esterna e poi farvi strada verso l'interno.
  • È spesso una buona idea progettare nel browser con questo metodo, dato che spesso può essere una vera sfida aggiornare determinati design che funzionino con questo approccio.
  • Quando si utilizza questo metodo è abbastanza sicuro iniziare a progettare email che siano molto più ampie del solito, perché sapete che il layout si riorganizzerà per adattarsi alle finestre più piccole, anche nella webmail. L'unico punto critico è Outlook, che ancora richiede le tabelle condizionali in modo che tutto venga bene, e quindi gli utenti di Outlook vedranno sempre l'intera email alla sua massima ampiezza. Anche se è comunque necessario tener presente questo minimo comune denominatore, c'è sicuramente dello spazio per andare oltre la restrizione dei soliti 550-600px che abbiamo solitamente imposto alle email.
  • E infine, assicuratevi sempre che stiate inserendo le immagini con la loro dimensione di pixel fisici. Un buon modo per garantire che lo state facendo sempre è programmando per primo il layout, poi utilizzate il comando ispeziona degli strumenti del vostro browser per controllare quanto è grande in realtà lo spazio finale. È quindi possibile garantire che la vostra immagine sia stata creata con quelle dimensioni esatte. Ricordatevi di controllare questo nuovamente alla fine solo per assicurarvi che tutto sia a posto. Se non lo fate, Outlook gentilmente mostrerà l'errore del vostro metodo perché visualizzerà ogni singola immagine con le sue dimensioni fisiche.

Le icone

Grazie ancora una volta a Pierre Borodin per tutte le icone utilizzate nei miei tutorial.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.