התאמת האתר למובייל: הרבה מעבר לעיצוב רספונסיבי. טיפים מעשיים

למה חשוב לההשקיע בהתאמת האתר למובייל?

כמות הגולשים דרך מכשירי מובייל גדלה בצורה עצומה ועומדת לגדול עוד יותר בשנים הבאות.
לנתונים מעודכנים.

עיצוב רספונסיבי לצורך התאמת האתר שלכם למובייל או עיצוב “Mobile first” שנפוץ מאד בין מומחי אינטרנט בשנים האחרונות, מתייחס לתהליך עיצובי של אתר כאשר החוויה במכשירי הסלולר נמצאת בעדיפות גבוהה ולעיתיםאך עליונה מעל העיצוב למסכי מחשב (desktop).

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

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

איך בודקים אם אתר מותאם נכון למובייל?

אם גיליתי שהאתר לא מותאם מספיק טוב, איך ממשיכים מכאן?

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

טעויות בהתאמה של האתר למובייל ואיך להימנע מהן:

תשתית רספונסיבית

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

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

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

ניווט באתר רספונסיבי התאמת עיצוב ו UX למובייל
מימין לשמאל: אסף לופו , מאגר תכניות היוזמה המדעית, אלרון, לירון מור

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

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

השאיפה שלנו היא חיווי מגוגל שנראה כך:

מהירות טעינת האתר במובייל

טיפול במהירות טעינת האתר במובייל

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

איך בודקים מה מאט את האתר במובייל ואיך מונעים את האיטיות?

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

היררכיה ויזואלית

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

התאמת העיצוב וה UX של האתר למובייל
אותו תוכן, סידור אחר. מתוך אתר pangeacup.com

איך מבצעים את התאמת התוכן והעיצוב למובייל?

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

שמישות וקריאות

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

כללי השמישות העיקריים:

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

אתר מרווח, עם מספיק white space, הוא מפתח ל UX טוב יותר

כמה כללי אצבע:

  • חשוב מאד להשאיר מספיק White Space (שטח נקי מאלמנטים) במסכים קטנים. זה יאפשר לאצבעות ללחוץ בקלות על כפתורים ולגלול בנוחות.
  • כפתורים צריכים להיות לפחות בגודל 30-40 px כדי לבלוט. באתרי איקומרס (חנויות) זה חשוב שבעתיים, כדי לאפשר קניה אימפולסיבית ולמנוע נטישה של עגלת קניות באמצע התהליך. ודאו שכפתורי ההנעה לפעולה באתר (CTA) בולטים ונוחים ללחיצה.
  • אלמנטים רבים, תמונות וצבעים יגרמו לאתר להיראות מבולגן ועמוס ויבריחו את המבקרים. רווחו בין פסקאות הטקסט, בין השורות ובין האלמנטים העיצוביים.
  • ודאו שאזורי הטקסט שלכם מחולקים לפסקאות עם כותרות ביניים ורשימות. גלישה במובייל נעשית לעיתים קרובות כאשר הזמן קצר יותר, בתנועה, בין פעילויות. זה לא הפורמט המתאים לגושי טקסט ארוכים. חשוב לוודא שניתן במבט מהיר לסרוק את תכולת העמוד ולהבין מה יש בו מבלי להעמיק לכל מילה ומילה.

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

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

כמה דוגמאות לטפסים שעובדים טוב במובייל:

התאמת עיצוב הטפסים באתר למובייל על ידי עיצוב רספונסיבי
צילומי מסך מתוך: pangeacup, ab-dental, recruiters, joyventures, hype

פתרונות:

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

מה לקחת?

📌 המפתח לעיצוב מותאם למובייל הוא פשטות. פחות זה יותר.

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

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

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

2

אטי הדר

עוד בנושא:

כנס WordCamp Europe 2020

WordCamp Europe הוא הכנס השנתי הגדול של מפתחי ומשתמשי WordPress באירופה. סיכום היום הראשון- ההרצאות, החידושים, החשיפות

המשך קריאה
צור קשר. זה כנראה העמוד הכי חשוב באתר

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

המשך קריאה
הנורמלי החדש: 3 מחקרים חדשים ומה אפשר ללמוד מהם על עסקים בדיגיטל בתקופת Covid19

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

המשך קריאה
גוגל אנליטיקס – המדריך היעיל למנהלי אתרים עסוקים

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

המשך קריאה
על עבודה מרחוק, WordPress, Covid19 ואיש אחד שהוא השראה

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

המשך קריאה
שיווק באמצעות בלוג: 9 עובדות + בונוס (פוסט חגיגי ליום הבלוגים השנתי)

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

המשך קריאה

יש 2 תגובות

  1. שירלי

    מידע חשוב ומעניין. תודה!

  2. אלכסנדרה

    פוסט מלא בתוכן מועיל ממש… תודה!

הוספת תגובה

האימייל לא יוצג באתר.