רן בר-זיק     לפני 16 שנים     כ- 4 דקות קריאה  

בניית מייל HTML | אינטרנט ישראל

תוכנה

כיצד יוצרים מיילים מעוצבים ללקוחות

שליחת מיילים ללקוחות (לא כחלק מספאם) היא חלק מבסיס השיווק של כל אתר אינטרנט וחברה הפועלת באינטרנט. באמצעות המייל אפשר להודיע ללקוחות על מבצעים, עדכונים ושינויים שונים ולהציע להם הטבות שונות ומשונות.

רבים מהלקוחות אוהבים לקבל מיילים כאלו ונרשמים אליהם, כל עוד העדכונים נעשים במידה ובטוב טעם ולא כחלק מהצפה. בסיס נתונים של לקוחות שנרשמו דרך אתר האינטרנט הוא נכס של ממש שראוי וצריך לשמרו.

כאשר אנו מעצבים מייל, אנו יכולים לעצב אותו כתמונה (ואפילו עדיף). אך מה קורה כאשר יש לנו מערכת לשליחת מיילים השולחת מייל בהתאם לסוג הלקוח ועם שמו? בעוד שעבור כמה עשרות או מאות לקוחות לא צריך תוכנה כזו, עסקים גדולים יותר נדרשים למערכת שליחת מיילים שמסוגלת לשלוח מייל נפרד עבור כל קבוצת לקוחות ועם שמו של הלקוח המופיע בגוף המייל. עבור מערכת כזו אנו נדרשים לעצב את המייל באמצעות HTML.

לכאורה עיצוב כזה הוא פשוט ביותר, מה הבעיה ליצור דף HTML פשוט שה-source של התמונות שלו נמצא על שרת חיצוני? מסתבר שזה לא כל כך פשוט. ישנן מערכות מייל רבות – Gmail ו-Outlook הן המרכזיות שבהן, אך מיילים ב-Gmail נראים שונים בדפדפנים שונים וברזולוציות שונות וב-Outlook ישנן כמה גרסאות.

ישנם כמה כללים שמאפשרים לכל מייל להראות באופן אופטימלי ברוב מערכות המייל. כללים אלו שונים לחלוטין מהכללים המוכרים של כתיבת דפי אינטרנט תקינים. זכרו שפה לא מדובר בדפי אינטרנט אלא במיילים שעל מנת שייראו טוב צריך לעמוד בכללים הבאים:

  • המייל יעמוד בתקינת HTML 4 Transitional
  • אין להשתמש ב CSS בכל תנאי ועדיף גם להימנע מהשימוש בstyle Inline.
  • אין להשתמש ב Div או ב Span אלא ב tables בלבד.
  • אין להשתמש ב-Float או Position המיקומים ייעשו על ידי הטבלה בלבד.
  • יש להימנע ככל האפשר מ colspan , colrow. וגם ROWSPAN
  • על מנת לוודא שהתמונות נצמדות ואין ביניהן פערים, יש לוודא שאין גם רווחים בין התגיות השונות (רווחים בקוד עצמו).
  • יש להגדיר רוחב וגובה עבור כל תמונה. יש להגדיר רוחב עבור הטבלה בלבד. אין צורך בהגדרת alt עבור תמונות.
  • אין להשתמש ב background Image – בין אם מדובר בstyle ובין אם מדובר בתגית HTML 4. במידה ויש צורך ברקע (כמו במקרה של תוכן דינמי) יש להשתמש בשוליים המשכפלים את עצמם בכל פעם שהתוכן הדינמי נוצר. לדוגמא התוכן בכל טבלה משתכפל וכך נוצר דף באורך לא מוגדר מראש כאשר יש לו שוליים:
  • שול ימני (תמונה) תוכן דינמי שול שמאלי (תמונה)
  • עבור טבלה בתוך טבלה יש להגדיר border=1 בתוך התאים שיש בתת הטבלה. (ה border עצמו לא יראה בשום מצב, אך ימנע מצב של שבירת גבולות ב Outlook 2007). יש להקפיד להגדיר border=0 בכל הטבלאות, גם הפנימיות.
  • הטבלה תהיה מוגדרת מימין לשמאל dir=rtl ו ALIGN=right
  • רוחב המייל יהיה עד 800 פיקסלים.
  • ללא Flash, Animated GIF או AJAX.
  • ללא spacers

הקפדה על כללים אלו תאפשר לכם לשלוח מייל שיראה היטב בכל תיבות הדואר וכן יהיה אפשר לעשות לו forward ללא שבירה של המייל.

Picture of רן בר-זיק

רן בר-זיק

ארכיטקט תוכנה בכיר בסייברארק, עיתונאי טכנולוגיה בעיתון דה מרקר, מרצה בקריה האקדמית אונו ואוניברסיטת חיפה, אב לארבעה ילדים.

פוסטים מומלצים

פוסטים נוספים שכדאי לקרוא

בינה מלאכותית

מאי 12, 2024 תגובה אחת

DALL·E 2024-01-20 11.16.08 - A detailed illustration of a modern web architecture. The architecture includes a user interface layer with web browsers and mobile devices, a middle

למפתחי ובוני אתרי אינטרנט

ינואר 21, 2024 14 תגובות

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde

יסודות בתכנות

דצמבר 10, 2023 אין תגובות

מיקרו בקרים

יולי 28, 2024 10 תגובות

תמונה של עציץ, רספברי פיי ורמקול

רספברי פיי

לגרום לעציץ שלכם לדבר

כך תשתמשו ברספברי פיי, חיישנים וגם בינה מלאכותית שמותקנת על הרספברי פיי (כן) כדי ליצור… עציץ המדבר.

מאי 19, 2024 6 תגובות

מידע כללי על אינטרנט

אפריל 7, 2024 2 תגובות