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