Aggiornamento: Gmail implementa il supporto per il design reattivo, lo stile dei caratteri migliorato + CSS per l'accessibilità

Pubblicato: 2016-09-30

Nelle prime ore del mattino del 30 settembre, Gmail ha iniziato a implementare le modifiche per supportare ciò che il mondo della posta elettronica ha chiesto a gran voce da così tanto tempo: stili incorporati e design reattivo.

Di cosa stiamo parlando?

Gmail non ha storicamente supportato classi o ID nell'<head> di un'e-mail, il che ha costretto i progettisti di e-mail a utilizzare CSS in linea per definire lo stile delle proprie e-mail. Ora Gmail supporterà i CSS incorporati con classi e ID, eliminando la necessità di CSS incorporati in Gmail. Ciò significa anche che Gmail supporterà finalmente le query multimediali e la posta elettronica reattiva.

Stai solo aggiornando le notizie? Segui i nostri aggiornamenti nel Live Ticker mentre monitoriamo l'implementazione o leggi un riepilogo di tutte le modifiche previste e cosa significano per i marketer di posta elettronica di seguito.

Il Live Ticker di aggiornamento di Gmail

Ecco una visualizzazione corrente dei client di posta Gmail che sono stati aggiornati:

Client Gmail

Aggiornamento implementato

Webmail desktop

check-verde

Webmail mobile

spunta-X

Applicazione Gmail per Android (account Gmail)

check-verde

App Gmail per Android (account Gmail)

check-verde

Applicazione Gmail per Android (account POP/IMAP)

spunta-X

Applicazione Gmail per iOS

check-verde

Posta in arrivo di Gmail (webmail)

check-verde

Posta in arrivo di Gmail (iOS)

check-verde

Posta in arrivo di Gmail (Android)

check-verde

G Suite Basic (ex Google Apps for Work)

check-verde

Edizione gratuita di Google Apps (precedente)

spunta-X

  • 7 novembre, 11:30 EDT

Un importante aggiornamento dell'app Gmail per iOS include l'aggiornamento del rendering per supportare <stile> e query multimediali! Tutte le app per dispositivi mobili di Gmail ora supportano la posta elettronica reattiva. Vediamo anche tutti gli account G Suite con l'aggiornamento del rendering.

  • 12 ottobre, 9:00 EDT

Stiamo iniziando a vedere gli account G Suite al di fuori degli Stati Uniti (che include Litmus Previews) ottenere l'aggiornamento del rendering. Aggiorneremo il grafico di implementazione quando vedremo che tutti i nostri account hanno l'aggiornamento.

  • 4 ottobre, 9:30 EDT

Abbiamo rilasciato una tabella di implementazione completa sopra. Tieni presente che Gmail ha rinominato i nomi dei piani di account.

Per gli account G Suite Basic (ex Google Apps for Work), sembra che gli aggiornamenti siano stati probabilmente implementati solo per gli account statunitensi. Per gli utenti di Litmus, tieni presente che le nostre anteprime email di base di G Suite (attualmente denominate Google Apps) utilizzano account con sede nel Regno Unito, a cui attualmente non è stato fornito l'aggiornamento.

  • 4 ottobre, 4:00 EDT

L'implementazione per supportare le query multimediali ora sembra essere completa su entrambe le app Gmail e Inbox by Gmail su Android. Sebbene alcune persone abbiano notato cambiamenti nel supporto delle query multimediali sulle loro app iOS, il supporto non è ancora coerente in tutti gli account.

  • 30 settembre, 8:00 EDT

Sono state apportate modifiche anche all'app Gmail su Android. Classi e ID vengono raccolti nella parte superiore dell'e-mail. Vediamo anche il supporto delle query multimediali per alcuni account dell'app Gmail per Android, ma il supporto non è coerente in tutti gli account che abbiamo testato. Il supporto potrebbe essere distribuito gradualmente in tutte le regioni.

