22
تشکر

آموزش ساخت ایمیل ریسپانسیو

ایمیل ریسپانسیو

ایمیل ریسپانسیو

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

در ادامه همراه ما باشید…

مدیا کوئری ها: تنها بخشی از راه حل

در گذشته تنها استفاده از مدیا کوئری ها برای ساخت یک ایمیل ریسپانسیو که هم در IOS و Android به خوبی کار کند کافی بود.

اما در حال حاضر اپلیکیشن هایی که برای این دو سیستم عامل وجود دارد، از مدیا کوئری ها پشتیبانی نمیکنند. برای مثال اپلیکیشن Gmail در اندروید که ٪11 بازار ایمیل‌ها را به خودش اختصاص داده است هیچ وقت از مدیا کوئری پشتیبانی نکرده است. با این حال در نسخه های اخیر، این اپلیکیشن سایز ایمیل را آنقدر کوچک میکند تا درون صفحه نمایش جا داده شود. که اینکار زمانی که شما از مدیا کوئری استفاده کرده باشید نتایج بدی به همراه دارد.

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

با این حال محدودیت‌هایی هم وجود دارد. طراحی ایمیل ریسپانسیو در‌ واقع صحبت در مورد جدول های تو در تو است.

ایمیل ریسپانسیو

ایمیل ریسپانسیو

بیاید کار را شروع کنیم. ابتدا به چیزی که در انتها طراحی خواهیم کرد، نگاهی بکنید.

Responsive Email

Responsive Email

شروع به کار

ابتدا تمپلیت کار میزنیم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>A Simple Responsive HTML Email</title>
  <style type="text/css">
    body { margin: 0; padding: 0; min-width: 100%!important; font-family: 'Byekan', 'Tahoma'; text-align: right; direction: rtl; }
    .content {width: 100%; max-width: 600px;}
  </style>
</head>
<body yahoo bgcolor="#f6f8f1">
  <table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td>
        <table bgcolor="#fff" class="content" align="center" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
              Hello!
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

ساختار اصلی صفحه، با doctype مشخص شده را درست کردیم و همچنین رنگ بکگراند را هم به تگ body و هم به تگ table دادیم. و همچنین جدولی با کلاس content ساختیم که مطالب اصلی ما در آنجا قرار خواهد گرفت.

توجه کنید

در این مطلب ما کدهای CSS را در تگ style قرار میدهیم. اما در انتهای کار شما باید تمام کدهای CSS را به صورت inline درآورید. زیرا بعضی از کلاینت های ایمیل تگ هایی مانند style را حذف یا نادیده میگیرند. میتوانید از Premailer برای اینکار استفاده کنید.

متوقف کردن یاهو

یاهو دوست دارد اسامی کلاس‌ها و آی دی ها را به آن چیزی که خودش دوست دارد تبدیل کند. برای مثال زمانی که شما یک ایمیل را درون یاهو باز میکنید که داخل آن ایمیل، کلاسی با نام desktop وجود دارد، یاهو آن را به yiv1449593645desktop تغییر میدهد. که اینکار باعث می‌شود مدیا کوئری ها دیگر اجرا نشوند.

برای جلوگیری از اینکار یک خاصیت به نام yahoo را به تگ body اضافه میکنیم.

دو ترفند در طراحی به روش شناور

دیدید که ما در کلاس content عرض را به صورت 100٪ قرار دادیم تا طراحیمان شناور باشد. و همچنین max-width را 600px قرار دادیم تا از بزرگ شدن عرض ایمیل در نمایشگرهای بزرگ‌تر جلوگیری کنیم. حالا دو نکته یا ترفند در طراحی شناور را بررسی میکنیم.

1- راه حلی در پشتیبانی نشدن max-width

متأسفانه مقدار max-width توسط بعضی از کلاینت های ایمیل مانند Outlook و Lutos Notes پشتیبانی نمیشود. بنابراین با استفاده از تگ های شرطی این مشکل را حل میکنیم.

<!--&#91;if (gte mso 9)|(IE)&#93;>
  <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td><!&#91;endif&#93;-->
        <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td>
              Hello!
            </td>
          </tr>
        </table>
      <!--&#91;if (gte mso 9)|(IE)&#93;></td>
    </tr>
  </table>
<!&#91;endif&#93;-->

2- مشکلی مشابه در Apple Mail

باز هم برنامه‌ای دیگر به نام Apple Mail از max-width پشتیبانی نمیکند. که به دلیل اینکه از مدیا کوئری ها پشتیبانی میکند میتوان max-width را به صورت زیر به آن اضافه کرد.

