ساختن قالب‌های ایمیل بسیار سخت است. ساختن ایمیل‌های واکنش‌گرا حتی سخت‌تر است. خوشبختانه، افراد مهربان در Zurb یک چارچوب فوق العاده ایجاد کرده اند که باعث می شود process ساخت ایمیل های پاسخگو راحت تر از همیشه.

بنیاد برای ایمیل (قبلاً Ink) یک چارچوب مناسب برای طراح/توسعه‌دهنده مدرن است که به دنبال استفاده از ابزارها و فناوری‌های امروزی برای ساخت قالب‌های ایمیل پاسخگو برای فردا است.

اعداد دروغ نمی گویند

به گفته زورب، 54 درصد از ایمیل ها باز می شوند روی یک دستگاه تلفن همراه و این تعداد احتمالا افزایش می یابد. با وجود این رقم، نیاز به یک قالب ایمیل پاسخگو ضروری است. زورب همچنین بیان می کند که 75 درصد از کاربران جیمیل از طریق دستگاه تلفن همراه خود به حساب کاربری خود دسترسی دارند. صرف نظر از نوع ایمیل ارسالی، Foundation for Emails شما را تحت پوشش قرار داده است. در واقع، هنگامی که سازنده پروژه مفید آنها را راه‌اندازی کردید، با الگوهای نمونه مواجه می‌شوید تا به محتوای دلخواه خود مراجعه کنید یا سفارشی کنید.

شروع شدن

در طول این مقاله، من به شما نشان خواهم داد که چگونه با استفاده از یک الگوی سفارشی که برای آژانس برندسازی کوچک خود طراحی کرده‌ام، با Foundation for Emails راه‌اندازی کنید. مانند هر چارچوب دیگری، ضروری است که به آن ارجاع دهید مستندات. من به عنوان زورب به تمام جزئیات نمی پردازم قبلا دارد اما این راهنما برای شما کافی خواهد بود تا به زمین بنشینید.

Source کد

شما می توانید کد منبع نهایی این پروژه را پیدا کنید روی GitHub.

نصب و راه اندازی

برای شروع می توانید استفاده از سنتی را انتخاب کنید CSS یا Sass. من استفاده خواهم کرد Sass. دلایل زیادی وجود دارد که توصیه می کنم این مسیر را بر خلاف مسیرهای سنتی بروید CSS. این دلایل عبارتند از:

• کنترل بیشتر بر سبک های بصری چارچوب
• یک ساخت کامل process از جمله کامپایل Sass و فشرده سازی تصویر
• یک سفارش HTML زبانی که با نام inky شناخته می شود، به این معنی که شما مجبور نیستید طرح بندی های جدول را با دست بنویسید.
• یک خط داخلی داخلی برای توزیع CSS شما به عنوان CSS درون خطی
• بارگذاری مجدد زنده
• قالب بندی دسته

توجه داشته باشید Sass نسخه نیاز دارد Node.js برای اجرا قبل از رفتن حتما آن را نصب کنید.

Foundation CLI را نصب کنید و یک پروژه جدید ایجاد کنید

نصب process از بنیاد CLI استفاده می کند. برای استفاده از آن، برنامه خط فرمان انتخابی خود را باز کرده و عبارت زیر را تایپ کنید:

Bash $ npm install --global foundation-cli

اگر با هر گونه خطای مجوز مواجه شدید، سعی کنید همان دستور را با پیشوند اضافه کنید sudo. از شما خواسته می شود رمز عبور سیستم خود را وارد کنید. با نصب بنیاد CLI، اکنون می توانید یک پروژه بنیادی خالی برای ایمیل ایجاد کنید. حتما به (cdinto) پوشه ای که می خواهید پروژه را در آن نصب کنید و سپس دستور زیر را اجرا کنید:

Bash $ foundation new --framework emails