Gli aggiornamenti sono ora disponibili anche per Inbox by Gmail, con il supporto per ID e classi nella parte superiore dell'e-mail.

  • 30 settembre, 5:30 EDT

Sembra che Gmail stia implementando gradualmente gli aggiornamenti al suo motore di rendering. I client web di Gmail supportano classi e ID in <head> su tutti i browser (Chrome, Safari e Firefox) ed entrambi sono correttamente referenziati nell'HTML.

Vediamo anche il supporto delle query multimediali nei client web di Gmail:

Gmail per supportare il design reattivo della posta elettronica

Finora, tuttavia, né i tag di stile nella parte superiore dell'e-mail né le query multimediali sono supportati da Inbox by Gmail o dall'app Gmail.

  • 29 settembre, 23:55 EDT

Sta succedendo! Gmail ha iniziato a implementare le modifiche alla sua macchina di rendering. Resta sintonizzato per gli aggiornamenti mentre monitoriamo il roll-out.

Condividi la notizia →

Cosa significano questi cambiamenti per i fanatici delle e-mail?

Il 31 agosto 2016, Gmail ha annunciato che avrebbe iniziato a supportare la visualizzazione delle proprietà CSS: nessuno; e supportare <style> e media query.

Questa è solo una parte di uno sforzo complessivo per espandere il supporto CSS in Gmail e offrire ai progettisti di posta elettronica un maggiore controllo su come vengono visualizzati i loro messaggi.

– Pierce Vollucci, Product Manager di Google

Questa è una grande notizia per la comunità della posta elettronica e avrà importanti implicazioni sulla progettazione e sullo sviluppo della posta elettronica.

GMAIL PER SUPPORTARE EMAIL RISPONDENTI E <STYLE>

Gmail non ha storicamente supportato classi o ID nell'<head> di un'e-mail, il che ha costretto i progettisti di e-mail a utilizzare CSS in linea per definire lo stile delle proprie e-mail. Ora Gmail supporterà i CSS incorporati con classi e ID, eliminando la necessità di CSS incorporati in Gmail. Ciò significa anche che Gmail supporterà finalmente le query multimediali e la posta elettronica reattiva.

In altre parole, il seguente codice ora verrà visualizzato correttamente in Gmail:

 <html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } @media screen and (min-width: 500px) { .colored { color:red; } } </style> </head> <body> <div> <p>Hi Pierce,</p> <p class="colored"> This text is blue if the window width is below 500px and red otherwise. </p> <p>Jerry</p> </div> </body> </html>

Puoi visualizzare un elenco completo dei CSS supportati in fondo a questo post o nella documentazione ufficiale di Gmail. Ecco un elenco completo del supporto per le query multimediali imminenti:

Tipi supportati

  • Tutti
  • schermo

Query supportate

  • larghezza minima
  • larghezza massima
  • larghezza-min-dispositivo
  • larghezza-max-dispositivo
  • orientamento
  • risoluzione minima
  • risoluzione massima

Parole chiave supportate

  • e
  • soltanto

COSA SIGNIFICA PER EMAIL

Questi aggiornamenti segnano un importante punto di svolta nello sviluppo e nel flusso di lavoro della posta elettronica, consentendo a designer e professionisti del marketing di creare campagne di posta elettronica più accessibili senza la necessità di incorporare CSS.

Impatto sul mercato: le query sui media diventeranno presto lo standard

Molte e-mail si basano su query multimediali per perfezionare il contenuto e il design per creare un'esperienza più utilizzabile su un'ampia gamma di dimensioni dello schermo. Tuttavia, le query multimediali non funzionano ovunque. La mancanza di supporto più notevole e frustrante storicamente è venuta da Gmail, che è famoso per rimuovere il codice da <head> insieme a qualsiasi stile e query multimediale contenuto all'interno.

Con il supporto di Gmail per le query multimediali, oltre il 75% dei client di posta supporterà il design reattivo . Speriamo che questo diventi la norma con altri client di posta elettronica come Windows Phone che seguono l'esempio.

