Aliran kerja pembangunan e -mel html saya sekarang

aliran kerja pembangunan e -mel html: Panduan praktikal untuk meningkatkan kecekapan

Setiap pemaju web mempunyai cara tersendiri untuk bekerja: editor pilihan, alat tambahan, proses projek peribadi, dan banyak lagi. Untuk projek yang besar atau kompleks, laluan pembangunan yang jelas adalah penting, yang menjimatkan masa dan meminimumkan kesilapan.

Ini amat penting dalam projek e -mel HTML dalam pengalaman saya. E -mel memerlukan banyak tugas berulang yang tidak begitu rumit dalam diri mereka (sekurang -kurangnya tidak selalu), tetapi boleh menjadi rumit kerana banyak unsur dan tugas yang perlu diperiksa.

di sini saya akan cuba menerangkan aliran kerja pembangunan e -mel HTML peribadi saya. Saya harap anda dapat memilih bahagian yang anda suka dari mereka.

mata utama

• Penulis menekankan pentingnya laluan pembangunan yang jelas dalam projek e -mel HTML untuk menjimatkan masa dan meminimumkan kesilapan yang disebabkan oleh sebilangan besar tugas berulang.
• Menggunakan preprocessors, seperti Jade untuk HTML dan kurang untuk CSS, dapat memudahkan proses pembangunan dengan mengurangkan keperluan untuk kod yang panjang, terutama dari segi jadual bersarang. Adalah disyorkan untuk menggunakan alat seperti CodeKit dan CODA untuk menyusun fail dan kerja pratonton dalam masa nyata.
• Adalah disyorkan untuk menggunakan pakej Builder E -mel Gulp untuk mengautomasikan beberapa langkah terakhir alur kerja, termasuk memasuki atau membenamkan fail CSS, menguji dengan API Litmus, dan menghantar e -mel ujian tambahan.
• aliran kerja pembangunan e -mel HTML yang baik dapat meningkatkan produktiviti. Aliran kerja pengarang termasuk penciptaan ujian tempatan, CSS dalam talian, dan ujian automatik menggunakan pembina e -mel Gulp. Menyesuaikan langkah -langkah ini digalakkan sesuai dengan keutamaan dan keperluan peribadi anda.

aliran kerja pembangunan e -mel biasa

aliran kerja pembangunan e -mel klasik terdiri daripada tiga langkah utama:

• Penciptaan (menjalankan ujian tempatan awal)
• css inline
• ujian

Ujian akhir (menggunakan CSS sebaris) adalah langkah yang paling memakan masa, kerana kita mungkin perlu mengulanginya beberapa kali. Tugas "CSS Inline" dan "Test" memerlukan kerja dan perhatian tambahan: Pertama, anda mesti berhati -hati untuk membezakan salinan kerja asal dari salinan sebaris. Di samping itu, ujian akhir memerlukan anda menghantar HTML dalam pelbagai akaun untuk memeriksa reka bentuk anda terhadap pelbagai pelanggan e -mel.

Menghantar kod melalui e -mel agak rumit, kerana kebanyakan pelanggan tidak membenarkan anda menyusun e -mel dengan menampal kod HTML ke dalam badan (satu -satunya yang saya tahu ialah Thunderbird). Tetapi setiap ujian memerlukan banyak operasi untuk menulis e -mel, CSS sebaris, kod tampal, dll.

Jika anda mempunyai akaun testbed (litmus, e -mel pada asid, monitor kempen, atau lain -lain), anda boleh memudahkan tugas ujian akhir dengan mengemukakan kod sebaris ke testbed, tetapi untuk ujian yang lebih tepat, anda masih perlu menghantar kod dengan mel. Pada masa lalu, saya menggunakan skrip PHP kecil untuk menghantar e -mel ujian, yang menyelamatkan beberapa waktu, tetapi masih memerlukan pengulangan tugas -tugas tertentu.

