Vai al contenuto principale

Comprendere le basi dell'HTML per Email

Scopri il design delle email e le migliori pratiche per il codice HTML

Scritto da Paulius

Questa guida delinea gli standard di codifica e design per le email HTML personalizzate in Omnisend. Utilizza queste migliori pratiche per garantire che le tue email vengano visualizzate correttamente su Gmail, Outlook, Apple Mail e dispositivi mobili.

⚡ Risorse importanti:

Standard di codifica HTML per Email

I client email (soprattutto Outlook 2007–2010) utilizzano motori di rendering limitati. Segui queste regole per garantire la compatibilità.

Layout & Tabelle

  • Utilizza <table> per tutti i layout.Annida le tabelle per creare strutture complesse.

  • Imposta le dimensioni con gli attributi degli elementi (cellpadding, align, width) invece di CSS. Questo forza una struttura a modello a scatola.

  • Evita <div>, <span> e il posizionamento CSS (float, position, clear). I client email rimuovono o ignorano questi.

CSS & Stile

  • Utilizza solo CSS inline. I modelli di Omnisend includono automaticamente CSS inline.

  • Mantieni il CSS semplice:

    • Evita le abbreviazioni (#000 → usa #000000)

    • Evita le dichiarazioni composte (font:#000 12px Arial → dividi in proprietà separate)

    • Evita selettori complessi (discendente, figlio, pseudo-elementi)

Immagini, Pulsanti & Link

  • Aggiungi testo alternativo a tutte le immagini. La maggior parte dei client email blocca le immagini per impostazione predefinita. Il testo alternativo aiuta a comunicare il tuo messaggio anche quando le immagini non vengono caricate.

  • Usa pulsanti a prova di proiettile (codificati con HTML/CSS) invece di pulsanti immagine. I client email possono bloccare le immagini, rendendo invisibili i pulsanti basati su immagini.

  • Ospita le immagini su un server affidabile con URL assoluti (https://yourserver.com/image.jpg). Evita i percorsi relativi.

Mobile & Interattività

  • Rendi le email adatte ai dispositivi mobili. Utilizza le media queries per aumentare la dimensione del testo su schermi piccoli e assicurati che i target di tocco siano almeno 46x46px.

  • Evita Flash e JavaScript. Usa GIF animate se hai bisogno di movimento.

Test

Testa sempre prima di inviare:

  • Utilizza la funzione Anteprima di Omnisend per controllare le visualizzazioni desktop e mobile.

  • Invia email di prova a te stesso su Gmail, Outlook e Apple Mail.

  • Considera servizi di test email come Litmus per la validazione tra client.

Nota: L'HTML per Email è diverso dall'HTML per il web; molte proprietà CSS moderne non sono supportate nei client email come Outlook.

Migliori pratiche per il design delle email

Segui queste linee guida di design per migliorare la Deliverability e l'esperienza utente.

Layout & Larghezza

  • Larghezza massima: 600–800px (600px consigliato). Questo garantisce che le email vengano visualizzate correttamente nei riquadri di anteprima.

  • Utilizza layout semplici basati su griglia. Evita elementi complessi che richiedono float o posizionamento assoluto.

Immagini & Testo

  • Assumi che le immagini saranno bloccate. Progetta email che comunichino il tuo messaggio anche se le immagini non si caricano.

  • Evita le email solo con immagini. Un basso rapporto testo-immagine attiva i filtri spam. Le immagini ritagliate si visualizzano anche in modo incoerente tra i client di posta elettronica.

Font

Design Mobile

  • Controlla la leggibilità su schermi piccoli. Gli utenti possono leggere la tua email a un braccio di distanza su un telefono?

  • Ottimizza le dimensioni delle immagini per evitare tempi di caricamento lenti.

  • Rendi i link facili da toccare. Assicurati che pulsanti e link siano facili da premere.

💡 Consiglio: Oltre il 50% delle email viene aperto su mobile. Prima di inviare, visualizza la tua Email su mobile e invia una campagna di test a te stesso sul tuo telefono. Controlla la dimensione del testo, la dimensione del target di tocco (pulsanti/link) e i tempi di caricamento delle immagini.

Domande frequenti

Perché la mia email appare rotta in Outlook ma corretta in Gmail?
Outlook utilizza il motore di rendering di Microsoft Word, che ha un supporto HTML/CSS molto limitato rispetto al motore basato su browser di Gmail. Per garantire la compatibilità:

  • Mantieni la larghezza dell'email a 600px (max 650px).

  • Utilizza layout semplici basati su tabelle (singola colonna).

  • Evita immagini di sfondo, border-radius, box-shadow e flexbox.

  • Utilizza solo CSS inline (niente blocchi <style>).

  • Testa sempre in vere caselle di posta di Outlook prima di inviare.

Posso controllare come appare la mia email in modalità scura?

No. La modalità scura è controllata dalle impostazioni del client email e del dispositivo dei tuoi iscritti (Gmail, Apple Mail, Outlook, ecc.), non dal mittente. I client email decidono come applicare l'inversione dei colori. Scopri come visualizzare e ottimizzare le email per la modalità scura.

⚡ Migliori pratiche:

  • Utilizza l'Anteprima della Modalità Scura di Omnisend prima di inviare (Anteprima → attiva "Anteprima in modalità scura").

  • Progetta per temi chiari e scuri – testa in modalità di inversione totale e parziale.

  • Ottimizza loghi e immagini: Aggiungi sfondi colorati o contorni chiari per prevenire elementi che scompaiono.

  • Mantieni il testo semplice: Testo nero su sfondi bianchi si inverte in modo pulito.

Per ricevere ulteriore assistenza, ti preghiamo di contattare il nostro premiato Team di Supporto tramite la chat in-app o inviando un'email a [email protected].

Articoli correlati
Hai ricevuto la risposta alla tua domanda?