RWD משתמש במה שנקרא נקודות עצירה כדי לקבוע כיצד הפריסה של אתר תופיע: עיצוב אחד משמש מעל נקודת שבירה ועיצוב אחר מיושם מתחת לנקודת עצירה זו. נקודות השבירה מבוססות בדרך כלל על רוחב הדפדפן.
אותו HTML מוגש לכל המכשירים , תוך שימוש ב-CSS (שקובע את פריסת דף האינטרנט) כדי לשנות את מראה הדף. במקום ליצור אתר נפרד ובסיס קוד מתאים לצגים רחבים, מחשבים נייחים, מחשבים ניידים, טאבלטים וטלפונים בכל הגדלים, בסיס קוד יחיד יכול לתמוך במשתמשים עם יציאות תצוגה בגדלים שונים.
בעיצוב רספונסיבי, רכיבי העמוד מתערבבים מחדש כאשר נקודת התצוגה גדלה או מתכווצת. עיצוב שולחני בן שלוש עמודות עשוי להשתנות לשתי עמודות לטאבלט ועמודה אחת לסמארטפון. עיצוב רספונסיבי מסתמך על רשתות מבוססות פרופורציות כדי לארגן מחדש תוכן ואלמנטים עיצוביים.
בעוד שעיצוב רספונסיבי הופיע כדרך לספק גישה שווה למידע ללא קשר למכשיר, אפשר גם להסתיר פריטים מסוימים - כמו תמונות רקע, כמו למשל ב-Transport for London לעיל, תוכן משני או ניווט משלים - במסכים קטנים יותר. החלטות לגבי הסתרת תוכן ופונקציונליות או שינוי מראה עבור סוגי מכשירים שונים צריכות להתבסס על ידע על המשתמשים שלך והצרכים שלהם.
ל-RWD יש יתרונות פוטנציאליים על פני פיתוח אתרים נפרדים עבור סוגי מכשירים שונים. השימוש בבסיס קוד בודד יכול להפוך את הפיתוח למהיר יותר, בהשוואה לפיתוח 3 או 4 אתרים נפרדים, ומקל על התחזוקה לאורך זמן , שכן יש לעדכן סט אחד של קוד ותוכן במקום 3 או 4. RWD הוא גם "עתידי" יחסית -הוכחה" בכך שהיא יכולה לתמוך בנקודות שבירה חדשות הדרושות בכל עת. אם מכשיר 5 אינץ' או מכשיר 15 אינץ' ממריא בשוק, הקוד יכול לתמוך במכשירים החדשים. RWD לא קושר עיצוב למכשיר מסוים.
יצירת חוויות שמישות
מכיוון שעיצוב אתר רספונסיבי מסתמך על דשדוש אלמנטים מסביב לדף, עיצוב ופיתוח צריכים לעבוד ביחד כדי להבטיח חוויה שמישה בין מכשירים. עיצוב רספונסיבי הופך לעתים קרובות לפתרון חידה - כיצד לארגן מחדש אלמנטים בדפים גדולים יותר כדי להתאים לדפים צנומים יותר וארוכים יותר או להיפך. עם זאת, אין די בהבטחת התאמה של אלמנטים בתוך דף . כדי שעיצוב רספונסיבי יצליח, העיצוב חייב להיות שמיש גם בכל רזולוציות וגדלים של המסך.
כאשר אלמנטים נעים בדף, חווית המשתמש יכולה להיות שונה לחלוטין מתצוגה אחת של האתר לאחרת. חשוב שצוותי עיצוב ופיתוח יעבדו יחד לא רק כדי לקבוע כיצד יש לערבב את התוכן, אלא גם כדי לראות כיצד נראית התוצאה הסופית של אותו שינוי וכיצד הוא משפיע על חווית המשתמש.
צוותים רבים מסתכלים על מסגרות עיצוב רספונסיבי פופולריות, כגון Bootstrap כדי לעזור ביצירת עיצובים. מסגרות כאלה יכולות להוות עזרה רבה בהתנעת הפיתוח. עם זאת, שקול היטב כיצד המסגרת תעבוד עם התוכן והפונקציונליות של האתר שלך, ולא איך היא פועלת באופן כללי.
אנו תמיד ממליצים לבצע בדיקות שמישות על עיצובים. לעיצובים רספונסיביים, אנו ממליצים לבצע בדיקות על פני פלטפורמות . זה מספיק מסובך לעצב אתר שניתן להשתמש בו על שולחן העבודה. זה אפילו יותר מסובך לעצב אתר שניתן להשתמש בו בסידורים מחדש או בתצורות רבות של האלמנטים שלו, על פני גדלים וכיוונים שונים של מסך. אותו אלמנט עיצובי שעשוי לעבוד בצורה שחייה על שולחן העבודה עשוי לעבוד בצורה נוראית בסמארטפון, או להיפך.
לפרטים נוספים
