Email Design Podcast #60: come CodePen si avvicina al design e al marketing delle email con Chris Coyier

Pubblicato: 2017-05-05

Nel 60° episodio di The Email Design Podcast, i conduttori Kevin Mandeville e Jason Rodriguez siedono con il guru CSS Chris Coyier per discutere di come CodePen approccia il design e il marketing dell'email e pensieri sullo sviluppo di email HTML dal punto di vista dei web designer. Assicurati di seguire e partecipare alla discussione su Twitter utilizzando #EmailDesignPodcast.

Guarda il video completo sopra o ascolta la versione solo audio qui sotto.

Scarica l'MP3

In questo episodio:

  • (1:44) Come hai imparato HTML e CSS? Chris ha frequentato un corso di programmazione al liceo e ha continuato a studiarlo al college. Alla fine non gli piaceva la programmazione di back-end e passò a una specializzazione in arte. Ha finito per entrare in HTML e CSS dalla creazione di siti WordPress, incluso il suo famoso sito CSS Tricks.
  • (8:05) C'erano delle prime risorse che hai usato per imparare? Chris è un grande fan di Dan Cederholm e del suo libro Bulletproof Web Design.
  • (9:27) Qual è stata la tua ispirazione principale per la creazione di trucchi CSS e qual era la tua visione? Chris afferma che l'idea originale era quella di creare un intero gruppo di siti WordPress con contenuti su tecnologie popolari, come InDesign Help, per generare traffico e fare soldi con loro. CSS Tricks non era in realtà molto popolare inizialmente, ma era quello che Chris amava davvero e voleva tenere come diario personale dei suoi insegnamenti dalla costruzione di tutti questi diversi siti.
  • (11:48) Cos'è CodePen? CodePen è un "parco giochi per il Web front-end". Funziona consentendo di creare "penne", che sono insiemi di HTML, CSS e JavaScript, ed è anche un social network per sviluppatori, simile a un Dribbble per il codice o persino a un tornasole per lo sviluppo front-end. Di recente hanno lanciato progetti, che ti consentono di lavorare in un ambiente di sviluppo front-end locale.
  • (14:30) Qual è la visione di CodePen? È un atto di equilibrio. CodePen vuole crescere come azienda, ma deve anche mantenere la sua comunità forte, felice e sana. Soprattutto come un piccolo team di otto con risorse limitate, hanno davvero bisogno di concentrarsi sulle priorità fondamentali.
  • (17:15) Com'è l'email marketing a CodePen? Che tipo di email invii? Un recente impegno nell'e-mail è stato CodePen Spark, una raccolta settimanale delle penne più recenti. CodePen ha effettivamente creato un CMS personalizzato per aiutare a gestire e creare l'e-mail, che viene pubblicata anche sul sito Web di CodePen per gli archivi. L'e-mail è basata su modelli Rails che ottengono CSS inline e compilati dai dati CMS. Chris quindi inserisce l'e-mail in Litmus per testare e apportare le modifiche necessarie. CodePen utilizza Sparkpost per inviare le proprie e-mail. I progetti recenti che Chris spera di realizzare per la posta elettronica su CodePen consistono nell'unire le loro preferenze di posta elettronica all'interno dell'app Web CodePen e creare e-mail di onboarding e attivate in base all'attività dell'utente.
  • (23:53) Come hai valutato la creazione di soluzioni personalizzate rispetto all'acquisto di altre piattaforme e servizi di posta elettronica? Chris ritiene che la maggior parte dei fornitori di servizi di posta elettronica siano troppo costosi da giustificare. CodePen ha la sfida unica di avere un piccolo team ma una vasta base di utenti 1M+ in cui i costi sono davvero alti. Quindi per CodePen al momento ha più senso investire il proprio tempo nella creazione dei propri strumenti.
  • (28:31) Come pianifichi le email che devi inviare? CodePen utilizza Google Docs per pianificare attività di email marketing.
  • (32:47) Sai qual è il trucco del tuo pubblico di iscritti? CodePen non presta molta attenzione al pubblico di abbonati al momento e si concentra semplicemente sul rendering dell'e-mail in tutti i client di posta elettronica più diffusi. Si avvicinano allo sviluppo della posta elettronica utilizzando un approccio mobile-first.
  • (35:00) Quali sono i tuoi punti deboli principali con la progettazione e lo sviluppo della posta elettronica? Come potrebbe essere più facile per te? Chris fatica a capire quale sia il giusto livello di astrazione per le email HTML. Non vuole creare manualmente e-mail HTML, ma non vuole diventare così astratto da diventare troppo rimosso e difficile da individuare o modificare gli errori durante la risoluzione dei problemi. Crede che l'unica fonte di verità dovrebbe essere tornasole nel processo di test.
  • (36:59) Come cerchi di risolvere i problemi di rendering che incontri? Chris si è recentemente imbattuto in un bug di Outlook con un blocco di spazio casuale di circa 100 pixel. Chris non ha visto alcun bug nel codice stesso e non sapeva come ricercare quel particolare tipo di bug online: ha semplicemente usato Litmus per provare un sacco di cose per la risoluzione dei problemi fino a quando non è stato reso correttamente.
  • (39:10) Qual è il bug più strano che hai incontrato? Chris ha avuto problemi con l'utilizzo delle immagini retina nelle e-mail, principalmente a causa del comportamento di Outlook e del loro corretto funzionamento per l'e-mail reattiva.
  • (41:13) Come valuti il ​​successo delle e-mail di CodePen? Data la natura del suo piccolo team e non avendo una persona dedicata all'email marketing o all'analisi nel team, non esaminano l'analisi delle email di ogni singola email. Lo affrontano da una visione più qualitativa del feedback degli utenti.
  • (45:00) Perché il mondo del web design ha una visione negativa delle email HTML? Chris dice che non è un mistero il motivo per cui il web odia la posta elettronica: perché non è moderno e non possono codificare come vogliono. Sottolinea anche il fatto che anche nel web design, alle persone non piacciono i test cross-browser. Il test di rendering non è una parte piacevole del lavoro per la maggior parte e questo è amplificato quando si tratta di e-mail.
  • (48:54) Come possiamo educare maggiormente il mondo del web sull'e-mail? Chris crede che sarebbe utile portare a casa quanto l'e-mail si è evoluta nel rendering del supporto e quanto può essere semplice. Essere in grado di dire che non è necessario incorporare CSS o utilizzare tabelle avrebbe un enorme impatto sulla percezione della posta elettronica.

Segui il podcast di Email Design

  • Segui su SoundCloud
  • Iscriviti su iTunes
  • Iscriviti su YouTube

RICEVI LE ULTIME CONSEGNATE DIRETTAMENTE NELLA TUA INBOX

Vuoi ricevere altri suggerimenti e consigli come questo? 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.