כשמעצבים מודעה שמוצגת במכשיר נייד, חשוב לוודא שהרכיבים האינטראקטיביים, כמו כפתורים או קישורים, גדולים מספיק ושיש מספיק רווח סביבם. כך קל יותר למשתמשים ללחוץ על הרכיב בלי ללחוץ בטעות על רכיבים אחרים. התכונה הזו מועילה לכל המשתמשים, אבל היא שימושית במיוחד לאנשים עם לקויות מוטוריות.
הגודל המינימלי המומלץ של רכיב הקשה הוא בערך 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, זמין במאמר עקרונות הבסיס של עיצוב אתר רספונסיבי.