الابتداء مع HTML رسائل البريد الإلكتروني

تعد رسائل HTML الإلكترونية طريقة رائعة للحفاظ على العملاء الذين يتم نشرهم على آخر التحديثات المتعلقة بنشاطك التجاري أو منتجك ، ولكنها صعبة بعض الشيء. دعم CSS في برامج البريد الإلكتروني غير متناسق. نتيجة لذلك ، يجب أن نلجأ إلى التقنيات القديمة ، مثل استخدام الجداول ، و CSS المضمنة. اليوم ، سوف أطلعك على عملية إنشاء رسائل بريد إلكتروني HTML بسيطة.

مقدمة: HTML البريد الإلكتروني

كمطور ويب مستقل، ترميز HTML رسائل البريد الإلكتروني هي واحدة من أصعب المهام التي يجب أن تتعامل مع. لحسن الحظ، عند أحد موكلي أول طلب مني إلى التصميم والتعليمات البرمجية له البريد الإلكتروني النشرة الإخبارية، وكان المريض ما يكفي للسماح لي بالذهاب من خلال عملية طويلة ومحبطة لكشف ذلك كله. قد لا يكون محظوظاً جداً، لذا تعد نفسك مع هذا البرنامج التعليمي.

المشكلة: عملاء البريد الإلكتروني

كنت أعتقد أن أي ألم في بعقب؟ انتظر حتى تلتقي Outlook 2007. بسبب الاختلافات الشاسعة في التقديم إتش تي أم ال/المغلق بين عملاء البريد الإلكتروني، باستخدام تقنيات الترميز الحديثة سيؤدي إلى فوضى كارثية بدلاً من ذلك في العديد من عملاء البريد الإلكتروني شعبية. عملاء البريد الإلكتروني ببساطة لا تجعل HTML بنفس الطريقة كما المتصفحات-إغلاق ولا حتى في كثير من الحالات. أشياء مثل العوامات وصور الخلفية والهوامش حتى لم تعد جزءا من المفردات الخاصة بك. فما هو المبرمج المحب لمعيار للقيام؟

الحل: رمز مثل 1997

هذا صحيح. الجداول. سيلبادينج، سيلسباسينج، colspan، كل هذه الأمور الجسيمة التي كنت تعتقد أنك قد تركت وراءها. الجداول هي الطريقة الوحيدة للحصول على تخطيطات متناسقة للبريد الإلكتروني ، لذا فقد حان الوقت (مؤقتاً) لننسى طرق المحبة CSS الخاصة بك واحتضان الجداول غير الفلسفية والفوضى.

الخطوة 1: التصميم

أبقيها بسيطة

عند تصميم رسالة بريد إلكتروني HTML، الحفاظ على البساطة في الاعتبار. تصميم نستخدمه اليوم تخطيطات أعمدة متعددة، معظمها لأغراض العرض التوضيحي، ولكن النظر في الخلاف على عمودين في جميع أنحاء عند ترميز الرسالة الإخبارية الخاصة بك لإنقاذ أنفسكم الكثير من الصداع.

تقليل استخدام الصورة

تذكر أن لا تتوهم التصميمات الخاصة بك لأن Outlook لا يدعم الصور الخلفية. وفي الواقع، اعتماداً على احتياجات العميل الخاص بك، قد ترغب في تخطي عملية فوتوشوب تماما لقوة نفسك للحفاظ التصميم العملية. وقال أن، سنقوم باستخدام Photoshop هنا حيث يمكنك الحصول على فكرة أفضل عن خطة عملنا.

يمكنك استخدام صور الخلفية لأسباب زخرفية ، طالما أن البريد الإلكتروني مقروء ومن المنطقي بدونها. على سبيل المثال ، سنضيف تدرجًا صغيرًا لرأسنا ، ولكن ليس مشكلة كبيرة إذا لم تظهر.

أرق هو أفضل

نظرًا لأن نوافذ المعاينة لعميل البريد الإلكتروني غالبًا ما تكون جزءًا صغيرًا فقط من عرض الشاشة ، فأنت تريد بشكل عام إبقاء تصميمك تحت 600 بكسل. لا أحد يحب أشرطة التمرير الأفقية.

تكون متسقة

تذكر نحن ذاهبون إلى استخدام خصائص غير مرنة مثل سيلبادينج وسيلسباسينج للتباعد لدينا العناصر. فإنه من الحكمة في محاولة للحفاظ على المسافات بين العناصر متسقة.

التصميم لدينا

هذا التصميم مشابهة لواحدة استعملتها لرسالة إخبارية عميل في الصيف الماضي، ولكن مبسطة. أنها ليست جميلة، ولكن هذا ليس النقطة هنا. أنها بسيطة ومتسقة، ويحتوي على عدد من خيارات تخطيط حيث يمكنك أن ترى كيف تختلف.

