9 טריקים לעיצוב עלון HTML מושלם

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

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

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

מטרות של עלון

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

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

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

1. לנצל את לוחות פריסות שלך

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

ייתכן גם תוהה מדוע div וגורמים אחרים לחסום הם לא רעיון טוב. רוב לקוחות הדואר האלקטרוני הם בנוי כדי להסיר כל CSS חיצוני תוכן. זה אומר שאתה לא תוכל להשתמש הרבה דבר מלבד inline CSS (ואפילו תמיכה מלאה הוא זול). ללקוחות כגון Microsoft Outlook 2007 ו- Gmail של Google יש תמיכה גרועה מאוד באלמנטים צפים ובמיקום ישיר.

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

2. מיקום קבוע רוחב

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

עם זאת, עבור רבים שיטה זו היא קצת יותר מדי רפיון. עלונים בונה ידרוש רוחב קבוע ברוב המקרים, במיוחד אם תשתמש באנרים ותמונות שהוגדרו לגודל מסוים. אני ממליץ לעבוד 500px - 600px רוחב מסמך מרבי. גודל המסך האופקי של ה- iPhone וכמה דגמי BlackBerry מוגבלים ל- 320px, כך שגם ב- 500px תבנית הדואר האלקטרוני שלך תהיה כדי להתאים אותו כראוי.

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

3. יחידות פיקסל

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

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

4. האפשרויות עם CSS

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

היזהר על סגנונות הגופן שלך כדי לא לדחוף את הגבולות רחוק מדי. אם אתה מרגיש לא נוח עם סגנונות מוטבעים, תמיד ניתן להשתמש בתג גופן HTML למרות שזה כבר הוצא משימוש. אם אתה מעצב CSS, אינך צריך לצאת מהמערכת, אך כל קיצור CSS בקיצור עשוי לגרום לעיצוב באגי. כדוגמה font: 12px / 14px Arial, sans-serif; קצרנות יכול לעזור לחסוך הרבה מקום, אבל זה לא מקובל לחלוטין עבור עיצוב דואר אלקטרוני, גם כאשר הוא משמש עם סגנונות בתוך.

אפילו הבחירות שלך צבע צריך להיכתב זמן רב. צבעים Hex כגון #ccc או # e3f חייב להיות כתוב במלואו #cccccc או # ee33ff, בהתאמה. אם אתה יכול לבנות את מה שאתה צריך בלי CSS הייתי ממליץ על הנתיב הזה, אבל לא לגמרי ביישן מן CSS בדואר אלקטרוני עיצובים כי בניגוד לאמונה הרווחת היא נתמכת ברוב המקרים.

5. עוגן קישורים שיטות עבודה מומלצות

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

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

טקסט קישור כלשהו

אפקטים מרחפים הם אינו נתמך ב- Outlook 2007/2010, ב- Gmail, ב- iOS או ב- Android. ייתכן שעדיין תרצה לכלול את א: רחף סגנון עבור כל הלקוחות התומכים: Outlook 2000/2003, Hotmail, Apple Mail ו- Yahoo! אבל באופן אישי אני לא רואה תועלת רבה בחוויית המשתמש החלקית, שכן בוררי העוגן אינם נתמכים במידה רבה אני ממליץ רק מציע 2-3 צבעים הקישור להשתמש בכל העיצוב שלך.

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

6. מבחן בכל הלקוחות העיקריים

מחקר שנערך לאחרונה בקרב לקוחות הדואר האלקטרוני הנפוצים ביותר (שבוצעו על ידי Campaign Monitor) מציג עשר מבין לקוחות הדואר האלקטרוני הפופולריים ביותר בשנה האחרונה. זה אולי נראה קצת משעמם אבל מעצבים צריך לקבל את הרגל לבדוק את עלונים על כל לקוחות הדואר האלקטרוני העיקריים, לכל הפחות על חלק מהלקוחות הנפוצים יותר כגון Gmail, Hotmail או Yahoo! דואר.

דבר זה אינו כולל את כתובת הדואר האלקטרוני בלבד, אלא גם את תוכנת ההפעלה הן ב- Mac OS X והן ב- Windows. גם לפי התרשים שלהם iOS Mail ו אנדרואיד יש שתי הרקטות לתוך הרשימה 10 העליון במהלך השנים האחרונות. למעשה אייפון, אייפוד טאץ 'ו- iPad Mail מדורגת # 2 הפופולרי ביותר תחת Outlook! למרבה הצער אין דרך לבדוק את אלה ללא owning אחד המכשירים - כך תצטרך להסתפק עם אפשרויות אחרות.

באג אחד עם תמיכה ניידים מגיע בהרבה iPhone ו- Android מודלים. עיבוד דואר אלקטרוני נייד יהיה לעתים קרובות לשנות את גודל הטקסט בתוך התבנית שלך. זה לא יכול להשפיע על העיצוב שלך מאוד, אבל זה יכול להיות מעצבן כמה קוראים. שימוש ב- CSS -webkit-text-size-adjust: none;, רצון להבטיח גודל טקסט ברירת מחדל אפילו לאורך כל מנועי ניתוח ללא צורך לבחון אותו.

אם אתה מכיר חברים או עמיתים המשתמשים בתוכנה חלופית, ייתכן שתרצה לבקש את עזרתם על בדיקת הניוזלטר. גם אתה יכול לשלוח להם עותק של הדואר האלקטרוני כדי לבדוק את המכשיר או לשאול את המכשיר כדי לנקות באופן פעיל את קידוד באגים. למרבה המזל, Outlook מציע גירסת התקנה של Mac, כך שלא תצטרכו לאתר משתמש של Windows לאופטימיזציות אלה, אך כשמדובר ב- Lotus Notes או ב- Windows Mail, ייתכן שתצליחו.

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

7. תמיד להציע אינטרנט מבוססי צפיות

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

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

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

8. הוספת תוכן תמונה

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

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

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

לגבי אחסון תמונות, מומלץ לך לשמור את כל הקבצים בשרת האינטרנט שלך. זוהי אפשרות טובה יותר במקום להשתמש במארח תמונות אחר, או על ידי העלאת הקבצים לשירות ידיעון מקוון. בנוסף עליך להפריד את התוכן עבור עלונים שלך הרחק משאר התמונות שלך במבנה התיקיות ככה / img / דוא"ל או / img / email / 2011.

9. הימנע ספאם תיקייה!

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

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

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

גלריית עיצוב עלון

מה כיף היה עלון אלקטרוני המאמר להיות ללא כמה דוגמאות נהדרות? יש טונות של עיצובים עלון אלקטרוני ותבניות כדי לבדוק ב- Google. HTML דואר אלקטרוני גלריה היא מקור מאוד פופולרי עבור השראה.

בהמשך הוספתי צילומי מסך מתוך ידיעונים רבים בגלריה של Campaign Monitor. אני מקווה אלה פריסות נהדר יכול לספק לך כמה רעיונות גדולים עבור עיצובים משלך.

תיהני לעצב את הידיעונים האידיאליים שלך!

ערני עבור עסקים