אתר רספונסיבי הוא אתר שמסדר את עצמו אוטומטית לפי רוחב המסך, כך שאותו דף נראה טוב גם בטלפון וגם במחשב. אין צורך להגדיל באצבעות ואין צורך לגלול הצידה. אתר רספונסיבי הוא אתר אחד, עם קוד אחד, שמתאים את הפריסה למכשיר שבו המבקר צופה.
במאמר נסביר איך זה עובד, מה זה אומר לעסק שלך, נעבור על טעויות נפוצות ונסביר איך בודקים. לא נבטיח תוצאות, כי תצוגה טובה בנייד היא תנאי נוח ולא מנוע שמביא פניות לבדו. המטרה היא שתבין מה אתה מבקש כשאתה מזמין אתר, ושתדע לזהות אם מה שקיבלת באמת עובד.
בקצרה:
- אתר רספונסיבי הוא אתר אחד שמתאים את הפריסה לרוחב המסך, ולא שני אתרים נפרדים.
- הוא חשוב כי מבקרים נכנסים ממכשירים שונים, ותצוגה לא נוחה עלולה לגרום להם לעזוב.
- אפשר לבדוק את זה בעצמך בדקות, ויש כמה טעויות נפוצות שכדאי להכיר.
אתר רספונסיבי: מה זה בשפה פשוטה
אתר רספונסיבי הוא אתר שמסדר את התוכן לפי רוחב המסך, עם אותו קוד לכל מכשיר. הוא לא מקטין את כל הדף כמו תמונה, אלא מסדר מחדש את החלקים: עמודות הופכות לטור אחד, תפריט הופך לכפתור, ותמונות מתכווצות לרוחב הזמין. התוכן נשאר זהה, ורק הפריסה משתנה.
דימוי להמחשה: מים לוקחים את הצורה של הכלי שמרוקנים אליו. אותם מים, בכוס, בקערה או בצנצנת, ובכל פעם הם מתאימים את עצמם. אתר רספונסיבי מתנהג כך, והמכשיר הוא הכלי.
אתר שמצטמק מול אתר שמסדר מחדש
יש הבדל חשוב. אתר שפשוט מצטמק נראה בטלפון כמו מסך מחשב קטן, והמבקר צריך להגדיל את הטקסט ולגלול בשני כיוונים. אתר רספונסיבי מסדר מחדש: הטקסט נשאר בגודל נוח, והכפתורים גדולים מספיק ללחיצה. ההבדל מורגש בשנייה הראשונה.
למה זה לא רק עניין של עיצוב
רספונסיביות היא גם עניין של מבנה. תוכן שנכתב בפסקאות קצרות, כותרות ברורות ורשימות מסתדר טוב על מסך קטן. תוכן שנכתב בגושי טקסט ארוכים, או בטבלאות רחבות מדי, יהיה קשה לקריאה בטלפון גם אם הפריסה תקינה. לכן הכתיבה והעיצוב עובדים יחד, ושווה לחשוב על הנייד כבר בשלב כתיבת הטקסטים.
מה אינו אתר רספונסיבי
אם בטלפון אתה צריך לגלול הצידה כדי לקרוא שורה, או להגדיל באצבעות כדי ללחוץ על כפתור, האתר אינו רספונסיבי, או שלא נבנה נכון. גם אם הוא "נפתח" בטלפון, זה לא אומר שהוא נוח. הפתיחה היא תנאי בסיסי, והנוחות היא מה שקובע.
איך אתר אחד מתאים את עצמו לכל מסך
מאחורי הקלעים, העיצוב כולל כללים שמשתנים לפי רוחב המסך. זה כמו עפיפון שהרוח מכוונת: אותו עפיפון, אבל התנועה שלו משתנה לפי התנאים. בלי להיכנס לקוד, אפשר להבין את ארבעת הרעיונות המרכזיים.
דוגמה להמחשה: שלושה גדלי מסך
דוגמה להמחשה בלבד: דף שירותים עם שלושה כרטיסים. במחשב הכרטיסים מופיעים בשורה אחת זה לצד זה. בטאבלט שניים מהם בשורה אחת והשלישי מתחתיהם. בטלפון כל כרטיס תופס את רוחב המסך, והם מופיעים אחד מתחת לשני. המידע זהה בשלושת המצבים, ורק הסידור משתנה כדי שיהיה נוח לקרוא.
נקודות שבירה
נקודת שבירה היא רוחב מסך שבו הפריסה משתנה. מעל רוחב מסוים העמודות מתפצלות זו לצד זו, ומתחתיו הן נערמות בטור אחד. המעצב בוחר כמה נקודות כאלה, כך שהאתר ייראה טוב בטלפון, בטאבלט ובמחשב. בעל העסק לא צריך לבחור אותן, אלא רק לבדוק שהתוצאה נוחה.
תמונות שמשתנות בגודל
תמונה ברוחב מלא במחשב לא צריכה לגלוש מהמסך בטלפון. בעיצוב רספונסיבי התמונה מתכווצת לרוחב הזמין, ובמקרים טובים גם נטענת בגודל מתאים כדי לא להכביד על הטלפון. זו אחת הסיבות שהקשר בין רספונסיביות למהירות הדוק.
תפריט שהופך לכפתור
בטלפון אין מקום לשורת תפריט ארוכה. לכן התפריט מצטמצם לכפתור שנפתח בלחיצה. הכפתור צריך להיות ברור וגדול מספיק, והתפריט צריך להיפתח ולהיסגר בצורה צפויה. כשזה לא עובד, המבקר לא מוצא את דף השירות או את הטלפון.
דוגמה לעיצוב כזה
מי שרוצה לראות איך זה נראה בפועל יכול לפתוח את דף הבית של SZ בונה אתרים בטלפון ובמחשב, ולראות כיצד אותו תוכן מסתדר בצורה שונה. זה בדיוק מה שמבדיל בין אתר שמצטמק לאתר שמסדר מחדש.
למה זה חשוב לעסק שלך
מבקרים רבים מגיעים מהטלפון. אנחנו לא מצטטים אחוזים, כי הם משתנים בין עסקים ובין תקופות, אבל קל לבדוק אצלך: בכלי של גוגל לניתוח תנועה אפשר לראות מאיזה מכשירים נכנסים לאתר שלך. כמו חייט שמתאים בגד לכל מידה, אתר רספונסיבי מתאים את עצמו למי שמגיע.
מה מבקר בטלפון מחפש קודם
מבקר שנכנס מהטלפון בדרך כלל מחפש משהו מעשי: איך מתקשרים, איפה העסק נמצא, מה השירותים ומה שעות הפעילות. אם הדברים האלה קבורים בתחתית דף ארוך או מוסתרים בתפריט מסורבל, הוא יוותר. לכן בעיצוב רספונסיבי טוב מעלים לראש את מה שחשוב, ומוודאים שאפשר לפנות בלחיצה אחת.
כפתור שקשה ללחוץ עליו
אחד הנזקים המעשיים ביותר הוא כפתור קטן מדי. מבקר שרוצה להתקשר ומחטיא את הכפתור שלוש פעמים, יוותר או יחפש מישהו אחר. כפתור התקשרות גדול וברור בטלפון הוא לפעמים ההבדל בין פנייה שקורה לפנייה שלא.
רושם מקצועי
אתר שמתפרק בטלפון משדר חוסר סדר. גם אם העסק עצמו מצוין, המבקר עלול להסיק שהוא לא מקצועי. תצוגה נוחה בכל מכשיר היא חלק מהאמון שהאתר יוצר. אין כאן הבטחת דירוג או פניות, אלא הסרה של חיכוך שיכול להרחיק מבקרים.
בניית אתרים לעסקים
אם אתה בונה אתר לעסק, תצוגה רספונסיבית היא דרישה בסיסית ולא תוספת. אפשר לקרוא על הגישה שלנו בעמוד בניית אתרים לעסקים, שבו מוסבר מה כלול, איך נראית העבודה ומי עובד איתך.
מה משתנה בין מסך לטלפון בפועל
כדי להבין את ההבדל בצורה פרקטית, הנה השוואה בין מה שאתה רואה במחשב לבין מה שאמור לקרות בטלפון באתר שנבנה נכון. זו דוגמה להמחשה בלבד, והפרטים משתנים לפי העיצוב. כמו מדף מתכוונן, כל חלק מוצא את המקום שלו לפי הגובה הזמין.
| אלמנט | במחשב | בטלפון |
|---|---|---|
| תפריט | שורה אופקית עם כל הקישורים | כפתור שנפתח לרשימה |
| עמודות תוכן | כמה עמודות זו לצד זו | עמודה אחת, אחת מתחת לשנייה |
| גודל טקסט | נוח לקריאה ממרחק | נוח לקריאה בלי הגדלה |
| כפתורים | בגודל סביר ללחיצה בעכבר | גדולים מספיק ללחיצה באצבע |
| תמונות | ברוחב מלא או בגריד | מתכווצות לרוחב המסך |
| טפסים | שדות זה לצד זה | שדות בטור, קלים למילוי |
למה צריך לבדוק גם בטאבלט
רבים שוכחים את הטאבלט, כי הוא פחות נפוץ. אבל הוא נמצא באמצע, ופעמים רבות נקודות השבירה מתנהגות בו בצורה מפתיעה. עמודות שנראות טוב בטלפון ובמחשב עלולות להצטופף בטאבלט. מי שבודק רק את שני הקצוות מפספס את האמצע, ולכן כדאי להוסיף גם אותו לבדיקה.
איך להשתמש בטבלה
אפשר להשתמש בה כרשימת בדיקה. פתח את האתר שלך בשני המכשירים ועבור על כל שורה. אם אחת השורות בטלפון נראית כמו במחשב, יש בעיה. אם יש שורה שלא ברור איך היא אמורה להתנהג, שאל את הבונה.
בניית אתר רספונסיבי: על מה שמים דגש
כשבונים אתר רספונסיבי, המטרה היא שכל אחד, מסבתא עם טאבלט ועד נער עם טלפון, יקבל חוויה נוחה. כמה עקרונות חשובים במיוחד.
- להתחיל מהנייד ולהרחיב למחשב. כשמעצבים קודם לטלפון, נשארים רק עם מה שחיוני, וההרחבה למסך גדול קלה יותר.
- גודל טקסט נוח. טקסט שדורש הגדלה הוא טקסט שהמבקר לא יקרא.
- כפתורים שאפשר ללחוץ באצבע. גדולים מספיק, עם רווח ביניהם.
- שמירה על מהירות בכל גודל. עיצוב יפה שנטען לאט הוא עיצוב שמבקרים לא יראו.
נגישות כחלק מהתצוגה
תצוגה נוחה כוללת גם עניינים של נגישות: ניגודיות טובה בין טקסט לרקע, גודל טקסט נוח, וכפתורים שאפשר להשתמש בהם בקלות. אצלנו האתר נבנה מונגש, ובלי הצהרה על עמידה בתקן. הדרישות והנוסח הרשמי מתעדכנים, ולכן כדאי לבדוק נוסח עדכני ולהתייעץ עם איש מקצוע. מדריך כללי להנחיות נגישות אפשר למצוא ב-WCAG, אבל זה נושא נפרד מרספונסיביות.
קישורים למאמרים קשורים
אם אתה בונה אתר לעסק קטן, יש מדריך מסודר שמתחיל משלב האפיון, במאמר על בניית אתר שמתאים לעסק שלך. ואם המטרה היא אתר שמציג את העסק ואת השירותים שלו, יש הסבר על מה צריך להיות בו במאמר על אתר שמציג את העסק.
רספונסיבי ומהירות: שני צדדים של אותו עניין
עיצוב רספונסיבי טוב לא טוען לטלפון את כל מה שנועד למחשב. תמונה בגודל מלא, סרטון רקע וקוד עודף הם עומס מיותר בנייד. כשבונים נכון, הטלפון מקבל רק מה שהוא צריך. זה אחד הדברים שמבדילים בין אתר שרק נראה נכון לבין אתר שגם מרגיש נכון. אצלנו ציון המהירות ביום המסירה הוא מעל 90, ואין הבטחת דירוג.
מה לשאול את הבונה
שאל את הבונה איך הוא בודק את האתר בנייד, על אילו מכשירים, ומה קורה בגדלי מסך שונים. בונה שמכיר את הנושא ישיב לך בפירוט. בונה שעונה בעמימות עלול לא לבדוק. כדאי גם לבקש לראות את האתר בטלפון שלך לפני האישור.
טעויות נפוצות באתרים רספונסיביים
גם אתרים שנבנו כרספונסיביים יכולים להסתבך. הנה הטעויות החוזרות, ואיך לזהות אותן.
- תמונות גדולות מדי שנטענות גם בטלפון. האתר נראה בסדר, אבל הוא נטען לאט. קל להחמיץ את זה במחשב מהיר.
- תפריט שלא נפתח בלחיצה. כפתור שנראה לחיץ אבל לא מגיב, או תפריט שנפתח ולא נסגר.
- טקסט קטן מדי או קרוב מדי לקצה. הקריאה מתישה, והמבקר מוותר.
- כפתורים צפופים. לחיצה על אחד מפעילה בטעות את השכן.
- פרסום בלי בדיקה על מכשיר אמיתי. סימולציה בדפדפן לא מחליפה טלפון ביד.
דוגמה להמחשה: אתר שנראה מושלם במחשב
דוגמה להמחשה בלבד: בעל עסק מאשר אתר אחרי שראה אותו על מסך המחשב שלו. הכול נראה מושלם. כשהוא פותח אותו בטלפון, התפריט לא נפתח, והטופס חורג מהמסך. הוא לא שם לב קודם כי לא בדק. זו הסיבה שבדיקה בטלפון היא חלק מהאישור, ולא תוספת אופציונלית. כך מגלים בעיות לפני שמבקרים פוגשים אותן.
השפעה על המהירות
חלק מהטעויות האלה, ובעיקר תמונות שלא הוקטנו, פוגעות גם במהירות. כדי להבין איך מהירות משפיעה על ההתרשמות של מבקרים ועל הפניות, אפשר לקרוא על השפעת זמן הטעינה על הפניות, בלי הבטחות ובלי מספרי המרה.
איך מתקנים
כמעט כל טעות כזאת ניתנת לתיקון. מקטינים תמונות, מגדילים כפתורים, בודקים את התפריט ומוסיפים רווח לטקסט. אבל כדי למנוע אותן מראש, עדיף לבדוק לפני הפרסום. בדיקה של כמה דקות על טלפון אמיתי חוסכת הרבה תיקונים אחר כך.
מה כדאי לבקש בכתב
כשמזמינים אתר, כדאי לכתוב במפורש שהאתר צריך להיראות ולפעול היטב בטלפון, בטאבלט ובמחשב, ושתתבצע בדיקה על מכשירים אמיתיים לפני המסירה. כך אין מקום לפרשנות. ואם יש תיקונים אחרי הגרסה הראשונה, אפשר לציין אילו מכשירים וגדלי מסך לא עבדו. אצלנו אחרי הגרסה הראשונה מגיעים 3 סבבי תיקונים, וזה המקום להעלות כל דבר שלא נראה נכון.
רספונסיבי או מותאם לנייד: האם זה אותו דבר
כמעט, אבל לא בדיוק. מותאם לנייד הוא יעד, ורספונסיבי הוא טכניקה. אתר רספונסיבי הוא בדרך כלל הדרך להגיע ליעד, אבל הוא לא מבטיח אותו. אפשר לבנות אתר רספונסיבי שמרגיש כבד ומסורבל בטלפון, וזה לא נחשב מותאם לנייד באמת.
מה עוד נדרש מעבר לפריסה
מעבר לפריסה, מותאם לנייד כולל מהירות טעינה סבירה, כפתורים נוחים, טקסט קריא, טפסים קלים למילוי וניווט פשוט. אלה דברים שהטכניקה לבדה לא מבטיחה. לכן כדאי לחשוב על שניהם יחד: לבנות רספונסיבי כדי להגיע לחוויה נוחה בנייד.
מתי רספונסיבי לא מספיק
לפעמים האתר הרספונסיבי נראה תקין, אבל התוכן שלו ארוך ומסורבל לטלפון. טפסים עם הרבה שדות, טבלאות רחבות או תמונות שמכילות טקסט קשות לשימוש בנייד גם כשהפריסה בסדר. במקרים כאלה צריך לעשות עוד צעד: לפשט את התוכן עצמו. הטכניקה פותרת את הפריסה, והפישוט פותר את החוויה.
קישור למאמר המשלים
רשימת בדיקה מלאה לנייד, שכוללת את כל הפרטים האלה, נמצאת במאמר על רשימת בדיקה לנייד. מומלץ לעבור עליה אחרי שהבנת את העיקרון.
בדיקה פשוטה: האם האתר שלך רספונסיבי
אפשר לבדוק את זה בעצמך בכמה דקות, בלי כלים מיוחדים. הנה סדר פעולות פשוט.
- שנה את גודל החלון בדפדפן. במחשב, צמצם את החלון לאט ושים לב אם התוכן מסתדר מחדש, או שמופיע פס גלילה אופקי.
- פתח את האתר בטלפון ובטאבלט. עבור על כל הדפים המרכזיים.
- בדוק את הכפתורים והטפסים. לחץ על כל כפתור, פתח את התפריט ומלא את הטופס עד הסוף.
- בדוק את המהירות בנייד. הרץ בדיקה וקרא את הדוח. זו בדיקה נפרדת, אבל משלימה.
- רשום מה לא עבד. כך תדע מה לבקש מהבונה.
בדיקה על מכשיר ישן
אם יש לך בבית טלפון ישן או חלש, השתמש גם בו. אתר שעובד היטב במכשיר חדש עלול להיתקע בישן, ומבקרים רבים לא מחליפים טלפון בכל שנה. בדיקה כזאת קצרה, והיא נותנת תמונה כנה יותר על החוויה של מי שאין לו את המכשיר המהיר ביותר.
בדיקת מהירות
כדי להתחיל, אפשר להיעזר בעמוד בדיקת המהירות שלנו, ובמידע על מדדים ועל תנאי בדיקה ב-web.dev. כדאי לבדוק מידע עדכני, כי ההנחיות והכלים מתעדכנים.
שאלות לשאול אחרי הבדיקה
האם יכולתי להשלים את הפעולה שמבקר אמור לעשות, כמו להתקשר או למלא טופס, בלי קושי? האם הייתי צריך להגדיל או לגלול הצידה? האם משהו קפץ בזמן שהדף נטען? האם הדף נטען בזמן סביר? התשובות מכוונות אותך להחלטה: האם צריך תיקון קטן, או שכדאי לבחון בנייה חדשה.
מה לעשות עם התוצאות
אם הכול עבר בסדר, אין לך מה לעשות מלבד לבדוק שוב אחרי כל שינוי גדול. אם מצאת בעיות, כתוב אותן בצורה ברורה: באיזה דף, באיזה מכשיר ומה לא עובד. ככל שהתיאור מדויק יותר, כך התיקון מהיר יותר.
רוצה אתר שנראה טוב בכל מכשיר? נדבר
אם אתה רוצה לבדוק את האתר הקיים, או לבנות חדש שמותאם לטלפון ולמחשב כאחד, דבר איתנו. ספר מה העסק עושה ומה האתר צריך להשיג, ונראה יחד מה כדאי לעשות.
המאמר נכתב בעזרת בינה מלאכותית, ונערך ואושר על ידי סלבה זמסקי, המייסד של SZ.