CLI باید نام پروژه را از شما بخواهد (من با مال خودم تماس گرفتم خبرنامه). این نام همان پوشه ای است که کل پروژه با آن برچسب گذاری می شود. پس از تنظیم، تعدادی از وابستگی ها نصب می شوند. (دانلود ممکن است کمی طول بکشد.) پس از اتمام دانلود باید موارد زیر را مشاهده کنید:

Bash You’re all set!
✓ New project folder created.
✓ Node modules installed.
✓ Bower components installed.
Now run foundation watch while inside the <projectname> folder.

سی دی با تایپ کردن، وارد پوشه پروژه خود شوید خبرنامه سی دی. ممکن است نام پروژه شما در مقایسه با پروژه من متفاوت باشد، اما اگر دنبال می‌کنید، باید شروع به کار کنید.

اجرای سرور و کامپایل دارایی ها

از درون terminal دستور را اجرا کنید:

bash $ npm start

این باعث خاموش شدن ساختمان می شود process قبلا اشاره کردم. ساخت process HTML را تجزیه می کند، Sass را کامپایل می کند، تصاویر را فشرده می کند و یک سرور راه اندازی می کند. مرورگر پیش‌فرض شما باید یک برگه جدید را باز کند index.html فایل از آدرس localhost: 3000. از این page، می توانید از الگوهای نمونه بنیاد برای ایمیل های همراه با نصب دیدن کنید.

ارزیابی طرح

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

در بیشتر موارد، طراحی با محتوای نگهدارنده مکان برای ایمیل سبک خبرنامه حداقل است. در ادامه، عناصر درون قالب را برای ایجاد هر گونه تغییر تغییر می دهیم. این دست کمی بیشتر است روی به عنوان مثال، از یک سازنده ایمیل WYSIWYG مانند قالب های پیش فرض MailChimp، اما به خاطر برندسازی سفارشی، ارزش وقت گذاشتن را دارد. فکر می کنم اکثر کاربران موافق باشند. مطمئناً می توانید این را برای استفاده از ویرایشگر در Mailchimp گسترش دهید، اما این موضوع برای زمان دیگری است.

شروع تازه

با فرض استفاده از ساس نسخه، Foundation for Emails همراه با Inky HTML است که ساخته خودشان است. این HTML مسئول ساختن جداول و چیدمان های پیشرفته جدول است. این مستندات برای Foundation fro Emails بهترین مکان برای یادگیری همه چیزهایی است که در مورد HTML سفارشی Inky که می توانید در پروژه های خود استفاده کنید، بدانید. حتماً اغلب به آن مراجعه کنید. ما در داخل کار خواهیم کرد src پوشه در پوشه پروژه ما. این فایل ها از طریق در حال مشاهده هستند gulp.js و برخی از پلاگین ها. هنگامی که تغییراتی در کد الگوی ما ایجاد می شود و/یا تمام پرونده های موجود در آن را سبک می کند دور پوشه بر این اساس به روز می شود. من به این موضوع عمیق نخواهم رسید اما به یاد می آورم که وقتی تازه به آن علاقه داشتم ، به نظر می رسید جادو!

فهرست مطالب

شاخص page می بینید داخل آن یافت می شود src/layouts/index-layout.html. بنیاد برای ایمیل استفاده می کند دسته دسته که به شما امکان می دهد قالب بندی را در داخل پایه انجام دهید HTML صفحات به عنوان مثال، شما می توانید یک جزئی ایجاد کنید HTML پرونده ای که به صورت پویا در پرونده دیگری قرار می گیرد. توجه داشته باشید که {{>بدن}} برچسب زدن در پایان ، تمام مطالب در واقع در اینجا وارد می شوند ، در پایان ، به لطف تجزیه HTML موجود در چارچوب.

صفحات

