multi digital

איך לבדוק אם האתר רספונסיבי ומתאים למסכי המכשירים של 2024

אנחנו כמעט ב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/.

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

רוצה להתעדכן בתכנים חדשים שלנו ?

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

0 0 votes
דירוג המאמר
Subscribe
Notify of
guest
0 תגובות
Inline Feedbacks
View all comments

מאת צוות מולטי דיגיטל

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

אולי יעניין אותך גם :

אולי רצית לדעת ?

הידעת 26#

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

במחקר של Barnes, Aaron J; Shavitt, Sharon מאוניברסיטת Oxford שפורסם ב Journal of Consumer Research נמצא שתוויות עם תוכן חברתי כמו "דירוג מוביל"💝 משכנעות יותר ומוכרות טוב יותר מאשר תווית עם אותו מסר אבל בניסוח אחר כמו "רב מכר"

טיפ #24

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

אפשרו למבקרים אחרים בדף לקרוא שאלות ותשובות מהעבר.

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

או אם קיבלתם ביקורות שליליות על הפריט שלא תואם את הציפיות.

הידעת #25

בסקר קונים של Etsy כ90% מהנשאלים אמרו שאיכות התמונות במוצרים "חשוב מאוד" להחלטת הרכישה.

טיפ #23

כדי לתפוס לידים באופן מיידי הטמיעו את הטפסים פתוחים :
במקום כפתור "לחצו כאן להרשמה"

השתמשו בשדה "הזן כאן את האימייל שלך + כפתור שליחה"

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

הידעת #24

מכון Baymard עדכנו את סטטיסטיקת נטישת העגלה שלהם לשנת 2023 והוא עומד על 70% ! נתון מזעזע בהחלט.

3 הסיבות המובילות ברשימה:
1. עלויות נוספות גבוהות מדי (כגון: משלוח, מס, עמלות)
2. האתר דורש ליצור חשבון לפני תשלום
3. משלוח איטי מדי

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

טיפ #22

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

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

הטופס נשלח בהצלחה.
תודה שפנית אלינו !