טיפ 1 ביצירת דיוור אלקטרוני – בעיה עם רווח מיותר בין תמונות בג'ימייל

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

והנה הטיפ הראשון – כיצד להתגבר על רווחים שמופיעים בין תמונות בג'ימייל.

אבל קודם טיפ מקדים – תמיד לבחון את הדיוור בשתי מערכות עיקריות (אאוטלוק 2010 וג'ימייל).

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

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

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

הפתרון הוא פשוט: לשלב את הקוד הבא בכל תמונה בדיוור:

Style="display:block;"

  • חלק מהמערכות מאפשרות להוסיף את הקוד בתוך תפריט "עיצוב התמונה" – לדוגמא ברב מסר: תחת תגית מתקדם -> עיצוב (יש להוסיף רק את החלק של "display:block"

אפשרות נוספת:

להיכנס לאזור עריכת ה- HTML שמופיע בכל דיוור. ללחוץ CTRL-F ולעשות חיפוש אחר המילה IMG

להוסיף את הקוד לתוך תגית התמונה – כך שהתוצאה תהיה:

<img src="mypicture.jpg"  Style="display:block;">

שימו לב שאם כבר קיים הכיתוב Style בתוך התגית – יש להוסיף רק את הקוד display:block ממש לפני ה " (גרשיים) שסוגרים את ה- Style.

כך לדוגמא – עבור:

<img src="mypicture.jpg"  Style="Something:atrribute;">

יהפוך ל:

<img src="mypicture.jpg"  Style=" Something:atrribute; display:block;">