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

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

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

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

כאשר אנו מעצבים מייל, אנו יכולים לעצב אותו כתמונה (ואפילו עדיף). אך מה קורה כאשר יש לנו מערכת לשליחת מיילים השולחת מייל בהתאם לסוג הלקוח ועם שמו? בעוד שעבור כמה עשרות או מאות לקוחות לא צריך תוכנה כזו, עסקים גדולים יותר נדרשים למערכת שליחת מיילים שמסוגלת לשלוח מייל נפרד עבור כל קבוצת לקוחות ועם שמו של הלקוח המופיע בגוף המייל. עבור מערכת כזו אנו נדרשים לעצב את המייל באמצעות 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 ללא שבירה של המייל.

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

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

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

תמונת תצוגה של מנעול על מחשב
פתרונות ומאמרים על פיתוח אינטרנט

הגנה מפני XSS עם Trusted Types

תכונה ב-CSP שמאפשרת מניעה כמעט הרמטית להתקפות XSS שכל מפתח ווב צריך להכיר וכדאי שיכיר.

גלילה לראש העמוד