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

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

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

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

עיצוב רספונסיבי (כלומר עיצוב שמתאים את עצמו למכשיר שדרכו נכנס המשתמש) לצורך התאמת האתר שלכם למובייל, או עיצוב “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

אטי הדר

עוד בנושא:

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

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

המשך קריאה
WORDCAMP EUROPE | שיחה עם מייסד WordPress

המשך הסקירה שלנו מכנס WordCamp השנתי הגדול של קהילת וורדפרס באירופה את הערב הראשון של הכנס סגר האיש והאגדה, Matt

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

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

המשך קריאה
לעצב ולבנות מחדש את האתר – 5 השלבים הכי חשובים

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

המשך קריאה
10 טעויות קריטיות שבעלי אתרים עושים ואיך להימנע מהן בקלות ולשפר את האתר

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

המשך קריאה
שיווק באמצעות תוכן (content marketing): סיכום שנת 2020 וטקטיקות חדשות לקראת 2021

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

המשך קריאה

יש 2 תגובות

  1. אלכסנדרה

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

  2. שירלי

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