برنامه نویسی

چگونه با HTML و CSS یک ایمیل سفارشی پاسخگو بسازیم

ek3nk4r 2023-05-12

0 102 خواندن این مطلب 9 دقیقه زمان میبرد

چگونه با HTML و CSS یک ایمیل سفارشی پاسخگو بسازیم

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

فهرست مطالب

چگونه با HTML و CSS یک ایمیل سفارشی پاسخگو بسازیم

تصویر جلد مقاله

پيش نياز

درک اولیه HTML و CSS.
یک ویرایشگر متن برای نوشتن کد شما، مانند Sublime Text، Atom یا Visual Studio Code.
یک مرورگر وب برای آزمایش ایمیل شما، مانند Google Chrome، Mozilla Firefox یا Safari.

معرفی

ایمیل ها برای دستیابی به مخاطبان و تبلیغ محصولات یا خدمات شما قدرتمند هستند. در دنیای امروز، دستگاه‌ها و اندازه‌های صفحه‌نمایش متعددی در دسترس هستند، بنابراین اطمینان از ظاهر خوب ایمیل‌های شما در همه انواع دستگاه‌ها ضروری است.

ایجاد یک ایمیل سفارشی پاسخگو با استفاده از HTML و CSS آنقدرها که برخی فکر می کنند با ابزار و دانش مناسب، چالش برانگیز نیست. در این راهنما، من شما را با فرآیند گام به گام ساختن یک ایمیل سفارشی پاسخگو با استفاده از HTML و CSS و آزمایش آن بر روی دستگاه های مختلف آشنا می کنم.

ایمیل سفارشی پاسخگو چیست؟

ایمیل سفارشی ایمیلی است که با برند یا پیامی خاص طراحی شده است و ممکن است شامل گرافیک، فونت و قالب بندی سفارشی باشد.

یک ایمیل سفارشی پاسخگو به گونه‌ای است که طراحی و طرح‌بندی آن برای تناسب با اندازه صفحه نمایش دستگاه و جهتی که در آن مشاهده می‌شود، اصلاح می‌شود. این تضمین می کند که ایمیل بدون توجه به اندازه دستگاه یا صفحه نمایش، خوانا و از نظر بصری جذاب باشد.

طرح‌های واکنش‌گرا از طریق کدهای HTML و CSS به دست می‌آیند که طرح‌بندی و قالب‌بندی ایمیل را بر اساس اندازه صفحه نمایش دستگاه تنظیم می‌کند. این ممکن است شامل تنظیم اندازه فونت، تصاویر، و سایر عناصر طراحی متناسب با فضای موجود باشد.

برنامه ریزی برای ایمیل سفارشی شما

قبل از شروع کدنویسی ایمیل خود، برنامه ریزی و تعیین هدف آن ضروری است. در اینجا چند مرحله وجود دارد که باید هنگام برنامه ریزی ایمیل خود اتخاذ کنید:

اولین گام، مشخص کردن واضح هدف اصلی ایمیل است. این می تواند برای تبلیغ یک محصول یا خدمات، اطلاع رسانی به مخاطب در مورد یک رویداد یا به روز رسانی، درخواست یک جلسه یا بازخورد، یا به سادگی تشکر از شما باشد. هدف ایمیل لحن، زبان و ساختار پیام را تعیین می کند.

به عنوان مثال: هدف ایمیلی که در این آموزش می سازیم، معرفی خودم به مشترکین جدید خبرنامه من است.

ثانیا، شما باید مشخص کنید که مخاطبان ایمیل چه کسانی هستند. این شامل درک علایق، ترجیحات و رفتارهای مخاطبان هدف است. به عنوان مثال، اگر هدف ایمیل تبلیغ یک محصول باشد، مخاطب هدف ممکن است مشتریان فعلی یا علاقه‌مندان به محصولات مشابه باشند. اگر ایمیل مربوط به یک رویداد باشد، مخاطب هدف ممکن است افرادی باشند که قبلاً در رویدادهای مشابه شرکت کرده‌اند یا به آن موضوع علاقه نشان داده‌اند.