Ridotta necessità di strutture di layout hacky come Fab Four

Per combattere la mancanza di supporto di Gmail per le query multimediali nel, i fanatici della posta elettronica hanno cercato soluzioni alternative in alto e in basso. Una di queste soluzioni è la tecnica Fab Four, che coinvolge la funzione CSS calc() e le tre proprietà width, min-width e max-width.

Invia email ai designer, è ora di dire addio a queste complicate strutture di layout. Ma tieni presente che hai ancora bisogno di tabelle per Outlook. (Non abbiamo creato uno standard di posta elettronica….ancora).

Tuttavia, lo sviluppo ibrido/spugnoso ha ancora il suo posto nello sviluppo della posta elettronica come struttura di base per client problematici come Outlook.

Dì addio all'inlining CSS

Gli stili "Inlining" spostano il CSS e le istruzioni di formattazione associate dal blocco di stile nell'<head> della tua email nel <body> dell'HTML. Storicamente, se gli stili non venivano spostati in linea, lo stile nel corpo della tua email non veniva visualizzato in Gmail.

nessuna modifica in linea-03

Con questi aggiornamenti, l'inlining del CSS non sarà più necessario. I designer di posta elettronica ora possono utilizzare stili incorporati inseriti nell'<head> dei documenti HTML. I CSS incorporati saranno supportati in tutti i principali client di posta elettronica.

Le email diventeranno più accessibili

L'accessibilità alla posta elettronica è essenziale per il successo di una campagna. Se un abbonato non è in grado di leggere e interagire con la tua email, non c'è modo per lui di agire.

Con il supporto CSS integrato, i designer di posta elettronica possono separare lo stile dal contenuto e utilizzare markup semantico e accessibile per le loro e-mail.

Mentre il testo di grandi dimensioni e i pulsanti touch-friendly aiutano a migliorare l'accessibilità, lo stesso vale per la preparazione del codice HTML per l'uso con uno screen reader. Con questo in mente, assicurati un sano equilibrio di testo e immagini nel tuo design e personalizza il contenuto scritto nella tua e-mail per consegnare il messaggio principale.

Con il supporto aggiuntivo per le impostazioni dello screen reader basate su CSS come tono, intervallo di intonazione, punteggiatura vocale e velocità vocale, Gmail ha reso ancora più semplice per gli esperti di marketing rendere le proprie e-mail più accessibili.

Il supporto per la tipografia aumenterà

Un altro importante cambiamento in arrivo con questi aggiornamenti è il supporto aggiuntivo per le proprietà dei caratteri CSS. Ad esempio, Gmail inizierà a supportare attributi come il conteggio delle colonne e l'intervallo di colonne, che consente la creazione di colonne di testo senza tabelle. Inoltre, font-kerning e font-variant-caps abiliteranno uno stile di carattere aggiuntivo. Tuttavia, non sembra che i caratteri web saranno supportati nella prossima versione.

È in arrivo un supporto aggiuntivo per lo sfondo

Gmail sta introducendo un supporto aggiuntivo per le proprietà di sfondo CSS come background-clip, background-position e, soprattutto, background-size. Con il supporto delle dimensioni dello sfondo, le e-mail possono avere immagini di sfondo scalabili e reattive.

PROVA LE TUE EMAIL IN GMAIL

In che modo questi cambiamenti influenzeranno la tua email? Usa Litmus per visualizzare in anteprima istantaneamente la tua email in Gmail e oltre 70 altri client di posta. Tieni presente che queste modifiche non sono ancora attive, ma si rifletteranno nelle anteprime istantanee di Litmus non appena Gmail le pubblicherà.

Prova il tornasole →

Documentazione ufficiale

Per la prima volta un importante client di posta elettronica ha pubblicato la documentazione ufficiale di supporto CSS e HTML. Questo è un primo grande settore. Grazie, Gmail!

