وبنولوژی

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

۱: طراحی ساده

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

۲: استفاده از جداول

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

غیر قابل قبول:

 ۱: <div id="header">

 ۲:     <h4>Header 1</h4>

 ۳: </div>

 ۴: <div id="content">

 ۵:     Lorem ipsum dolor sit amet.

 ۶: </div>

 ۷: <div id="footer">

 ۸:     Sign off and footer

 ۹: </div>

مقبول:

 ۱: <table>

 ۲:     <tr>

 ۳:         <td>Header 1</td>

 ۴:     </tr>

 ۵:     <tr>

 ۶:         <td>Lorem ipsum dolor sit amet.</td>

 ۷:     </tr>

 ۸:     <tr>

 ۹:         <td>Sign off and footer</td>

 ۱۰:     </tr>

 ۱۱: </table>

۳: مروگر های وب را آماده داشته باشید

مطمئن شوید که تا جایی که امکان دارد مرورگرهای مختلف را در دسترس داشته باشید. چه کسی می داند که ایمیل شما چطور دیده خواهد شد و کاربر مورد نظر از چه مرورگری برای دیدن آن نامه استفاده خواهد کرد!

در حداقل موارد مرورگرهای زیر را مد نظر قرار دهید و از آنها برای تایید نامه تان بهره ببرید:

• Internet Explorer 6
• Internet Explorer 7
• Internet Explorer 8
• Mozilla Firefox 3
• Apple Safari 3
• Google Chrome

۴: برای اکثر سیستم های ایمیل دهی ثبت نام کنید

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

