upload_2018-12-27_17-15-33.png

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

אם שמעתם על המושג "ריספונסיבי" או אם אתם רוצים לבדוק כיצד נראה האתר שלכם על גבי פלטפורמות שונות... מסתבר, כי הדפדפנים מציעים פתרונות מהירים וקלים...
נכתב ע"י אסתר א · ‏31/12/18 ·
  1. אסתר א
    היום – כל אתר שרוצה להצליח, צריך להיות מותאם למובייל.
    זה הפירוש של המושג "ריספונסיביות" על רגל אחת.

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

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

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


    לשם כך יש אמולטורים (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.

    About Author

    אסתר א
    טאלנט בתחום התכנות
    מפתחת תוכנות ושירותים מקצה לקצה
    מפתחת אתרים, אפליקציות מובייל
    אוהבת את המקצוע, ואת האתגרים שבו - כשיש ;)

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

תגובות

בכדי לרשום תגובה, עליך להרשם לאתר.
  1. יוכבדא
    תודה! הברקה בשבילי
    תמיד הייתי צריכה לפתוח את הxcode...
  2. קרן שמש
    אבל חובה לבדוק גם במכשירים אמיתיים.
    לאנדרואיד ואייפון יש הרבה באגים שמתגלים רק על המכשיר עצמו,
    בעוד באימולטור של כרום הכל נראה תקין...
      GolanArt ו-אסתר א אוהבים את זה.
  3. שקדיה
    נהדר תודה.
      אסתר א אוהב/ת את זה.
  4. צביזון
      אסתר א אוהב/ת את זה.
    1. אסתר א
      תודה על השיתוף!!!
      חדש ומנוסה אוהב/ת את זה.
  5. א-ירושלמית
    הייתי חייבת לנסות.
    לא הכרתי, זה פשוט מקסים!


    וגם אם זה לא עזר לעכשיו, זה יעזור בעז"ה בעתיד.
      אסתר א אוהב/ת את זה.
  6. אשר כותבת
    תודה על המאמר הנפלא!!
    בהיר ונהיר ומוסיף המון!!!
    מחכים לעוד כאלו...
      אסתר א אוהב/ת את זה.
  7. אסתר א
    אשמח לשמוע אם זה עזר לכם...
    ייתן כוח למאמרים נוספים מהסוג הזה
      אהבת עולם אוהב/ת את זה.