אתר רספונסיבי הוא אתר שמתאים את עצמו לכל גודל מסך — טלפון, טאבלט ומחשב — מאותו קוד ומאותה כתובת. אין "גרסת מובייל" נפרדת: אותו תוכן מסתדר מחדש לפי רוחב המסך, הטקסט נשאר קריא בלי הגדלה, והכפתורים נשארים נוחים ללחיצה באצבע. זה כבר לא בונוס: גוגל משתמשת בגרסת המובייל של האתר כדי לאנדקס ולדרג אותו, ורוב הגולשים באתרי עסקים מגיעים מהטלפון.
למה זה חשוב לגוגל: אינדוקס מבוסס מובייל
לפי התיעוד של גוגל, גוגל משתמשת בגרסת המובייל של תוכן האתר, כפי שנסרקת על ידי סורק של טלפון חכם, לאינדוקס ולדירוג. המשמעות המעשית: אם משהו קיים בגרסת המחשב אבל חסר בטלפון — טקסט, תמונות, נתונים מובנים — מבחינת גוגל הוא כמעט לא קיים. גוגל ממליצה במפורש על עיצוב רספונסיבי, כי זו התבנית הפשוטה ביותר ליישום ולתחזוקה.
מותר לסדר את התוכן אחרת בטלפון — למשל באקורדיון או בלשוניות — אבל התוכן העיקרי צריך להיות זהה לזה שבמחשב, כולל הכותרות, הנתונים המובנים והמטא-דאטה.
רספונסיבי, אדפטיבי או גרסת מובייל נפרדת
| גישה | איך זה עובד | החיסרון |
|---|---|---|
| רספונסיבי | אותו HTML ואותה כתובת; ה-CSS מסדר מחדש לפי רוחב המסך | דורש תכנון מראש של כל רכיב בכל גודל |
| הגשה דינמית | אותה כתובת, אבל השרת מגיש HTML שונה לפי סוג המכשיר | שתי גרסאות לתחזק, וסיכון לזיהוי שגוי של מכשיר |
| כתובות נפרדות (m.) | אתר מובייל נפרד בכתובת אחרת | כפילות תוכן, הפניות, ותחזוקה כפולה |
כמעט בכל אתר עסקי היום, רספונסיבי הוא הבחירה הנכונה.
מה הופך אתר לרספונסיבי באמת
מתכננים לטלפון קודם
הגישה שעובדת היא "מובייל קודם": מתכננים את העמוד למסך צר, ואז מרחיבים למסכים גדולים. כשמתחילים מהמחשב ומנסים "לדחוס" לטלפון, מקבלים עמודים ארוכים מדי, תפריטים שבורים וטבלאות שבורחות מהמסך.
נקודות שבירה לפי תוכן, לא לפי מכשירים
אין צורך לעצב לכל דגם טלפון. קובעים נקודות שבירה (breakpoints) במקומות שבהם הפריסה מתחילה להיראות רע — למשל כשעמודה צרה מדי לקריאה — ולא לפי רשימת מכשירים שמשתנה כל שנה.
טקסט קריא בלי הגדלה
גודל גופן בסיסי שנוח לקריאה בטלפון, אורך שורה סביר, וריווח בין שורות. גולש שצריך להגדיל באצבעות כדי לקרוא — עוזב.
אזורי לחיצה בגודל של אצבע
כפתורים וקישורים צריכים להיות גדולים מספיק ומרוחקים זה מזה. הנחיות הנגישות WCAG 2.2 קובעות מינימום של 24 על 24 פיקסלים לאזור לחיצה; באתר הזה הכלל הפנימי הוא 32 פיקסלים לפחות בטלפון.
תמונות שמתאימות למסך
תמונה ברוחב מסך מחשב שנשלחת לטלפון היא משקל מיותר. עם srcset הדפדפן בוחר את הגודל המתאים — פירוט במאמר דחיסת תמונות לאתר.
טבלאות ותוכן רחב
טבלה עם ארבע עמודות לא נכנסת במסך של 390 פיקסלים. הפתרון הוא לעטוף אותה במסגרת שגוללת לרוחב בפני עצמה, כך שהעמוד עצמו לא "בורח" הצידה. זו בדיוק בעיה שתיקנתי באתר הזה: טבלאות רחבות גרמו לגלילה אופקית של כל העמוד בטלפון, עד שעטפתי אותן במסגרת גלילה ותיקנתי את הגריד של התבנית.
איך בודקים שהאתר באמת רספונסיבי
- בטלפון אמיתי — לא רק בהקטנת חלון הדפדפן. לחצו על כל כפתור, מלאו את הטופס, פתחו את התפריט.
- במצב התאמה למכשירים בכלי המפתחים של הדפדפן — בודקים כמה רוחבים: טלפון צר, טלפון רחב, טאבלט.
- מחפשים גלילה אופקית — הסימן הנפוץ ביותר לבעיה. אם העמוד זז הצידה, משהו רחב מדי.
- בודקים מהירות בטלפון — אתר "רספונסיבי" שנטען לאט בסלולר לא באמת מותאם לנייד. ראו בדיקת מהירות אתר.
באתר הזה אני מריץ בדיקה אוטומטית על כל עמוד בשני רוחבים — 1440 פיקסלים למחשב ו-390 לטלפון — שמחפשת בדיוק את הבעיות האלה: גלילה אופקית, אזורי לחיצה קטנים, תמונות שבורות. כך נמצאה בעיית הטבלאות שתיארתי.
טעויות נפוצות
- תוכן שמוסתר בטלפון כדי "לקצר" — ומבחינת גוגל הוא נעלם.
- תפריט שלא נפתח במגע, או שנפתח ואי אפשר לסגור.
- חלונות קופצים שמכסים את כל המסך בטלפון.
- טקסט בתוך תמונות — לא מתאים את עצמו, לא קריא, ולא נגיש.
- מספר טלפון שלא לחיץ — דווקא במכשיר שאיתו מתקשרים.
שאלות נפוצות
האם אתר רספונסיבי הוא אותו דבר כמו אתר מותאם לנייד?
אתר רספונסיבי הוא הדרך הנפוצה והמומלצת להתאים אתר לנייד. "מותאם לנייד" הוא התוצאה — אתר שעובד טוב בטלפון — ורספונסיביות היא השיטה.
אפשר להפוך אתר קיים לרספונסיבי?
לפעמים, בשינויים בתבנית. כשהתבנית ישנה מאוד או בנויה על פריסה קבועה, לרוב נכון יותר לבנות תבנית חדשה — ראו שדרוג והעברת אתרים.
לפעמים עולה השאלה אם צריך גם אפליקציה — ראו אתר, PWA או אפליקציה.
מאמרים קשורים: מהירות אתר במובייל: למה האתר איטי בטלפון ומה עושים.
כל אתר שאני בונה מתוכנן לטלפון קודם ונבדק בכמה רוחבי מסך לפני ההשקה — ראו בניית אתר תדמית ובניית אתרים לעסקים, או ספרו לי על האתר שלכם.
אהבתם את המאמר?
