היום – כל אתר שרוצה להצליח, צריך להיות מותאם למובייל.
זה הפירוש של המושג "ריספונסיביות" על רגל אחת.

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

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

ותשאלו – איך ניתן לדעת איך האתר יוצג אצל כל המכשירים השונים של הגולשים שלו?


לשם כך יש אמולטורים (Emulator).

אימולטור – זוהי תוכנה, המדמה מכשיר לכל דבר, כולל סוג המכשיר וגרסת אנדרואיד או Apple.

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

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

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

Google Chrome – כלי הפיתוח

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

תכונות עיקריות:

- עובד גם עם קבצים מקומיים

- בחר רזולוציות מסך שונות בלחיצה אחת

- פתח את כל רזולוציות המסך המוגדרות

- גודל חלון פיקסל נכון

- קנה מידה אוטומטי של חלונות כדי להתאים את המסך

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

- אפשרות להציג גדלי מסך אמתיים

אז איך עושים את זה?

לחצו F12 באתר שעליו אתם רוצים לעשות את הבדיקה
שימו לב כמו בתמונה, נפתח לכם חלון אפשרויות, ובחלק העליון, בצד שמאל - יש אייקון בצורת מכשיר

upload_2018-12-27_17-16-38.png


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

upload_2018-12-27_19-31-25.png



emulator google.png



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

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

  1. Mobile-Friendly Test: הכניסו את כתובת האתר וגוגל יציג בפניכם כיצד האלגוריתם שלו רואה את מידת ההתאמה למובייל.
  2. אם יש לכם גישה ל -Webmaster Tools של האתר: אתם יכולים לקבל תמונה מלאה של ההתאמה למובייל של האתר בעזרת דוח ה - Mobile Usability.
  • blogging2.jpg
    blogging2.jpg
    KB 263.1 · צפיות: 91
  • upload_2018-12-27_17-16-47.png
    upload_2018-12-27_17-16-47.png
    KB 91.8 · צפיות: 99