אתר מובייל קודם מתוכנן קודם כל למסך הטלפון: סדר תוכן מותאם, כפתורים גדולים ללחיצה, טקסט קריא, מעט JavaScript וטעינה מהירה, ורק אחר כך מורחב למחשב. זה שונה מאתר מחשב שפשוט מוקטן.
כשאומרים “האתר מותאם למובייל”, הכוונה לעיתים רק לכך שהוא “לא נשבר” בטלפון. אבל יש הבדל גדול בין אתר שמתכווץ לבין אתר שתוכנן לטלפון מההתחלה.
מה זה “מובייל קודם”
גישה שבה מתכננים קודם את חוויית הטלפון, כי בה הצרכים החדים ביותר: מסך קטן, אצבע במקום עכבר, חיבור לא תמיד מהיר. אחר כך מרחיבים לטאבלט ולמחשב.
ההבדל בפועל
| אתר שמתכווץ | אתר מובייל קודם |
|---|---|
| אותו סדר תוכן כמו במחשב | סדר תוכן שמותאם לגלילה אנכית |
| כפתורים קטנים | כפתורים בגודל נוח ללחיצה |
| תמונות כבדות | תמונות מותאמות |
| אפקטים כבדים | אפקטים שמותאמים למגע ולא פוגעים בביצועים |
מה בודקים
1. נוחות הלחיצה
כפתורים וקישורים צריכים להיות גדולים מספיק (מומלץ לפחות כ-44 פיקסלים) ועם רווח ביניהם.
2. קריאות
טקסט לפחות 16 פיקסלים, ניגודיות טובה, שורות לא ארוכות מדי.
3. אין גלישה אופקית
אף אלמנט לא צריך לחרוג מרוחב המסך. בודקים ברוחבים קטנים, כמו 360 פיקסלים.
4. מהירות
רוב הגולשים מגיעים מרשתות סלולריות. תמונות מותאמות, פחות סקריפטים וגופנים שנטענים חכם מייצרים הבדל גדול.
5. פעולה מהירה
כפתור וואטסאפ או חיוג נגישים בקלות, ובמובייל אפשר להציג כפתור דביק שלא מסתיר תוכן.
6. עברית ו-RTL
כיווניות מימין לשמאל, חצים וממשק נכונים, ומספרים ומילים באנגלית שלא מתהפכים.
למה זה חשוב לעסק
גולש שמתקשה בטלפון עוזב. ומעבר לחוויה, גוגל סורקת בעיקר את גרסת המובייל של אתרים, ולכן גם הדירוג מושפע.
איך בודקים בעצמכם
פתחו את האתר בטלפון אמיתי, גללו מהתחלה לסוף, נסו ללחוץ על כל כפתור, מלאו את הטופס, ובדקו שהכל נטען מהר. אם משהו מציק לכם, הוא יציק גם ללקוחות.
שאלות נפוצות
מה ההבדל בין אתר רספונסיבי למובייל קודם?
אתר רספונסיבי מתאים את עצמו לגדלי מסך שונים. מובייל קודם הוא גישת תכנון שמתחילה מחוויית הטלפון ומוודאת שהיא מצוינת, ולא רק “תקינה”.
האם צריך אתר נפרד למובייל?
לא. אתר אחד שמתאים את עצמו לכל המסכים הוא הפתרון המקובל והנוח לתחזוקה.
איך בודקים אם האתר מותאם למובייל?
פותחים אותו בטלפון, בודקים נוחות לחיצה, קריאות וגלישה אופקית, ובודקים מהירות בעזרת כלי מדידה.