#סטטיסטיקות

סטטיסטיקות מכשירים ודפדפנים 2021

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

תאימות לדפדפנים

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

באותו פוסט גם הצפנו גרפים של היקף שימוש בדפדפנים שונים:

שימוש בדפדפנים בחתך עולמי. מקור: statcounter

שימוש בדפדפנים בישראל. מקור: statcounter

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

רספונסיב

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

התפלגות מכשירי קצה. מקור: statcounter

הנתונים המקומיים בישראל לא שונים בהרבה, כאשר הטאבלט יורד ל-1.7% ואת האחוז הנוסף מקבל המובייל.

כעת התפלגות רזולוציות במובייל כשהמשתמש מחזיק אותו במצב Portrait:

התפלגות רזולוציות מובייל. מקור: statcounter

לגבי הגרף האחרון, הנתון האחרון מספר את הסיפור של המובייל – ריבוי בלתי נספר של רזולוציות, מה שמביא אותנו להתייחס למובייל במצב Portrait כטווח ולא כרזולוציה ספציפית. נהוג להתייחס בטווח ל-320 כקטן ביותר (אייפון 5 וחבריו) ועד 414 (אייפון פלוס למיניהם). אנחנו נוטים לעגל ל-450 לטובת מכשירים חדשים שעלולים להפציע.

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

כעת הדילמות החדשות הן:

  1. האם לבצע התאמה למובייל במצב Landscape (טווח 568-900)?
  2. האם לבצע התאמה לטאבלט עומד (טווח 768-1080)?
  3. האם לבצע התאמה לטאבלט שוכב (טווח 1024-1366)?

בנוסף, בהינתן שהרזולוציות הנפוצות ביותר בדסקטופ הם בטווח שבין 1366-1920:

  1. האם לבצע התאמה לרזולוציית המינימום בלבד 1366?
  2. האם לבצע נקודת שבירה נוספת לקצה הגבוה יותר 1920?
  3. לבסוף האם להתייחס גם למצבים שבהם המשתמש לא מחזיק את החלון על כל רוחב המסך, כלומר יש לו מסך 1920 אבל הוא מפצל את החלונות ל-2 חצאים שווים, ואז רוחב החלון שלו 960 פיקסלים?

אדפטיב

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

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

אז מה השורה התחתונה?

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

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

  1. למשתמשי מובייל Landscape יחד עם טאבלט Portrait – נבחר להציג את הגירסא של המובייל. זה אומנם ירגיש להם מאוד מאוורר ורחב, אך האתר יהיה פונקנקציונאלי באופן מלא.
  2. למשתמש טאבלט Landscape – נבחר להציג את גירסא הדסקטופ, תוך הפעלת פיצ’ר ה-scaling באופן שהטאבלט עושה מעיין Zoom-out לאתר. כיוון שהמשתמש ממילא דיי קרוב למסך, התוצאה היא סבירה לחלוטין.
  3. נורתנו עם משתמשי דסקטופ שמחזיקים את החלון על חצי מסך, וכאן אולי מסתתרת הפשרה האמיתית, פונקציונאלית אפשר פשוט להוסיף פס גלילה רוחבית שיאפשר למשתמש לגלול הצידה ולראות את מלוא רוחב האתר. זה אומנם פיתרון טכני לבעיה עיצובית, אבל בהינתן שאין מידע סטטיסטי על כמות האנשים שכך משתמשים בחלון הדפדפן שלהם, לפרוייקטים קטנים יתכן שזה הפיתרון הכי פחות גרוע.

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

חזרה