כללי כתיבת HTML לחתימות מייל

עודכן 2026-08-05

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

בונים מבנה עם טבלאות, לא עם flexbox או grid

מנוע הרינדור של Word לא תומך ב‑flexbox, ב‑grid, ב‑float בצורה אמינה כלשהי, או ב‑position. טבלאות מקוננות עם רוחב קבוע בפיקסלים הן אמצעי הפריסה היחיד שמרונדר באופן עקבי באאוטלוק, בג׳ימייל, ב‑Apple Mail ובלקוחות המובייל.

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

כל העיצוב בתוך התגית

ג׳ימייל מוחק בלוקים של ‎<style>‎ לחלוטין. אאוטלוק בדפדפן משכתב שמות מחלקות. כל עיצוב שיושב בגיליון סגנונות או באלמנט ‎<style>‎ יימחק באיזשהו שלב בשרשרת, ולכן כל כלל חייב לשבת במאפיין style על האלמנט שהוא חל עליו.

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

תמונות מאוחסנות, עם מידות, ולא הכרחיות

מקשרים לתמונות בכתובת ציבורית מלאה, לעולם לא בנתיב מקומי — נתיב בדיסק שלכם לא נגיש לאף אחד אחר ומייצר את ריבוע התמונה השבורה המוכר. מגדירים מאפייני width ו‑height מפורשים כדי שהמבנה לא יזוז בזמן טעינת התמונות, וכדי שתמונות חסומות עדיין יתפסו את המקום הנכון.

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

מגבילים את הרוחב ובודקים במובייל

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

מרסנים את התוכן

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

משתמשים בטקסט אמיתי לפרטי קשר ולא בתמונות. טקסט ניתן לסימון, לחיפוש, נגיש לקוראי מסך, ושורד חסימת תמונות.