الخطوة 2: تخطيط قانوننا

في تجربتي، يحصل رمز البريد الإلكتروني HTML معقدة للغاية، بسرعة كبيرة. من المهم أن تكون هناك خطة للهجوم. حتى هنا هو الخطة (ونحن سوف أعود إلى هذا، لا تقلق إذا كنت لا تتبع).

أولاً ، نبدأ بجدول عرض كبير بنسبة 100٪ مع خلفية رمادية ، وهذا هو جدول "المجمع".

التالية، ولاحظ أن هناك ثلاثة جداول أكثر داخل الجدول المجمع: واحدة في الجزء العلوي للارتباط "عرض في المستعرض" وواحدة في الوسط للمحتوى الرئيسي وواحد في الجزء السفلي للارتباط "إلغاء الاشتراك".

وأخيراً، داخل الجدول الرئيسي، سوف تكون كل مقطع أفقي للمحتوى داخل صف جدول وخلية جدول. هذه خلايا الجدول، بدوره، سوف تحتوي على جدول آخر لاستضافة كل قسم المحتوى:

Cellpadding و Cellspacing

بدلاً من استخدام خصائص CSS وحشو CSS ، سنستخدم سمات cellpadding و cellspacing HTML. فكر في سيلبادينج كما يجري إلى حد كبير نفس الحشو المغلق--الفضاء داخل عنصر، حول المحتوى. Cellspacing هي المسافة بين خلايا البيانات في جدول.

لدينا جدول رقم # سيكون لدينا 15px من cellspacing ، بحيث سيكون لدينا 15 بكسل من المساحة البيضاء حول قسم المحتوى الرئيسي بالكامل ، و 15 بكسل بين كل مجموعة أفقية. سيلبادينج وسيلسباسينج تنطبق فقط على الجدول الأصل، ليس الأطفال. إذا كنا لا نريد أي سيلبادينج أو سيلسباسينج، نحن بحاجة لتحديد لكل جدول.

الخطوة 3: ترميزها

الآن يمكننا أن نبدأ عملية الترميز النشرة الإخبارية، فرعا فرعا. معارضة لأفضل الممارسات، ونحن في طريقنا إلى ما تقوم به بعض التصميم جنبا إلى جنب مع هيكل. سنبدأ بالتخطيط ، بما في ذلك جميع المسافات والمساحات ، وألوان الخلفية ، وبعد ذلك ، سنقوم بالكتابة وغيرها من عناصر CSS.

اقامة

الإعداد للبريد الإلكتروني بسيط للغاية: علامات html و head و body فقط متضمنة. دعونا نضيف في جدول المجمع والجداول الثلاثة الرئيسية التي ناقشناها سابقا.

بقدر ما نشعر بالقلق doctypes ، هناك عدة طرق مختلفة ، كما هو مفصل في هذه المقالة. وفي حالتنا، لقد قررت ضد استخدام واحد، لأننا لا نحتاج إلى أي من الأشياء التي سوف نحصل بإعلان doctype. سوف تحصل على تجريده من أصل في معظم الحالات على أي حال.

1

<html>

2

3

<p><head>

4

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

5

	<title>Nettuts Email Newsletter</title>

6

</head></p>

7

8

<p><body></p>

9

10

<p><table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td></p>

11

12

<p><table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">

13

	</table><!-- top message -->

14

15

	<table id="main" cellpadding="0" cellspacing="15" bgcolor="ffffff" width="600" align="center">

16

	</table><!-- main -->

17

18

	<table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">

19

	</table><!-- bottom message --></p>

20

21

<p></tr></td></table><!-- wrapper --></p>

22

23

<p></body></p>

24

25

<p></html>

26

</p>

وبصفة عامة، فمن الأفضل تعيين عرض خلايا الجدول الفردي من إلى الجدول نفسه.

لاحظ أن جدولين الرسائل يحتويان على قيم cellpadding بحجم 20 بكسل. سيؤدي ذلك إلى تفريغ تلك الفقرات من المحتوى الرئيسي. يحتوي الجدول الرئيسي على 15px من cellspacing. وهذا وضع متسقة إيقاع عمودي. نظراً لكل قسم داخل خلية الجدول الخاصة به، سوف يكون هناك 15px بين كل منهم.

لاحظ أيضًا أن جميع الجداول مضبوطة على align = "center" ، وقد حددنا بوضوح عروضها. في رسائل HTML الإلكترونية ، من الأفضل بشكل عام ألا يتم تعريف العروض لجداول التغليف. كنت أفضل حالاً تحديد عرض لكل خلية، ولكن في هذه الحالة سوف نكسر هذه القاعدة لأننا سيلسباسينج/سيلبادينج للقلق.

جداول الرسائل

