Vai al contenuto

CSS e GMAIL

iCalle

Messaggi raccomandati

iCalle

iCalle

Inviato
Inviato

Buonasera!

Sto creando una newsletter utilizzando il freamwork W3.CSS Su Safari, Chrome, ecc funziona tutto a meraviglia (si vede tutto e la funzione responsive è ok). Quando condivido la pagina e la invio ad un account GMAIL succede il casino. Sembra che GMAIL non riesca. leggermi il codice CSS. Come risolvo? Non voglio/posso utilizzare i vari web editor perché è una newsletter creata ad ok partendo da un file grafico.

Che soluzioni avete?

Link al commento
Condividi su altri siti
ElRejects

ElRejects

Inviato
Inviato
17 ore fa, iCalle dice:

Buonasera!

Sto creando una newsletter utilizzando il freamwork W3.CSS Su Safari, Chrome, ecc funziona tutto a meraviglia (si vede tutto e la funzione responsive è ok). Quando condivido la pagina e la invio ad un account GMAIL succede il casino. Sembra che GMAIL non riesca. leggermi il codice CSS. Come risolvo? Non voglio/posso utilizzare i vari web editor perché è una newsletter creata ad ok partendo da un file grafico.

Che soluzioni avete?

Perdonami ma ricorstruirla in html non riesci? Magari creando varie tabelle ed inserendo le grafiche all'interno sezionandole in più parti?
Sarebbe utile vedere la grafica della newsletter per suggerirti come procedere.. così mi è difficile farlo. 

 

 

Mumble Mumble  :mhh:

Link al commento
Condividi su altri siti
iCalle

iCalle

Inviato
  • Autore
Inviato
Il 9/3/2017 at 16:02, Lief dice:

Non puoi.

Il CSS non è supportato dalle mail. Devi mettere il codice stile all'interno dell'html (sembra assurdo ma non c'è scelta).

Risolto dichiarando il necessario all'interno dello Stile. Il tutto funziona perfettamente ovunque

@ElRejects grazie per il supporto. Ho risolto!

Link al commento
Condividi su altri siti
  • 2 settimane dopo...
iCalle

iCalle

Inviato
  • Autore
Inviato

Ragazzi riapro la discussione perché ho sempre un problema nella creazione della newsletter.

Ho realizzato il tutto con w3 e mi salta fuori il seguenti risultato (vedi file):

Ora, come trasformo le due linee rosse in html?

Ho usato il seguendo codice in css:

 

<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-padding-16">
<p class="w3-justify">Lorem...</p>
</div>

 

Il tutto deve essere ottimizzato per i vari client mail.

Schermata 2017-03-27 alle 14.21.17.png

Link al commento
Condividi su altri siti
iCalle

iCalle

Inviato
  • Autore
Inviato

Ciao ti ringrazio e ho risolto con il tuo aiuto.

La pagina adesso risulta perfetta se la visualizzo da i diversi browser. Il problema come l'altra volta si presenta quando voglio condividerla tramite mail, e quindi l'incompatibilità con i vari client mail.

Allego il codice? Non riesco a trasformare il mio codice CSS in inlineCSS

Link al commento
Condividi su altri siti
ElRejects

ElRejects

Inviato
Inviato
10 ore fa, iCalle dice:

Ciao ti ringrazio e ho risolto con il tuo aiuto.

La pagina adesso risulta perfetta se la visualizzo da i diversi browser. Il problema come l'altra volta si presenta quando voglio condividerla tramite mail, e quindi l'incompatibilità con i vari client mail.

Allego il codice? Non riesco a trasformare il mio codice CSS in inlineCSS

questo credo sia un bel problema.. se alleghi il codice bisogna vedere come viene visualizzato dai vari client e soprattutto se viene o meno considerato come spam! 
Tieni conto che in molti casi gmail considera le newsletter come spam, almeno le prime inviate 

Mumble Mumble  :mhh:

Link al commento
Condividi su altri siti
iCalle

iCalle

Inviato
  • Autore
Inviato

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}
body {font-family: "Open Sans"}

.w3-container {
        position: center;
        text-align: justify;
        padding: inherit;
        }

.w3-lobster {
            font-family: "Lobster", serif;
                font-size: 50px;
                color: #ffffff;
                padding: 1px;
        }

.SourceSansRegoular {
                font-size: 20px;
                font-family: 'Source Sans Pro', sans-serif;
                font-weight: 400;
                margin-right: 5px;
                margin-left: 5px;
                }

.SourceSansRegoular3 {
                font-size: 40px;
                font-family: 'Source Sans Pro', sans-serif;
                font-weight: 700;
                margin-right: 5px;
                margin-left: 5px;
                margin-top: 40px;
                margin-bottom: 40px;
                color: #3d3c42
                }


</style>
<head>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
</head>

<body class="w3-ligh-grey">


<!-- Se non visualizzi correttamente l'immagine -->
        <div class="w3-container">
                 <table border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                    <td width="800" style="vertical-align: top;">

                                            <table border="0" align="center" cellpadding="0" cellspacing="0" class="w3-colz">
                                                    <tr>
                                                            <td align="center" style="vertical-align: top;" p class="SourceSansRegoular1"><p>Se non visualizzate correttamente il messaggio, usate questo <a href="http://www.miosito.it">link</a></p>
                                                            </td>
                                                     </tr>
                                            </table>
                                    </td>
                          </tr>
                    </table>
        </div>

<!-- NEWSLETTERS -->
<div class="w3-container" style="position: center; text-align: justify; padding: inherit;">
            <table border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="800px" bgcolor="#51af58">
                            <div><p class="w3-lobster" align= "center"><strong>Newsletter</p></td>
                            </div>
                    </tr>
            </table>
