איך לבדוק את האתר הסלולרי שלך על מגוון המכשירים בשוק?

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

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

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

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

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

בדיקה בדפדפן Chrome

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

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

התקנת Extension בכרום

בדפדפן כרום הרגיל ניתן להתקין תוספים (extensions) המאפשרים את הבדיקה. התוספים נמצאים בחנות היישומים של כרום.

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

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

בדיקה בפיירפוקס

לדפדפן פיירפוקס של מוזילה יש כפתור ייעודי לבדיקת רספונסיביות האתר. היישום נמצא תחת לשונית ה-tools ולאחר מכן יש להיכנס לאזור web developer. משם ייפתח תפריט ובו האפשרות לבחור Responsive Design View. כעת תוכלו לבצע את הבדיקה עם בחירת גודל המסך והכיוון אליו הוא מופנה (אופקי/אנכי).

בדיקה באקספלורר

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

איך לבדוק בספארי

את בדיקת הרספונסיביות ניתן לבצע דרך דפדפן הספארי. היכנסו ל-Preferences, לאחר מכן ללשונית Advanced, סמנו וי בחלונית ה-Show Develop menu in menu bar.

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

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

כלים בתשלום

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

Sauce Labs: שירות בדיקות מהיר המאפשר לבדוק את תאימות האתר ביותר מ-400 אפשרויות. נחשב לאחד הכלים המתקדמים בתחום. מחירי השימוש מתחילים מ-12 דולר לחודש.

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

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