هذه بسيطة للغاية: مجرد فقرات داخل خلايا محاذية للوسط.

1

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">

2

	<tr>

3

		<td align="center">

4

			<p>Trouble viewing this email? <a href="#">View in Browser</a></p>

5

		</td>

6

	</tr>

7

</table><!-- top message --><p>Ê</p>

الرسالة السفلية هي نفسها تمامًا.

رأس

الرأس بسيط جداً، وعمود واحد فقط، مع ثلاثة صفوف. إذ يتعين علينا أن خلفية زرقاء جميلة، نحن ذاهبون إلى حاجة بعض الحشو حول كل خلية للحصول على النص بعيداً عن الحواف.

1

<tr>

2

	<td>

3

		<table id="header" cellpadding="10" cellspacing="0" align="center">

4

			<tr>

5

				<td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>

6

			</tr>

7

			<tr>

8

				<td width="570" bgcolor="8fb3e9"><h2>News and Events</h2></td>

9

			</tr>

10

			<tr>

11

				<td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>

12

			</tr>

13

		</table><!-- header -->

14

	</td>

15

</tr><!-- header -->

تذكر أن تضبط عرض كل خلية ، والتي في هذه الحالة تكون 570 بكسل (600 بكسل - 15 بكسل من التباعد الخلوي على كل جانب). لقد قمنا أيضًا بتعيين خاصية المحاذاة للتاريخ إلى اليمين. الحق الآن، نحن لا إضافة صورة خلفية، أننا سوف نفعل ذلك في وقت لاحق. في هذه الأثناء، مجرد استخدام أزرق أخف.

لاحظ أننا نستخدم bgcolor بدلاً من style = "background:". وذلك لأن قيم html يتم دعمها بشكل أفضل في برامج البريد الإلكتروني من خصائص CSS.

وهذا ما لدينا حتى الآن، وأنها تبدو سيئة جداً، ولكن التخطيط فقط ما كنا نريده.

قسم المحتوى - 2 عمود

قسم المحتوى الأول الخاص بنا عبارة عن صورة محاذاة إلى اليسار مع عنوانين رئيسيين بجانبها. بدلاً من استخدام تعويم CSS مثلما نفعل عادة ، سنقوم بإنشاء جدول بثلاث خلايا:

• واحد للصورة،
• واحدة للمسافة بين الصورة والعناوين الرئيسية،
• وأخيرًا للعناوين الرئيسية.

بالنسبة للصورة مع الحدود ، سنقوم بضبط جدول آخر داخل الخلية وضبط لوحة الخلايا على 5 بكسل وإعطائها لون خلفية رمادية. تضيف Cellpadding إلى عرض العنصر ، لذا نحتاج إلى تقليل العرض المحدد للخلية بمقدار 10 بكسل.

1

<tr>

2

	<td></td>

3

</tr>

4

<tr>

5

	<td>

6

		<table id="content-1" cellpadding="0" cellspacing="0" align="center">

7

			<tr>

8

				<td width="170" valign="top">

9

					<table cellpadding="5" cellspacing="0">

10

						<tr>

11

							<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>

12

						</tr>

13

					</table>

14

				</td>

15

				<td width="15"></td>

16

				<td width="375" valign="top" colspan="3">

17

					<h3>All New Site Design</h3>

18

					<h4>It's 150% Better and 40% More Efficient!</h4>

19

				</td>

20

			</tr>

21

		</table><!-- content 1 -->

22

	</td>

23

</tr><!-- content 1 -->

إشعار:

• لقد أضفنا صفًا وخلية جدول فارغًا فوق المحتوى. نظرًا لأن لدينا 15 بكسل من الخلايا ، يمكننا استخدام خلية فارغة لإضافة 15 بكسل من التباعد بين العناصر. في بلدي التجارب، هذا يعمل غرامة فارغة، ولكن يمكنك دائماً إضافة مسافة غير منقسمة للتأكد.
• نحن كنت الإعداد الخامس-محاذاة الخاصية إلى أعلى. هذا أمر مهم، لأنه يقوم بمحاذاة كل خلية مع الجزء العلوي من الصف. الإعداد الافتراضي الأوسط، الأمر الذي يؤدي إلى بعض النتائج الغريبة.
• نحن نستخدم صورًا زائفة من dummyimage.com نظرًا لأنه يجب استضافة جميع الصور الموجودة في رسائل HTML الإلكترونية (أكثر من ذلك لاحقًا) ومن الأسهل جدًا استخدام الصور التي تم إنشاؤها. تحقق من الموقع ، فهو يشرح كيفية تحديد الصورة التي تريدها باستخدام عنوان URL.

قسم المحتوى-1-العمود

وهذا قسم حقيقة بسيطة: جدول عمود واحد فقط مع فقرة داخل. لا ننسى لضبط عرض الخلية وتحديد محاذاة الجدول للمركز.