• Google Mail  (http://mail.google.com)
• Hotmail/Lve Mail  (http://www.hotmail.com)
• Yahoo mail  (http://mail.yahoo.com)
• AOL Mail  (http://webmail.aol.com)

لطفا توجه کنید که سرویس های راحت تری هم هستند که می توانند در عوض اینها مورد استفاده قرار گیرند. هرچند تعدادی از آنها مبلغی را برای ارائه خدمات می گیرند.

۵: از استایل های داخلی استفاده کنید

اگر این طرح شما برای یک وبسایت جهانی بود، هر طراح وبی روی این سیاره می گفت: “از استایل های داخلی استفاده نکنید، برای این کار Class بسازید.” بدبختانه در یک ایمیل امکان این وجود ندارد، همانطوری که بسیاری از نرم افزارهای دریافت کننده ایمیل از آنها چشم پوشی می کنند و ما آن را نمی خواهیم. بنابراین اگر عنصری به سبک بندی احتیاج داشت از استایل داخلی استفاده کنید.

عناصری مانند نوع قلم و اندازه آن می توانند در داخل table ها مورد استفاده  قرار گیرند، اما استایل های منحصر به فرد باید در ستون ها (td) قرار گیرند.

۶: به همه تصاویر صفت Alt بدهید

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

۷: برای تصاویر عرض و ارتفاع تعیین نکنید

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

۸: ایمیل را در یک جدول با عرض ۱۰۰% بپیچید

برنامه های خواننده نامه الکترونیکی فقط برچسب های داخل بدنه یا Body را در نظر می گیرند، نه خود برچسب های بدنه را. برای استفاده یک رنگ پس زمینه بهتر است شما یک جدول با عرض ۱۰۰% برای تقلید افکت پس زمینه بسازید.

 ۱: <table width="100%">

 ۲:     <tr>

 ۳:         <td>

 ۴:             <table width="600" align="center">

 ۵:                 <tr>

 ۶:                     <td>Lorem ipsum dolor sit amet.</td>

 ۷:                 </tr>

 ۸:             </table>

 ۹:         </td>

 ۱۰:     </tr>

 ۱۱: </table>

۹: عرض بیشتر از ۶۰۰ پیکسل ممنوع…

در حقیقت بسیاری از افراد ایمیل های خود را باز نمی کنند، در عوض آنها نامه های تازه رسیده را در پنل پیش نمایش نگاه می کنند. میانگین کوچکترین پنل پیش نمایش هم ۶۰۰ پیکسل است، بنابراین نامه هایتان را طبق همین با HTML طراحی کنید. مگر اینکه شما نخواسته باشید نامه هایتان در پنل پیش نمایش قابل ارائه باشد.

۱۰: سبک دهی پیوندها

فراموش نکنید که برچسب های <a> را سبک دهی کنید. آنها برچسب های استاندارد نرم افزار های دریافت کننده نامه الکترونیکی را بازنویسی خواهند کرد.

<a href="#" style="color:#000000; text-decoration:none;">Link</a>

۱۱: از جداول تو در تو استفاده نکنید

جدای از ۱۰۰ درصد عرض پیچیده شده به دور جدول، شما باید تلاش کنید از جداول بیشتر به صورت تو در تو استفاده نکنید. این کار به راحتی قابل اجتناب است: در عوض از سیستم دسته ای استفاده کنید.

اجتناب کنید از:

 ۱: <table>

 ۲:     <tr>

 ۳:         <td>

 ۴:             <table>

 ۵:                 <tr>

 ۶:                     <td>Lorem ipsum dolor sit amet.</td>

 ۷:                 </tr>

 ۸:             </table>

 ۹:         </td>

 ۱۰:     </tr>

 ۱۱:     <tr>

 ۱۲:         <td>

 ۱۳:             <table>

 ۱۴:                 <tr>

 ۱۵:                     <td>Lorem ipsum dolor sit amet.</td>

 ۱۶:                 </tr>

 ۱۷:             </table>

 ۱۸:         </td>

 ۱۹:     </tr>

 ۲۰: </table>

استفاده کنید:

 ۱: <table>

 ۲:     <tr>

 ۳:         <td>Lorem ipsum dolor sit amet.</td>

 ۴:     </tr>

 ۵: </table>

 ۶: <table>

 ۷:     <tr>

 ۸:         <td>Lorem ipsum dolor sit amet.</td>

 ۹:     </tr>

 ۱۰: </table>

۱۲: از تصاویر پس زمینه اجتناب کنید

استفاده از رنگ پس زمینه سیاه بهتر از تصاویر برای پس زمینه متن ایمیل است، زمانی هم که هیچ متنی درگیر نیست از شیب رنگ و تصاویر ساده استفاده کنید.

۱۳: نوار های لبه یا border کار نمی کند

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

راه حل؟ ۲ عدد <td> اضافی هم برای اینکه لبه ستون اصلی را تشکیل دهد و هم برای هر کدام یک رنگ پس زمینه اختصاص دهید، بسازید. با این کار وانمود می شود که یک نوار حاشیه دور <td> اصلی ما وجود دارد و در همه مرورگرها و برنامه ها کار می کند.

کار نخواهد کرد:

<td width="600" style="border-right:1px solid #000000; border-left:1px solid #000000;">Lorem ipsum</td>

کار خواهد کرد:

 ۱: <td width="1"></td>

 ۲: <td width="598">Lorem ipsum dolor sit amet.</td>

 ۳: <td width="1"></td>

۱۴: تعمیر اِشکال Hotmail

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

<img src="image.jpg" style="display:block;">

به هر برچسب تصویر (img) به سادگی این استایل را مانند مثال بالا اضافه کنید: display:block

۱۵: همه علامت ها را کدگذاری کنید

هرچند ما مطابق اصول فنی نباید علامت ها را کدگذاری کنیم، اما انجام این کار بهتر است.

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

ممکن است کار کند:

"تعدادی کد در اینجا - با کاراکتر های خاص"

قطعا کار خواهد کرد:

"تعدادی کد در اینجا - با کاراکتر های خاص"

۱۶: جاوا اسکریپت = هرزنامه

متاسفانه شما نمی توانید از هر نوع کد جاوااسکریپت استفاده کنید. پس لطفا تصوّر پنجره های pop-up یا نامه هایی با مرور خودکار را از ذهنتان بیرون کنید. اگر شما به هر طریقی تصمیم به استفاده از آنها دارید، نامه شما ممکن است به پوشه هرزنامه منتقل شود. برنامه های ایمیل هم شما را به عنوان یک تهدید می نگرند. و این کار مشخصاً خوب نیست. پس لطفا از همان HTML ساده و قدیمی بهره ببرید.

۱۷: به کابران یک راه خروج بدهید

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

۱۸: کاربران اختیارات می خواهند

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

این نامه را نمی توانید ببینید؟ آن را در اینجا مشاهده کنید:

۱۹: از یک تصویر به نام spacer.gif استفاده کنید.

برخی مرورگرها (اینترنت اکسپلورر) با یک ستون جدول خالی یا <td> خالی کار نمی کنند. حتی اگر این ستون با عرض ۱۰ پیکسل تعیین شده باشد. IE از این مورد عبور خواهد کرد و عرض ۰ را برای آن در نظر می گیرد.

راه کار برای این مشکل اضافه کردن یک تصویر خالی شفاف است، و عرض آن را ۱۰ پیکسل در نظر بگیریم. در این حالت یک فضایی برای شما بوجود می آید که می توانید عنصری را در آنجا قرار دهید.

کار نخواهد کرد:

 ۱: <td width="300">متن ستون اول<td>

 ۲: <td width="10"></td>

 ۳: <td width="300">متن ستون دوم</td>

کار خواهد کرد:

 ۱: <td width="300">متن ستون اول</td>

 ۲: <td width="10"><img src="spacer.gif" width="10" height="1"></td>

 ۳: <td width="300">متن ستون دوم</td>

۲۰: امتحانی بفرستید

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

سرویس های بدین منظور در اینترنت وجود دارند که به همین منظور خدماتی را به شما ارائه می کنند.

Source: nettuts.com