هر page درون را می بینید src/pages/ چیزی است که در ابتدا هنگام اجرا نمایش داده می شود $ npm شروع می شود برای اولین بار. هر یک page یک الگوی نمونه ارائه شده توسط Zurb است. مطالب را کپی کنید newsletter.html و یک فایل جدید به نام ایجاد کنید branded-newsletter.html. محتویات را داخل آن بچسبانید. در این پرونده ، ما الگوی مارک شده ای را که قبلاً به اشتراک گذاشته ام خواهیم ساخت. در داخل پرونده ، باید بسیاری از برچسب های HTML خارجی را ببینید. اینها بخشی از Inky HTML هستند. اساساً با استفاده از آنها ، می توانید با این که هرگز از نظر جسمی برنامه های جدول را کدگذاری نکنید ، دور شوید. (نمیتونی استفاده کنی divs در داخل ایمیل ها مانند صفحات وب. همین امر برای بسیاری نیز صادق است CSS خواص.) در زیر یک نمای کلی از برچسب ها وجود دارد که ما بیشترین استفاده را از آنها خواهیم داشت:

• – یک عنصر بسته بندی که دارای عرض تنظیم شده است.
• <ردیف> – برای بسته بندی ستون های محتوای مشابه با یک شبکه شناور لازم است روی وب سایت ها
• <ستون> – جایی که بیشتر محتوای شما در آن زندگی می کند. اینها را می توان با استفاده از یک طرح 12 ستون سفارشی کرد. آنها مانند یک قطعه شناور یا انعطاف پذیر رفتار می کنند اما میزها را درگیر می کنند.
• <منو> – با استفاده از جداول یک منو را در یک ایمیل HTML ایجاد کنید.
• – فاصله عمودی برای قالب های ایمیل. بسیاری از مشتری های پست الکترونیکی از طریق CSS به حاشیه یا بالشتک احترام نمی گذارند. این یک راه حل عالی برای آن است. هر اندازه را با اضافه کردن ویژگی مانند این تنظیم کنید: .
• <دکمه> – ایجاد یک دکمه با جداول.

در بالای این برچسب ها کلاس های اضافی CSS وجود دارد که می توانید از طریق SASS اضافه ، سفارشی سازی و گسترش دهید.

داربست قالب خبرنامه

به خاطر کوتاه بودن ، من برنامه نویسی را خلاصه می کنم process و قبل از اینکه آن را سبک کنم ، همه HTML را به شما نشان می دهد. این به من اجازه می دهد تا اسکلت انواع مختلفی را برای الگوی بسازم و بعداً درباره سبک ها نگران باشم. در زیر است HTML من برای طراحی به پایان رسیدم. این الگو با صفحات دایرکتوری و در آن گنجانده می شود layouts/index-layout.html فایلی که در آن مشاهده می کنید {{> بدن}} برچسب زدن

html

