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