@bago said:

Gli HTML finali generati da questi editor sono pesanti perchè sono necessari tantissimi trucchi per rendere l'email ben compatibile con Gmail mobile o con Outlook 2016 (per citare due dei più problematici).

Anche con mosaico.io puoi creare un template e scaricarti l'html generato per poi utilizzarlo come credi: considera però che questi html subiscono anche un "CSS inlining" nella loro fase finale, quindi i CSS vengono messi su ciascun tag invece che usare i tag style e /style sempre per via di chi (come Gmail) cancella tali tag. Se fai delle modifiche che includono l'inserimento di alcuni di questi tag devi preoccuparti tu di inserire i CSS inline come avrebbe fatto l'editor.

Potrai trovare sicuramente dei template più semplici e leggeri cominciando a sacrificare la "responsività" su Gmail mobile e il funzionamento su Outlook 2007...2016 per Windows.

Ciao Bago,
se una mail inizia a dare problemi se pesante oltre 100kb allora posso stare tranquillo e non sacrificare la responsivita'.

Comunque avrei due domande:

1. io che utilizzero un modello creato da un editor "esterno" ogni quanto dovrei controllare se nuovi client di posta elettronica hanno fatto nuove modifiche rendendo obsoleto il mio modello ?

2. i link non devono superare una certa lunghezza ? e come faccio se voglio tracciarli con analytics e per forza di cose diventano piu' lunghi?
   Il limite e' anche sulle anchor text ?

1. Difficile a dirsi. Purtroppo la tecnica "ibrida" usata sia da Mosaico che da Bee è una tecnica piuttosto recente e potrebbe essere resa obsoleta in qualunque momento se uscisse una nuova versione di Outlook o una nuova versione di Gmail molto incompatibile con la precedente. Se domani Apple decidesse di cambiare il client di base dell'iPhone allora tutti i template probabilmente diventerebbero obsoleti.. solo l'Apple sa se esiste un piano per farlo e quando potrebbe avvenire (dubito che lo faranno, ma è per farti capire).

2. Non mi risultano problemi con link lunghi.

@bago said:

1. Difficile a dirsi. Purtroppo la tecnica "ibrida" usata sia da Mosaico che da Bee è una tecnica piuttosto recente e potrebbe essere resa obsoleta in qualunque momento se uscisse una nuova versione di Outlook o una nuova versione di Gmail molto incompatibile con la precedente. Se domani Apple decidesse di cambiare il client di base dell'iPhone allora tutti i template probabilmente diventerebbero obsoleti.. solo l'Apple sa se esiste un piano per farlo e quando potrebbe avvenire (dubito che lo faranno, ma è per farti capire).

2. Non mi risultano problemi con link lunghi.

Perfetto
Grazie Bago

Ragazzi è possibile utilizzare come valori di width i punti percentuali (%) ?
E il **float **?

@Nazzareno
In un mio precedente post ti ho chiesto se su BEEFREE fosse possibile avere un header con un immagine (sinistra) e del testo (a destra) sulla stessa "riga".
Ho provato varie modifiche ma nulla...
L'unica soluzione credo sia intervenire direttamente sul codice è modificare alcune cose di questi due div :

1. eliminare l'istruzione che aggiunge ai due div la classe .col (che ha come proprietà una width: 100% !important)

2. inserire nello style del div immagine **float:left; width: 40%;

**3) inserire nello style del div testo float:left; width: 60%;

In questo modo funzionerebbe... ma tu che dici ? me lo sconsigli ?

Il float è uno di quegli attributi che non funzionano su molti clienti. Quindi puoi usarlo solo se sai cosa fai e sai cosa succede sui client che non lo supportano.
Per i width, idem.. tutto è possibile.. se hai voglia di spendere giornate a creare un template da zero e testarlo allora puoi farlo, altrimenti ti conviene prendere un template fatto da chi ci ha perso le giornate e cercare di non toccarlo (se non sai quello che fai lo rompi quasi sicuramente).

Riguardo alla domanda che fai su BeeFree posso già risponderti io (poi Nazzareno confermerà) che è una pessima idea e che così facendo rompi sicuramente il funzionamento su alcuni client.
Con Beefree puoi creare un blocco con immagine e testo "orizzontali" senza problemi, da quello che mi risulta: perchè cerchi di farlo via codice?

