עיצוב רספונסיבי הוא שיטה שבה אתר אחד, עם כתובת אחת וקוד אחד, משנה את הפריסה שלו לפי רוחב המסך: טלפון, טאבלט או מחשב. גוגל ממליץ עליו במפורש כי הוא הקל ביותר ליישום ולתחזוקה, ומכיוון שהוא סורק ומדרג אתרים לפי גרסת הנייד, אתר שלא מתנהג יפה בטלפון מפסיד גם גולשים וגם חשיפה.
מה זה עיצוב רספונסיבי ובמה הוא שונה מאתר רגיל?
עיצוב רספונסיבי (Responsive Design) הוא גישה שבה העמוד לא נבנה לרוחב קבוע אחד, אלא נמתח, מתכווץ ומסדר את עצמו מחדש לפי המסך שבו הוא נפתח. תפריט שנראה כשורת קישורים במחשב הופך לכפתור קטן בטלפון, ושלוש עמודות של שירותים הופכות לעמודה אחת מתחת לשנייה.
ההבדל מאתר ישן בנוי ברוחב קבוע הוא שבאתר כזה הגולש בטלפון נאלץ לצבוט, להגדיל ולגלול הצידה כדי לקרוא שורה אחת. באתר רספונסיבי התוכן עצמו זהה בכל המכשירים, ורק הסידור שלו משתנה.
למה האתר חייב להתאים לכל מסך?
האתר חייב להתאים לכל מסך משלוש סיבות: גוגל מדרג לפי גרסת הנייד, גולש שמתקשה לקרוא או ללחוץ עוזב, ואתר שנשבר במסך אחד פוגע באמון בעסק כולו.
גוגל בודק קודם את גרסת הנייד
לפי התיעוד של Google Search Central, גוגל משתמש בגרסת הנייד של התוכן, שנסרקת על ידי הסורק של הסמארטפון, לצורך אינדוקס ודירוג. זה נקרא אינדוקס מונחה נייד (Mobile-First Indexing). אם גרסת הנייד של אתר מציגה פחות תוכן ממחשב, גוגל מזהיר שייתכן אובדן תנועה, כי הוא מקבל פחות מידע על העמוד.
באתר רספונסיבי הבעיה הזו כמעט לא קיימת, כי אותו HTML מוגש לכל המכשירים, וכותרות, תיאורים ותמונות זהים בכולם.
חוויית השימוש משפיעה על ההתנהגות של הגולשים
גולש שמגיע מפרסומת או מחיפוש בטלפון מחליט תוך שניות אם להישאר. טקסט זעיר, כפתור שקשה ללחוץ עליו וטופס שגולש מחוץ למסך הם סיבות קלאסיות לנטישה. מי שרוצה להעמיק יכול לקרוא על חוויית משתמש באתר ואיך היא נבנית.
מדדי Core Web Vitals נמדדים בנפרד לנייד ולמחשב
Core Web Vitals הם שלושה מדדים שגוגל מגדיר לאיכות חוויית הדף. לפי web.dev, ערך טוב הוא: זמן טעינת האלמנט הגדול ביותר (LCP) עד 2.5 שניות, זמן תגובה לאינטראקציה (INP) עד 200 אלפיות שנייה, וקפיצות פריסה (CLS) עד 0.1. הערכים נמדדים באחוזון ה-75 של הביקורים ומפולחים בין נייד למחשב, כך שאתר יכול לעבור במחשב ולהיכשל בטלפון. כדאי להכיר גם את הקשר למהירות האתר, כי תמונות כבדות מאריכות את זמן הטעינה בנייד.
איך עיצוב רספונסיבי עובד מאחורי הקלעים?
עיצוב רספונסיבי נשען על ארבעה רכיבים טכניים: תג viewport, פריסה גמישה, שאילתות מדיה ותמונות שמתאימות את עצמן לרוחב. לא צריך לדעת לכתוב אותם, אבל כדאי להבין מה לבקש ממי שבונה לכם את האתר.
- תג viewport: שורה בקוד שאומרת לדפדפן בנייד להתאים את רוחב העמוד לרוחב המסך. לפי web.dev, ההגדרה המקובלת היא width=device-width עם initial-scale=1. בלעדיה הטלפון מציג גרסה מכווצת של עמוד שולחני.
- פריסה גמישה: במקום רוחב בפיקסלים קבועים משתמשים באחוזים, ב-Flexbox ובגריד של CSS, כך שהאלמנטים מתחלקים לפי המקום הפנוי.
- שאילתות מדיה (Media Queries): כללי עיצוב שנכנסים לפעולה רק כשהמסך עומד בתנאי מסוים, למשל מתחת לרוחב מסוים או במצב לאורך.
- תמונות גמישות: הגבלה של max-width: 100% מונעת מתמונה לצאת מגבולות המסך. מומלץ לציין גם רוחב וגובה בתמונות כדי שהעמוד לא יקפוץ בזמן הטעינה.
web.dev ממליץ לא לקבוע נקודות שבירה (breakpoints) לפי דגמי מכשירים מסוימים, אלא לפי התוכן: מתחילים מהמסך הקטן, מרחיבים עד שהפריסה מפסיקה להיראות טוב, ואז מוסיפים שינוי.
נקודת מדידה מועילה מתחום הנגישות: קריטריון Reflow (סעיף 1.4.10 בתקן WCAG 2.1, רמה AA) מחייב שתוכן יוצג בלי גלילה בשני כיוונים ברוחב שווה ערך ל-320 פיקסלים של CSS, עם חריגים לתוכן כמו מפות, טבלאות נתונים ווידאו. מי שמחויב בהנגשה יכול לקרוא בנפרד על חובת הנגשת אתר.
רספונסיבי, אתר נפרד לנייד או אפליקציה: מה ההבדל?
יש שלוש דרכים להציג עסק במכשירים שונים, ורק אחת מהן מתאימה לרוב העסקים הקטנים: אתר רספונסיבי אחד. ההשוואה הבאה מציגה את ההבדלים העיקריים.
| גישה | איך זה עובד | יתרון | חיסרון |
|---|---|---|---|
| אתר רספונסיבי | כתובת אחת וקוד אחד שמסתדר לפי המסך | תחזוקה אחת, גוגל ממליץ עליו | דורש תכנון קפדני של כל עמוד בנייד |
| אתר נפרד לנייד | כתובת וגרסה נפרדות לטלפון | שליטה מלאה בגרסת הנייד | שני אתרים לתחזק, סכנה לתוכן חסר בנייד |
| אפליקציה | תוכנה שמורידים מחנות האפליקציות | גישה לתכונות המכשיר, קשר ישיר עם לקוחות חוזרים | פיתוח יקר יותר, והלקוח צריך להתקין אותה |
על ההבדל בין אפליקציה לאתר אפשר לקרוא במדריך על אפליקציה או אתר לסלולר.
מה כדאי להחליט לפני שמעצבים את גרסת הנייד?
עיצוב רספונסיבי טוב מתחיל מהמסך הקטן ולא ממחשב. כשמתחילים מהנייד נאלצים להחליט מה באמת חשוב בעמוד, ורק אחר כך מוסיפים אלמנטים למסכים רחבים. התוצאה היא עמוד ממוקד יותר בכל המכשירים, וגם גרסת המחשב נהנית מסדר ברור.
כמה החלטות משפיעות ישירות על מי שגולש בטלפון, והכי נוח לקבוע אותן עוד בשלב האפיון:
- סדר התוכן: בנייד כל העמוד יורד לעמודה אחת, ולכן הכותרת, ההסבר הקצר וכפתור הפעולה צריכים להופיע בסדר הגיוני, בלי גלילה ארוכה עד לפרט החשוב.
- גודל אזורי הלחיצה: לפי קריטריון 2.5.8 בתקן WCAG 2.2 (רמה AA), אזור לחיצה צריך להיות בגודל של לפחות 24 על 24 פיקסלים של CSS, או שיהיה מרווח מספיק בינו לבין אלמנט לחיץ סמוך. התקן קובע חריגים, למשל קישורים בתוך משפט. כפתור התקשרות שקשה לפגוע בו עלול לעלות בפניות שלא הגיעו.
- טפסים קצרים: כל שדה נוסף בטלפון דורש הקלדה על מקלדת קטנה, ולכן כדאי להשאיר רק את השדות שבלעדיהם אי אפשר לחזור ללקוח.
- תפריט פשוט: תפריט שנפתח בכפתור צריך להכיל את העמודים החשובים בלבד, ולהיסגר בקלות אחרי הבחירה.
- תמונות וסרטונים: כדאי להחליט מראש אילו תמונות באמת נחוצות בנייד, כי כל תמונה נוספת מאריכה את הטעינה ומרחיקה את הטקסט שהגולש בא לקרוא.
את ההחלטות האלה כדאי לתעד ולהציג למעצב לפני שהוא מתחיל, כך שהעיצוב של הנייד לא יהיה מחשבה שנייה אלא חלק שווה בתהליך.
איך בודקים אם האתר שלכם רספונסיבי?
בודקים אם אתר רספונסיבי בעזרת כמה פעולות פשוטות שאפשר לעשות לבד, ללא ידע טכני, תוך עשר דקות.
- פותחים את האתר בטלפון שלכם ובטלפון של מישהו עם מסך אחר, ועוברים על עמוד הבית, עמוד שירות ועמוד יצירת קשר.
- מכווצים את חלון הדפדפן במחשב לרוחב קטן ובודקים שאין פס גלילה אופקי והטקסט לא נחתך.
- מנסים ללחוץ על כפתורים ועל מספר הטלפון באצבע ולא בעכבר, ובודקים שאפשר ללחוץ בלי לפספס.
- ממלאים את טופס יצירת הקשר בטלפון עד סופו ושולחים אותו.
- מסובבים את הטלפון לרוחב וחוזרים לאורך ובודקים שהפריסה לא נשברת.
- מריצים את כתובת האתר בכלי הבדיקה החינמיים של גוגל, כמו PageSpeed Insights, ובודקים את תוצאות הנייד בנפרד מתוצאות המחשב.
אילו טעויות נפוצות פוגעות באתר רספונסיבי?
רוב הכשלים באתרים שנחשבים רספונסיביים נובעים מהחלטות עיצוב, לא מקוד, ולכן אפשר לזהות אותם לפני ההשקה.
- הסרת תוכן מגרסת הנייד: גרסת הנייד נראית נקייה, אבל חלק מהטקסטים והתמונות לא מופיעים בה בכלל, ולפי גוגל זה עלול לגרום לאובדן תנועה.
- תמונות כבדות: אותה תמונה ענקית נטענת בטלפון ופוגעת בזמן הטעינה.
- כפתורים קטנים וצפופים: קישורים צמודים זה לזה גורמים ללחיצות שגויות.
- טקסט קטן מדי: גולש שנאלץ להגדיל כדי לקרוא פשוט עוזב.
- פופאפים שחוסמים את המסך: חלון שלא ניתן לסגור בטלפון חוסם את העמוד כולו.
- בדיקה רק במחשב: מעצבים רבים מאשרים עיצוב על מסך גדול ולא פותחים אותו בטלפון בכלל.
מה לדרוש מחברת בניית אתרים בנושא רספונסיביות?
כשמזמינים אתר, כדאי לקבוע מראש שהרספונסיביות היא חלק מהאפיון ולא תוספת, ולהגדיר איך תיבדק לפני המסירה.
- עיצוב נפרד לנייד של עמודים מרכזיים, ולא רק הקטנה של גרסת המחשב.
- בדיקה בכמה דגמי טלפון ובכמה דפדפנים, עם אישור בכתב.
- דוח PageSpeed Insights של הנייד כחלק מהמסירה.
- תוכן זהה בנייד ובמחשב.
שאלות נוספות לשאול לפני שחותמים מרוכזות במאמר על איך לבחור חברת בניית אתרים.
שאלות נפוצות
מה זה עיצוב רספונסיבי בקצרה?
זו שיטה שבה אתר אחד מתאים את הפריסה שלו לרוחב המסך, כך שהוא נראה ועובד טוב בטלפון, בטאבלט ובמחשב, עם אותו תוכן ואותה כתובת.
האם עיצוב רספונסיבי משפיע על הדירוג בגוגל?
גוגל משתמש בגרסת הנייד של האתר לאינדוקס ולדירוג וממליץ על עיצוב רספונסיבי כגישה הקלה ביותר ליישום ולתחזוקה. אתר שמציג בנייד פחות תוכן מבמחשב עלול לאבד תנועה.
האם צריך אתר נפרד לטלפון?
בדרך כלל לא. אתר רספונסיבי אחד קל יותר לתחזוקה ומונע פערי תוכן בין גרסאות, ולכן הוא מתאים לרוב העסקים הקטנים.
איך אפשר לבדוק בעצמי אם האתר רספונסיבי?
פותחים אותו בכמה טלפונים, מכווצים את חלון הדפדפן במחשב ובודקים שאין גלילה אופקית, וממלאים את הטופס בנייד. אפשר גם להריץ את האתר ב-PageSpeed Insights ולבדוק את תוצאות הנייד.
מה זה תג viewport?
זו שורה בקוד העמוד שמורה לדפדפן בנייד להתאים את רוחב העמוד לרוחב המסך. ההגדרה המקובלת לפי web.dev היא width=device-width עם initial-scale=1.
