5 Aprile, 2016 | Di Wellnet

HTML email su mobile: responsive o fluido

HTML email su mobile: responsive o fluido

La scorsa volta avevamo fatto le pulci ai vari email-client per tirare fuori un codice che generasse un degno design: eMail Design: html ottimizzato per vari client

Ora però puntiamo ad una visualizzazione degna anche sui dispositivi mobile. Il primo approccio sarebbe quello di usare un layout responsive usando le 'media queries'.

MEDIA QUERIES O NO?

Possiamo farne a meno o limitarne l'uso? La domanda è legittima se analizziamo quali dispositivi / client / OS mobile supportano le 'media queries'.

Non tutti quelli che vorremmo, guardate in fondo a questo articolo

BlackBerry os 5, Windows Phone 8 e purtroppo anche gMail app sono fuori dai giochi.

Perché mai sviluppare per BlackBerry os5? Considerando un target in ambito istituzionale e in pubbica amministrazione, gli utenti usano smartphone più datati rispetto ad altri. Di seguito un resoconto sui device testati con l'approccio che più avanti spiegheremo:

HTML email su mobile: responsive o fluido

VEDIAMO IL CODICE IN DETTAGLIO

Per iniziare teniamo ben presente questi punti, che tra poco approfondiremo:

  • simulare max-width
  • align per simulare il float
  • larghezza delle immagini
  • font-size

SIMULARE 'MAX-WIDTH'

Le 'width' impostate sui ‘td’ hanno valore relativo, anche se impostate in px. Impostando un wrapper 'table' al 100% della larghezza pagina, accade che la larghezza (esempio 590px) impostata al 'td' figlio si comporti come se avesse un valore in percentuale %, andando anch'esso a tutta pagina.

Ma accostando altri due ’td’ a quello dato, vedremo che si faranno loro carico di tutta la % restante al netto dei 590px impostati. Ridimensionando il browser avremo il riscontro sperato, il ‘td’ si comporterà come se avesse impostato un ‘max-width:590px’ (quest’ultimo ricordiamo che non è supportati sulle varie versioni del client outlook desktop, vedi qui).

RISCOPRIRE ‘ALIGN’ PER SIMULARE ‘FLOAT’

Creiamo adesso due ‘table’ con larghezza in px all’interno del ‘td width 590px’. Per simulare il ‘float’ useremo ‘align left’ impostato sulle tabelle. 

Per ovviare ad un problema che si verifica su outlook, aggiungere alle due 'table' create lo 'style' qui di seguito: mso-table-lspace:0pt; mso-table-rspace:0pt; Questo fa si che i margini sinistri e destri delle tabelle inseriti di default solo su outlook vengano ridotti. Questi margini non possono essere sempre del tutto annullati, considerate sempre 2px di margine destro da togliere alla width in px della tabella. Quindi se il mio ingombro di 590px diviso in due tabelle risultasse 295px, queste le imposterò a 295-2= 293px.

NON USARE IMMAGINI PIÙ LARGHE DELLE CELLE CHE LE CONTENGONO

Per non far esplodere le varie versioni di outlook, le immagini che inseriremo come contenuto non dovranno essere più larghe dei loro contenitori. Evitare quindi un ridimensionamento al ribasso tramite codice.

Un ridimensionamento maggiorato dell’immagine invece è permesso.

FONT-SIZE

Ultima cosa ma non per importanza, il 'font-size'. Se abbiamo pensato a questa mini guida è per creare un design con un contenuto leggibile su schermi di varie dimensioni, quindi è bene non dimenticare di non forzare una dimensione del font troppo piccola. Usare 'em' o 'rem' NON è consigliato, per via di outlook.

USARE O NON USARE QUINDI LE MEDIA QUERIES PER LE NEWSLETTER?

Avere un layout fluido non ci obbliga a eliminare completamente le 'media queries', anzi potranno risolvere alcuni difetti e saranno di supporto per i client compatibili, rendendo l'esperienza dell'utente ancora migliore.

Wellnet
Wellnet

Wellnet è una nuova realtà nel panorama delle agenzie digitali italiane: 70 expertise complementari e integrate, con sedi a Milano, Torino Cuneo e Modena, frutto della fusione di tre realtà di successo preesistenti.