E-Mail-Design-Podcast #60: Wie CodePen mit Chris Coyier E-Mail-Design und -Marketing angeht

Veröffentlicht: 2017-05-05

In der 60. Folge von The Email Design Podcast diskutieren die Moderatoren Kevin Mandeville und Jason Rodriguez mit CSS-Guru Chris Coyier, wie CodePen E-Mail-Design und -Marketing angeht und Gedanken zur HTML-E-Mail-Entwicklung aus der Sicht von Webdesignern. Folgen Sie unbedingt mit und beteiligen Sie sich an der Diskussion auf Twitter mit #EmailDesignPodcast.

Sehen Sie sich das vollständige Video oben an oder hören Sie sich unten die reine Audioversion an.

Laden Sie die MP3 herunter

In dieser Folge:

  • (1:44) Wie haben Sie HTML und CSS gelernt? Chris hat tatsächlich einen Programmierkurs in der High School besucht und ihn am College studiert. Letztendlich mochte er Backend-Programmierung nicht und wechselte zu einem Hauptfach in Kunst. Er kam schließlich durch das Erstellen von WordPress-Sites in HTML und CSS ein, einschließlich seiner berühmten CSS-Tricks-Site.
  • (8:05) Gab es früher Ressourcen, die Sie gelernt haben? Chris ist ein großer Fan von Dan Cederholm und seinem Buch Bulletproof Web Design.
  • (9:27) Was war Ihre wichtigste Inspiration für die Erstellung von CSS-Tricks und was war Ihre Vision dafür? Chris sagt, dass die ursprüngliche Idee darin bestand, eine ganze Reihe von WordPress-Sites mit Inhalten über gängige Technologien wie InDesign Help aufzubauen, um Traffic zu generieren, um damit Geld zu verdienen. CSS Tricks war anfangs nicht wirklich beliebt, aber es war das, was Chris wirklich genossen und als persönliches Tagebuch über seine Erfahrungen beim Aufbau all dieser verschiedenen Sites führen wollte.
  • (11:48) Was ist CodePen? CodePen ist ein „Spielplatz für das Front-End-Web“. Es funktioniert, indem es Ihnen ermöglicht, "Stifte" zu erstellen, die Sätze von HTML, CSS und JavaScript sind, und ist auch ein soziales Netzwerk für Entwickler, ähnlich einem Dribbble für Code oder sogar einem Litmus Builder für die Front-End-Entwicklung. Sie haben vor kurzem Projekte gestartet, mit denen Sie in einer lokalen Front-End-Entwicklungsumgebung arbeiten können.
  • (14:30) Was ist die Vision von CodePen? Es ist ein Balanceakt. CodePen möchte als Unternehmen wachsen, muss aber auch seine Community stark, glücklich und gesund halten. Vor allem als kleines Team von acht Personen mit begrenzten Ressourcen müssen sie sich wirklich auf die Kernprioritäten konzentrieren.
  • (17:15) Wie sieht E-Mail-Marketing bei CodePen aus? Welche Arten von E-Mails versenden Sie? Ein neueres E-Mail-Projekt war der CodePen Spark, eine wöchentliche Sammlung der coolsten Stifte der letzten Zeit. CodePen hat tatsächlich ein benutzerdefiniertes CMS entwickelt, um die E-Mail zu verwalten und zu erstellen, die auch auf der CodePen-Website für Archive veröffentlicht wird. Die E-Mail basiert auf Rails-Vorlagen, in die CSS eingebunden und aus den CMS-Daten kompiliert wird. Chris gibt dann die E-Mail zum Testen in Litmus ein und nimmt alle notwendigen Anpassungen vor. CodePen verwendet Sparkpost, um ihre E-Mails zu versenden. Jüngste Projekte, die Chris für E-Mails bei CodePen zu verwirklichen hofft, sind die Zusammenführung ihrer E-Mail-Einstellungen in der CodePen-Web-App und der Aufbau von Onboarding und ausgelösten E-Mails basierend auf Benutzeraktivitäten.
  • (23:53) Wie haben Sie die Entwicklung benutzerdefinierter Lösungen gegenüber dem Kauf anderer E-Mail-Plattformen und -Dienste abgewogen? Chris ist der Meinung, dass die meisten E-Mail-Dienstleister zu teuer sind, um sie zu rechtfertigen. CodePen hat die einzigartige Herausforderung, ein kleines Team zu haben, aber eine große 1 Million + Benutzerbasis, bei der die Kosten wirklich hoch sind. Für CodePen ist es im Moment also sinnvoller, seine Zeit in den Ausbau seiner Tools zu investieren.
  • (28:31) Wie planen Sie E-Mails, die Sie senden müssen? CodePen verwendet Google Docs, um E-Mail-Marketingaktivitäten zu planen.
  • (32:47) Wissen Sie, wie Ihr Abonnentenpublikum aussieht? CodePen schenkt seinen Abonnenten im Moment nicht viel Aufmerksamkeit und konzentriert sich einfach darauf, die E-Mail in allen gängigen E-Mail-Clients zu rendern. Sie gehen ihre E-Mail-Entwicklung mit einem Mobile-First-Ansatz an.
  • (35:00) Was sind Ihre Kernprobleme bei E-Mail-Design und -Entwicklung? Wie könnte es für Sie einfacher sein? Chris hat Schwierigkeiten herauszufinden, was die richtige Abstraktionsebene für HTML-E-Mails ist. Er möchte keine HTML-E-Mails manuell erstellen, aber nicht so abstrahiert werden, dass es zu entfernt wird und es schwierig wird, Fehler bei der Fehlerbehebung zu lokalisieren oder zu bearbeiten. Er glaubt, dass die einzige Quelle der Wahrheit Lackmus im Testprozess sein sollte.
  • (36:59) Wie versuchen Sie, Rendering-Probleme zu lösen, auf die Sie stoßen? Chris ist kürzlich auf einen Outlook-Fehler mit einem zufälligen Speicherplatz von ~100px gestoßen. Chris sah keine Fehler im Code selbst und wusste nicht, wie er online nach dieser speziellen Art von Fehler suchen sollte – er benutzte nur Litmus, um eine Reihe von Dingen zur Fehlerbehebung auszuprobieren, bis er richtig gerendert wurde.
  • (39:10) Was ist der seltsamste Fehler, auf den du gestoßen bist? Chris hatte Probleme mit der Verwendung von Retina-Bildern in E-Mails, hauptsächlich aufgrund des Outlook-Verhaltens und der richtigen Funktion für responsive E-Mails.
  • (41:13) Wie messen Sie den Erfolg von CodePen-E-Mails? Angesichts der Natur des kleinen Teams und des Fehlens einer engagierten E-Mail-Marketing- oder Analyseperson im Team betrachten sie nicht die E-Mail-Analyse jeder einzelnen E-Mail. Sie nähern sich ihm eher aus einer qualitativen Sicht aus dem Feedback der Benutzer.
  • (45:00) Warum hat die Webdesign-Welt eine negative Einstellung zu HTML-E-Mails? Chris sagt, es sei kein Geheimnis, warum das Web E-Mails hasst: Weil es nicht modern ist und sie nicht so programmieren können, wie sie es wollen. Er weist auch darauf hin, dass selbst im Webdesign die Leute keinen Spaß an Cross-Browser-Tests haben. Rendering-Tests sind für die meisten kein angenehmer Teil der Arbeit, und das wird bei E-Mails verstärkt.
  • (48:54) Wie können wir die Webwelt besser über E-Mail aufklären? Chris glaubt, dass es von Vorteil wäre, zu zeigen, wie viel E-Mail sich beim Rendering-Support entwickelt hat und wie einfach er sein kann. Zu sagen, dass Sie kein CSS einbinden oder Tabellen verwenden müssen, würde einen großen Einfluss auf die Wahrnehmung von E-Mails haben.

Folgen Sie dem E-Mail-Design-Podcast

  • Folgen Sie auf SoundCloud
  • Bei iTunes abonnieren
  • Auf YouTube abonnieren

ERHALTEN SIE DAS NEUESTE GERADE IN IHREN EINGANG ZUGESTELLT

Möchten Sie weitere Tipps und Ratschläge dieser Art erhalten? Abonnieren Sie unseren wöchentlichen Newsletter und erhalten Sie die neuesten Inhalte für E-Mail-Design-Profis direkt in Ihren Posteingang. Jede Woche.