1

<p><tr>

2

	<td>

3

		<table id="content-2" cellpadding="0" cellspacing="0" align="center">

4

			<tr>

5

				<td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>

6

			</tr>

7

		</table><!-- content-2 -->

8

	</td>

9

</tr><!-- content-2 -->

10

</p>

فواصل

لإضافة مساحة عمودية (أكثر من 15px cellspacing لدينا) علينا أن استخدام صورة فاصل. تماما مثل ال 90! أننا يمكن أن تستخدم صورة gif فاصل وتحميله، ولكن في الوقت الراهن أسرع مجرد استخدام صورة دمية أخرى. سأترك ذلك الرمادي حيث يمكنك أن ترى ذلك، ولكن في وقت لاحق ونحن يمكن تعيينها إلى الأبيض في الأبيض.

1

<tr>

2

	<td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>

3

</tr>

مما يعطينا شيئًا كهذا:

قسم المحتوى-3 أعمدة

بالنسبة إلى قسم من 3 أعمدة ، نستخدم خمس خلايا جدول ، واحدة لكل عمود ، وواحدة بين الأعمدة لفصلها.

1

<tr>

2

	<td>

3

		<table id="content-3" cellpadding="0" cellspacing="0" align="center">

4

			<tr>

5

				<td width="180" valign="top">

6

					<table cellpadding="5" cellspacing="0">

7

						<tr>

8

							<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>

9

						</tr>

10

					</table>

11

				</td>

12

				<td width="15"></td>

13

				<td width="180" valign="top">

14

					<table cellpadding="5" cellspacing="0">

15

						<tr>

16

							<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>

17

						</tr>

18

					</table>

19

				</td>

20

				<td width="15"></td>

21

				<td width="180" valign="top">

22

					<table cellpadding="5" cellspacing="0">

23

						<tr>

24

							<td bgcolor="d0d0d0"><img src="http://dummyimage.com/170x120/e9e9e9/fff" /></td>

25

						</tr>

26

					</table>

27

				</td>

28

			</tr>

29

		</table><!-- content-3 -->

30

	</td>

31

</tr><!-- content-3 -->

سهل الاستخدام ، استخدم نفس الطريقة للحدود كما فعلنا في قسم الأعمدة. لا تنسوا المحاكة!

أعمدة النص الثلاثة هي نفس العملية بالضبط.

1

<tr>

2

	<td>

3

		<table id="content-4" cellpadding="0" cellspacing="0" align="center">

4

			<tr>

5

				<td width="180" valign="top">

6

					<h5>Exciting New Products!</h5>

7

					<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.									Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

8

				</td>

9

				<td width="15"></td>

10

				<td width="180" valign="top">

11

					<h5>A Newsletter Every Month</h5>

12

					<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

13

						deserunt mollit anim id est laborum.</p>

14

				</td>

15

				<td width="15"></td>

16

				<td width="180" valign="top">

17

					<h5>New and Improved Forum</h5>

18

					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

19

						sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

20

				</td>

21

			</tr>

22

		</table><!-- content-4 -->

23

	</td>

24

</tr><!-- content-4 -->

إضافة فاصل آخر في الجزء السفلي، ونحن تقريبا هناك:

البقية...

كل شيء آخر هو مجرد تكرار ما قمنا به بالفعل: قسم مكون من عمودين وقسم بعمود مع فواصل بينهما.

1

<tr>

2

	<td>

3

		<table id="content-5" cellpadding="0" cellspacing="0" align="center">

4

			<tr>

5

				<td width="267" valign="top">

6

					<table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>

7

						<img src="http://dummyimage.com/267x200/e9e9e9/fff" />

8

					</td></tr></table>

9

				</td>

10

				<td width="15"></td>

11

				<td width="278" valign="top">

12

					<h4>This is a heading</h4>

13

					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

14

				</td>

15

			</tr>

16

		</table><!-- content-5 -->

17

	</td>

18

</tr><!-- content-5 -->

19

<tr>

20

	<td height="30"><img src="http://dummyimage.com/570x30/e9e9e9/fff" /></td>

21

</tr>

22

<tr>

23

	<td>

24

		<table id="content-6" cellpadding="0" cellspacing="0" align="center">

25

			<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

26

			<p align="center"><a href="#">CALL TO ACTION</a></p>

27

		</table>

28

	</td>

29

</tr>

وقد اكتمل المخطط الرئيسي الآن:

كلمة بشأن الصور

على عكس صفحات ويب عادية، لا مجرد وضع جميع الصور الخاصة بك في مجلد وثم استخدام المسارات النسبية للارتباط بها. يجب أن تكون كافة ارتباطات مطلقة! عندما أقوم بتطوير بريد إلكتروني ، أقوم عادة باستضافة الصور على نطاق فرعي أو على Amazon S3. عندما أكون مستعدًا لإرسال البريد الإلكتروني لأحد العملاء ، فإنني أنقل جميع الصور إلى نطاق فرعي من موقع الويب الخاص بهم.

