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