Quando serve il codice custom
L'editor drag-drop di Newsletter G Tech Group copre il 90 percento dei casi d'uso, ma a volte serve un controllo più' fine: layout particolari non disponibili tra i blocchi, integrazioni dinamiche con dati esterni, animazioni CSS, blocchi con logica condizionale complessa, template provenienti da un'agenzia esterna che fornisce file HTML chiavi in mano. In questi casi entra in gioco l'editor HTML custom, che da' accesso completo al codice sorgente del template.
Apertura editor codice
Dalla schermata di creazione campagna scegli l'opzione codice HTML personalizzato invece di editor visuale. Si apre un'editor con syntax highlighting per HTML, CSS e Liquid templating, autocompletamento dei tag standard e validazione in tempo reale degli errori di sintassi. Puoi incollare HTML preesistente o scriverlo da zero. Lo split-screen mostra contemporaneamente codice e anteprima live.
Struttura di base
Inizia con DOCTYPE html, tag html con attributo lang="it", head con meta charset UTF-8 e meta name viewport per il rendering mobile, infine body. Inserisci sempre meta name="viewport" content="width=device-width, initial-scale=1" per evitare lo zoom forzato su mobile e meta http-equiv X-UA-Compatible content="IE=edge" per Outlook che usa ancora un motore di rendering legacy basato su Word.
CSS inline obbligatorio
Gmail e Outlook strippano CSS esterno (link rel stylesheet) e larga parte del CSS dichiarato in style nel head. Tutti gli stili critici vanno applicati inline tramite attributo style direttamente sui tag HTML. Newsletter G Tech Group offre un convertitore automatico ("Inline CSS") che trasforma CSS interno in inline prima dell'invio, ma per controllo totale scrivilo già' inline.
Tabelle per il layout
I client email moderni supportano flexbox e grid solo parzialmente, soprattutto Outlook desktop che resta indietro di 10 anni. Il layout sicuro resta basato su tabelle annidate, con larghezza fissa di 600 pixel per il contenitore principale (standard storico che funziona ovunque). Usa role="presentation" sulle tabelle per accessibilità' (gli screen reader le saltano correttamente come elementi decorativi).
Immagini ottimizzate
Specifica sempre attributi width, height e alt sulle immagini. Width e height in pixel (non percentuali) evitano riflow durante il caricamento. Alt obbligatorio per accessibilità' e per il fallback quando le immagini sono bloccate (Outlook le blocca di default, mostra alt). Carica le immagini sul CDN interno di Newsletter G Tech Group: garantisce uptime, tracking automatico e cache distribuita. Usa formato JPEG per foto (compressione efficace), PNG per loghi con trasparenza, WebP solo se sai che l'audience usa client moderni.
Media query mobile
Aggiungi media query con max-width 600 pixel per rendere il template responsive. Esempio: @media only screen and (max-width: 600px) { .col-2 { width: 100% !important; } }. Alcuni client (Gmail iOS storico) le ignorano, quindi progetta il layout in modo che funzioni anche senza media query, usando tabelle che collassano naturalmente.
Test prima dell'invio
Esegui sempre un test di invio verso almeno 5 client diversi: Gmail web, Gmail app Android, Outlook desktop, Outlook web, Apple Mail iOS. Strumenti come Litmus, Email on Acid o Mail Tester aiutano a identificare problemi di rendering prima dell'invio massivo, simulando 50+ client.
Merge tag e link tracking
Inserisci merge tag con sintassi {first_name} nei punti dinamici. I link verranno automaticamente riscritti per il tracking dei clic, ma puoi escludere singoli link aggiungendo l'attributo data-no-track sul tag a. Util per link a documenti privacy o per link che non vuoi tracciare per motivi GDPR.
Dark mode
Aggiungi @media (prefers-color-scheme: dark) per gestire dark mode con palette dedicata. Logo trasparente o con outline visibile sia su bianco sia su nero.
Strumenti di sviluppo
Strumenti utili nello sviluppo template custom: MJML framework (compila in HTML cross-client compatibile), Foundation for Emails (CSS framework dedicato), Litmus e Email on Acid per testing automatizzato su 90+ client simulati, Mail-Tester per check deliverability gratuito, Premailer per inline CSS automatico.
Performance peso email
Mantieni il peso totale email (HTML + immagini) sotto 100KB ideale, sotto 200KB tollerabile. Gmail tronca email sopra 102KB nell'anteprima, nascondendo footer e link unsubscribe e violando compliance. Comprimi immagini con TinyPNG o Squoosh.
Sicurezza e XSS
Mai includere JavaScript nei template email: e' bloccato da tutti i client e segnala il messaggio come spam o malware. Sanitizza input utente nei merge tag per evitare XSS in caso di campi popolati da form non validati.
Tool di linting
Strumenti di linting HTML email: Litmus Builder, Email on Acid, Caniemail.com (database compatibilità' feature CSS per client email). Lint prima di inviare per identificare problemi noti.
Outlook desktop e Word rendering engine
Outlook 2007-2019 usa Word per renderizzare HTML, con limitazioni note: no border-radius, no flexbox, no SVG, no CSS gradients, supporto parziale per padding e margin. Tutto va testato specificamente su Outlook desktop.
Plain text alternative
Includi sempre una versione plain text dell'email (Newsletter G Tech Group la genera auto da HTML). Migliora deliverability e supporta utenti che leggono in plain text mode (privacy-conscious, screen reader).
Accessibility
Email accessibile: alt text descrittivi su immagini, contrasto colore WCAG AA, struttura semantica con heading, lingua dichiarata in tag html lang.
Hai bisogno di aiuto?
Se vuoi usare Newsletter G Tech Group, scrivici tramite il modulo di contatto.