קטגוריות
כללי

איך לבדוק עיצוב אתר רספונסיבי

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

ניתן לראות דוגמאות רבות לאתרים רספונסיביים באתר mediaqueri.es.

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

בדיקה באמצעות דפדפן Firefox (גירסא 16 ומעלה)

1. לחיצה על כפתור Firefox בראש הדפדפן

2. להיכנס לתת התפריט Web Developer

3. בחירה באפשרות Responsive Design View

* במקום שלבים 1-3, ניתן להגיע לתצוגה זו גם באצעות לחיצה על Ctrl+Shift+M

4. כעת נוכל לראות את הדף הנוכחי פתוח עם מסגרת אפורה-שחורה ועם 2 אפשרויות חדשות: רוחב האתר וכפתור Rotate.

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

בדיקה באמצעות דפדפן Google Chrome

1. כניסה לתפריט

2. להיכנס לתת התפריט Tools

3. לבחור ב Developer Tools

* במקום שלבים 1-3, ניתן להגיע לתצוגה זו גם באצעות לחיצה על Ctrl+Shift+I או Ctrl+Shift+C

4. לחיצה על הכפתור ה Settings בתחתית הדף

5. בחירה בטאב Overrides

6. סימון ה-Check Box של ה Device metrics.

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

בדיקה באמצעות דפדפן Internet Explorer (גירסא 9)

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

1. לחיצה על Tools בתפריט העליון

2. בחירה ב Developer Tools

* במקום שלבים 1-2, ניתן להגיע לתצוגה זו גם באצעות לחיצה על F12

3. בחלון שנפתח לנו נלחץ על Tools

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

קישורים לבדיקות ON LINE

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

תוכלו לבחור את האתר שהכי נוח לכם מבין האפשרויות הבאות.

* בדיקה על ידי הזנת רוחב וגובה ספציפיים או בחירה מרזולוציות נפוצות: screenqueri.es , Screenfly , responsivepx , jamus.co.uk

* תצוגה של האתר על מספר מכשירים בדף אחד: The Responsinator , mattkersley.com , benjaminkeen.com , responsivetools.com

* יצירת bookmarklet למועדפים של הדפדפן: codebomber.com , maltewassermann.com

* בדיקה על ידי שינוי גודל החלון של הדפדפן: resizemybrowser.com

בהצלחה!

שתף:

מאת דוד

דוד כהן, מוביל טכני ומפתח Full Stack מעל 10 שנים.
מפתח בעיקר אתרי אינטרנט ומערכות Web שונות באמצעות node.js, ASP.NET, .NET Core, C#, SQL Server, JavaScript, Angular, jQuery ועוד

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *