היום כשאנחנו אומרים אתר, אנחנו מתכוונים לאתר רספונסיבי. מבחינתו של הלקוח מדובר באתר שייראה טוב בכל המכשירים. ומה זה אומר מבחינת המעצב? הבעיה מתחילה כשמבחינת המעצב זה לא אומר כלום, כשלדעתו עניין הרספונסיביות מתייחס למתכנת בלבד. כי מעצב מקצועי וטוב יודע שכשמבקשים ממנו לעצב אתר רספונסיבי, עליו לעבוד על פי כללים נוקשים של דרישות הרספונסיביות. הרי חשוב לנו שכאשר המסך קטן, לא יקרה מצב שחלק מהאלמנטים יחתכו או חלק מהתוכן יעלם. לכן חשוב להכין את העיצוב לפי כל הדרישות הטכניות של האתר הרספונסיבי.
ראשית, נתחיל בכך שישנם שני סוגים של מבנה רספונסיבי: מבנה לפי אחוזים – Fluid ומבנה עם שוליים – Adaptive/Boxed. המבנה לפי אחוזים אומר שכל אזור על פני המסך משתנה באופן יחסי לגודל המסך. מחד, מדובר במצב אופטימאלי, כשהעיצוב ממלא את כל המסך. מאידך, במקרים מסוימים האלמנטים מתחילים להתנהג לא כצפוי והנראות של האתר כולו משתבשת. המבנה השני, מבנה עם השוליים, נותן הרבה יותר שליטה באלמנטים ומאפשר לחזות כיצד ייראה אתר בכל גודל של המסך, אך כשמו כן הוא, במקרים רבים מדובר בעיצוב עם שוליים בצדדים, וחלק מבעלי האתרים נוטים לראות בזה פגיעה בנראות הכללית.
לאחר שבחרנו באפשרות הטובה ביותר מבחינתנו למבנה הרספונסיביות, עלינו לקבל מהמעצב עיצובים מתאימים לכל טווח. להלן רשימת הטווחים:
דסקטופ – 981 עד 1200 פיקסל
מובייל – 320 עד 480 פיקסל
טאבלט – 481 עד 980 פיקסל
מסך מלא – 1201 עד 1920 פיקסל
לרוב מקובל להכין שלושה עיצובים: לדסקטופ, מובייל וטאבלט, אך במקרים רבים המעצב מציג רק שתי גרסאות של העיצוב, עבור דסקטופ ומובייל, במקרה הזה הטווחים שונים מעט:
דסקטופ – 651 עד 1200 פיקסל
מובייל – 320 עד 650 פיקסל
כשמכינים עיצוב למובייל חשוב גם לקחת בחשבון את גובה המסך, ותמיד עדיף לחשוב על מסכים פחות גבוהים. הסטנדרט המקובל הוא גובה של אייפון 4, כלומר 480 פיקסל.
אך אין הדבר הזה אומר שהכנת מספר עיצובים שונים לטווחים שונים היא משימה למעצב בלבד. ההפך הוא הנכון. משימת הכנת אתר רספונסיבי היא משימה משותפת עבור המעצב והמאפיין או בעל האתר. הרי ברור שבמסך הקטן, למשל במסך המובייל האתר נראה בצורה שונה מאוד מהאתר במסך הגדול בדסקטופ. לא ניתן פשוט לצמצם את האתר לגודל הנדרש ולומר שבוצע כאן עיצוב רספונסיבי.
תמיד נדרש “משחק” מסוים עם האלמנטים. חלק זזים ממקומם המקורי בעיצוב הדסקטופ, ועל חלק נאלצים לוותר בכלל. כך, למשל, הכפתורים במקרים רבים במובייל לא נמצאים זה ליד זה, אלא אחד מתחת לשני, סיידבאר (עמודה ימנית או השמאלית) נעלם ואלמנטים חשובים ממנו עוברים לתחתית מסך המובייל וכך הלאה. לכן, כבר בתחילת מלאכת העיצוב הרספונסיבי חשוב להבין מה תפקידו של כל אלמנט על המסך, אילו אלמנטים בכל מקרה צריכים לבלוט לעין ולהיות בחלק העליון, את אילו ניתן להוריד לאזור פחות בולט ועל אילו ניתן לוותר כלל במידת הצורך. ורק כשמצוידים בהבנה של כל אלמנט ואלמנו במסך, בטבלת המידות לכל הטווחים ובניסיון הנדרש לעיצוב רספונסיבי איכותי, ניגשים לעבודה.