בניית אתר רספונסיבי: מה זה אומר ואיך בודקים.

בקצרה: אתר רספונסיבי הוא אתר אחד, עם אותו תוכן ואותה כתובת, שמסדר את עצמו מחדש לכל גודל מסך: טלפון, טאבלט ומחשב. אתר רספונסיבי טוב לא רק "מתכווץ", אלא מתוכנן מראש לכל מסך, כך שבטלפון הטקסט קריא, הכפתורים נוחים לאגודל ואין גלילה הצידה. אפשר לבדוק את זה לבד בחמש דקות, עם הרשימה שבהמשך.

מה זה אתר רספונסיבי, במילים פשוטות

פעם היו בונים אתר למחשב, ולפעמים גם "אתר מובייל" נפרד עם כתובת אחרת. אתר רספונסיבי מחליף את שניהם: זה אותו קוד ואותו תוכן, והעיצוב משתנה לפי רוחב המסך. במחשב שלושה כרטיסים עומדים זה לצד זה, ובטלפון הם נערמים או עוברים לשורה שגוללים הצידה. במחשב התפריט פרוש לאורך הכותרת העליונה, ובטלפון הוא הופך לכפתור שנפתח.

המילה עצמה נשמעת טכנית, אבל השאלה שהיא עונה עליה פשוטה: האם הלקוח שלכם, עם הטלפון שלו, מצליח להבין מה אתם עושים ולפנות אליכם בלי להתאמץ?

למה בניית אתר רספונסיבי היא כבר לא תוספת

גוגל סורק ומדרג אתרים לפי גרסת הטלפון שלהם. זה נקרא mobile-first indexing, וגוגל מסבירה את זה בהנחיות של Google Search Central. המשמעות: אם בטלפון חסר תוכן, או שקשה להשתמש באתר, זה מה שגוגל רואה. הסבר מלא יש במדריך לאינדקס מובייל.

הצד השני חשוב עוד יותר: הלקוחות. מי שמחפש אינסטלטור, יועצת משכנתאות או חוג כדורגל לילד עושה את זה בדרך כלל מהטלפון. אתר שלא עובד טוב בטלפון מפסיד אותו עוד לפני שקרא מילה.

מה אתר רספונסיבי עושה בפועל

• טורים שעומדים זה לצד זה במחשב נערמים אחד מתחת לשני בטלפון, בסדר שנבחר מראש.
• הטקסט נשאר קריא בלי להגדיל עם האצבעות.
• התפריט הופך לכפתור שנפתח, ולא נדחס לשורה צפופה.
• תמונות נטענות בגודל שמתאים למסך, ולא בגודל של מסך מחשב רחב.
• כפתורים גדולים מספיק ללחיצה עם האגודל, עם מרווח ביניהם.
• טפסים מעלים את המקלדת הנכונה: מקלדת מספרים לשדה טלפון, ומקלדת עם @ לשדה מייל.

רספונסיבי לא אומר "מכווץ"

הטעות הנפוצה היא לבנות את האתר למחשב ואז לתת לו להתכווץ. התוצאה: כותרות שנשברות בשורות מוזרות, תמונות קטנטנות, טבלאות שגולשות הצידה וכפתורים צמודים מדי. אתר רספונסיבי טוב מתוכנן מראש לכל מסך. לפעמים זה אומר להחליף תמונה רחבה בתמונה אנכית, לקצר כותרת או לשנות את סדר האלמנטים.

דוגמה: במחשב, מקטע השירותים מציג שלושה כרטיסים בשורה, עם תמונה, כותרת ושני משפטים. בטלפון, שלושה כרטיסים כאלה אחד מתחת לשני יכולים לתפוס שלושה מסכים שלמים. אתר שתוכנן נכון יקצר את הכרטיסים, יקטין את התמונות או יציג אותם בשורה שגוללים הצידה. כך הגולש רואה את כל השירותים בלי לגלול בלי סוף.

מה שלא אמור להשתנות הוא התוכן. אותו מידע, אותם שירותים ואותם פרטי קשר צריכים להופיע בטלפון ובמחשב. אתר שמסתיר בטלפון חלקים "כדי לחסוך מקום" מפספס בדיוק את הגולשים שהכי סביר שיפנו. הגישה הנכונה היא לתכנן קודם את הטלפון, ועליה כתבתי במדריך לעיצוב לטלפון קודם.

בדיקה של חמש דקות

בטלפון

פתחו את האתר בטלפון שלכם ועברו על הרשימה:

• האם יש גלילה הצידה? אם העמוד זז ימינה ושמאלה, משהו רחב מדי.
• האם צריך להגדיל כדי לקרוא? אם כן, הגופן קטן מדי.
• האם קל ללחוץ על כפתורים בלי לפספס ולהגיע לקישור הלא נכון?
• האם התפריט נפתח ונסגר בקלות, ואפשר לסגור אותו בלי לחפש את האיקס?
• האם הטופס נוח למילוי, והמקלדת המתאימה עולה?
• האם מספר הטלפון לחיץ ופותח חיוג?
• האם יש חלון קופץ שמכסה את כל המסך ואין דרך נוחה לסגור אותו?