Kembali ke CSS, anda mungkin perlu bekerja pada dua fail: satu untuk inline dan satu untuk membenamkan (untuk pelanggan yang menyokong pertanyaan media).

Anda perlu mengedit CSS terus ke dalam fail HTML, kemudian mulakan alat inline (seperti alat inline MailChimp), dan akhirnya membenamkan CSS kedua ke dalam fail inline (ia berasa menjengkelkan untuk menulisnya!)

sekarang kita boleh menyemak pelan aliran kerja kami dengan lebih terperinci:

Untuk mendapatkan aliran kerja yang benar -benar cekap, banyak masalah masih belum dapat diselesaikan, dengan langkah -langkah yang lebih berulang -ulang daripada langkah -langkah kreatif, yang jarang membawa kepada hasil yang baik.

bernasib baik, kami masih mempunyai beberapa cara untuk digunakan: preprocessor dan pelari tugas.

Tambah HTML dan CSS Preprocessor

Apabila saya mula menggunakan preprocessors, saya segera menyedari betapa bergunanya untuk pembangunan e -mel. Bagi kedua -dua HTML dan CSS, preprocessors dengan mudah dapat memudahkan keperluan untuk kod yang panjang (terutama HTML).

Saya terutamanya menggunakan Jade untuk HTML dan kurang untuk CSS, tetapi anda boleh memilih teknologi yang anda suka. Jade sangat berguna apabila berurusan dengan kod pendua dan mengelirukan, seperti jadual bersarang. Sila lihat contoh meja bersarang tiga lapisan berikut.

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

kod jade yang menghasilkan kod yang sama adalah seperti berikut:

table(width="100%" )
  tbody
    tr
      td(width="100%")
        table( align="center")
          tbody
            tr
              td(width="100%")
                table(width="100%")
                  tbody
                    tr
                      td cell 1
                      td cell 2
                      td cell 3

Seperti yang anda lihat, tidak ada masalah lagi dengan tag yang tidak terkawal, kod itu mudah dibaca.

Dengan Jade, anda boleh membuat templat kompleks dan membina coretan kod perpustakaan anda sendiri untuk menggunakan semula kod dalam lebih banyak projek. Untuk kurang atau sass, anda boleh melakukan perkara yang sama.

Anda boleh menyusun fail dengan Gulp atau Grunt, tetapi untuk pratonton cepat kerja anda, saya dapati bahawa Coda dan CodeKit menyediakan penyelesaian terbaik.

Tugas "Ujian Tempatan" dalam aliran kerja kami memberikan kami maklum balas awal mengenai kerja dan, secara penting, ia tidak memerlukan tindakan lain.

CodeKit menyusun jed kami dan kurang fail pada SAVE dan boleh pratonton projek anda dalam masa nyata. Coda, sebaliknya, membolehkan anda mengedit fail dan pratonton fail yang disusun semula secara automatik dalam tetingkap yang berasingan:

Semua langkah -langkah ini adalah automatik sepenuhnya, dan anda boleh memfokuskan kerja anda pada reka bentuk dan bukannya tugas -tugas yang kurang menyeronokkan, berulang -ulang.

Sekarang kita mempunyai fail Jade dan kurang untuk penciptaan, serta menyusun fail HTML dan CSS untuk pratonton. Langkah seterusnya ialah meletakkan semuanya bersama -sama untuk ujian akhir.

ujian cepat dengan gulp

Saya telah melihat banyak skrip Gulp atau Grunt untuk mengautomasikan beberapa langkah terakhir aliran kerja. NPM menawarkan banyak penyelesaian, tetapi pada akhirnya saya memilih pakej Builder E -mel Gulp. Pakej ini adalah versi Gulp projek yang lebih besar, dan ia juga mempunyai versi yang mengerang jika anda lebih suka.

Pembina e -mel membolehkan anda untuk menyamakan atau membenamkan fail CSS, menguji menggunakan API Litmus, dan menghantar e -mel ujian tambahan.