برای این آموزش، مخاطبان این ایمیل، مشترکین جدید خبرنامه من هستند که برخی از مقالات من را خوانده اند و علاقه نشان داده اند که هر زمان که مقاله جدیدی منتشر می کنم مطلع شوند. آنها احتمالاً مبتدیان فناوری و حرفه ای خواهند بود که به آخرین روندهای هوش مصنوعی، بلاک چین و توسعه نرم افزار علاقه مند هستند.

مرحله سوم ترسیم ساختار ایمیل است. این شامل تصمیم گیری در مورد بخش های ایمیل، مانند سرصفحه، بدنه و پاورقی است. همچنین ممکن است شامل تصاویر، پیوندها یا سایر عناصر چند رسانه ای باشد. ساختار ایمیل باید به راحتی قابل خواندن و پیگیری باشد، با فراخوان‌های واضح و اطلاعات مرتبط برای مخاطب هدف.

برای این آموزش، ساختار ایمیل به صورت زیر خواهد بود:

سرصفحه: هدر شامل نام من و یک خط موضوع جذاب است که توجه گیرنده را جلب می کند.
بدن: بدن شامل معرفی خودم است. همچنین شامل تصاویر و یک دکمه فراخوان برای اقدام است که گیرنده را برای اطلاعات بیشتر به صفحه وبلاگ یا وب سایت من هدایت می کند.
پاورقی: پاورقی شامل اطلاعات تماس من، پیوندهای رسانه های اجتماعی و گزینه لغو اشتراک است.

هدف، مخاطبان هدف، و ساختار ایمیل همه عوامل مهمی هستند که باید در ایجاد ارتباطات ایمیل موثر در نظر گرفته شوند. با درک این عناصر و تنظیم کردن پیام بر اساس آن، می‌توانید شانس خوانده شدن، درک شدن و عمل به ایمیل خود توسط گیرنده را افزایش دهید.

ایجاد ساختار HTML ایمیل شما

ساختار HTML اساس ایمیل شماست. برای اطمینان از بهینه‌سازی آن برای همه دستگاه‌ها، کدنویسی صحیح آن مهم است. در اینجا مراحلی وجود دارد که باید هنگام کدنویسی ساختار HTML ایمیل خود دنبال کنید:

از یک ساختار HTML اولیه استفاده کنید: ایمیل شما باید از یک ساختار HTML اصلی که شامل تگ های سر و بدن است استفاده کند. بخش head باید شامل عنوان، متا تگ ها و هر شیوه نامه ای باشد که استفاده می کنید.

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="utf-8"> 
         <meta name="viewport" content="width=device-width"> 
         <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
         <meta name="x-apple-disable-message-reformatting"> 
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">     
         <title>Custom Email Tutorial</title>
     </head>

         <style></style>

         <body></body>
     </html>

هدر ایمیل را کدنویسی کنید: هدر ایمیل شما باید شامل لوگو، لینک های پیمایش و هر اطلاعات دیگری باشد که می خواهید در آن قرار دهید.

     <!--This goes inside the body tag-->
         <center>
         <div class="email-container">
                   <table role="presentation">
                       <tr>
                           <td class="logo" style="text-align: center;">
                             <h1><a href="https://jamesajayi.hashnode.dev">Blog Introduction</a></h1>
                           </td>
                       </tr>
                   </table>
         </div>
         </center>

کد متن ایمیل: متن ایمیل باید شامل اطلاعات اولیه ای باشد که قصد دارید به خواننده منتقل کنید.

     <!--This goes inside the body tag just after the email header above-->
     <table role="presentation">
                     <tr>
                         <td>
                             <div class="text">
                                 <h2>Thank you so much for subscribing to my newsletter!</h2>
                             </div>
                         </td>
                     </tr>
                     <tr>
                         <td>
                               <div class="text-author">
                                   <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1682512999217/80KL_VPxD.jpg?w=500&h=500&fit=crop&crop=faces&auto=compress,format&format=webp" alt="picture">
                                   <h3 class="name"></h3>
                                   <span class="position">Technical Writer, James Ajayi's Blog</span>
                                    <p><a href="https://https://twitter.com/ajayijames_" class="btn btn-primary">Introduce yourself too</a></p>
                                    <p><a href="https://https://twitter.com/ajayijames_" class="btn-custom">Skip introduction</a></p>
                                </div>
                           </td>
                         </tr>
                 </table>

