אופטימיזציית אתר למובייל היא לא רק עיצוב שמתכווץ למסך קטן. היא גם מה שהטלפון מוריד, איך התפריט מתנהג כשנוגעים בו, והאם הטקסט נשאר קריא. כשעבדתי על האתר הזה גיליתי בעיות מובייל שלא ראיתי במחשב, וכאן אני מפרט אותן ואת מה שלמדתי מהן.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
למה המובייל קובע
רוב הגולשים מגיעים מטלפון, וגם גוגל בודקת קודם את גרסת המובייל. לפי התיעוד של גוגל, היא משתמשת בגרסת המובייל של העמוד לאינדוקס ולדירוג. מה שחסר במובייל, או עובד שם רע, נחשב חסר.
בנוסף, טלפון איטי ממחשב בכל דבר: מעבד חלש יותר, רשת פחות יציבה ומסך שמחייב אינטראקציה במגע. עמוד שנטען מצוין במחשב יכול להרגיש תקוע בטלפון בינוני, ולכן אופטימיזציית אתר למובייל מתחילה במדידה בטלפון ולא במחשב.
הטלפון מוריד כמו המחשב
מדדתי את דף הבית של האתר הזה בשני המכשירים. בטלפון הוא הוריד 669 קילובייט, ובמחשב 663. התמונות שקלו 298 מול 292 קילובייט. כלומר, הטלפון לא מקבל עמוד קל יותר, למרות שהמסך שלו קטן פי שלושה.
הסיבה היא שמסכי טלפון חדים, והדפדפן מבקש תמונה ברזולוציה כפולה. זה תקין, כל עוד התמונות דחוסות היטב ומוגדרות בכמה גדלים. מה שלא תקין הוא תמונות ברוחב 2,000 פיקסלים שנשלחות לכל מכשיר. את זה בודקים בלשונית הרשת, בדימוי של טלפון.
בעיות שמופיעות רק בטלפון
תפריט שלא נפתח
באייפון, תת התפריטים בהדר נפתחו אבל הפריטים בהם נעלמו. הסיבה הייתה הגדרה שנתנה לכל רשימה בתפריט גובה של מסך מלא, כולל רשימות פנימיות, וכך כל תת תפריט דחף את השאר אל מחוץ לחלון. במחשב, שבו התפריט מוצג אחרת, הבעיה לא נראתה בכלל.
כותרות שהתכווצו
תוסף שנועד לשפר קריאות במובייל הוסיף כלל גורף שקבע גודל לכל טקסט בעמוד. הוא הקטין את הכותרות לגודל של טקסט רגיל, ובטלפון העמוד נראה שטוח וקשה לסריקה. הסרת הכלל החזירה את הכותרות לגודל שהוגדר להן בעיצוב.
הדר שנשבר ברוחב ביניים
אחרי החלפת הפונט לפונט רחב יותר, ההדר נשבר במסכים שבין טאבלט למחשב: הכפתור התכווץ לאפס והלוגו נדחף החוצה. הפתרון היה להציג את התפריט המקופל עד רוחב גדול יותר, ולבדוק את ההדר בכל רוחב מ-390 עד 1,920 פיקסלים.
מה בודקים במובייל
מריצים בדיקת מהירות בדימוי של טלפון, ובודקים שהתמונה בראש העמוד לא נטענת בעצלות ושאין קפיצות בעמוד. אחר כך בודקים בטלפון אמיתי: פתיחה של כל תפריט, מילוי טופס, ולחיצה על כפתורים קטנים.
כדאי לבדוק גם ברוחבי ביניים, כמו טאבלט במצב לאורך. שם נשברים הכי הרבה הדרים, כי העיצוב עובר שם בין התצוגה המקופלת לתצוגה המלאה. אופטימיזציית אתר למובייל שבודקת רק טלפון ומחשב מפספסת בדיוק את הטווח הזה.
שאלות ותשובות על אתרים בטלפון
האם אתר רספונסיבי מספיק?
זה הבסיס, לא הסוף. עיצוב רספונסיבי מסדר את התוכן לפי רוחב המסך, אבל לא מקטין את מה שהטלפון מוריד ולא בודק שתפריטים וטפסים עובדים במגע. את אלה צריך לבדוק בנפרד.
למה הציון בטלפון נמוך יותר מבמחשב?
כי בדיקת הטלפון מדמה מעבד חלש ורשת איטית. אותו עמוד, עם אותם קבצים, ייראה איטי בהרבה. רוב השיפורים שמעלים את ציון הטלפון, כמו פחות סקריפטים ותמונות קלות יותר, משפרים גם את המחשב.
מה הגודל המינימלי לכפתור בטלפון?
כפתור צריך להיות גדול מספיק כדי ללחוץ עליו באצבע בלי לפגוע בכפתור הסמוך. בפועל, כ-48 פיקסלים לגובה ולרוחב, עם רווח ביניהם. קישורים צפופים בפוטר הם המקום שבו זה נשבר הכי הרבה.
האם כדאי להסתיר תוכן במובייל?
בזהירות. גוגל מדרגת לפי גרסת המובייל, ותוכן שמוסתר שם עלול לא להיחשב. עדיף לקצר ולסדר מחדש מאשר להסתיר. אלמנטים כבדים שאינם תוכן, כמו אנימציות רקע, אפשר להסיר במובייל בלי חשש.
הצעד הבא
רוצים לדעת איך האתר שלכם מתנהג בטלפון? שלחו לי את הכתובת. אבדוק מה הוא מוריד במובייל, איך התפריט והטפסים מתנהגים במגע, ואיפה הוא נשבר ברוחבי ביניים.