Le seguenti proprietà CSS saranno supportate in Gmail e Inbox by Gmail:

  • azimut
  • sfondo
  • background-blend-mode
  • clip di sfondo
  • colore di sfondo
  • immagine di sfondo
  • sfondo-origine
  • posizione di sfondo
  • sfondo-ripetizione
  • dimensione dello sfondo
  • frontiera
  • bordo-fondo
  • bordo-fondo-colore
  • bordo-basso-sinistro-raggio
  • bordo-basso-destra-raggio
  • stile bordo-basso
  • bordo-basso-larghezza
  • confine-collasso
  • colore del bordo
  • bordo-sinistra
  • bordo-sinistro-colore
  • stile bordo-sinistro
  • bordo-larghezza-sinistra
  • raggio di confine
  • confine-destra
  • bordo-colore-destro
  • stile bordo-destro
  • bordo-larghezza-destra
  • spaziatura dei bordi
  • stile del bordo
  • bordo-top
  • bordo-top-colore
  • bordo-in alto-a-sinistra-raggio
  • bordo-in alto-a destra-raggio
  • stile border-top
  • bordo-larghezza-superiore
  • larghezza del bordo
  • dimensionamento della scatola
  • pausa-dopo
  • pausa prima
  • irruzione
  • didascalia
  • chiaro
  • colore
  • conteggio colonne
  • riempimento di colonne
  • gap di colonna
  • regola-colonna
  • colonna-regola-colore
  • stile regola-colonna
  • larghezza-regola-colonna
  • colonna-span
  • larghezza della colonna
  • colonne
  • direzione
  • Schermo
  • elevazione
  • celle-vuote
  • galleggiante
  • font
  • famiglia di font
  • font-feature-impostazioni
  • crenatura dei caratteri
  • dimensione del font
  • font-size-adjust
  • font-stretch
  • stile del font
  • sintesi dei caratteri
  • font-variant
  • font-variant-alternate
  • font-variant-caps
  • font-variant-est-asiatico
  • font-variant-legature
  • font-variant-numeric
  • carattere-peso
  • altezza
  • orientamento dell'immagine
  • risoluzione dell'immagine
  • isolamento
  • spaziatura del carattere
  • altezza della linea
  • stile elenco
  • posizione-stile-lista
  • tipo-stile-lista
  • margine
  • margine inferiore
  • margine sinistro
  • margine-destro
  • margine superiore
  • altezza massima
  • larghezza massima
  • altezza minima
  • larghezza minima
  • modalità mix-blend
  • adattamento all'oggetto
  • posizione dell'oggetto
  • opacità
  • contorno
  • contorno-colore
  • stile contorno
  • larghezza-contorno
  • straripamento
  • imbottitura
  • imbottitura-fondo
  • imbottitura-sinistra
  • padding-right
  • imbottitura-top
  • pausa
  • pausa-dopo
  • pausa-prima
  • pece
  • pitch-range
  • citazioni
  • ricchezza
  • parlare
  • parla-header
  • parlare-numero
  • parlare-punteggiatura
  • velocità del parlato
  • fatica
  • disposizione-tavolo
  • allineare il testo
  • text-combine-upwrite
  • decorazione-testo
  • colore-decorazione-testo
  • riga-decorazione-testo
  • testo-decorazione-skip
  • stile di decorazione del testo
  • enfasi-testo
  • enfasi-testo-colore
  • stile-enfasi-testo
  • indentatura del testo
  • orientamento del testo
  • testo-overflow
  • trasforma-testo
  • posizione-sottolineatura-testo
  • unicode-bidi
  • allineamento verticale
  • voce-famiglia
  • larghezza
  • spaziatura tra parole
  • modalità di scrittura

RICEVI LE ULTIME CONSEGNATE DIRETTAMENTE NELLA TUA INBOX

Ti terremo informato su eventuali modifiche aggiuntive nell'implementazione di Gmail e su come ti influenzeranno. Iscriviti alla nostra newsletter settimanale e ricevi gli ultimi contenuti per i professionisti del design e-mail direttamente nella tua casella di posta. Ogni settimana.