הקדמה
מעצבים לא תמיד לוקחים עיצוב רספונסיבי בחשבון שהם מעצבים אתר. גם שמעצבים מנסים להתחשב בזה, הם לרוב לא יודעים מבחינה טכנית את המגבלות. מאמר זה מיועד לעזור למעצב שלכם, עם הנחיות שעושות סדר מהבלגן.
נקודות בסיס:
1. מבנה:
להבין את המגבלות הטכניות של אתר רספונסיבי ולבחור בין Fluid (מבנה לפי אחוזים) לבין Adaptive/Boxed (מבנה עם שוליים).
חשוב מאוד לקרוא את ההרחבה על הסעיף המבנה ולהבין מה ההדבל בין שני האפשרויות.
2. גדלים במובייל
טווחים לרוחב במובייל הם למעשה 320 עד 480 פיקסל.
3. עיצובים שונים:
לכל טווח/עיצוב יש להכין עיצוב בגודל המקסימלי ובגודל המינימלי של אותו טווח כשהעיצוב לא משתנה בכלל למעט גדלים של אלמנטים כגון גודל התמונות. זה כדי לראות שאותו עיצוב עובד בכל הטווח מבחינת UI וכדומה.
חשוב להבין שיש מגבלות בהזזת אלמנטים בין כל עיצוב. (ראו בהרחבה)
4. טווחים:
a. למובייל – 320 עד 480 פיקסל.
b. טאבלט – 481 עד 980 פיקסל.
c. דסקטופ – 981 עד 1200 פיקסל או הרוחב המקסימלי הרצוי (בין 981 – 1200 פיקסל.)
d. מסך מלא – 1201 עד 1920 פיקסל.
הרחבה:
1. מבנה:
לאתר רספונסיבי יש שני אפשרויות עיקריות: Fluid (רוחב כל איזור משתנה יחסית באחוזים לרוחב המסך) או Adaptive/Boxed (לכל איזור יש רוחב קבוע לכל טווח רוחב מסך שונה. במקרה שהמסך לא במצב הכי צר לאותו טווח, יהיו שוליים בצדדים).
חשוב לבחור מההתחלה איזה שיטה מעדיפים.
יש פלוסים ומינוסים לכל שיטה. Fluid יכול תמיד למלא את כל המסך ללא שוליים, אבל במצבים מסויימים יש תוצאות לא צפויות ותמונות ואלמנטים שונים יראו לא כצפוי.
מצד שני יותר קל לשלוט ולדעת איך כל מצב יראה בAdaptive אבל יהיו שוליים בצדדים בחלק מהמסכים.
דוגמאות:
בקישור הבא יש לבחור בצד ימין למעלה את אחד המצבים כדי לראות את ההבדלים ואז לשנות את גודל החלון:
http://liquidapsive.com/
2. גדלים במובייל:
יש המון בלבול היום לגבי רוחב המסך למובייל. זה בגלל שלהרבה מכשירים יש מסכיhigh-density\retina שזה אומר שעל כל פיקסל יש שני פיקסלים.
יש לעצב לרוחב מסך לפי ה viewport ולא לפי רזולוציה
מה שחשוב זה לדעת איך האתר יראה במציאות. לכן iphone שרשום בכל מקום שהרוחב שלו 640 פיקסל למעשה לעין הוא ברוחב 320 פיקסל וככה זה נראה בפוטושופ ולכן חשוב לעצב לפי 320 פיקסל ולא לפי 640 פיקסל. מה שנראה טוב ב640 פיקסל לרוב לא קראי ולא עובד מבחינת UI ברוחב 320 פיקסל וחשוב להבין את זה שמעצבים למובייל.
למעשה טווחים לרוחב במובייל הם 320 עד 480 פיקסל. חשוב גם לקחת בחשבון ולעצב לפי מסכים פחות גבוהים שחושבים איך האתר יראה. מדד טוב זה אייפון 4 שהגובה שלו 480 פיקסל (320X480).
מעל 480 פיקסל זה או מצב landscape או כבר מצב portrait בטאבלט שזה לרוב מתחיל מ600 פיקסל.
לרשימה של גדלי מסך נרחב כולל טאבלטים:
http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/
3. עיצובים שונים למסכים שונים:
יש להכין עיצוב לכל טווח רצוי. לרוב בוחרים 3 עיצובים:
מובייל, טאבלט ודסקטופ.
לפעמים יש צורך במעל עיצוב אחד לסוג מסויים של מסך. למשל אתר full width שאמור לתמוך ברוחב מסך מלא של 1920 פיקסל יצטרך עיצוב נוסף למסכים מתחת ל1200 או מתחת ל1400 פיקסל. במקרה כזה יש שני עיצובים שונים למסך דסקטופ.
יש עיצובים שיספיקו 2 עיצובים. עיצוב אחד למובייל ועיצוב שני לטאבלטים ודסקטופ.
חשוב לקחת בחשבון שעדיין כל עיצוב צריך לעבוד מול העיצוב הקודם מבחינת תכנות וכל האלמנטים בדף אמורים להיות נמצאים רק פעם אחת בקוד, ושיהיה אפשר להציג אותם אחרת בגודל מסך אחר, לכן, אפשר להעביר סיידבאר מתחת לכתבה או להעלים אותו אפילו במצב של מובייל, אבל אי אפשר להזיז אלמנט שהיה מעל אלמנט השני שפתאום יהיה מתחתיו בעיצוב מובייל וכדומה.
לכן, חשוב לפני שמסיימים לעצב ועוד בשלב הסקיצות לדבר עם המתכנת על העיצובים השונים למסכים השונים ולציין מה השינויים הרצויים בין כל עיצוב ולקבל אישור שהעיצוב יכול לעבוד.
4. טווחים:
זה תלוי בעיצוב עצמו אבל כבסיס: (לפי רוחב מסך/חלון)
a. למובייל – 320 עד 480 פיקסל.
b. טאבלט – 481 עד 980 פיקסל.
c. דסקטופ – 801 עד 1200 פיקסל או הרוחב המקסימלי הרצוי (בין 981 – 1200 פיקסל.)
d. מסך מלא – 1201 עד 1920 פיקסל.
במקרה של רק שני עיצובים:
e. 320 מובייל – עד 650 פיקסל.
f. דסקטופ – 651 עד 1200 פיקסל.
*** חשוב לקחת בחשבון את גובה המסך המינימלי במובייל לרוב 480 פיקסל ולקחת בחשבון שכשהאתר עולה יש פיקסלים תפוסים בחלק העליון או התחתון על ידי ה UI של הדפדפן.
*** למסכים יותר קטנים מ320 פיקסל יש לעצב עוד גרסה אבל לא מקובל לתמוך במסכים כאלו.
*** מומלץ לקחת את הטווחים שצויינו כנקודת מוצא אבל החיתוך הסופי אמור להיות מתאים לעיצוב של אותו אתר והאלמנטים שיש בתוכו, ולכן הטווחים יכולים להיות אחרת למשל: מובייל 320 עד 480, טאבלט 481 עד 767, דסטופ קטן/טאבלט גדול 768 עד 980, דסקטופ בינוני 981 עד 1200, דסקטופ גדול 1201 עם שוליים או עד מסך מלא.
*** לזכור כשמכינים אתר רספונסיבי, מראש יש דברים עיצוביים שאולי מוותרים עלייהם או שעושים אותם אחרת לטובת רספונסיביות. באופן כללי אפליקציות ואתרים למובייל בדרך כלל מינמיליסטים וזה בכוונה כדי שהם יראו טוב בכל מסך.