پاورقی ایمیل را کدنویسی کنید: پاورقی ایمیل شما باید شامل اطلاعات تماس، پیوندهای رسانه های اجتماعی و هر اطلاعات مهم دیگری باشد که می خواهید وارد کنید.

     <!--This goes inside the body tag just after the email body above-->
     <table role="presentation">
               <tr>
               <td class="bg_light footer email-section">
                 <table>
                     <tr>
                     <td>
                       <table role="presentation">
                         <tr>
                           <td>
                               <h3 class="heading">About</h3>
                               <p>I enjoy writing technical content to ease user experience.</p>
                           </td>
                         </tr>
                       </table>
                     </td>
                     <td>
                       <table role="presentation">
                         <tr>
                           <td>
                               <h3 class="heading">Contact Info</h3>
                               <ul>
                                         <li><span class="text">Remote</span></li>
                                         <li><span class="text">+123-4567-890</span></li>
                                       </ul>
                           </td>
                         </tr>
                       </table>
                     </td>
                     <td >
                       <table role="presentation">
                         <tr>
                           <td>
                               <h3 class="heading">Visit my Blog</h3>
                               <ul>
                                         <li><a href="https://jamesajayi.hashnode.dev">Home</a></li>
                                         <li><a href="https://jamesajayi.hashnode.dev">About</a></li>
                                         <li><a href="https://jamesajayi.hashnode.dev">Services</a></li>
                                         <li><a href="https://jamesajayi.hashnode.dev">Blog</a></li>
                                       </ul>
                           </td>
                         </tr>
                       </table>
                     </td>
                   </tr>
                 </table>
               </td>
             </tr>
             <tr>
               <td class="bg_light">
                   <p>Do you want to stop recieving my mail? <a href="https://linkedin.com/in/jamesajayi-">Unsubscribe here</a></p>
               </td>
             </tr>
           </table>

سبک ایمیل خود را با CSS

هنگامی که ساختار HTML ایمیل خود را کدنویسی کردید، نوبت به استایل دادن به آن با CSS می رسد. در اینجا مراحلی وجود دارد که باید هنگام استایل دادن به ایمیل با CSS دنبال کنید:

از CSS درون خطی استفاده کنید: CSS درون خطی موثرترین راه برای استایل دادن به ایمیل شما است. این تضمین می کند که سبک های شما به طور مداوم در همه دستگاه ها اعمال می شود.

     <style>

      html,body {
         margin: 0 auto;
         padding: 0;
         height: 100%;
         width: 100%;
         background: #f1f1f1;
     }

     /*BUTTON*/
     .btn{
         padding: 10px 15px;
         display: inline-block;
     }
     .btn.btn-primary{
         border-radius: 5px;
         background: #ff0000;
         color: #ffffff;
     }
     .btn.btn-white{
         border-radius: 5px;
         background: #ffffff;
         color: #000000;
     }
     .btn.btn-white-outline{
         border-radius: 5px;
         background: transparent;
         border: 1px solid #fff;
         color: #fff;
     }
     .btn.btn-black-outline{
         border-radius: 0px;
         background: transparent;
         border: 2px solid #000;
         color: #000;
         font-weight: 700;
     }
     .btn-custom{
         color: rgba(0,0,0,.3);
         text-decoration: underline;
     }

     h1,h2,h3,h4,h5,h6{
         font-family: 'Roboto', sans-serif;
         color: #095034;
         margin-top: 0;
         font-weight: 400;
     }

     body{
         font-family: 'Roboto', sans-serif;
         font-weight: 400;
         font-size: 15px;
         line-height: 1.8;
         color: rgba(16, 76, 40, 0.918);
     }

     a{
         color: #ff4507;
     }

     /*LOGO*/

     .logo h1{
         margin: 0;
     }
     .logo h1 a{
         color: #095034;
         font-size: 24px;
         font-weight: 700;
         font-family: 'Roboto', sans-serif;
     }

     /*HERO*/
     .hero{
         position: relative;
         z-index: 0;
     }

     .hero .text{
         color: rgba(0,0,0,.3);
     }
     .hero .text h2{
         color: #000;
         font-size: 34px;
         margin-bottom: 0;
         font-weight: 200;
         line-height: 1.4;
     }
     .hero .text h3{
         font-size: 24px;
         font-weight: 300;
     }
     .hero .text h2 span{
         font-weight: 600;
         color: #000;
     }

     .text-author{
         bordeR: 1px solid rgba(0,0,0,.05);
         max-width: 50%;
         margin: 0 auto;
         padding: 2em;
     }
     .text-author img{
         border-radius: 50%;
         padding-bottom: 20px;
     }
     .text-author h3{
         margin-bottom: 0;
     }
     ul.social{
         padding: 0;
     }
     ul.social li{
         display: inline-block;
         margin-right: 10px;
     }

     /*FOOTER*/

     .footer{
         border-top: 1px solid rgba(0,0,0,.05);
         color: rgba(0,0,0,.5);
     }
     .footer .heading{
         color: #000;
         font-size: 15px;
     }
     .footer ul{
         margin: 0;
         padding: 0;
     }
     .footer ul li{
         list-style: none;
         margin-bottom: 10px;
     }
     .footer ul li a{
         color: rgb(132, 132, 132);
     }
     /* What it does: Stops email clients resizing small text. */
     * {
         -ms-text-size-adjust: 100%;
         -webkit-text-size-adjust: 100%;
     }

     /* What it does: Centers email on Android 4.4 */
     div[style*="margin: 16px 0"] {
         margin: 0;
     }

     /* What it does: Fixes webkit padding issue. */
     table {
         border-spacing: 0;
         border-collapse: collapse;
         table-layout: fixed;
         margin: 0 auto;
     }

     img {
         -ms-interpolation-mode:bicubic;
     }

     a {
         text-decoration: none;
     }

     *[x-apple-data-detectors],  /* iOS */
     .unstyle-auto-detected-links *,
     .aBn {
         border-bottom: 0;
         cursor: default;
         color: inherit;
         text-decoration: none;
         font-size: inherit;
         font-family: inherit;
         font-weight: inherit;
         line-height: inherit;
     }

     .a6S {
         display: none;
         opacity: 0.01;
     }

     .im {
         color: inherit;
     }

     img.g-img + div {
         display: none;
     }

     .email-section{
         padding:2.5em;
     }
     </style>

استفاده از پرسش‌های رسانه‌ای: پرسش‌های رسانه به ایجاد سبک‌های مختلف برای اندازه‌های مختلف صفحه کمک می‌کنند. این تضمین می کند که ایمیل شما برای همه دستگاه ها بهینه شده است.

     /* This adjusts the email design on iPhone 4, 4S, 5, 5S, 5C, and 5SE */
     @media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
         u ~ div .email-container {
             min-width: 320px;
         }
     }

     /* This adjusts the email design on iPhone 6, 6S, 7, 8, and X */
     @media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
         u ~ div .email-container {
             min-width: 375px;
         }
     }

     /* This adjusts the email design on iPhone 6+, 7+, and 8+ */
     @media only screen and (min-device-width: 414px) {
         u ~ div .email-container {
             min-width: 414px;
         }
     }

ساده نگه دارید: سبک های خود را ساده و ثابت نگه دارید. از یک پالت رنگ محدود استفاده کنید و از استفاده از فونت های زیاد یا اندازه فونت خودداری کنید.

     .primary{
         background: #062917;
     }
     .bg_white{
         background: #ffffff;
     }
     .bg_light{
         background: #f7fafa;
     }
     .bg_black{
         background: #000000;
     }
     .bg_dark{
         background: rgba(0,0,0,.8);
     }