Untuk menggunakan pembina e -mel, sudah tentu anda perlu memasang Gulp. Saya telah menutup ini dalam jawatan saya "Sesuaikan ikon bootstrap dengan Gulp", jadi anda boleh menyemak siaran untuk mendapatkan bantuan. Di samping itu, anda boleh membaca artikel Etienne Margraff mengenai aliran kerja Gulp dan Grunt.

Di samping pembina e-mel, kami juga akan menggunakan pakej Gulp-Replace, jadi anda perlu memasangnya juga.

Seperti setiap tugas Gulp, kita mesti menetapkan gulpfile.js:

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

Pertama, kami menyertakan semua pakej yang diperlukan dan menetapkan empat pembolehubah:

• current_date adalah rentetan yang mewakili tarikh semasa;
• email_subject
• remote_imgs_basepath adalah URL folder jauh yang mengandungi imej kami. Saya menggunakannya untuk melakukan ujian tempatan dengan menetapkan laluan relatif untuk imej (supaya saya dapat dengan mudah membuat semua perubahan yang diperlukan), tetapi ujian akhir (dan menghantar tugas) memerlukan imej untuk dimuat naik ke folder jauh, jadi saya gunakan Gulp menggantikan untuk mendapatkan semua sifat src berubah menjadi remote_imgs_basepath
• email_builder_options adalah objek yang digunakan untuk mengkonfigurasi pembina e -mel

Dalam contoh ini, objek Email_Builder_Options mempunyai tiga elemen, dan anda boleh menyemak halaman-Builder-Core halaman untuk senarai lengkap semua pilihan yang tersedia.

Elemen pertama EncodeSpecialChars memastikan bahawa semua aksara khas dikodkan ke dalam bentuk angka HTML mereka.

Elemen EmailTest digunakan untuk menyediakan ujian e -mel. Ia memerlukan beberapa parameter:

• E -mel: Alamat e -mel yang dipisahkan koma yang kami hantar e -mel ujian. Saya mempunyai akaun untuk setiap perkhidmatan e -mel yang perlu diuji (Gmail, Outlook, Yahoo, dan lain -lain) dengan cepat menyemaknya di halaman mel web dan aplikasi mudah alih mereka.
• Subjek: Subjek mel (perhatikan bahawa saya telah menambah pembolehubah Current_Date untuk dengan cepat mengenal pasti versi yang saya sedang kerjakan).
• Pengangkutan: Pengirim perlu melaksanakan parameter

Jika anda menggunakan Gmail sebagai parameter pengangkutan, anda perlu mengaktifkan "membenarkan aplikasi kurang selamat" dalam tetapan akaun Google anda, jika tidak, tugas penghantaran akan gagal (lebih baik tidak menggunakan akaun peribadi anda untuk ini):

Parameter ketiga membolehkan anda membuat ujian pada platform litmus (tentu saja, anda memerlukan akaun litmus). Anda mesti menunjukkan parameter akaun anda, topik pilihan (yang akan digunakan untuk ujian dikumpulkan jika anda melakukan ujian berganda), dan senarai pelanggan e -mel untuk diuji.

Untuk menambah pelanggan, anda mesti menggunakan untuk menguji kod aplikasi . Anda boleh mendapatkan kod ini dari medan Application_code dari fail https://litmus.com/emails/clients.xml (perhatikan bahawa anda mesti log masuk untuk mengakses fail ini).

Dalam contoh di atas, garis

<table> width="100%" id="wrapper">
  <tbody>>
    <tr>>
      <td> width="100%">
        <table> align="center" class="header">
          <tbody>>
            <tr>>
              <td> width="100%">
                <table> width="100%">
                  <tbody>>
                    <tr>>
                      <td>>cell 1</td>>
                      <td>>cell 2</td>>
                      <td>>cell 3</td>>
                    </tr>>
                  </tbody>>
                </table>>
              </td>>
            </tr>>
          </tbody>>
        </table>>
      </td>>
    </tr>>
  </tbody>>
