• B
    User Attivo •

    Editor Newsletter da cui estrarre il codice (comunque non troppo pesante) ?

    Sto cercando un editor per le newsletter che sia gratuito, intuitivo e sopratutto che possa restituire il codice html/css e che non sia troppo pesante.

    Ho provato BEEFREE (che reputo veramente buono) ma il file sembra un po pesantuccio... Nonostante non avesse chissa' quale contenuto e struttura pesava circa 50 kb.

    Io ho letto che una mail newsletter non dovrebbe pesare oltre 40kb, quindi magari un editor che permetta di scegliere se rendere la mail compatibile per IE8 o IE7 potrebbe farmi risparmiare un po di codice...

    P.S. Utilizzare gli span e' sbagliato? Alcuni servizi di posta elettronica non leggono o mal interpretano questi tag ?
    Potete consigliarmi qualche guida o articolo che mia delle dritte ? Dovrei creare delle tabelle e vorrei capire se devo inserire del codice "extra" anche per le tabelle.

    Grazie mille

    0
  • N
    User Attivo •

    Ciao Borja, grazie per i complimenti su BEEfree. Purtroppo non è possibile assicurare la compatibilità su tutti i client di posta / device e al tempo stesso mantenere il peso dell'HTML basso. Abbiamo ragionato a lungo su quale strada seguire e alla fine abbiamo scelto la strada della massima compatibilità. In particolare uno dei client che ci ha costretto ad aumentare il peso del messaggio è Gmail su sistema operativo Android, oltre che Outlook che purtroppo è ancora molto usato sopratutto se lavori nel B2B.
    A livello di limiti, il suggerimento è evitare messaggi più grandi di 100KB, perchè oltre quella soglia Gmail tronca il contenuto.

    0
  • B
    User Attivo •

    @Nazzareno said:

    Ciao Borja, grazie per i complimenti su BEEfree. Purtroppo non è possibile assicurare la compatibilità su tutti i client di posta / device e al tempo stesso mantenere il peso dell'HTML basso. Abbiamo ragionato a lungo su quale strada seguire e alla fine abbiamo scelto la strada della massima compatibilità. In particolare uno dei client che ci ha costretto ad aumentare il peso del messaggio è Gmail su sistema operativo Android, oltre che Outlook che purtroppo è ancora molto usato sopratutto se lavori nel B2B.
    A livello di limiti, il suggerimento è evitare messaggi più grandi di 100KB, perchè oltre quella soglia Gmail tronca il contenuto.

    Ciao Nazzerro ti ringrazio per l'immediata risposta. Ho conosciuto Beefree dopo aver letto la discussione che hai aperto sul forum 😉

    A proposito del peso, sarebbe possibile con Beefree eliminare ad esempio la compatibilità con IE7 o IE8 ? In questo modo potrei risparmiare un po di kb.

    PS. Sarebbe bello se su Beefree si potesse impostare anche l'altezza dei blocchi in px

    0
  • N
    User Attivo •

    Il problema purtroppo non è sulle versioni vecchie di IE, ma sui client di posta come Gmail mobile, Outlook o Office 365, che non si possono ignorare.
    Comunque qui trovi un breve video su come ridurre il peso delle email:
    http://help.mailup.com/display/MM/FAQ#FAQ-23

    P.S.
    Come trucco per riempire spazio puoi usare ad esempio il blocchetto divisore trasparente.

    0
  • B
    User Attivo •

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

    0
  • N
    User Attivo •

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

    0
  • B
    User Attivo •

    @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)?

    0
  • N
    User Attivo •

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

    0
  • B
    User Attivo •

    @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

    0
  • B
    User Attivo •

    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.

    0
  • B
    User Attivo •

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

    0
  • B
    User Attivo •

    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.

    0
  • B
    User Attivo •

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

    0
  • B
    User Attivo •

    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 ?

    0
  • B
    User Attivo •

    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?

    0
  • B
    User Attivo •

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

    0
  • B
    User Attivo •

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

    0
  • B
    User Attivo •

    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

    0
  • B
    User Attivo •

    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

    0
  • B
    User Attivo •

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

    https: //jsfiddle.net/s7n7exst/

    0
Effettua l'accesso per rispondere