@bago said:

Il float è uno di quegli attributi che non funzionano su molti clienti. Quindi puoi usarlo solo se sai cosa fai e sai cosa succede sui client che non lo supportano.
Per i width, idem.. tutto è possibile.. se hai voglia di spendere giornate a creare un template da zero e testarlo allora puoi farlo, altrimenti ti conviene prendere un template fatto da chi ci ha perso le giornate e cercare di non toccarlo (se non sai quello che fai lo rompi quasi sicuramente).

Riguardo alla domanda che fai su BeeFree posso già risponderti io (poi Nazzareno confermerà) che è una pessima idea e che così facendo rompi sicuramente il funzionamento su alcuni client.
Con Beefree puoi creare un blocco con immagine e testo "orizzontali" senza problemi, da quello che mi risulta: perchè cerchi di farlo via codice?

Provo a farlo via codice perche su Beefree non mi funziona

Ho selezionato il terzo tipo di struttura (dall'alto) e messo a sinistra l'immagine (80px di altezza e larghezza) e poi a destra la scritta (una parola con font Georgia e size 36px).
Ma se ridimensiono e la larghezza della finestra e' inferiore a 500px l'header si spezza in due con ciascun div che ha una larghezza di 100%.
Quindi avro la scritta sotto l'immagine

Quello è proprio l'effetto voluto per fare in modo che si veda bene su smartphone. Si chiama "Responsive".

E io quello che sto cercando di capire e' se ci sia una struttura con due div e la larghezze in percentuale.

In questo modo e' responsive e comunque l'header non si spezza in due

Comunque questo problema posso facilmente aggirarlo creando un'unica immagine che inglobi anche la scritta...
Il problema ora è un altro:

ho l'esisgenza di creare una tabella (a due colonne) come potrei fare ? su beefree non mi sembra ci sia la possibilità di inserire tabelle

Raga potete dirmi se questo tipo di tabella possa andare bene ?

https: //jsfiddle.net/s7n7exst/

Ti sei messo in una impresa che secondo me è più grande di te Fare un template email non è come fare una pagina web che bene o male si vede.

Nel codice vedo dei problemi sui commenti condizionali... e poi cosa significa "possa andare bene"? Dipende da quali sono i client sui quali vuoi compatibilità.

Con Litmus o Email On Acid puoi avere uno strumento che ti fa vedere velocemente come il tuo HTML si vedrà su vari client di posta, ma la cosa migliore sarebbe provarli, almeno i principali: chi sviluppa template di solito ha decine di dispositivi reali sui quali testare il template per verificare che tutto funzioni come deve.

@bago said:

Ti sei messo in una impresa che secondo me è più grande di te Fare un template email non è come fare una pagina web che bene o male si vede.

Nel codice vedo dei problemi sui commenti condizionali... e poi cosa significa "possa andare bene"? Dipende da quali sono i client sui quali vuoi compatibilità.

Con Litmus o Email On Acid puoi avere uno strumento che ti fa vedere velocemente come il tuo HTML si vedrà su vari client di posta, ma la cosa migliore sarebbe provarli, almeno i principali: chi sviluppa template di solito ha decine di dispositivi reali sui quali testare il template per verificare che tutto funzioni come deve.

No Bago, non voglio fare un template da zero ma semplicemente creare un tabella a due colonne come nel jsfiddle che ho linkato.
Su Beefree non c'è questa possibilità e perciò mi sono limitato a prendere il codice di un "pulsante" e ci ho lavorato sopra...

ho chiesto proprio ora anche su stackoverflow

http: //stackoverflow.com/questions/37552100/how-create-table-responsive-for-all-email-client

ma dubito possano aiutarmi

Ciao Borja, per la tabella puoi usare il blocco HTML e inserire il codice che vuoi. Attenzione però come dice Bago a non compromettere la "responsività", perchè ormai circa un'email su due viene aperta su dispositivi mobili.

Attenzione che se vuoi solo una tabella larga il 100% e le cui colonne sono in percentuale allora non si parla di "responsive" ma si parla di "fluid". Tale tabella potrebbe rompere un layout responsive perchè in funzione del contenuto potrebbe forzare una larghezza minima che potrebbe essere superiore a quello che serve perchè il meccanismo responsive del layout si possa innescare.

Con "tabella responsive" si intendono tecniche per cui colonne vengono messe in riga o alcune colonne vengono nascoste in base alla dimensione del device: non esistono tecniche che funzionino bene sulla maggior parte dei device per fare tabelle responsive di questo tipo.

Quindi se devi fare una tabella fluida falla fluida, metti il width percentuale in tutti i td, assicurati che la somma dei width sia 100%, se metti altri stili sappi che alcuni programmi potrebbero non elaborarli, quindi vedi tu se vuoi accontentarti di "sperare che funzioni" o se invece è il caso di provare almeno un Outlook 2007-2016 (windows) e almeno un Gmail app mobile + Gmail desktop e magari la webmail di Outlook.com per vedere l'effetto che fa. Non mettere commenti condizionali di outlook se non sai cosa stai facendo, rischi solo di rompere ulteriormente il layout.

@bago said:

Attenzione che se vuoi solo una tabella larga il 100% e le cui colonne sono in percentuale allora non si parla di "responsive" ma si parla di "fluid". Tale tabella potrebbe rompere un layout responsive perchè in funzione del contenuto potrebbe forzare una larghezza minima che potrebbe essere superiore a quello che serve perchè il meccanismo responsive del layout si possa innescare.

Con "tabella responsive" si intendono tecniche per cui colonne vengono messe in riga o alcune colonne vengono nascoste in base alla dimensione del device: non esistono tecniche che funzionino bene sulla maggior parte dei device per fare tabelle responsive di questo tipo.

Quindi se devi fare una tabella fluida falla fluida, metti il width percentuale in tutti i td, assicurati che la somma dei width sia 100%, se metti altri stili sappi che alcuni programmi potrebbero non elaborarli, quindi vedi tu se vuoi accontentarti di "sperare che funzioni" o se invece è il caso di provare almeno un Outlook 2007-2016 (windows) e almeno un Gmail app mobile + Gmail desktop e magari la webmail di Outlook.com per vedere l'effetto che fa. Non mettere commenti condizionali di outlook se non sai cosa stai facendo, rischi solo di rompere ulteriormente il layout.

Si ma credo non sia una grande idea inserire la tabella (fatta da me) nel modello di beefree che sara' sicuramente responsive.
Non ho posso certo imparare a scorvere una tabella "responsive" per le newsletter nel giro di qualche giorno... Percio' Vi chiedo:

Esiste qualche buon editor di newsletter (gratuito) che dia la possibilita' anche di creare tabelle ???

Cosi facendo potrei crearla su questo editor e poi prendere la porzione di codice e inserirla sul modello di beefree.

Non credo esista quello che chiedi (sarebbe molto difficile permettere di creare tabelle e allo stesso tempo accertarsi che non rompano il layout visto che poi dipende dai contenuti).

Quindi se ti è indispensabile mettere una tabella la metti con le indicazioni che ti abbiamo già dato. Altrimenti evita di mettere la tabella... a volte si perde un sacco di tempo per risolvere problemi che possono essere aggirati invece che risolti

Uno screenshot della tabella?!

Ragazzi alla fine ho dovuto cedere... Invece della tabella utilizzero un semplice elenco puntato e per ogni voce mettero' tra parentesi il secondo dato (che doveva trovarsi nella seconda colonna)

Grazie di tutto

**@Nazzareno

**
ultima questione che riguarda BEEFREE:

se carico un'immagine posso inserire l'url
Ma quando poi scrarico l'html e lo apro con il browser, tramite il sorgente, se vedo l'url dell'immagine risulta "images/nome_immagine" e non l'url che ho inserito.

Come mai ?

Devo modificare qualcosa ? posso agire direttamente sull'html e mettere l'url giusto ?

Sì, in BEEFREE non forniamo l'hosting gratuito delle immagini, anche perchè ci sarebbe il rischio che venga abusato per fare spam o altro, visto che il servizio si può usare anche senza doversi registrare. Puoi editare il tuo html con un Trova e Sostituisci, qui le istruzioni dettagliate:
http://help.beefree.io/hc/en-us/articles/208202675-How-to-use-external-images-in-your-message