במחשב

הקטינו את חלון הדפדפן לאט מהרוחב המלא עד הצר ביותר. אתר רספונסיבי טוב נשאר מסודר בכל רוחב, לא רק ברוחבים "המקובלים". אם בשלב מסוים אלמנטים עולים זה על זה או נחתכים, יש בעיה שתופיע גם אצל גולש עם מסך כזה. בכרום אפשר גם ללחוץ F12 ואז על סמל הטלפון, ולבחור מכשירים שונים. זה כלי מצוין לבדיקה מהירה, אבל לא תחליף לטלפון אמיתי ביד: רק שם מרגישים אם הכפתורים נוחים והגלילה חלקה.

בטאבלט, המסך שכולם שוכחים

טאבלטים וטלפונים גדולים בשכיבה נמצאים באמצע: רחבים מדי לפריסת טלפון וצרים מדי לפריסת מחשב. שם מתגלות הרבה תקלות, כמו תפריט שכבר לא נכנס בשורה אחת אבל עוד לא הפך לכפתור. אם אין לכם טאבלט, סובבו טלפון גדול לרוחב.

כדאי לבדוק גם בכמה דפדפנים. אתר שנראה מצוין בכרום באנדרואיד יכול להתנהג אחרת בספארי באייפון, במיוחד בגובה המסך הראשון, בטפסים ובתפריטים שנפתחים.

דוגמה: מה קורה כשהאתר לא באמת רספונסיבי

נניח שיש לכם מסעדה, והתפריט באתר הוא קובץ PDF. במחשב הוא נפתח בחלון גדול וקריא. בטלפון הגולש מקבל עמוד ענק עם אותיות קטנטנות, צריך להגדיל, לגרור ולחפש את המנה שהוא רוצה. בסוף הוא פשוט סוגר ומחפש מסעדה אחרת.

הפתרון הרספונסיבי הוא תפריט שכתוב כטקסט באתר: קטגוריות שנפתחות בלחיצה, שם מנה, תיאור קצר ומחיר, בגופן קריא. בטלפון זה רשימה נוחה לגלילה, ובמחשב אותו תוכן בשני טורים. בונוס: גוגל יכול לקרוא טקסט כזה, ולא רק קובץ.

דוגמה הפוכה מהעבודה שלי: באתר של אלה אוזן, יועצת משכנתאות וכלכלנית, יש מחשבוני משכנתא וזכאות. מחשבון עם שדות ותוצאות הוא בדיוק סוג הרכיב שקל לשבור בטלפון, ולכן הוא תוכנן כך שהשדות, הכפתורים והתוצאה יעבדו גם במסך צר. סיפור הפרויקט מפרט מה עוד נבנה שם.

טעויות נפוצות באתרים "רספונסיביים"

• מסך ראשון בגובה קבוע שבטלפון חותך את הכפתור, במיוחד בספארי.
• טבלה רחבה, למשל השוואת מחירים או שעות פעילות, שגולשת הצידה.
• תמונות ענקיות שנטענות גם בטלפון ומאטות הכול. על זה יש מדריך נפרד: מהירות אתר.
• כפתור וואטסאפ צף שמכסה את כפתור השליחה של הטופס.
• טקסט מעל תמונה, שבמחשב נקרא היטב ובטלפון נופל על החלק הבהיר של התמונה.

מה לשאול את מי שבונה לכם אתר

• על אילו מכשירים ורוחבים בודקים את האתר לפני שהוא עולה?
• האם העיצוב מתוכנן לטלפון מההתחלה, או רק מותאם אליו בסוף?
• האם התמונות נטענות בגדלים שונים לפי המסך?
• האם אפשר לראות אתרים חיים שבניתם, ולפתוח אותם עכשיו בטלפון שלי?

השאלה האחרונה היא החשובה ביותר. הדגמה על מסך מחשב לא אומרת הרבה. מי שבונה אתרים רספונסיביים באמת ישמח לשלוח קישורים, ואתם תראו תוך דקה אם הם נוחים. עוד שאלות לשלב הבדיקה יש בצ'קליסט להשקת אתר.

לסיכום

אתר רספונסיבי הוא אתר שנוח להשתמש בו בכל מסך, לא רק אתר שנכנס בו. הבדיקה הכי טובה היא הפשוטה: לפתוח אותו בטלפון ולנסות לפנות. כל אתר שאני בונה, בין אם אתר תדמית ובין אם דף נחיתה, נבדק בטלפון ובמחשב בכל הרוחבים לפני שהוא עולה. אם האתר הנוכחי שלכם נכשל בבדיקה, אפשר לקרוא על חידוש אתר או לראות דוגמאות בתיק העבודות.