אנחנו כמעט ב2024 ועדיין משום מה רוב מעצבי ומפתחי האתרים מתחילים מגרסת הדסקטופ (המחשב) של האתר, למרות שכמות המשתמשים באתרים מהטלפונים הניידים גבוהה משמעותית מבמחשב ולכן גרסת המובייל חשובה יותר וצריכה תכנון מלא ולא רק ביצוע התאמות של גרסת הדסקטופ.
לכל גודל מסך ישנה פריסה אחרת ותצוגת האתר שלכם תשתנה, מחשב נייח (דסקטופ) המסך הוא 1920 – 1080 פיקסלים, מחשב נייד 1366 – 960 פיקסלים, טאבלט 960 – 768 פיקסלים ובטלפונים ניידים 768 – 320 פיקסלים. פיתוח נכון של האתר מגדיר את יחסי האלמנטים הטקסטים והתמונות באחוזים דבר שמבטיח שבכל מסך האתר יראה כפי שהוא אמור להראות.
גם אחרי שיש לנו גרסת מובייל עדיין אנחנו תלויים בדפדפנים ודגמי מכשירים שונים, ולכן נדרש להתאים את האתר לכל המכשירים ולכל הדפדפנים או לפחות לנפוצים שבהם, ובמילה אחת שהאתר יהיה רספונסיבי.
איך מוודאים שהאתר מופיע כפי שצריך בכל גדלי המסכים (רספונסיבי) ?
ישנם כלי סריקה המיועדים לכך ומציגים צילומי מסך כמעט מכל מכשיר שנרצה, לא כל הכלים 100% מדוייקים ולכן חשוב לבדוק בכמה כלים מה באמת אנחנו מציגים למבקרים באתר.
להלן הדרכים והכלים לבדיקת רספונסיביות שמציגים את המסכים ברמת דיוק גבוהה, אך חשוב לדעת שאין כלי שמשכפל במדויק את כל המכשירים ובדיקות מדויקות תמיד נבדקות בפועל על המכשירים האמיתיים.
1. הראשון הוא לא בדיוק כלי בדיקה ייעודי אלא הדפדפן במחשב שלכם, גם Google Chrome וגם Firefox שהם 2 הדפדפנים הנפוצים ביותר מאפשרים בדיקה באמצעות כלי המפתחים שלהם.
בכרום תחת התפריט > כלים נוספים > כלים למפתחים. ויש לכם אפשרות להחליף בין מכשירים שונים (ועל הדרך כדאי לכם גם להריץ את הבדיקות שתחת הלשונית Lighthouse).
בפיירפוקס תחת התפריט > Web Developer > בחרו ב Responsive Design View ותקבלו את הדף שפתוח עם אפשרות לשנות גודל תצוגה.
2. אם אתם רוצים לקבל תוצאות בקלות עדיף לכם להשתמש בכלי ייעודי, אחד הנוחים והדי מדוייקים הוא responsive design checker השימוש בו פשוט וקל מכניסים את הכתובת של האתר ואחרי מספר שניות תקבלו את האתר עם לשונית המאפשרת להחליף בין דגמי מכשירים נפוצים רבים https://responsivedesignchecker.com/
3. כלי בדיקת תצוגה במסכים דומה ל responsive design checker ולא פחות טוב, עם אפשרות תצוגה של מכשירים גם פחות נפוצים הוא https://responsivetesttool.com/
4. הכלי הבא יעזור לכם אם קיבלתם תלונה שהאתר לא מוצג טוב ולא ידוע לכם באיזה מכשיר או שבכלי הבדיקה (שכאמור אינם 100% מדוייקים) נראה שהאתר תקין בכל הגדלים, באמצעות הסרגל תוכלו לדעת במדוייק באיזה פיקסל התצוגה "נשברת" ולבקש ממפתח האתר לתקן ולבצע התאמה של התצוגה https://designmodo.com/responsive-test/.
אם תחפשו ברשת כלים לבדיקת רספונסיביות תגלו עוד מבחר ענק של אתרים וכלים שמאפשרים לבדוק אם האתר רספונסיבי, במאמר ריכזנו את הכלים החינמיים שבדקנו שהם מציגים נתונים די מדוייקים לרוב דגמי המכשירים וגדלי המסכים. אם יש כלי אחר שהשתמשתם בו למטרה זו ולדעתכם כדאי להוסיף אותו לרשימה, ספרו לנו עליו בתגובות למטה, נודה לכם !