איך להתאים דף נחיתה לנייד

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

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

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

איך נראה דף הנחיתה בנייד ובמחשב

דף הנחיתה במחשב

איך להתאים דף נחיתה לנייד
פוסט

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

דף הנחיתה בנייד

דף נחיתה אלמנטור, בניית אתרים אזור רחובות
פוסט

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

איך נראה הדף בעורך הדפים אלמנטור

דף נחיתה אלמנטור  בניית אתרים מזכרת בתיה
פוסט

התמונה היא שילוב של שלושה צילומי מסך, שביחד יוצרים את דף הנחיתה.

חלקים 1,5 מופיע רק במסך גדול. חלקים 2,3 מופיעים רק בנייד. חלקים 4,6 מופיעים גם וגם.

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

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

חלקים 4,6 נראו טוב בשני המסכים, לכן בחרתי לשנות רק את גודל האותיות.

אז איפה עושים את זה?

התאמת חלק לגודל מסך?

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

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

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

התאמה פנימית של גודל טקסט ורווחים.

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

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

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

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

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

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

לרוב, אני בונה את הדף בכמה שלבים.

א. דף רגיל במחשב.

ב. בדיקת הדף ב"תצוגה מקדימה" בדיקת העיצוב במחשב ובמסך משתנה.

ג. התאמות לנייד לפי התצוגה במסך מחשב מכווץ.

ד. שליחת לינק לנייד, בדיקה נוספת בנייד (לרוב יש דברים נוספים שלא ניתן לראות במחשב.

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

שיתוף ב facebook
Facebook
שיתוף ב twitter
Twitter
שיתוף ב linkedin
LinkedIn

שתפו אם אהבתם

פוסטים נוספים שאולי יעניינו אתכם

בניית אתרים באזור רחובות

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

קרא עוד »

SEO – סינדרלה איכות או-מותג

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

קרא עוד »