אנחנו יודעים שחשוב לעצב רספונסיבי כדי לספק את חוויית השימוש הטובה ביותר במכשירים שונים, אבל עיצוב רספונסיבי תורם גם לנגישות.
נניח שיש אתר כמו Udacity:
משתמש עם ליקוי ראייה שקשה לו לקרוא טקסט בגודל קטן עשוי להגדיל את הדף, אולי עד 400%. מכיוון שהאתר תוכנן לתצוגה רספונסיבית, ממשק המשתמש יתארגן מחדש עבור 'אזור התצוגה הקטן יותר' (למעשה, עבור הדף הגדול יותר). זה מצוין למשתמשים במחשבים שולחניים שזקוקים להגדלת המסך, וגם למשתמשים בקורא מסך בנייד. מהתוכנית הזאת כולם רק מרוויחים. זהו אותו דף בהגדלה של 400%:
למעשה, כבר עיצוב רספונסיבי עומד בכלל 1.4.4 ברשימת המשימות של WebAIM, שלפיו הדף "… צריך להיות קריא ופונקציונלי כאשר גודל הטקסט מוכפל".
לא נרחיב כאן על כל הנושא של עיצוב רספונסיבי, אבל ריכזנו כמה טיפים חשובים שיעזרו לכם לשפר את חוויית השימוש של המשתמשים באתר שלכם ולספק להם גישה טובה יותר לתוכן.
שימוש במטא תג של אזור התצוגה
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ההגדרה width=device-width תתאים את רוחב המסך בפיקסלים שאינם תלויים במכשיר, וההגדרה initial-scale=1 יוצרת יחס של 1:1 בין פיקסלים ב-CSS לבין פיקסלים שאינם תלויים במכשיר.
כך הדפדפן יתאים את התוכן לגודל המסך, כדי שהמשתמשים לא יראו רק רצף של טקסט דחוס.
אפשר לקרוא מידע נוסף במאמר גודל התוכן לפי אזור התצוגה.
מתן אפשרות למשתמשים להתקרב או להתרחק
אפשר להשתמש במטא תג של אזור התצוגה כדי למנוע את שינוי מרחק התצוגה על ידי הגדרה של maximum-scale=1 או user-scaleable=no.
מומלץ להימנע מכך ולאפשר למשתמשים להגדיל את התצוגה אם הם צריכים.
תכנון גמיש
הימנעו מטירגוט לגדלים ספציפיים של מסכים, ובמקום זאת השתמשו ברשת גמישה כדי לבצע שינויים בפריסה כשהתוכן קובע. כפי שראינו בדוגמה של Udacity למעלה, הגישה הזו מבטיחה שהעיצוב יתאים את עצמו למרחב המצומצם, בין אם הוא מצומצם בגלל מסך קטן יותר ובין אם הוא מצומצם בגלל רמת זום גבוהה יותר.
מידע נוסף על השיטות האלה זמין במאמר עקרונות הבסיס של עיצוב אתר רספונסיבי.
שימוש ביחידות יחסיות לטקסט
כדי להפיק את המקסימום מהמרקע הגמיש, מומלץ להשתמש ביחידות יחסיות כמו em או rem לדברים כמו גודל הטקסט, במקום בערכי פיקסלים. דפדפנים מסוימים תומכים בשינוי גודל הטקסט רק בהעדפות המשתמש, ואם משתמשים בערך פיקסלים לטקסט, ההגדרה הזו לא תשפיע על הטקסט. עם זאת, אם השתמשתם ביחידות יחסיות לכל אורך הטקסט, תוכן האתר יתעדכן כך שישקף את ההעדפה של המשתמש.
כך האתר יוכל להתאים את עצמו כשהמשתמש מגדיל או מצמצם את התצוגה, וכך תוכלו ליצור את חוויית הקריאה שהמשתמשים צריכים כדי להשתמש באתר.
חשוב לא לנתק את התצוגה החזותית מהסדר של המקור
מבקר שמקפיץ את האתר שלכם באמצעות המקלדת יעקוב אחרי הסדר של תוכן האתר במסמך ה-HTML. כשמשתמשים בשיטות פריסה מודרניות כמו Flexbox ו-Grid, קל לגרום שהרינדור החזותי לא יהיה תואם לסדר המקור. זה עלול לגרום לקפיצות לא נעימות בדף אצל משתמשים שמשתמשים במקלדת כדי לנוע.
חשוב לבדוק את העיצוב בכל נקודת עצירה על ידי לחיצה על Tab לאורך התוכן. האם התנועה בדף עדיין הגיונית?
מידע נוסף על הניתוק של המסך המקורי והמסך החזותי
שימוש זהיר ברמזי מיקום
כשכותבים מיקרו-טקסט, כדאי להימנע משימוש בשפה שמציינת את המיקום של רכיב בדף. לדוגמה, אין טעם להפנות לניווט 'בצד ימין' בגרסה לנייד, כשהניווט נמצא בחלק העליון של המסך.
חשוב לוודא שהרכיבים להקשה גדולים מספיק במכשירים עם מסך מגע
במכשירים עם מסך מגע, חשוב לוודא שיעדי ההקשה גדולים מספיק כדי שיהיה קל להפעיל אותם בלי ללחוץ על קישורים אחרים. גודל טוב לכל רכיב שניתן להקיש עליו הוא 48px. תוכלו לקרוא הנחיות נוספות בנושא יעדי הקשה.