</div>

<!-- TITOLO -->
<div class="w3-container" style="position: center; text-align: justify; padding: inherit;">
        <table border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="800">
                        <div><p class="SourceSansRegoular3" align= "center"><strong>LOREM</p>
                        </div>
                    </td>
                </tr>
        </table>
</div>

    <!-- NEWSLETTERS -->
<div class="w3-container w3-content" style="max-width:800px" id="NEWSLETTER">
<hr>
        <div class="w3-padding-left w3-padding-right">
            <p class="w3-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
<hr>

    <!-- 3 IMMAGINI -->
    <div class="w3-container style="position:center;text-align:justify; padding:inherit;"">
        <div class="w3-row w3-padding-32">
        <table border="0" align="center" cellpadding="10" cellspacing="0">
                    <tr>
                      <td width="900" style="vertical-align: top;">

                                <div class="w3-third w3-container w3-margin-bottom">
                                    <img src="2.jpg" alt="TRUCK" style="width:100%" class="w3-grayscale">
                                        <div class="w3-container w3-light-grey">
                                    <p><b>Lorem Ipsum</b></p>
                                    <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
                                  </div>
                                </div>

                                <div class="w3-third w3-container w3-margin-bottom">
                                    <img src="1.jpg" alt="TRUCK" style="width:100%" class="w3-grayscale">
                                        <div class="w3-container w3-light-grey">
                                    <p><b>Lorem Ipsum</b></p>
                                    <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
                                  </div>
                                </div>

                                <div class="w3-third w3-container w3-margin-bottom">
                                    <img src="3.jpg" alt="TRUCK" style="width:100%" class="w3-grayscale">
                                        <div class="w3-container w3-light-grey">
                                    <p><b>Lorem Ipsum</b></p>
                                    <p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
                                  </div>
                                </div>
                            </td>
                    </tr>
            </table>
</div>
</div>
</div>

<!-- CONTATTI -->
<div class="w3-container">
            <table border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="800px" bgcolor="#eee">
                            <div class="w3-container w3-content w3-padding-32" style="max-width:800px" id="contact">
                                <div class="w3-row">
                                  <div class="w3-col s12 m12 l4 w3-center"><img src="Local.png" style="width:7%"<i></i><h2>Milano, Italia</h2></div>
                                  <div class="w3-col s12 m12 l4 w3-center"><img src="Telephone.png" style="width:7%"<i></i><h2>Phone: +00 151515<h2></div>
                                  <div class="w3-col s12 m12 l4 w3-center"><img src="Mail.png" style="width:7%"<i></i><h2>Email: mail@mail.com<h2></div>
                                </div>
                         </div>
                        </td>
                </tr>
        </table>
</div>
<div class="w3-white w3-center w3-padding-24">Powered by <a href="mailto:info@mail.it" title="W3.CSS" target="_blank" class="w3-hover-opacity">Azienda</a></div>

Link al commento
Condividi su altri siti
ElRejects

ElRejects

Inviato
Inviato

mmmm prova a vedere se trovi utile questo link

 

ad esempio si legge "i blocchi <div> come si è già detto spesso danno problemi, conferiscono grande stabilità quelli <span> , stabili in quanto cosiddetti "inline elements"." 

tu hai usato tantissimi <div>

Mumble Mumble  :mhh:

Link al commento
Condividi su altri siti
pix

pix

Inviato
Inviato

Tutti i tag <link> li puoi togliere dato che spesso non vengono nemmeno considerati.

Usa dei font sans-serif standard.

Inoltre il primo:

<link rel="stylesheet" href="w3.css">

fa riferimento ad un file che dovrebbe essere in locale ma che ovviamente non c'è. Dovresti almeno specificare la <base> dove cercare i file, ma io lo toglierei del tutto e metterei tutti i CSS in modalità embedded o inline.

 

L'uso dei div (non flottanti) è tollerato da molti client ma non da tutti. Meglio usare solo tabelle.

 

Se hai mai fatto un acquisto su Amazon, prova a guardare il sorgente di una delle loro email.

Oppure studiati una qualsiasi newsletter che hai ricevuto e che visualizzi correttamente dappertutto.

 

In generale quando si parla di codice per le email se vuoi che si vedano bene e soprattutto se vuoi evitare di finire direttamente nella cartella spam vale sempre la regola "the simpler, the better".

An  a tuesday keeps the doctor away.

proud member of < noi finti professionisti > club - tessera 044

Link al commento
Condividi su altri siti
  • 2 settimane dopo...
iCalle

iCalle

Inviato
  • Autore
Inviato
Il 11/4/2017 at 21:51, jeanko_D dice:

SI in effetti dovresti creare un file HTML con tutte <table> all'interno e stili inline. Una vera rottura.
Però se hai tempo da dedicare, potresti provare ad usare questo framework molto versatile. Io l'ho usato e mi sono trovato benissimo

Sto imparando ad usarlo e devo dire che è proprio quello che cercavo! Finalmente Gmail mi riconosce tutto per adesso.

Se ho problemi continuo in questa discussione

Link al commento
Condividi su altri siti
  • 2 settimane dopo...
iCalle

iCalle

Inviato
  • Autore
Inviato

Ragazzi another problem. 

La visualizzazione su Gmail e Apple Mail è perfetta. L'unico problema è su Outlook che mi sballa il mondo. Inoltre il cliente vorrebbe inoltrare la mail da Outlook ma al momento dell'inoltro dell'inoltro se casina ulteriormente. Come si può creare una newsletter compatibile con tutti i vari client?

Link al commento
Condividi su altri siti

Archiviato

Questa discussione è archiviata e chiusa a future risposte.

Vai alla lista discussioni
×
×
  • Crea Nuovo...