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

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

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

עיצוב רספונסיבי בשיווק במייל

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

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

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

ב נעשה שימוש בעיצוב אתרים עם CSS "שאילתות מדיה" לעצב אתר לפי הפורמט. עד 360 פיקסלים יגיעו לטלפון נייד, ומ- 360 פיקסלים ל 650 פיקסלים נוכל לבצע שינויים לכל אותם משתמשים שרואים את האתר שלנו מטאבלט.

חלק מהעקרונות לעלוני השיווק בדוא"ל שלנו הם:

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

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

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

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

עיצוב רספונסיבי בדף נחיתה

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

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

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

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

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

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

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