يجب أن تكون جميع روابط الصور مطلقة!

الخطوة 4: التصميم البريد الإلكتروني

ونحن لا يمكن استخدام ورقة أنماط خارجية، ونحن لا يمكن تضمين المغلق في رأس رسالة البريد الإلكتروني، نظراً لأن بعض العملاء قطاع من علامة الرأس كاملة، أو تجاهل علامات نمط. نحن ذاهبون إلى استخدام أنماط مضمنة، الذي هو ألم ضخمة. لحسن الحظ ، هناك خدمات مفيدة متوفرة ستتخذ CSS مضمّنًا وتجعلها مضمنة. أستخدم موقعًا إلكترونيًا يُسمى Premailer ، حيث يمكنك لصقه في الشفرة مباشرةً وإخراج نفس الشيء باستخدام CSS المضمّن.

نحن ذاهبون للقيام CSS مضمنة لهذا البرنامج التعليمي، ثم نحن ذاهبون لجعله متوافقاً مع بريمايلير.

Premailer يأخذ CSS المدمجة ويجعلها مضمنة!

إعادة تعيين الأساسية

لن نذهب للقيام بإعادة تعيين ثابت مع * محدد كما قد تفعل لصفحة ويب. استخدام الإعدادات الافتراضية في الواقع سوف تسفر عن نتائج أكثر اتساقا. الحشو/الهوامش التي سوف نحتاج إلى إعادة تعيين عناصر فقط هي تلك التي سوف يكون لديك مساحة حولهم (من سيلبادينج/سيلسباسينج) مثل لدينا عناوين الرأس، أو الفقرات لدينا.

ستلاحظ أيضًا هامشًا حول جدول المجمّع ، وهو التصميم الافتراضي فقط على عنصر النص الأساسي.

1

<style type="text/css">

2

	body, #header h1, #header h2, p {margin: 0; padding: 0;}

3

</style>

أسلوب الطباعة

لا شيء خاص جداً حول الطباعة للبريد إلكتروني نظراً لأنه إلى حد كبير نفس الشيء سيكون لصفحة ويب. لا تستخدم الإعلانات الاختزال (مثل الخط:) لأنك لن تحصل على نتائج متسقة.

1

#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

2

#header h1 {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; }

3

#header h2 {color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 24px; }

4

#header p {color: #ffffff; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }

5

