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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

פתרונות:

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

מה לקחת?

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

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

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

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

2

אטי הדר

עוד בנושא:

איך לעקוף את המתחרים שלך בגוגל באמצעות SEO מבוסס תוכן ומחקר מתחרים?

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

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

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

המשך קריאה
בקרוב: גוגל תיתן עדיפות לאתרים בעלי חווית משתמש UX טובה יותר

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

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

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

המשך קריאה
שמישות אתרים (Usability): איך לגרום לאתר להיות שימושי יותר?

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

המשך קריאה
איך לבחור מילות מפתח נכונות לאתר שלך? ומה הקשר לאורך הזנב שלהן?

מילות מפתח נכונות הן הבסיס לקידום האתר (SEO). איך בונים רשימה נכונה? איך מזהים מהי כוונת החיפוש ומה הקשר של כל זה לזנב ארוך? מדריך חדש

המשך קריאה

יש 2 תגובות

  1. שירלי

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

  2. אלכסנדרה

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

הוספת תגובה

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