</table>>

Beritahu litum untuk menguji e -mel kami menggunakan aplikasi Gmail (Android), Gmail (Explorer), dan iPhone 5S (iOS7).

Hasilnya boleh dilihat pada litmus, seperti yang buatan tangan:

Sudah tentu, jika anda hanya ingin melakukan ujian e -mel, anda boleh mengeluarkan parameter litmus dari email_builder_options.

beberapa baris terakhir gulpfile melakukan semua kerja:

Kami mula -mula memberitahu Gulp untuk melakukan kerja kami menggunakan fail explore_and_taste.html (ini adalah HTML yang dihasilkan oleh CodeKit dari fail Jade kami, yang kami gunakan untuk pratonton pertama)
Menggunakan modul
• , semua laluan tempatan akan digantikan dengan laluan jauh yang kami tetapkan lebih awal (menggantikan (/src = "imgs // g, 'src ="' remote_imgs_basepath)) Akhirnya, laksanakan tugas e-mel, hantar ujian ke Litmus dan alamat e-mel, dan daftar fail siap sedia.
di manakah fail CSS?

Pembina e -mel benar -benar memudahkan tugas ini. Anda boleh menguruskannya dengan hanya menambahkan atribut data ke pautan atau tag gaya:

pautan atau tag gaya tanpa atribut data akan digariskan

• Jika mereka mempunyai atribut yang ditimbulkan data, peraturan CSS akan dibenamkan
• Akhirnya, data-embed-Ignore membolehkan anda menetapkan beberapa peraturan CSS untuk tujuan pembangunan sahaja (mereka akan diabaikan apabila diproses).
Begitu juga, Coda memudahkan pemprosesan Gulp, yang membolehkan anda menggunakan aplikasi terminal dalamannya:

Kesimpulan

Sekarang kita akhirnya dapat menjadualkan aliran kerja kita:

Anda boleh menyesuaikan setiap langkah mengikut keperluan anda, gunakan editor lain dan bukannya CodeKit, gunakan Grunt dan bukannya Gulp, gunakan SASS dan bukannya kurang, dan banyak lagi. Tidak kira apa teknologi yang anda pilih, aliran kerja semacam itu benar -benar dapat meningkatkan produktiviti anda.

Jika anda mempunyai aliran kerja e -mel HTML anda sendiri dan bagaimana ia berbeza dari yang diliputi dalam tutorial ini, sila beritahu saya dalam komen.

soalan yang sering ditanya mengenai pembangunan e -mel html

Apakah amalan terbaik untuk pembangunan e -mel HTML?

Pembangunan e-mel HTML adalah proses yang kompleks yang memerlukan pemahaman yang mendalam mengenai prinsip pengekodan dan reka bentuk. Sesetengah amalan terbaik termasuk menggunakan CSS sebaris untuk memastikan gaya anda digunakan dengan betul, menggunakan jadual untuk susun atur untuk memastikan keserasian dengan semua pelanggan e -mel, dan menguji e -mel anda pada pelbagai platform dan peranti untuk memastikan mereka berada di mana sahaja kelihatan baik. Selain itu, adalah penting untuk memastikan kod ringkas dan teratur, gunakan tag alt untuk imej, dan sertakan versi teks biasa e -mel untuk pengguna yang tidak boleh atau tidak mahu melihat e -mel HTML.

Bagaimana saya belajar pembangunan e -mel html?

Terdapat banyak sumber yang tersedia untuk pembelajaran pembangunan e -mel HTML. Kursus dalam talian yang ditawarkan oleh Udemy dan Skillshare dapat memberikan pengenalan yang komprehensif kepada topik ini. Di samping itu, blog dan artikel di SitePoint dan e -mel mengenai asid dapat memberikan tips dan pandangan yang berharga. Amalan juga kritikal - cuba membina e -mel anda sendiri dari awal untuk memahami prosesnya.

Apa alat pembangunan e -mel html yang saya perlukan?

Pembangunan e -mel HTML memerlukan editor teks untuk menulis kod, pelanggan e -mel untuk menguji e -mel, dan mungkin alat reka bentuk untuk membuat susun atur e -mel. Untuk alat ini, terdapat banyak pilihan percuma dan berbayar yang tersedia, jadi anda boleh memilih yang paling sesuai dengan keperluan dan anggaran anda.

bagaimana membuat e -mel html saya responsif?

Membuat responsif e -mel HTML anda termasuk menggunakan pertanyaan media untuk menyesuaikan susun atur anda berdasarkan saiz skrin peranti yang anda lihat e -mel anda. Ini mungkin termasuk menukar saiz imej, menyesuaikan susun atur jadual, dan sebagainya. Terdapat banyak sumber yang tersedia dalam talian untuk membimbing anda melalui proses tersebut.

Apakah beberapa cabaran biasa dalam pembangunan e -mel HTML?

Beberapa cabaran umum dalam pembangunan e -mel HTML termasuk pengendalian ketidakkonsistenan antara pelanggan e -mel yang berbeza, memastikan e -mel anda kelihatan hebat pada pelbagai peranti, dan menyimpan kod anda ringkas dan teratur. Di samping itu, mengimbangi keperluan reka bentuk yang menarik dengan batasan pengekodan e -mel juga boleh mencabar.

bagaimana untuk menguji e -mel html saya?

Menguji e -mel HTML anda adalah bahagian penting dalam proses pembangunan. Ini boleh dilakukan dengan menghantar e -mel kepada diri sendiri dan melihatnya pada peranti dan pelanggan e -mel yang berbeza. Terdapat juga beberapa alat dalam talian yang boleh mensimulasikan peranti dan pelanggan e -mel yang berbeza untuk anda.

Bagaimana menggunakan borang dalam pembangunan e -mel HTML?

Jadual adalah alat utama dalam pembangunan e -mel HTML kerana mereka menyediakan cara untuk membuat susun atur yang serasi dengan semua pelanggan e -mel. Ini termasuk mewujudkan struktur seperti grid untuk e-mel anda menggunakan tag jadual HTML dan kemudian meletakkan kandungan anda dalam struktur ini.

Bagaimana menggunakan CSS sebaris dalam pembangunan e -mel HTML?

inline CSS melibatkan meletakkan gaya CSS anda secara langsung dalam tag HTML, dan bukannya dalam lembaran yang berasingan. Ini penting dalam pembangunan e -mel HTML, kerana sesetengah pelanggan e -mel tidak menyokong stylesheet luaran. Untuk menggunakan CSS sebaris, hanya masukkan gaya anda dalam sifat "gaya" tag HTML.

Bagaimana untuk memasukkan imej dalam e -mel HTML saya?

Imej boleh dimasukkan ke dalam e -mel HTML dengan menentukan URL imej menggunakan tag "IMG" dan atribut "SRC". Ia juga penting untuk memasukkan atribut "alt" untuk memberikan penerangan teks imej kepada pengguna yang tidak boleh atau tidak mahu melihatnya.

Bagaimana untuk membuat versi teks biasa e -mel HTML?

Membuat versi teks biasa e -mel HTML termasuk mengeluarkan semua tag HTML dan meninggalkan hanya kandungan teks. Ini boleh dilakukan secara manual, atau terdapat beberapa alat dalam talian yang boleh melakukan ini untuk anda. Versi teks biasa yang mengandungi e -mel adalah penting bagi pengguna yang memilih untuk tidak melihat e -mel HTML.

Atas ialah kandungan terperinci Aliran kerja pembangunan e -mel html saya sekarang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!