<style type="text/css">
  @media only screen and (min-device-width: 601px) {
    .content {width: 600px !important;}
  }
</style>

ساخت Header

در کد قبلی یک تگ td داشتیم. background و padding آن را مشابه کد زیر درست میکنیم.

<td bgcolor="#c7d8a7" class="header">
  سلام
</td>
.header { padding: 40px 30px 20px 30px; }

اضافه کردن اولین ردیف ریسپانسیو

حالا میخواهیم اولین ردیف ریسپانسیو را بسازیم. ما دو جدول می‌سازیم و با استفاده از خاصیت align یکی از جدول ها را به راست و دیگری را به سمت چپ میفرستیم.

ستون راست

به جای متن ”سلام” کد زیر را قرار میدهیم.

<table width="70" align="right" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="70" style="padding: 0 0 20px 20px;">
      <img src="http://demo.aparnet.ir/responsive-email/images/icon.gif" width="70" height="70" border="0" / >
    </td>
  </tr>
</table>

در کد بالا ما یک جدول با عرض 70px به همراه کمی padding که در کل 90px می‌شود را ساختیم.

ستون چپ

حالا ستون سمت چپ را هم درست میکنیم. حداکثر عرض این ستون را 445px در نظر میگیریم که باعث می‌شود 25px در سمت راست خالی بماند. این 25px را زمانی که شما میخواهید مانند الان دو جدول کنار هم داشته باشید باید حتماً در نظر بگیرید. اگر ما این 25px را هم پر کنیم در Outlook دچار مشکل میشویم. برای مثال عکس زیر را در نظر بگیرید.

ایمیل ریسپانسیو

ایمیل ریسپانسیو

اما اگر این 25px را خالی بگذاریم میتوانیم مانند عکس زیر عمل کنیم.

ایمیل ریسپانسیو

ایمیل ریسپانسیو

نکته دیگری هم است. آن هم اینکه دوباره باید با تگ های شرطی کاری کنیم که در کلاینت های ایمیلی که از max-width پشتیبانی نمیکنند عرض این ستون از 425px بیشتر نشود. کد ستون زیر مشابه کد زیر میشود. کد زیر را پایین کد ستون سمت راست قرار میدهیم.

<!--&#91;if (gte mso 9)|(IE)&#93;>
  <table width="425" align="right" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td><!&#91;endif&#93;-->
        <table align="right" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">
          <tr>
            <td height="70">
            </td>
          </tr>
        </table>
      <!--&#91;if (gte mso 9)|(IE)&#93;></td>
    </tr>
  </table>
<!&#91;endif&#93;-->

که این کار را باید برای Apple Mail هم انجام دهیم. پس کد زیر را به مدیا کوئری که برای این برنامه ساختیم اضافه میکنیم.

.col425 { width: 425px!important; }

سپس کد زیر را درون تگ td ستون سمت چپ قرار میدهیم.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="subhead" style="padding: 0 0 0 3px; text-align: right;">
      ساخت
    </td>
  </tr>
  <tr>
    <td class="h1" style="padding: 5px 0 0 0; text-align: right;">
      ایمیل ریسپانسیو
    </td>
  </tr>
</table>

حالا Header ما کامل شده است. بعد از استایل هایی که روی فونت انجام بدهیم. نتیجه باید مشابه عکس زیر باشد.

