בניית אתרים רספונסיביים: נבדק על 11 רוחבי מסך לפני ההשקה

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

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

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

למה רספונסיביות משפיעה על גוגל ועל כמות הפניות?

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

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

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

איך אנחנו בודקים אתר על 11 רוחבי מסך?

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

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

אילו טעויות נפוצות קורות באתרים שלא נבנו נכון למובייל?

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

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

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

איך בודקים בעצמכם אם האתר שלכם רספונסיבי?

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

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

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

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

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