<container> <spacer size="16"></spacer> <p class="text-center"> <small>Email not displaying correctly? <a href="#">Click here</a></small> </p> <spacer size="36"></spacer> <a href="https://coupleofcreatives.com" class="logo"> <img src="https://coupleofcreatives.com/public/logo.svg" alt="Couple of Creatives Logo" width="135" height="68" class="text-center logo" /> </a> <spacer size="24"></spacer> <row class="main-nav"> <columns> <menu class="small-vertical"> <item href="https://coupleofcreatives.com/work">RECENT WORK</item> <item href="https://coupleofcreatives.com/blog">BLOG</item> <item href="https://bit.ly/2oOk3SW">YOUTUBE</item> <item href="https://coupleofcreatives.com/contact">WORK WITH US</item> </menu> </columns> </row> <spacer size="16"></spacer> <p class="issue-meta"> <span class="issue-number">ISSUE #100</span> <span class="issue-sep">•</span> <span class="issue-date">MARCH 29, 2017</span> <p> <spacer size="5"></spacer> <p class="intro"> Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna.Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. </p> <spacer size="16"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Recent case study</h2> <img src="https://coupleofcreatives.com/public/case-study-image.png" width="600" height="324" alt="Screen shot of a case study for Wildwood Family Dentistry from Couple of Creatives" /> <container class="case-study-description"> <columns class="content"> <h4>Wildwood Family Dentistry</h4> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <spacer size="12"></spacer> <button href="https://coupleofcreatives.com/work/wildwood-family-dentistry/" class="small-expanded">View Case Study</button> </columns> </container> <spacer size="48"></spacer> <container class="blog"> <h2>From the blog</h2> <a href="#">This is a headling to a external link</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <a href="#">Donec id elit non mi porta gravida at eget metus.</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <a href="#">This is a headling to a external link</a> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </container> <spacer size="16"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Watch our latest video</h2> <a href="#"> <img src="https://coupleofcreatives.com/public/video-image.png" width="600" height="337" alt="A still of a Couple of Creatives during a video shoot" /> </a> <spacer size="16"></spacer> <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <spacer size="16"></spacer> <button href="#" class="secondary small-expanded">Subscribe to our channel</button> <spacer size="32"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <h2>Follow us روی instagram</h2> <a href="https://instagram.com/coupleofcreatives"> <img src="https://coupleofcreatives.com/public/instagram-image.png" alt="Instragram photos of Couple of Creatives" width="600" height="294" /> </a> <spacer size="36"></spacer> <hr class="divider" /> <spacer size="16"></spacer> <container class="footer"> <a href="https://coupleofcreatives.com" class="logo"> <img src="https://coupleofcreatives.com/public/logo.svg" alt="Couple of Creatives Logo" width="135" height="68" class="text-center logo" /> </a> <spacer size="32"></spacer> <row class="footer-social-links"> <columns> <table class="social-menu"> <tr> <td> <table> <tr> <th class="menu-item"> <a href="https://facebook.com/coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/facebook.png" alt="facebook" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://twitter.com/couplecreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/twitter.png" alt="twitter" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://instagram.com/coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/instagram.png" alt="instagram" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://www.youtube.com/channel/UCwLgeZi57pzy-Q4LgvBBXRA"> <img class="text-center" src="https://coupleofcreatives.com/public/youtube.png" alt="youtube" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://www.linkedin.com/company-beta/10487750/"> <img class="text-center" src="https://coupleofcreatives.com/public/linkedin.png" alt="linkedin" width="21" height="21" /> </a> </th> <th class="menu-item"> <a href="https://plus.google.com/+Coupleofcreatives"> <img class="text-center" src="https://coupleofcreatives.com/public/googleplus.png" alt="google plus" width="21" height="21" /> </a> </th> </tr> </table> </td> </tr> </table> </columns> </row> </container> <spacer size="12"></spacer> <p class="text-center"><a class="footer-cta" href="https://coupleofcreatives.com/contact">Need marketing? Hire this creative duo</a></p> <spacer size="12"></spacer> <p class="text-center"><small>You received this email because you’re signed up to get updates from us. <a href="#">Click here to unsubscribe.</a></small></p> </container>

درون HTML بسیاری از برچسب های سفارشی که قبلاً ذکر شده است را مشاهده خواهید کرد. این spacer به عنوان مثال ، عنصر زیادی برای ایجاد فاصله عمودی استفاده می کنم. من این کار را فقط به این دلیل انجام می دهم که همه مشتری های ایمیل حاشیه و بالشتک را افتخار نمی کنند. برای صرفه جویی در سر و صدا ، عنصر Spacer به طرز چشمگیری کمک می کند.

اضافه کردن سبک ها

از آنجا که من از نسخه SASS بنیاد برای ایمیل استفاده می کنم ، من قادر به ایجاد جزئی هستم و import کسانی که وارد استاد شدند app.scss فایلی که در عوض به کامپایل می شود دور پوشه به عنوان app.css. من از فونتی به نام استفاده می کنم ایده آل سانس. متاسفانه فقط میتونم ازش استفاده کنم روی دامنه مشخص شده من به این معنی است که شما قادر به استفاده از آن برای عناوین نخواهید بود روی پایان شما اگر در امتداد عناوین پیروی کنید ، به عنوان بازگرداندن قلم پایه ، Arial خواهد بود. بسیاری از سفارشی سازی هایی که می توانید به سبک های همراه در داخل چارچوب انجام دهید در assets/scss/_settings.scss. این پرونده دارای متغیرهای متنوعی است که برای سفارشی سازی برای مطابقت با مارک تجاری خود آماده هستند. علاوه بر سفارشی کردن این تنظیمات ، من بخشی از خودم را ایجاد کردم. من این فایل ها را وارد کردم app.scss فایل.

