כשמעצבים מודעה שמוצגת במכשיר נייד, חשוב לוודא שהרכיבים האינטראקטיביים, כמו כפתורים או קישורים, גדולים מספיק ושיש מספיק רווח סביבם. כך קל יותר למשתמשים ללחוץ על הרכיב בלי לחפוף בטעות לרכיבים אחרים. התכונה הזו מועילה לכל המשתמשים, אבל היא שימושית במיוחד לאנשים עם לקויות מוטוריות.
הגודל המינימלי המומלץ של רכיב הקשה הוא בערך 48 פיקסלים שאינם תלויים במכשיר באתר עם אזור תצוגה מוגדר לניידים. לדוגמה, אם לסמל יש רוחב וגובה של 24 פיקסלים, אפשר להשתמש במרווח פנימי נוסף כדי להגדיל את גודל אזור הלחיצה ל-48 פיקסלים. שטח של 48x48 פיקסלים תואם לכ-9 מ"מ, שזה בערך הגודל של קצה האצבע של אדם.
בנוסף, צריך להפריד בין אזורי המגע ברווח של 8 פיקסלים לערך, אופקית ואנכית, כדי שהאצבע של המשתמש לא תלחץ בטעות על אזור מגע אחר כשהוא לוחץ על אזור מגע אחד.
בדיקת יעדי המגע
אם היעד הוא טקסט והשתמשתם בערכים יחסיים כמו em או rem
כדי להגדיר את הגודל של הטקסט ושל הריווח הפנימי, אתם יכולים להשתמש בכלי פיתוח
כדי לבדוק שהערך המחושב של האזור הזה גדול מספיק.
בודקים את הקישור. בכלי הפיתוח ל-Chrome עוברים אל החלונית Computed, שבה אפשר לבדוק את החלקים השונים של התיבה ולראות מה גודל הפיקסלים שלהם. ב-Firefox DevTools יש חלונית Layout. בחלונית הזו מוצג הגודל בפועל של הרכיב שנבדק.
זיהוי מסך מגע באמצעות שאילתות מדיה
במקום לבדוק את הממדים של אזור התצוגה ולנחש ממדים קטנים שסביר להניח שמתאימים לטלפונים או לטאבלטים, יש דרכים יעילות יותר להתאים את העיצוב על סמך היכולות של המכשיר בפועל.
באמצעות שאילתות מדיה, אפשר לזהות אם הקלט העיקרי של המשתמש הוא מסך מגע (pointer) ואם אחד מהקלטים שזוהו הוא מסך מגע (any-pointer). התכונות pointer ו-any-pointer מחזירות fine או coarse.
סמן דק מציין שלמשתמש יש עכבר או משטח מגע. התנאי הזה חל גם אם העכבר מחובר באמצעות Bluetooth לטלפון או לטאבלט. coarse מצביע
מציין מסך מגע, שיכול להיות בכל גודל או סוג של מכשיר.
אם מוסיפים שאילתת מדיה כדי להגדיל את אזור המגע, כדאי לבדוק אם יש מצביע גס כדי להגדיל את אזורי ההקשה לכל המשתמשים במסכי מגע, בלי קשר למכשיר שבו הם משתמשים.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
מידע נוסף על תכונות מדיה לאינטראקציות, כמו pointer, זמין במאמר עקרונות הבסיס של עיצוב אתר רספונסיבי.