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