@Nazzareno
ieri ho fatto una bozza su BEEFREE e una volta terminata ho fatto il download dello zip

C'è la possibilità di caricare l'html nell'editor e poter continuare a lavorare la bozza ?

L'ultimo messaggio ti rimane sempre salvato, basta che non cambi browser o non cancelli tutti i dati. Nella home page infatti, al secondo accesso ti troverai questa scritta:
*"Welcome back! Nice to see you again | Continue editing your last message?"
*Che ti permette di ritornare all'ultimo messaggio creato. Se invece devi crearne e salvarne diversi, allora devi passare alla versione PRO: http://beefree.io/pro/.

@Nazzareno said:

L'ultimo messaggio ti rimane sempre salvato, basta che non cambi browser o non cancelli tutti i dati. Nella home page infatti, al secondo accesso ti troverai questa scritta:
*"Welcome back! Nice to see you again | Continue editing your last message?"
*Che ti permette di ritornare all'ultimo messaggio creato. Se invece devi crearne e salvarne diversi, allora devi passare alla versione PRO

Hmm no oggi quando sono andato su Beefree non e' comparsa la scritta

Comunque non e' proprio possibile impostare manualmente l'altezza dei contenuti (o delle strutture)?

Strano, che browser utilizzi? Hai forse qualche impostazione di privacy/contenuti che va a cancellare i cookie alla fine di ogni sessione?
Comunque se clicchi su "more options" vedrai che per ogni oggetto puoi impostare il padding su ogni lato (destra, sinistra, sopra, sotto). Per le strutture (che poi sono le fasce orizzontali) puoi anche specificare altri parametri, sempre cliccando su "more options".

@Nazzareno said:

Strano, che browser utilizzi? Hai forse qualche impostazione di privacy/contenuti che va a cancellare i cookie alla fine di ogni sessione?
Comunque se clicchi su "more options" vedrai che per ogni oggetto puoi impostare il padding su ogni lato (destra, sinistra, sopra, sotto). Per le strutture (che poi sono le fasce orizzontali) puoi anche specificare altri parametri, sempre cliccando su "more options".

firefox ultima versione e non credo di aver qualche modalità privacy attivata...

Comunque mi spieghi come poter inserire una sorta di header con immagine a sinistra e testo a destra ma sulla "stessa linea" ?
purtroppo ogni volta che ridimensiono la pagina.html la scritta scivola sotto l'immagine

Ho inserito la terza struttura a partire dall'alto ma niente ogni volta si spezza su due linee

l'immagine ha una larghezza di 90px mentre la scritta è un font di 48px

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.

@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.