ایمیل های پاسخگو

بنیاد ایمیل برای ایمیل های پاسخگو خارج از جعبه پشتیبانی می کند. با استفاده از بسته بندی شده ، <ردیف> و <ستون ها> برچسب هایی که اساساً می توانید همان کار مفید را که در مرورگر انجام می دهید انجام دهید. در داخل ستون ها برای ایجاد یک شبکه 12 ستون می توانید کلاسهای خاصی را مشخص کنید. به عنوان مثال ، اگر می خواستم یک شبکه دو ستون داشته باشم می نوشتم:

html <container> <row> <columns small="12" large="6"> Column 1 </columns> <columns small="12" large="6"> Column 2 </columns> </row> </container>

مستقر روی اندازه صفحه کاربر این ستون ها در عرض 50 درصد ظاهر می شوند روی صفحه نمایش بزرگتر و 100٪ عرض روی صفحه نمایش های کوچکتر اگر با فریم ورک های CSS محبوب مانند Bootstrap یا Foundation آشنا هستید، درک این موضوع باید بسیار آسان باشد.

استفاده از تصاویر در ایمیل

تصاویر باید از یک سرور وب با استفاده از مسیرهای URL مطلق و ترجیحاً از همان دامنه ای که ایمیل شخصی که آن را ارسال می کند بارگیری شود. بنابراین اگر بخواهم ایمیلی از (ایمیل محافظت شده) برای مشترکانم ارسال کنم، تصاویر باید تحت همان نام دامنه webdesignerdepot.com زندگی کنند. انجام این کار احتمال هدایت اشتباه ایمیل شما به پوشه اسپم را از بین می برد و همچنین حرفه ای تر به نظر می رسد.

تگ های Alt ضروری هستند

اگر به طور معمول از تگ های alt استفاده نمی کنید (نمی دانم چرا این کار را نمی کنید). نیاز به در ایمیل ها بسیاری از سرویس گیرنده های ایمیل به طور پیش فرض تصاویر را بارگیری نمی کنند و این به خود کاربر بستگی دارد. تگ‌های Alt می‌توانند به توصیف تصویر قبل از دیدن آن توسط کاربر کمک کنند. این هم برای دسترسی عالی است و هم برای کسانی که علاقه ای به بارگیری تصاویر در ایمیل هایی که دریافت می کنند ندارند.

فایل های تولید ساختمان و تست

ایمیل های مبتنی بر تولید باید CSS خود را به صورت خطی داشته باشند. خط کشی است process تعریف سبک ها روی خود عنصر به جای پیوند از یک شیوه نامه خارجی. Foundation for Emails یک ویژگی ساخت مفید دارد که این کار را برای شما انجام می دهد. فایل های نهایی در داخل کامپایل و کوچک می شوند دور پوشه برای ساخت فایل‌های تولیدی، می‌خواهید با تایپ کردن، سرورهایی که قبلاً در حال اجرا هستند را از بین ببرید ctrl + c در شما terminal برنامه از آنجا تایپ کنید:

Bash $ npm run build

هنگامی که ایمیل در مرورگر باز می شود، باید همان چیزی را که قبلاً مشاهده می کردید مشاهده کنید. اما، اگر از نزدیک به منبع آن نگاه کنید page کد به هم ریخته ای را خواهید دید. این نتیجه ساخت است process و با فرض اینکه همه چیز خوب به نظر می رسد، آماده استفاده در طبیعت است.

آزمایش کردن

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

لینک های مفید

• Source کد این پروژه
• قبل از ارسال ایمیل های خود را تست کنید
• بنیاد برای ایمیل
• بنیاد ایمیل – Documentation
• راهنمای طراحی ایمیل Mailchimp