.subhead { font-size: 20px; color: #ffffff; }
.h1 { font-size: 33px; line-height: 38px; font-weight: bold;}
.h1, .h2, .bodycopy { color: #153643; }
ایمیل واکنشگرا

ایمیل واکنشگرا

ساخت ردیف تک ستونی

حالا میخواهیم بعد از Header یک بخش تک ستونی داشته باشیم. برای اینکار کافیست یک ردیف دیگر به جدولی که کلاس content به آن دادیم اضافه کنیم. برای زیبا‌تر کردن کار هم چند خط کد CSS نوشتیم.

 <tr>
  <td class="innerpadding borderbottom">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="h2">
          به ایمیل ریسپانسیو خوش آمدید!
        </td>
      </tr>
      <tr>
        <td class="bodycopy">
          لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود
        </td>
      </tr>
    </table>
  </td>
</tr>

و کد CSS

.innerpadding { padding: 30px 30px 30px 30px; }
.borderbottom { border-bottom: 1px solid #f2eeed; }
.h2 { padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold; }
.bodycopy { font-size: 16px; line-height: 22px; }

ساخت ردیف دو ستونی

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

<tr>
  <td class="innerpadding borderbottom">
    <table width="115" align="right" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="115" style="padding: 0 0 20px 20px;">
          <img src="http://demo.aparnet.ir/responsive-email/images/article.png" width="115" height="115" border="0" />
        </td>
      </tr>
    </table>
    <!--&#91;if (gte mso 9)|(IE)&#93;><table width="380" align="right" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td><!&#91;endif&#93;-->
          <table class="col380" align="right" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 380px;">
            <tr>
              <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td class="bodycopy">
                      لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 20px 0 0 0;">
                      <table class="buttonwrapper" bgcolor="#e05443" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                          <td height="45" class="button">
                            <a href="#">لورم ایپسوم</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        <!--&#91;if (gte mso 9)|(IE)&#93;></td>
      </tr>
    </table><!&#91;endif&#93;-->
  </td>
</tr>

کدهای استایل دکمه:

.button { text-align: center; font-size: 18px; font-weight: bold; padding: 0 30px 0 30px; }
.button a { color: #ffffff; text-decoration: none; }

و کد زیر را هم به مدیا کوئری برنامه Apple Mail اضافه میکنیم.

.col380 { width: 380px!important; }

ساخت ردیف تک ستونی تصویر

این ردیف، ردیف آسانی است. فقط کافی است عرض تصویر را ٪100 بگیریم و مطمئن شویم که ارتفاع تصاویر auto است.

<tr>
  <td class="innerpadding borderbottom">
    <img src="http://demo.aparnet.ir/responsive-email/images/wide.png" width="100%" border="0" />
  </td>
</tr>

و کد CSS

img { height: auto; }

ساخت فوتر

فوتر هم تفاوت چندانی با دیگر قسمت‌ها ندارد. این قسمت را هم برای اضافه کردن آیکون های شبکه‌های اجتماعی قرار میدهیم.

<tr>
  <td bgcolor="#44525f" class="innerpadding footer">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center" class="footercopy">
          شرکت لورم ایپسوم<br/><br/>
          <a href="#" class="unsubscribe">
            <font color="#fff">لغو عضویت</font>
          </a>
          <span class="hide">از خبرنامه</span>
        </td>
      </tr>
      <tr>
        <td align="center" style="padding: 20px 0 0 0;">
          <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                <a href="http://www.twitter.com/">
                  <img src="http://demo.aparnet.ir/responsive-email/images/twitter.png" width="37" height="37" alt="Facebook" border="0" />
                </a>
              </td>
              <td width="37" style="text-align: center; padding: 0 10px 0 10px;">
                <a href="http://www.facebook.com/">
                  <img src="http://demo.aparnet.ir/responsive-email/images/facebook.png" width="37" height="37" alt="Twitter" border="0" />
                </a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr>

و کدهای CSS

.footer { padding: 20px 30px 15px 30px; }
.footercopy { font-size: 14px; color: #ffffff; }
.footercopy a { color: #ffffff; text-decoration: underline; }

بهینه کردن دکمه ها برای موبایل

بر روی موبایل ها بهتر است که تمام یک دکمه لینک باشد، نه فقط متن آن. به همین دلیل یک مدیا کوئری برای موبایل ها اضافه میکنیم، که در آن کل دکمه را تبدیل به لینک میکنیم.

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
  body[yahoo] .buttonwrapper { background-color: transparent!important; }
  body[yahoo] .button a { background-color: #e05443; padding: 15px 15px 13px!important; display: block!important; }
}

همچنین برای اینکه در موبایل ها لینک لغو خبرنامه بهتر دیده شود آن را تبدیل به دکمه میکنیم. کد زیر را هم به مدیا کوئری بالا اضافه کنید.

body[yahoo] .unsubscribe {display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;}
body[yahoo] .hide {display: none!important;}

پایان

فراموش نکنید که باید کدهای CSS را به صورت inline درآورید.

مشاهده دمو

دانلود دمو

  • بنده خدا می‌گه:

    خیلی عالی بود متشکرم

  • ----- می‌گه:

    بهتره که منبع مطالب را هم در زیر آن ذکر کنید.

  • alonemusic می‌گه:

    با عرض سلام ؛
    ببخشید من دمو قالب رو دانلود کردم ولی نمی دونم چرا واسه من فونت هاش بهم ریخته ؟
    http://www.xum.ir/images/2014/02/27/Responsive_EmailError.png

  • shahab می‌گه:

    سلام
    ممنون بابت آموزش
    راستی فونتی که خودمون ضمیمه میکنیم مثلآ همین نمونه شما ! واسه نمایش تو ایمیل مشکل ساز نمیشه ؟؟؟

  • سعید وکیلی می‌گه:

    عالی بود

  • mohammadreza می‌گه:

    عالی مثل همیشه محسن جان


  • نظرات این مطلب بسته است.