למה חשוב לההשקיע בהתאמת האתר למובייל?
כמות הגולשים דרך מכשירי מובייל גדלה בצורה עצומה ועומדת לגדול עוד יותר בשנים הבאות.
לנתונים מעודכנים.
לכן צריך לוודא שהאתר יתאים לכמה שיותר לקוחות, ולא משנה מאיזה מכשיר הם נכנסים לאתר.
גם גוגל מבינה את החשיבות הזו, ולאחרונה הולך ונהיה ברור שאת הציון הכולל של האתר בדירוג בגוגל היא מחשבת רק על פי הנראות במובייל. כלומר לא מנשה כמה תשקיעו בגרסת המחשב, אם גרסת המובייל שלכם לא טובה, הדירוג הכולל ייפגע.
אל תניחו שאם אתר נראה נהדר בדסקטופ, המובייל יציג בוודאי גרסת מיני יפה שלו במובייל. זה לא המצב!
עיצוב רספונסיבי (כלומר עיצוב שמתאים את עצמו למכשיר שדרכו נכנס המשתמש) לצורך התאמת האתר שלכם למובייל, או עיצוב “Mobile first” שנפוץ מאד בין מומחי אינטרנט בשנים האחרונות, מתייחס לתהליך עיצובי של אתר כאשר החוויה במכשירי הסלולר נמצאת בעדיפות גבוהה ולעיתים אפילו חשובה יותר מעיצוב למסכי מחשב (desktop).
המטרה שלנו היא להפחית את שיעור הנטישה של המשתמשים ולהגדיל את המעורבות. לכן חשוב כל כך להתאים ולעצב אתרים בצורה מעולה למובייל.
איך בודקים אם אתר מותאם נכון למובייל?
- לגוגל יש כלי מעולה לבדיקת האתר. נכנסים אליו ובודקים: קישור לכלי הבדיקה של גוגל.
- בדיקה עצמאית: נכנסים לאתר ממכשירים שונים ומתחילים לגלוש. מעבירים את האתר מבחן שמישות גם במובייל, כמו שתיארנו במדריך ה UX שלנו לבדיקת שמישות תקופתית.
אם גיליתי שהאתר לא מותאם מספיק טוב, איך ממשיכים מכאן?
נעבור כאן על כללי עשה ואל תעשה, כולל טעויות נפוצות ואיך להימנע מהן ונציג מדריך צעד אחר צעד ליצירת אתר ידידותי למובייל.
טעויות בהתאמה של האתר למובייל ואיך להימנע מהן:
תשתית רספונסיבית
הכוונה ברספונסיביות היא לאתר מגיב. כלומר אתר שיודע לזהות את גודל המסך ממנו מגיע המשתמש ולהציג גרסה שמותאמת בצורה מיטבית לגודל המסך הספציפית. בגרסה רספונסיבית אנחנו מצפים לראות:
באתר רספונסיבי מוצלח נראה תפריט מותאם בצורה נכונה: במקום לפרוש את כל הקישורים זה לצד זה, מארגנים אותם במסך נפרד, אורכי, שנפתח בלחיצה על אייקון או איור של תפריט (סוג כזה של תפריט מכונה "המבורגר" בגלל צורת 3 הפסים שלו).
כמה דוגמאות לתפריטי מובייל מתוך פרויקטים שלנו:
באתר מותאם למובייל הרזולוציה, התמונות והטקסטים ייראו מעולה גם בגדלי מסך של Tablet (למשל על אייפד) וגם על מסכי מובייל מסוגים שונים, של יצרנים שונים, מערכות הפעלה שונות וכמובן עדיין יישמר אותו עיצוב נפלא גם במסכים גדולים, של מחשב נייח (Desktop).
למה זה חשוב?
בנוסף לעובדה שלא תאבדו משתמשים שמגיעים לאתר מתוך מכשירי קצה שונים, גם גוגל בודק את ההתאמה של האתר למובייל ומדרג טוב יותר אתרים רספונסיביים. קישור לבדיקת המובייל של גוגל.
השאיפה שלנו היא חיווי מגוגל שנראה כך:
טיפול במהירות טעינת האתר במובייל
גם אם האתר רספונסיבי ונראה טוב תיאורטית, אבל לוקח לו המון זמן להיטען (יותר משניה או שתיים), זו בעיה קשה שצריך לטפל בה. נסו למשל להיכנס לאתר וויקס ממוצע. העיצוב טוב. הטעינה פחות. גוגל ידרג אתר גבוה יותר אם ייטען מהר ולהיפך. אתר איטי ייענש.
איך בודקים מה מאט את האתר במובייל ואיך מונעים את האיטיות?
- בהנחה שהפלטפורמה מתאימה למובייל (כמו WordPress), החשודים הראשונים הם אנימציות, סרטונים או תמונות ששוקלים יותר מדי ומכבידים על האתר. אם מצאתם כאלה כדאי להעלות אותם מחדש אחרי כיווץ (למשל באמצעות tiny.png). אין צורך להעלות לאתר תמונות ברזולוציה גבוהה יותר מ 72DPI. לא מעלים לאתר תמונות שלא עברו חיתוך והתאמה מראש. לאורך זמן זו מכת מוות ובמובייל היא מסוכנת במיוחד.
- תוספים מאטים מאד את האתר. כולל אלמנטור. שקלו היטב לפני שאתם מתקינים תוספים, העדיפו תמיד פתרונות של קוד נקי (כל תוסף בנוי ממאות ואלפי שורות קוד, רובן מיותרות וניתן להחליף אותו בקובץ קליל שמתכנת יבנה עבורכם). את מה שתחסכו בעלות של מתכנת תפסידו בהכנסות פוטנציאליות מהאתר. חבל.
- יש פרמטרים נוספים שמשפיעים על המהירות במובייל, כמו קבצי קוד שנטענים בסדר לא נכון, אחסון איטי ועוד פרמטרים טכנולוגיים שכדאי להתייעץ לגביהם עם מי שמפתח עבורך את האתר.
היררכיה ויזואלית
מסך המובייל קטן משמעותית ממסכי המחשב הגדולים. כמות התוכן כל כך גדולה, עד שהעין לא יודעת על מה להסתכל קודם. לכן הכרחי לייצר היררכיה ברורה מאד וחווית משתמש (UX) קלה יותר במובייל.
איך מבצעים את התאמת התוכן והעיצוב למובייל?
- חלוקה של התכנים בצורה הגיונית לאזורים מופרדים ומובחנים, כולל כותרות ביניים לכל אזור.
- חלוקה של תוכן בצורה אנכית ולא לרוחב המסך.
- חווית משתמש אינטואטיבית יותר, למשל על ידי החלפה של הקלקות בגלילה, שהיא התנועה הטבעית במובייל.
- מידע חשוב חייב להיות גלוי ללא צורך בהקלקה (זכרו שבמובייל אין עכבר, ולכן כל האפקטים היפים של מעבר עכבר צריכים לקבל חלופות מתאימות).
- היררכיה נכונה: המידע החשוב ביותר צריך להיות למעלה ומתחתיו בצורה היררכית שאר המידע.
- תכולה נכונה של תוכן: חשבו מה בדיוק מחפש המשתמש שלכם כשהוא מבקר באתר במובייל? טיפ: נסחו את המידע כך שיענה על 5 הממ'ים הקלאסיים: מי, מה, מדוע, מתי, מקום.
- הכינו מראש עץ אתר. מה שמיותר או לא הכרחי, פשוט אל תציגו במובייל. גרסת המובייל יכולה וצריכה להיות גרסה רזה יותר.
שמישות וקריאות
גם כאשר התוכן שלך מעולה, לא יצליחו לקרוא אותו אם הוא כל כך קטן וצפוף עד שנדרש לקרב את המסך לעיניים או לעשות זום הלוך ושוב בין המשפטים. לכן חשוב להקפיד על כללי השמישות העיקריים:
- סוג הפונט שבו אתם משתמשים במובייל צריך להיות נעים לעין (לא סריפי מדי, כלומר לא מסולסל ומעוטר אלא נקי).
- גודל הפונט צריך להיות נוח לקריאה (מינימום 16pt, אבל הגודל משתנה בהתאם לסוגי הפונטים).
- רקעים צריכים להיות פשוטים ועם ניגודיות טובה לעומת הטקסט שמופיע עליהם.
- טריק לבדיקה של קריאות: בקשו מקרוב או קולגה בני 60+ לעבור על האתר שלכם עם/בלי משקפיים. שאלו האם הצליחו לקרוא בקלות את הטקסטים. זה מבחן מעולה לשמישות וקריאות.
אתר מרווח, עם מספיק white space, הוא מפתח ל UX טוב יותר
כמה כללי אצבע:
- חשוב מאד להשאיר מספיק White Space (שטח נקי מאלמנטים) במסכים קטנים. זה יאפשר לאצבעות ללחוץ בקלות על כפתורים ולגלול בנוחות.
- כפתורים צריכים להיות לפחות בגודל 30-40 px כדי לבלוט. באתרי איקומרס (חנויות) זה חשוב שבעתיים, כדי לאפשר קניה אימפולסיבית ולמנוע נטישה של עגלת קניות באמצע התהליך. ודאו שכפתורי ההנעה לפעולה באתר (CTA) בולטים ונוחים ללחיצה.
- ודאו שאזורי הטקסט שלכם מחולקים לפסקאות עם כותרות ביניים ורשימות. גלישה במובייל נעשית לעיתים קרובות כאשר הזמן קצר יותר, בתנועה, בין פעילויות. זה לא הפורמט המתאים לגושי טקסט ארוכים. חשוב לוודא שניתן במבט מהיר לסרוק את תכולת העמוד ולהבין מה יש בו מבלי להעמיק לכל מילה ומילה.
- אלמנטים רבים, תמונות וצבעים יגרמו לאתר להיראות מבולגן ועמוס ויבריחו את המבקרים. רווחו בין פסקאות הטקסט, בין השורות ובין האלמנטים העיצוביים.
הימנעות מעומס של טפסים ופופאים
גלישה במובייל מאתגרת מספיק גם בלי הצורך להתחיל להקליד מידע בתוך שדות קטנים. ותרו על כל טופס שאינו הכרחי, על כל מילוי פרטים שלא משרת את מטרת העל של האתר, אחרת האתר יאבד את המשתמשים שמגיעים דרך המובייל. הם פשוט יתעייפו מהר יותר.
כמה דוגמאות לטפסים שעובדים טוב במובייל:
פתרונות:
- אם יש טופס הרשמה לדיוור, עדיף שיכיל רק שדה הכרחי כמו מייל ולא טופס טרחני.
- אם יש צורך לדרג משהו באתר, במקום להקליד מספר השתמשו באימוג'י או אייקונים של כוכבים/לבבות.
- חלון צ'אט – השתמשו בפתרונות שמותאמים למובייל, ודאו שהאיקון שפותח את הצ'אט קטן יחסית ולא משתלט על המסך. אם אין הרבה פניות לצ'אט דרך המובייל פשוט ותרו עליו, הוא אלמנט שלרוב מאט את האתר ולא נוח לשימוש מהמובייל.
- ודאו שכל הטפסים שלכם מותאמים למובייל ואין בהם גלילה לצדדים או שדות מורכבים מדי.
מה לקחת?
? המפתח לעיצוב מותאם למובייל הוא פשטות. פחות זה יותר.
? העיצוב צריך להיות מתוכנן בהתאמה לשימוש באצבע אחת, בגלילה (Swipe). המידע החשוב צריך להיות בולט והתוכן קריא ושמיש.
? אם תשמרו על הטיפים שנתנו כאן יש סיכוי גדול שהאתר שלך יביא תוצאות מעולות במובייל.
בקרוב נעלה לכאן מדריך שמפרט את כל נושא ה SEO הייעודי למובייל. כדאי להירשם לעדכונים 
פוסט מלא בתוכן מועיל ממש… תודה!
מידע חשוב ומעניין. תודה!