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#

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

אז מה הפתרון? פשוט – תנו ללקוחות קופון בשווי עלות המשלוח:

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

הידעת ? #28

אנשים הוסיפו לסל עד 57.5% יותר פריטים כאשר המוצרים הוצגו על ידי היתרונות שהם מספקים (למשל תזונה בריאה) בהשוואה לשיוך לפי התכונות שלהם (למשל טעם תפוז)

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

מקור ariyh.com

 

הידעת ? #27

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

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

כשמשתמשים בטכנולוגיית AR לדגמים של רהיטים בחדר, היא מייצרת לעתים קרובות ספק לגבי התאמת המוצר ומעכבת החלטות רכישה
ההמלצה של Baymard במקום זאת וזה נכון ותקף לכל אתר מכירות באשר הוא :
השקיעו בתמונות איכותיות בדף המוצר כדי לעזור למשתמשים לדמיין בצורה יעילה את המוצרים.
למקור https://baymard.com/research/houseware-and-furnishings

מה זה דומיין ?

דומיין (שם מתחם) הוא גרסה טקסטואלית של כתובת IP, המספר שמפנה לאתר מסוים. לדוגמה, המספר 64.176.168.178 הוא כתובת ה-IP של multidigital.net. כל שם דומיין באינטרנט מתאים למספרים כאלה.

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

טיפ #25

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

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

הידעת #26

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

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

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