Podcast Desain Email #60: Bagaimana CodePen Mendekati Desain dan Pemasaran Email dengan Chris Coyier

Diterbitkan: 2017-05-05

Dalam episode ke-60 The Email Design Podcast, pembawa acara Kevin Mandeville dan Jason Rodriguez duduk bersama guru CSS Chris Coyier untuk membahas bagaimana CodePen mendekati desain email dan pemasaran serta pemikiran tentang pengembangan email HTML dari perspektif desainer web. Pastikan untuk mengikuti dan bergabung dalam diskusi di Twitter menggunakan #EmailDesignPodcast.

Tonton video lengkapnya di atas atau dengarkan versi audio-only di bawah ini.

Unduh MP3

Dalam episode ini:

  • (1:44) Bagaimana Anda mempelajari HTML dan CSS? Chris benar-benar mengambil kelas pemrograman di sekolah menengah dan melanjutkan untuk mempelajarinya di perguruan tinggi. Dia akhirnya tidak menyukai pemrograman back-end dan beralih ke jurusan seni. Dia akhirnya masuk ke HTML dan CSS dari membangun situs WordPress, termasuk situs Trik CSS-nya yang terkenal.
  • (8:05) Apakah ada sumber awal yang pernah Anda pelajari? Chris adalah penggemar berat Dan Cederholm dan bukunya Bulletproof Web Design.
  • (9:27) Apa inspirasi inti Anda untuk membuat Trik CSS dan apa visi Anda untuk itu? Chris mengatakan ide awalnya adalah untuk membuat sejumlah besar situs WordPress dengan konten di atas teknologi populer, seperti InDesign Help untuk menghasilkan lalu lintas untuk menghasilkan uang dari mereka. Trik CSS sebenarnya tidak populer pada awalnya, tapi itulah yang benar-benar dinikmati dan ingin disimpan Chris sebagai jurnal pribadi pembelajarannya dari membangun semua situs yang berbeda ini.
  • (11:48) Apa itu CodePen? CodePen adalah "taman bermain untuk web front-end." Ini bekerja dengan memungkinkan Anda membuat "pena", yang merupakan kumpulan HTML, CSS, dan JavaScript, dan merupakan jejaring sosial untuk pengembang juga, mirip dengan Dribbble untuk kode atau bahkan Pembuat Litmus untuk pengembangan front-end. Mereka baru-baru ini meluncurkan Proyek, yang memungkinkan Anda bekerja di lingkungan pengembangan front-end lokal.
  • (14:30) Apa visi CodePen? Ini adalah tindakan penyeimbang. CodePen ingin tumbuh sebagai bisnis, tetapi juga perlu menjaga komunitasnya tetap kuat, bahagia, dan sehat. Terutama sebagai tim kecil yang terdiri dari delapan orang dengan sumber daya terbatas, mereka benar-benar perlu fokus pada prioritas inti.
  • (17:15) Seperti apa pemasaran email di CodePen? Jenis email apa yang Anda kirim? Upaya terbaru dalam email adalah CodePen Spark, koleksi mingguan Pena terbaru yang paling keren. CodePen sebenarnya membangun CMS khusus untuk membantu mengelola dan membangun email, yang juga dipublikasikan ke situs web CodePen untuk arsip. Email dibuat dari template Rails yang mendapatkan CSS inline dan dikompilasi dari data CMS. Chris kemudian memasukkan email ke dalam Litmus untuk menguji dan melakukan penyesuaian yang diperlukan. CodePen menggunakan Sparkpost untuk mengirim email mereka. Proyek terbaru yang ingin dilakukan Chris untuk email di CodePen adalah menggabungkan preferensi email mereka di dalam aplikasi web CodePen dan membangun orientasi dan memicu email berdasarkan aktivitas pengguna.
  • (23:53) Bagaimana Anda mempertimbangkan untuk membangun solusi khusus versus membeli ke platform dan layanan email lain? Chris merasa bahwa sebagian besar penyedia layanan email terlalu mahal untuk dibenarkan. CodePen memiliki tantangan unik untuk memiliki tim kecil tetapi basis pengguna 1M+ yang besar di mana biayanya sangat tinggi. Jadi untuk CodePen saat ini, lebih masuk akal untuk menginvestasikan waktu mereka untuk membangun alat mereka.
  • (28:31) Bagaimana Anda merencanakan email yang harus Anda kirim? CodePen menggunakan Google Documents untuk merencanakan aktivitas pemasaran email.
  • (32:47) Tahukah Anda seperti apa riasan audiens pelanggan Anda? CodePen tidak terlalu memperhatikan audiens pelanggan mereka saat ini dan hanya berfokus untuk membuat email ditampilkan di semua klien email populer. Mereka mendekati pengembangan email mereka menggunakan pendekatan mobile-first.
  • (35:00) Apa inti masalah Anda dengan desain dan pengembangan email? Bagaimana itu bisa lebih mudah bagi Anda? Chris kesulitan mencari tahu apa lapisan abstraksi yang tepat untuk email HTML. Dia tidak ingin membuat email HTML secara manual, tetapi tidak ingin menjadi terlalu abstrak sehingga menjadi terlalu terhapus dan sulit untuk menentukan atau mengedit kesalahan saat memecahkan masalah. Dia percaya bahwa satu-satunya sumber kebenaran adalah lakmus dalam proses pengujian.
  • (36:59) Bagaimana Anda mencoba memecahkan masalah rendering yang Anda temui? Chris baru-baru ini mengalami bug Outlook dengan blok ruang acak ~100px. Chris tidak melihat bug dalam kode itu sendiri dan tidak tahu bagaimana meneliti jenis bug tertentu secara online – dia hanya menggunakan Litmus untuk mencoba banyak hal untuk pemecahan masalah hingga ditampilkan dengan benar.
  • (39:10) Apa bug paling aneh yang pernah Anda temui? Chris mengalami masalah dengan menggunakan gambar retina di email, sebagian besar karena perilaku Outlook dan membuatnya berfungsi dengan baik untuk email responsif.
  • (41:13) Bagaimana Anda mengukur keberhasilan email CodePen? Mengingat sifat tim yang kecil dan tidak memiliki orang pemasaran email atau analitik khusus di tim, mereka tidak melihat analitik email dari setiap email. Mereka mendekatinya lebih dari pandangan kualitatif dari umpan balik pengguna.
  • (45:00) Mengapa dunia desain web memiliki pandangan negatif terhadap email HTML? Chris mengatakan itu bukan misteri mengapa web membenci email: Karena itu tidak modern dan mereka tidak dapat membuat kode seperti yang mereka inginkan. Dia juga menunjukkan fakta bahwa bahkan dalam desain web, orang tidak menikmati pengujian lintas-browser. Pengujian render bukanlah bagian pekerjaan yang menyenangkan bagi sebagian besar orang dan itu diperbesar jika menyangkut email.
  • (48:54) Bagaimana kita bisa mendidik dunia web lebih banyak tentang email? Chris percaya akan bermanfaat untuk mengetahui seberapa banyak email telah berkembang dalam memberikan dukungan dan betapa sederhananya itu. Mampu mengatakan Anda tidak harus inline CSS atau menggunakan tabel akan membuat dampak besar pada persepsi email.

Ikuti Podcast Desain Email

  • Ikuti di SoundCloud
  • Berlangganan di iTunes
  • Berlangganan di YouTube

DAPATKAN KIRIM TERBARU LANGSUNG KE INBOX ANDA

Ingin mendapatkan lebih banyak tips dan saran seperti ini? Berlangganan buletin mingguan kami dan dapatkan konten terbaru untuk pro desain email yang dikirimkan langsung ke kotak masuk Anda. Setiap minggu.