תום שבתאי
עיצוב אתרים רספונסיבי הוא בניית אתר אחד שמשנה את הפריסה שלו לפי רוחב המסך — לא בניית גרסה נפרדת למובייל. הדרך הנכונה לעשות זאת היא לעצב קודם למסך הצר ולהרחיב משם מעלה, כי זו הגרסה שרוב הלקוחות בישראל רואים — וזו גם הגרסה שגוגל מאנדקסת.
עיקרי הדברים
- גוגל מאנדקסת את גרסת המובייל — תוכן שהוסתר במובייל עלול לא להיספר בכלל.
- ארבע נקודות שבירה מספיקות לכמעט כל אתר עסקי. עשר נקודות שבירה הן סימן לבעיה במבנה.
- גופן מתחת ל-16 פיקסל במובייל גורם לדפדפנים להגדיל אוטומטית ולשבור את הפריסה.
- כל תמונה חייבת רוחב וגובה מוגדרים, אחרת העמוד קופץ בזמן הטעינה.
- בדיקה במכשיר אמיתי חושפת מה שהסימולטור מפספס: אצבעות, אור שמש ורשת איטית.
מהו עיצוב אתרים רספונסיבי?
עיצוב אתרים רספונסיבי הוא גישה שבה אותו קוד HTML מוצג בצורות שונות לפי רוחב המסך, באמצעות כללי עיצוב תנאיים. האתר אחד, הכתובת אחת והתוכן אחד — משתנה רק אופן הסידור שלו על המסך.
ההבדל החשוב בין זה לבין גרסת מובייל נפרדת הוא תחזוקה. באתר רספונסיבי מעדכנים פעם אחת; בשתי גרסאות נפרדות שוכחים לעדכן את השנייה, ונוצר פער בין מה שהלקוח רואה למה שגוגל סורקת.
גוגל מסבירה במפורש בתיעוד על אינדוקס מובייל ראשון שהאינדוקס מתבצע לפי גרסת המובייל של האתר, וממליצה שהתוכן העיקרי והנתונים המובנים יהיו זהים בשתי הגרסאות.
אילו נקודות שבירה צריך באמת?
ארבע נקודות מכסות את רוב המכשירים בשימוש בישראל, ולכל אחת מהן יש בעיה אופיינית משלה:
מה שובר אתרים במובייל בפועל?
חמש תקלות חוזרות על עצמן בכמעט כל אתר עסקי שלא נבדק כמו שצריך:
- טבלאות רחבות שגולשות מהמסך. הפתרון הוא לעטוף אותן במקטע שמאפשר גלילה אופקית פנימית, במקום להקטין את הגופן עד שהוא בלתי קריא.
- כפתורים קטנים מדי או צמודים. שטח לחיצה של פחות מ-44 פיקסל גורם להקלקות שגויות ולנטישה.
- גופן מתחת ל-16 פיקסל. דפדפנים ניידים מגדילים אותו אוטומטית בשדות טופס, והפריסה קופצת.
- תמונות בלי מידות מוגדרות. העמוד קופץ כשהן נטענות, והגולש לוחץ על הדבר הלא נכון.
- חלונות קופצים שחוסמים את המסך. במסך קטן חלון שתופס חצי מסך מרגיש כמו חסימה מלאה.
איך בודקים אם האתר באמת רספונסיבי?
שלוש רמות בדיקה, מהמהירה לאמינה:
- גרירת חלון הדפדפן. הקטינו את חלון הדפדפן בהדרגה וראו איפה הפריסה נשברת. בדיקה של דקה שתופסת את מרבית התקלות.
- כלי הפיתוח של הדפדפן. מצב הסימולציה מאפשר לבדוק מסכים ספציפיים וגם להאט את מהירות הרשת.
- מכשיר אמיתי, בחוץ. זו הבדיקה היחידה שחושפת את האמת המלאה: קריאות באור שמש, דיוק לחיצה עם אצבע, וזמן טעינה ברשת סלולרית.
בדקו לפחות שלושה סוגי עמודים ולא רק את דף הבית: עמוד שירות, מאמר ארוך ועמוד יצירת קשר. ברוב המקרים דף הבית הוא הדף היחיד שנבדק בפועל — והיחיד שעובד.
למה לעצב קודם למובייל?
כשמתחילים מהמסך הרחב ו"מכווצים" אחר כך, נאלצים להחליט מה להסתיר, והתוצאה היא מובייל מקוצץ. כשמתחילים מהמסך הצר, נאלצים להחליט מה באמת חשוב — וזה הופך לאתר טוב יותר בכל המסכים.
יש לזה גם השלכה ישירה על מהירות: עיצוב שנבנה למובייל מלכתחילה טוען פחות נכסים ופחות קוד. הקשר המלא בין עיצוב למהירות מפורט במדריך מהירות טעינה של אתר.
ואם אתם בונים אתר מחדש, כדאי להצליב את זה עם עקרונות חווית המשתמש והנגישות המתוארים בעיצוב אתר עסקי, ולראות את אפשרויות בניית אתרים לעסקים.
שאלות נפוצות
האם כל התבניות המודרניות רספונסיביות?
רובן מצהירות על כך, אבל הבעיות נוצרות בשלב התאמת התוכן: טבלאות, באנרים וטקסט שהודבק מקובץ אחר הם האשם השכיח יותר מהתבנית עצמה.
האם צריך אפליקציה אם יש אתר רספונסיבי?
לרוב לא. אפליקציה משתלמת כשיש שימוש חוזר, התראות או צורך בעבודה ללא אינטרנט. לאתר תדמית או אתר לידים היא הוצאה מיותרת.
האם עיצוב רספונסיבי משפר את הדירוג בגוגל?
הוא תנאי בסיסי ולא יתרון. אתר שלא עובד במובייל נפגע מאוד; אתר שעובד היטב פשוט עומד ברף הכניסה למגרש.
מה עושים עם טבלאות רחבות במובייל?
מאפשרים גלילה אופקית בתוך הטבלה, או מציגים אותה כרשימת כרטיסים במסך צר. מה שלא עושים: מקטינים את הגופן עד שהטבלה נכנסת.
כל כמה זמן כדאי לבדוק את התצוגה במובייל?
אחרי כל שינוי משמעותי — עמוד חדש, תוסף חדש או עדכון תבנית — ובבדיקה רבעונית קצרה של העמודים המרכזיים.
לסיכום: מה לקחת מכאן
- עצבו מהמסך הצר אל הרחב, לא הפוך.
- ארבע נקודות שבירה מספיקות לכמעט כל אתר עסקי.
- גופן 16 פיקסל לפחות, ושטח לחיצה של 44 פיקסל לפחות.
- הגדירו רוחב וגובה לכל תמונה כדי למנוע קפיצות פריסה.
- בדקו במכשיר אמיתי ועל שלושה סוגי עמודים, לא רק על דף הבית.
