רוב הגולשים באתרים שאני בונה מגיעים מהטלפון. ובכל זאת, אני עדיין פוגש אתרים שעוצבו על מסך גדול במשרד ו"הותאמו" למובייל בסוף, כשכבר לא נשארו זמן ותקציב. עיצוב אתר רספונסיבי ב-2026 הוא לא אתר שלא נשבר בטלפון. זה אתר שתוכנן קודם כול לטלפון.
במדריך הזה ריכזתי את מה שאני עושה בפועל בכל פרויקט באלמנטור: נקודות שבירה, גודל של אזורי לחיצה, פונטים, תמונות ובדיקות על מכשירים אמיתיים, וגם את הטעויות שאני רואה הכי הרבה.
למה עיצוב אתר רספונסיבי מתחיל היום מהמובייל
מאז יולי 2024 גוגל סורקת את כל האתרים עם הסורק של הטלפון (Googlebot Smartphone). בפשטות: הגרסה שגוגל מכירה ומדרגת היא גרסת המובייל. תוכן שקיים רק בגרסת המחשב, או עמוד שלא עובד בטלפון, פשוט לא נספר.
וגם בלי קשר לגוגל: גולש בטלפון נמצא בדרך, מחזיק את המכשיר ביד אחת ומחובר לרשת סלולרית. אם הכפתור קטן מדי או הטופס מסורבל, הוא לא יחכה שיגיע למחשב. הוא יחזור לתוצאות החיפוש.
Mobile First בפועל: מה זה אומר
Mobile First הוא קודם כול סדר עבודה, ורק אחר כך טכניקה. אני מעצב קודם את מסך הטלפון, ושם מחליט מה חשוב:
- מה הגולש צריך לראות במסך הראשון: מה העסק עושה, למי, ואיך פונים.
- פעולה אחת ברורה: התקשרות, וואטסאפ או טופס קצר.
- סדר התוכן בעמודה אחת. מה שלא מוצא מקום בסדר הזה, כנראה מיותר גם במחשב.
רק כשהמובייל עובד מרחיבים לטאבלט ולמחשב: מוסיפים עמודות, מרווחים ותמונות גדולות. הכיוון ההפוך, לדחוס עיצוב של מחשב לתוך טלפון, הוא בדיוק מה שמייצר אתרים עמוסים ולא נוחים.
נקודות שבירה (Breakpoints) באלמנטור
נקודת שבירה היא רוחב מסך שבו העיצוב משתנה. באלמנטור יש כברירת מחדל שלוש תצוגות: מחשב, טאבלט (עד 1024 פיקסלים) ומובייל (עד 767 פיקסלים). בהגדרות האתר, תחת Layout ואז Breakpoints, אפשר להוסיף עוד ארבע: Mobile Extra, Tablet Extra, Laptop ו-Widescreen.
שני דברים שחשוב להבין:
- אלמנטור עובד מהמחשב כלפי מטה. הגדרה שנקבעה במחשב עוברת לטאבלט ולמובייל, אלא אם שיניתם אותה שם. Widescreen היא הנקודה היחידה שחלה מהרוחב שלה ומעלה. לכן גם כשאני מעצב קודם למובייל, אני מקפיד לבדוק כל שינוי בגרסת המחשב בכל התצוגות שמתחתיה.
- כל נקודה נוספת היא עוד שכבה לתחזק. אל תפעילו את כולן "ליתר ביטחון".
באתרים שאני בונה אני מוסיף בדרך כלל רק את Laptop, כי במחשבים ניידים רבים הרוחב נופל בין טאבלט למסך גדול, ושם עיצובים של מחשב נראים דחוסים. את השאר אני מפעיל רק כשבדיקה במכשיר אמיתי מראה בעיה. על שיטת העבודה שלי באלמנטור כתבתי בהרחבה במדריך לבניית אתרים באלמנטור.
יחידות גמישות במקום פיקסלים קבועים
במקום רוחב קבוע בפיקסלים, השתמשו באחוזים, ב-rem וב-vw. קונטיינרים של Flexbox ו-Grid באלמנטור מאפשרים לפריטים לרדת שורה לבד (Wrap), כך שכרטיסים שעומדים ארבעה בשורה במחשב יורדים לשניים ולאחד בלי הגדרה נפרדת לכל מסך. מאז גרסה 3.10 אלמנטור תומך גם ביחידות מותאמות (Custom), כך שאפשר להזין ערך כמו clamp() ישירות בשדה.
אזורי לחיצה: אצבע היא לא עכבר
בתקן WCAG 2.2, סעיף 2.5.8 (רמה AA) קובע גודל מינימלי של 24 על 24 פיקסלים לאזור לחיצה, או ריווח מספיק סביבו. הרמה המחמירה (סעיף 2.5.5, רמה AAA) מדברת על 44 על 44. אני עובד עם 44 פיקסלים לפחות לכל כפתור וקישור חשוב במובייל, ומשאיר מרווח בין קישורים סמוכים.
המקומות שבהם זה נשבר הכי הרבה:
- קישורים בפוטר ובתוך טקסט: שורות צפופות של קישורים קטנים, שבהן לוחצים על הקישור הלא נכון.
- אייקוני רשתות וכפתורי סגירה של פופאפים: כמעט תמיד קטנים מדי.
- אין Hover במגע: תפריטים שנפתחים רק במעבר עכבר, או כרטיסים שחושפים מידע רק ב-Hover, צריכים חלופה בלחיצה.
- כפתורים צפים: וואטסאפ, נגישות וצ'אט לא צריכים להסתיר את כפתור הקנייה או את כפתור השליחה בטופס.
טיפוגרפיה במובייל
- טקסט רץ: 16 פיקסלים לפחות. בעברית אני בוחר לפעמים 17 או 18, תלוי בפונט.
- גובה שורה: 1.5 עד 1.7 לטקסט רץ, כדי שהעין לא תאבד את השורה.
- כותרות: כותרת ענקית במחשב צריכה לרדת משמעותית בטלפון, אחרת מילה אחת תתפוס שורה שלמה.
- שדות בטפסים: 16 פיקסלים לפחות. בספארי באייפון, שדה עם טקסט קטן יותר גורם לזום אוטומטי כשלוחצים עליו, והעמוד קופץ.
- משקלים: שניים או שלושה משקלים של פונט עברי (Heebo, Assistant ו-Rubik הם בחירות נפוצות), טעונים מהשרת שלכם.
לכותרות אני משתמש ב-clamp(), שמשנה את הגודל בהדרגה לפי רוחב המסך, בלי לקבוע ערך נפרד לכל נקודת שבירה:
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.5rem); }הערך הראשון הוא המינימום (בטלפון), האחרון הוא המקסימום (במסך גדול), והאמצעי קובע באיזה קצב הגודל עולה בין השניים.
תמונות ומדיה
- הגודל הנכון לכל מסך: וורדפרס יוצרת כמה גדלים לכל תמונה ומאפשרת לדפדפן לבחור את המתאים (srcset). זה עוזר רק אם באלמנטור לא בוחרים גודל "Full" לכל תמונה.
- חיתוך שונה לטלפון: תמונת רקע רוחבית נחתכת רע במסך צר. באלמנטור אפשר להגדיר תמונת רקע נפרדת לכל נקודת שבירה, ולבחור לטלפון תמונה אנכית או חיתוך אחר.
- הסתרה לא חוסכת טעינה: כשמסתירים אלמנט במובייל, אלמנטור מסתיר אותו ב-CSS. הקוד שלו נשאר בעמוד, ולפעמים הדפדפן עדיין מוריד את התמונות שבו.
- וידאו ברקע: בטלפון הוא בעיקר מכביד על הטעינה ועל חבילת הגלישה. הציגו במקומו תמונה.
- יחס גובה ורוחב קבוע: הגדירו מידות לתמונות ולסרטונים מוטמעים, כדי שהעמוד לא יקפוץ בזמן הטעינה.
על תמונות, פורמטים וטעינה מהירה הרחבתי במדריך איך לשפר את מהירות אתר וורדפרס.
הדר, טבלאות וטפסים
הדר ותפריט
הדר במובייל צריך להיות נמוך: לוגו, כפתור פעולה אחד ותפריט המבורגר. הדר דביק עוזר לגולשים להגיע לתפריט ולכפתור מכל מקום, בתנאי שהוא לא תופס רבע מהמסך. יש לי מדריך קצר לסטיקי הדר עם צל באלמנטור.
טבלאות
טבלה רחבה בטלפון שוברת את כל העמוד. עטפו אותה באזור עם גלילה אופקית, או הציגו במובייל כל שורה ככרטיס נפרד.
טפסים
שדה אחד בשורה, תוויות מעל השדות ולא בתוכם, וסוג שדה נכון: type="tel" לטלפון ו-type="email" לאימייל פותחים את המקלדת המתאימה. וכל שדה שאפשר לוותר עליו, ותרו עליו.
בדיקה על מכשירים אמיתיים
התצוגה הרספונסיבית של אלמנטור ומצב המכשירים בכלי המפתחים של כרום טובים לעבודה השוטפת, אבל הם מדמים רוחב מסך, לא מכשיר. לפני כל השקה אני בודק לפחות על אייפון עם ספארי, על אנדרואיד עם כרום, ועל מסך צר במיוחד של 360 פיקסלים.
דברים שמתגלים רק במכשיר אמיתי:
- גובה מסך מלא: שורת הכתובת של הדפדפן משנה את גובה המסך, וסקשן של
100vhנחתך או קופץ. היחידותsvhו-dvhפותרות את זה. - המקלדת: כשהיא נפתחת היא מסתירה חצי מסך, ולפעמים גם את כפתור השליחה.
- זום אוטומטי בשדות טופס בספארי.
- אלמנטים קבועים שמתנהגים אחרת בזמן גלילה.
- תצוגה לרוחב: כמעט אף אחד לא בודק אותה.
אם אין לכם מכשירים, שירותים כמו BrowserStack מאפשרים לבדוק על מכשירים אמיתיים מרחוק. אחרי העלייה לאוויר, דוח Core Web Vitals ב-Search Console יראה לכם איך האתר מתנהג אצל גולשים אמיתיים בטלפון.
טעויות נפוצות בעיצוב אתר רספונסיבי
- מעצבים למחשב ו"מתקנים" למובייל בסוף הפרויקט.
- משכפלים סקשנים: אחד למחשב ואחד למובייל, עם הסתרה. פעמיים קוד, פעמיים עדכונים, ובדרך כלל אחד מהם נשכח.
- טקסט על תמונה, שקריא במחשב ונבלע ברקע בטלפון.
- ריווחים של מחשב, כמו 120 פיקסלים בין סקשנים, שנשארים גם במובייל.
- פופאפ שמכסה את כל המסך מיד בכניסה לאתר. גוגל מגדירה חלונות קופצים חודרניים כחוויית שימוש גרועה.
- כפתור וואטסאפ צף שיושב בדיוק על כפתור "הוספה לסל".
רוב הטעויות האלה הן בעיות של חוויית משתמש יותר מבעיות טכניות. כתבתי על העקרונות במאמר UX/UI לאתרים.
שאלות נפוצות
מה ההבדל בין אתר רספונסיבי לאתר מובייל נפרד?
פעם היו בונים גרסת מובייל נפרדת, בכתובת נפרדת. היום עיצוב אתר רספונסיבי, כלומר אתר אחד שמתאים את עצמו לכל מסך, הוא הסטנדרט, וזו גם הגישה שגוגל ממליצה עליה. אין סיבה לבנות גרסה נפרדת.
איך בודקים אם אתר מותאם למובייל?
כלי הבדיקה הישן של גוגל לידידותיות למובייל הוסר בסוף 2023. היום בודקים בטלפון עצמו, ב-PageSpeed Insights בלשונית המובייל, ובדוח Core Web Vitals ב-Search Console.
כמה נקודות שבירה צריך באלמנטור?
ברוב האתרים שאני בונה, שלוש ברירות המחדל ועוד נקודת Laptop מספיקות. נקודות נוספות מוסיפים רק כשיש בעיה אמיתית ברוחב מסוים.
אפשר להפוך אתר קיים לרספונסיבי בלי לבנות מחדש?
תלוי באתר. אתר באלמנטור אפשר בדרך כלל לתקן: ריווחים, גדלים, סדר תוכן ותפריט. אתר ישן על תבנית שלא נבנתה רספונסיבית, או עם רוחבים קבועים בכל עמוד, לפעמים זול יותר לבנות מחדש.
האתר שלכם לא נוח בטלפון?
השאירו פרטים ואעבור על האתר שלכם במכשירים אמיתיים. אראה לכם איפה גולשים נתקעים, ומה כדאי לתקן קודם כדי שיותר מהם יגיעו לפנייה או לקנייה.