در زیر نتیجه نهایی کد HTML و CSS بالا آمده است

نتیجه نهایی از کد HTML و CSS

تست ایمیل سفارشی شما

هنگامی که ایمیل خود را کدگذاری کردید و آن را با CSS استایل کردید، آزمایش آن در دستگاه های مختلف برای اطمینان از ظاهر عالی آن حیاتی است. در اینجا چند راه برای آزمایش ایمیل شما وجود دارد:

از ابزارهای تست استفاده کنید: بسیاری از ابزارهای تست مانند Litmus و Email on Acid به شما این امکان را می دهند که ایمیل خود را در دستگاه های مختلف و کلاینت های ایمیل آزمایش کنید. این ابزارها همچنین به شما نشان می‌دهند که ایمیل شما در اندازه‌ها و وضوح‌های مختلف صفحه نمایش چگونه به نظر می‌رسد.
تست بر روی چندین دستگاه: مهم است که ایمیل خود را در چندین دستگاه از جمله تلفن های هوشمند، تبلت ها و دسکتاپ ها آزمایش کنید. این تضمین می کند که ایمیل شما برای همه دستگاه ها بهینه شده است.
تست بر روی چندین سرویس گیرنده ایمیل: سرویس گیرنده های ایمیل ایمیل ها را متفاوت ارائه می کنند، بنابراین مهم است که آنها را روی چندین سرویس گیرنده ایمیل مانند Gmail، Outlook و Apple Mail آزمایش کنید. این تضمین می کند که ایمیل شما بدون در نظر گرفتن مشتری ایمیلی که مخاطبان شما از آن استفاده می کنند عالی به نظر می رسد.

برای این آموزش، من از Litmus برای آزمایش نحوه نمایش ایمیل سفارشی در Outlook و Gmail استفاده کردم.

برای استفاده از Litmus، باید یک حساب کاربری ایجاد کنید، پس از آن وارد سیستم شوید و سپس روی «ایجاد یک ایمیل آزمایشی جدید» کلیک کنید. شما به صفحه ای هدایت می شوید که در آن باید آدرس های ایمیلی را که می خواهید برای آزمایش ایمیل خود استفاده کنید، موضوع ایمیل، کد HTML خود و کد CSS درون خطی را وارد کنید. سپس بر روی “ارسال ایمیل” کلیک کنید. ایمیل مستقیماً به آدرس‌های ایمیلی که وارد کرده‌اید ارسال می‌شود تا ببینید چه شکلی است. ویژگی‌های خوب دیگری در نسخه پولی Litmus وجود دارد که می‌توانید برای به دست آوردن نتایج دلخواه، آن‌ها را بررسی کنید.

صفحه اصلی تورنسل

روی Test HTML Email کلیک کنید

برای تست ایمیل، جزئیات را وارد کنید

در زیر چیزی است که من در ایمیل خود از Litmus دریافت کردم

ایمیل ارسال شده از Litmus

نتیجه

در این راهنما، مراحل ایجاد یک ایمیل سفارشی پاسخگو، از برنامه ریزی و ساخت ایمیل تا آزمایش آن در دستگاه های مختلف را طی کرده اید.

با دنبال کردن این مراحل، می‌توانید یک ایمیل سفارشی ایجاد کنید که در هر دستگاه و کلاینت ایمیلی عالی به نظر می‌رسد. به یاد داشته باشید که ایمیل خود را برای همه دستگاه ها ساده، سازگار و بهینه نگه دارید. با استفاده از این نکات، می توانید ایمیل های موثر و جذابی ایجاد کنید که مخاطبان شما را دوست داشته باشند.

در اینجا می توانید به کد نمونه استفاده شده برای این آموزش دسترسی داشته باشید.

برای آموزش های بیشتر در مورد ساخت طرح های واکنش گرا با HTML و CSS، freeCodeCamp را بررسی کنید.

شما را در مقاله بعدی می بینیم!