h3 {font-size: 28px; color: #444444; font-family: Arial, Helvetica, sans-serif; }

6

h4 {font-size: 22px; color: #4A72AF; font-family: Arial, Helvetica, sans-serif; }

7

h5 {font-size: 18px; color: #444444; font-family: Arial, Helvetica, sans-serif; }

8

p {font-size: 12px; color: #444444; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}

9

h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

وننظر: أفضل بكثير الآن!

صور الخلفية

تعمل صور الخلفية بشكل مشابه تمامًا كما هو الحال في صفحة الويب ، باستثناء أنها لا تعمل في بعض الأحيان! تأكد من أن لديك لون خلفية احتياطي ، يتم تعيينه للخلية على هيئة bgcolor ، للعملاء الذين لا يدعمون خلفيات CSS.

1

<td style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg); " width="570" bgcolor="8fb3e9:><h2>News and Events</h2></td>

متنوعة الأنماط الأخرى

نحن بحاجة إلى النمط كل وصلة، أو أنهم سيرثون اللون الافتراضي عميل البريد الإلكتروني، ويتيح أيضا إضافة تلك الحدود حول الجدول الرئيسي. سنقوم أيضا بإضافة العرض: كتلة لجميع الصور لدينا، وهذا يحل خلل في Outlook و Hotmail.

تأكد من إضافة "عرض: كتلة" إلى جميع الصور لمنع خلل هامش غريبة في Hotmail.

1

#main {border: 1px solid #cfcece;}

2

img {display: block;}

3

a {color: #4A72AF;}

ونحن ننتهي مع الجزء السهل. الآن على الاختبار!

الخطوة 5: الاختبار

عملية الاختبار هو الجزء الأكثر أهمية والأكثر البغيض لإنشاء رسائل البريد الإلكتروني HTML. عندما أعمل في رسالة بريد إلكتروني، اختبار بشكل متكرر في كل مرحلة، حتى أنا يمكن تحديد بالضبط ما يذهب على نحو خاطئ. وهناك الكثير من العملاء لاختبار، والكثير من الطرق لاختبار لهم، دعونا نذهب أكثر من ذلك جميع.

عملاء البريد الإلكتروني

هؤلاء هم العملاء يجب أن تختبرها، على الأقل:

• التوقعات 2003/2007
• هوتميل
• بريد ياهو!
• جوجل
• Apple Mail
• طائر الرعد

كيف للاختبار

سنحتاج إلى إيجاد طريقة لإرسال رسائل بريد إلكتروني بتنسيق HTML أولاً. من المحتمل أن يكون عميلك قد تم إعداده باستخدام خدمة مثل Mailchimp أو Campaign Monitor ، مما يسمح لك باختبار وإرسال حملات البريد الإلكتروني.

قد تعتقد أنني أعقد هذا دون داع ، لأن بعض عملاء البريد الإلكتروني يسمح لك بلصق رمز HTML. ومع ذلك ، يمكن أن يؤدي ذلك إلى نتائج مختلفة عن استخدام تطبيق حملة البريد الإلكتروني. اختبر مع تطبيق ليكون على الجانب الآمن.

اختبار مع Mailchimp

الأسلوب المفضل بلدي ينطوي على استخدام Mailchimp لإرسال حملات الاختبار والاختبار. Mailchimp مجاني ليصل إلى 500 مستلم، حتى لا تضطر إلى دفع للاختبار. وله واجهة بسيطة وسهلة الاستخدام. وإليك سريعة تجول خطوة بخطوة:

• قم بالتسجيل للحصول على حساب Mailchimp مجاني ، وقم بإضافة قائمة مستلمين لحسابات البريد الإلكتروني التجريبية الخاصة بك: Hotmail و Yahoo !، و Gmail ، وقم بتسجيل الدخول إلى حسابك الجديد.
• اختر إنشاء حملة وتحديد الرتب الأخرى العادية "حملة من صفحة الحساب الرئيسية. ملء المعلومات الأساسية حول الحملة، كنت حقاً بحاجة فقط اسم لأغراض الاختبار.
• في صفحة التصميم ، حدد استيراد -> لصق في التعليمات البرمجية وتأكد من تحديد Automatic CSS Inliner
• إذا كنت لا تستخدم Mailchimp، تأكد من استخدام بريمايلير للحصول على المحول المغلق الخاص بك
• تابع حتى تصل إلى صفحة التأكيد ، واختر إرسال اختبار. يمكنك إرسال بعض الاختبارات من هنا ، ولكن بعد ذلك ، تحتاج إلى إرسال رسائل البريد الإلكتروني إلى قائمتك.

اختبار مع Litmus

Litmus هو تطبيق ويب يختبر رسائل HTML الإلكترونية في جميع أنواع الإصدارات من جميع أنواع العملاء. تكلف الخدمة الكاملة المال ، ولكن إذا لم تتمكن من إقناع العميل بالدفع ، فإن الإصدار المجاني يتيح لك الاختبار في Gmail القديم و Outlook 2003 ، وهو أمر لا يزال مفيدًا.

النتائج-جيد

بعض تجاربنا تبين جيد:

Apple Mail

ثندربيرد

النتائج-باديش

بعضهم قليلاً قبالة، ولكن أكثر أو أقل نفسه:

Gmail (safari)

2007 أووتلووك

برنامج outlook 2003

ياهو! بريد

النتائج-القبيح

كان لدينا أيضا فشل زوجين.

هوتميل (جرين؟)

Gmail القديم (مستكشف)

تنظيف الفوضى

كل الأمور تعتبر ، هذا اختبار ناجح للغاية ، لأنني اختبرت الكثير من العناصر في Outlook و Gmail كما كنت ذاهبا. ترتبط المشاكل التي نواجهها مع Gmail القديم و Hotmail بأوراق الأنماط الافتراضية التي يستخدمها العملاء. العلامة التجارية مايكروسوفت الخاصة والفريدة لمجنون أعطانا ورقة أنماط افتراضي الذي يتجاوز كل العناوين بنمط نص أخضر مع! تعيين مهمة. في بعض الأحيان وأنا متأكد من أنهم يريدون جعل لي مجنون.

لحل هذه المشكلة ، نحتاج إلى إضافة الإعلان المهم إلى كل أنماط ألوان العنوان لدينا على النحو التالي:

1

h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

2

	h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }

3

	h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

ل Gmail القديم، لدينا مشكلة مماثلة في الرأس: Gmail هو إضافة هامش إضافي للجزء السفلي من علامات العنوان. نحن بحاجة فقط تجاوز الهامش السفلي على وجه التحديد.

1

#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; }

2

	#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important}

ونحن الثابتة Hotmail:

لذا يوجد لدينا، رسالة بريد إلكتروني HTML الوظيفية، بما يتفق (إذا كان قليلاً عادي). هو ألم، نعم، ولكن بمجرد الحصول على نظام تسير عليه يذهب على نحو أسرع كثيرا. في محاولة للحفاظ على التعليمات البرمجية الخاصة بك جيدا وعلقت ومنظمة بحيث يمكنك إعادة استخدام أجزاء منه في وقت لاحق.

إذا كان بإمكانك التحدث مع عميلك للاشتراك في أمر مثل Litmus ، فستكون حياتك أسهل بكثير. يمكنك أيضًا اختبار الكثير من العملاء من خلال الإصدارات المدفوعة من جهاز Mailchimp ومراقبة الحملة.

استكشاف الأخطاء وإصلاحها

من المؤكد أنك ستواجه مشكلات لم أتناولها هنا ، ولكن لدي بعض النصائح العامة للتنظيف:

• فحص الرياضيات الخاص بك: لا أتذكر عدد المرات التي كنت ثمل تخطيط بعدم إضافة عرض خلايا الجدول بدقة. تذكر أن تقوم بحساب cellpadding: فإنه يضيف إلى عرض الخلايا الخاصة بك.
• تحقق من أوراق الأنماط الافتراضية: استخدم شيئًا مثل Firebug أو Webkit Inspector للتحقق مما إذا كان عميل المتصفح يتجاوز أنماطك. إذا حدث هذا ، فإن إضافة إعلان مهم يجب أن يحل المشكلة.
• ابحث عنه: هناك دائماً فرصة جيدة جداً شخص شهدت المشكلة الخاصة بك من قبل. إذا كان لا يساعد جوجل، جرب التصفح نصائح وحيل على المدونات لخدمات البريد الإلكتروني شعبية والحملة، بعض الناس لا رسائل البريد الإلكتروني للعيش، وأنهم يعرفون الأشياء!
• فصلها: إذا لم تتمكن من العثور على المكان الذي ذهبت إليه بشكل خاطئ ، فارجع إلى البداية وتحقق من رسالة البريد الإلكتروني شيئًا فشيئًا حتى تجد ما يكسرها.

والنتيجة

هنا هو رمز النهائية للمرجع الخاص بك:

1

<html>

2

<head>

3

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

4

   <title>Nettuts Email Newsletter</title>

5

   <style type="text/css">

6

   	a {color: #4A72AF;}

7

	body, #header h1, #header h2, p {margin: 0; padding: 0;}

8

	#main {border: 1px solid #cfcece;}

9

	img {display: block;}

10

	#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

11

	#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }

12

	#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin-bottom: 0 !important; padding-bottom: 0; }

13

	#header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px;  }

14

	h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}

15

	h3 {font-size: 28px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

16

	h4 {font-size: 22px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }

17

	h5 {font-size: 18px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }

18

	p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}

19

   </style>

20

</head>

21

22

<body>

23

24

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="e4e4e4"><tr><td>

25

26

<table id="top-message" cellpadding="20" cellspacing="0" width="600" align="center">

27

		<tr>

28

			<td align="center">

29

				<p>Trouble viewing this email? <a href="#">View in Browser</a></p>

30

			</td>

31

		</tr>

32

	</table><!-- top message -->

33

34

<table id="main" width="600" align="center" cellpadding="0" cellspacing="15" bgcolor="ffffff">

35

		<tr>

36

			<td>

37

				<table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="8fb3e9">

38

					<tr>

39

						<td width="570" bgcolor="7aa7e9"><h1>Communitech Venture Services</h1></td>

40

					</tr>

41

					<tr>

42

						<td width="570" bgcolor="8fb3e9" style="background: url(http://tessat.s3.amazonaws.com/email-bg.jpg);"><h2 style="color:#ffffff!important">News and Events</h2></td>

43

					</tr>

44

					<tr>

45

						<td width="570" align="right" bgcolor="7aa7e9"><p>July 2010</p></td>

46

					</tr>

47

				</table><!-- header -->

48

			</td>

49

		</tr><!-- header -->

50

51

		<tr>

52

			<td></td>

53

		</tr>

54

		<tr>

55

			<td>

56

				<table id="content-1" cellpadding="0" cellspacing="0" align="center">

57

					<tr>

58

						<td width="170" valign="top">

59

							<table cellpadding="5" cellspacing="0">

60

								<tr><td bgcolor="d0d0d0"><img src="http://tessat.s3.amazonaws.com/coins_small.jpg" width="170" /></td></tr></table>

61

						</td>

62

						<td width="15"></td>

63

						<td width="375" valign="top" colspan="3">

64

							<h3>All New Site Design</h3>

65

							<h4>It's 150% Better and 40% More Efficient!</h4>

66

						</td>

67

					</tr>

68

				</table><!-- content 1 -->

69

			</td>

70

		</tr><!-- content 1 -->

71

		<tr>

72

			<td>

73

				<table id="content-2" cellpadding="0" cellspacing="0" align="center">

74

					<tr>

75

						<td width="570"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>

76

					</tr>

77

				</table><!-- content-2 -->

78

			</td>

79

		</tr><!-- content-2 -->

80

		<tr>

81

			<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>

82

		</tr>

83

		<tr>

84

			<td>

85

				<table id="content-3" cellpadding="0" cellspacing="0" align="center">

86

					<tr>

87

						<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">

88

							<img src="http://tessat.s3.amazonaws.com/crayons.jpg" width="170" />

89

						</td>

90

						<td width="15"></td>

91

						<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">

92

							<img src="http://tessat.s3.amazonaws.com/handshake.jpg" />

93

						</td>

94

						<td width="15"></td>

95

						<td width="170" valign="top" bgcolor="d0d0d0" style="padding:5px;">

96

							<img src="http://tessat.s3.amazonaws.com/moo02.jpg" />

97

						</td>

98

					</tr>

99

				</table><!-- content-3 -->

100

			</td>

101

		</tr><!-- content-3 -->

102

		<tr>

103

			<td>

104

				<table id="content-4" cellpadding="0" cellspacing="0" align="center">

105

					<tr>

106

						<td width="180" valign="top">

107

							<h5>Exciting New Products!</h5>

108

							<p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.									Duis aute irure dolor in reprehenderit in voluptate velit esse cillum</p>

109

						</td>

110

						<td width="15"></td>

111

						<td width="180" valign="top">

112

							<h5>A Newsletter Every Month</h5>

113

							<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

114

								deserunt mollit anim id est laborum.</p>

115

						</td>

116

						<td width="15"></td>

117

						<td width="180" valign="top">

118

							<h5>New and Improved Forum</h5>

119

							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

120

								sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

121

						</td>

122

					</tr>

123

				</table><!-- content-4 -->

124

			</td>

125

		</tr><!-- content-4 -->

126

		<tr>

127

			<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>

128

		</tr>

129

		<tr>

130

			<td>

131

				<table id="content-5" cellpadding="0" cellspacing="0" align="center">

132

					<tr>

133

						<td width="267" valign="top">

134

							<table cellpadding="5" cellspacing="0" bgcolor="d0d0d0"><tr><td>

135

								<img src="http://tessat.s3.amazonaws.com/card18.jpg" />

136

							</td></tr></table>

137

						</td>

138

						<td width="15"></td>

139

						<td width="278" valign="top">

140

							<h4>This is a heading</h4>

141

							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

142

						</td>

143

					</tr>

144

				</table><!-- content-5 -->

145

			</td>

146

		</tr><!-- content-5 -->

147

		<tr>

148

			<td height="30"><img src="http://dummyimage.com/570x30/fff/fff" /></td>

149

		</tr>

150

		<tr>

151

			<td>

152

				<table id="content-6" cellpadding="0" cellspacing="0" align="center">

153

					<p align="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

154

					<p align="center"><a href="#">CALL TO ACTION</a></p>

155

				</table>

156

			</td>

157

		</tr>

158

159

	</table><!-- main -->

160

	<table id="bottom-message" cellpadding="20" cellspacing="0" width="600" align="center">

161

		<tr>

162

			<td align="center">

163

				<p>You are receiving this email because you signed up for updates</p>

164

				<p><a href="#">Unsubscribe instantly</a> | <a href="#">Forward to a friend</a> | <a href="#">View in Browser</a></p>

165

			</td>

166

		</tr>

167

	</table><!-- top message -->

168

</td></tr></table><!-- wrapper -->

169

170

</body>

171

</html>

إليك ما تبدو عليه النتيجة النهائية إذا استخدمنا صورًا حقيقية:

لا شيء مميز حقًا ، ولكن يجب أن تبدأ في تصميم رسائل HTML الإلكترونية الخاصة بك. هناك، بالطبع، وطرق أخرى للقيام بكل شيء لقد فعلت ولكن مع إتش تي أم ال البريد الإلكتروني كل ذلك حقاً الأمور أنه يعمل. ليس هناك الكثير لوضع مفهوم لمعايير الويب أو أفضل الممارسات هنا.

الموارد

• شراء قوالب البريد الإلكتروني على ThemeForest
• موارد مراقبة الحملة (تحتوي مدونتها أيضًا على بعض النصائح المفيدة حقًا)
• الموارد Mailchimp
• 6 طرق سهلة لتحسين رسائل البريد الإلكتروني الخاصة بك HTML
• 20 أفضل ممارسات تصميم البريد الإلكتروني والموارد للمبتدئين
• 30 HTML أفضل الممارسات للمبتدئين

أرجو أن كنت قد تعلمت شيئا اليوم! أنا أعرف وجدت أول مشروع البريد الإلكتروني HTML لتكون أحد أهم للتربية لقد عملت من أي وقت مضى على. إلا أنه يبدو عادلة لتقاسم ما تعلمته!