עיצוב מגיב / עיצוב גמיש מה זה? ואיך משתמשים בזה?

הטכנולוגיה של היום מחייבת אותנו המעצבים והמתכנתים כאחד לבצע התאמה ללקוחות שלנו להתקנים השונים, מה שמצריך מאיתנו לפתח ולעצב אתר שמותאם לאייפון ואתר שמותאם לאייפד, אנדרואיד,לפטופים,קינדל,מחשבים,טלווזיות וכד', אני חושב שמעולם סביבות העבודה שלנו לא היו מורכבת ומחולקת לכ"כ הרבה התקנים כמו היום (בעתיד זה בטח יהיה יותר מורכב).

אני מאמין שהמגמה תמשיך ותתפתח בשנים הקרובות לכיוון של התקנים נוספים וחדשים עם רזולוציות שונות ומגוונות,  דבר שיחייב אותנו המעצבים והמפתחים לתלוש שערות ולהמשיך להתאים את האתרים לכ"כ הרבה רזולוציות והתקנים עד שבסופו של דבר אנחנו לא באמת נוכל להשתלט על כולם (דבר שקורה היום בקושי רב)

קודם כל לפני שנצלול למושגים ופילוסופיות, אז מה זה בעצם עיצוב מגיב או עיצוב גמיש?

עיצוב מגיב או עיצוב גמיש (Responsive Design) – עד היום לא בחרו שם רשמי בשפה העברית למונח הזה, מדובר בעיצוב שמגיב בהתאם לסביבה ורזולוציה שבה הגולש נמצא, לצורך העניין הרזולוציה במסך מחשב בגודל 22 אינץ שונה מהרזולוציה שיש באייפון / באייפד כנ"ל גם אם נטה את האייפון / אייפד לרוחב נקבל רזולוציה נוספת  ולכן יש צורך לבצע התאמה של האתר להתקנים אלו כדי שאנחנו ההגולשים נוכל לנווט ולגלוש בקלות באתר מהתקנים השונים, את הזיהוי של ההתקנים מבצעים באמצעות שורת קוד ב-CSS, שיודעת לזהות מאיזה התקן ורזולוציה הגולש הגיע ובהתאם לכך לבחור את תצוגת האתר המתאימה ביותר.

קוד CSS לדוגמא:

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

השאלה המתבקשת כעת היא מדוע שאנחנו נהיה מחוייבים ליצור תצוגה מותאמת אישית לכל קבוצת משתמשים שנכנסת לאתר שלנו מהתקן זה או אחר? למה לא להסתכל על האתרים שלנו בגישה של ארכיטקט שלא בונה בניין מותאם אישית לכל קבוצה של אנשים, אלא בונה אותו פעם אחת וזהו.

אז זהו שבמקרה שלנו הגישה היא קצת שונה, מפני שאנחנו לא רוצים להפסיד את הגולשים שלנו, ליצור עיצוב מגיב זה לא רק לבצע התאמה של התמונות , והטקסטים זה ליצור ממש סביבה חדשה שתתאים להתקן שממנו הגולש ניגש, לכל התקן יש את ההתנהגות והמבנה האופיינו לו,  לדוגמא באייפון הכפתורים חייבים להיות עד גודל מינימלי מסויים כדי שהמשתמש יוכל להקליק עליהם.

ניתן לקרוא בהרחבה על עיצוב מגיב בפוסט מעמיק בנושא שנכתב ב smashing magazine

מספר אתרים עם עיצוב מגיב/גמיש,

כדי לצפות בהתנהגות של האתר פשוט תקטינו את גודל חלון הדפדפן שלכם ותראו כיצד הוא מגיב לגדלים (רזולוציות) השונות.

בפוסט הבא אפרט כיצד בונים CSSים שיודעים לזהות התקנים שונים ולהתאים את הרזולוציה של האתר כמו שראיתם בדוגמאות שלמעלה.

8 תגובות

• בלוגיק – נבחרי השבוע מהבלוגספירה הישראלית [16-12-11] | Newsgeek 16 בדצמבר 2011 בשעה 18:01

  […] לידי המפיצות, ואז לחנויות.עיצובאבי כהן מסביר השבוע מהו עיצוב גמיש וכיצד משתמשים בזה. הטכנולוגיה של היום מחייבת אותנו המעצבים והמתכנתים […]

  הגב
• 
  רמי 18 בדצמבר 2011 בשעה 13:28

  חבל שלא ציינת בפוסט את המצדדים נגד העיצוב הרספונסיבי (עיצוב גמיש/מגיב). מסך קטן משמש מכשירים ניידים בעיקר, שהם חלשים יותר ממחשבים שולחניים ולפטופים. לכן צריך להתאים להם עיצוב מיוחד שלא טוען הרבה תמונות, ולא עושה שימוש בסקריפטים מורכבים וגם לא צורך הרבה משאבים.

  בעיצוב רספונסיבי אנחנו עושים בדיוק את ההפך. אנחנו יוצר דף אחד, שאומנם מתאים לכל המסכים, אבל הוא יותר כבד. לדוגמא תפריטים שמוצגים באתר רגיל, לא תמיד יוצגו באייפון, ועיצוב רספונסיבי רק "מחביא" את התפריט, התפריט עדיין נטען, רק שהוא לא מוצג – זה בזבוז משאבים, למה לטעון אותו מלכתחילה? דוגמא נוספת זה תמונות. עיצוב במסך מלא טוען תמונה גדולה, ועיצוב שהותאם לאייפון טוען תמונה קטנה (גם קטן וגם חסכוני). בעיצוב רספונסיבי לא יוצרים שתי תמונות למסכים שונים, עושים שימוש בתמונה אחת (בדרך כלל הגדולה) שגדילה את משך הטעינה במכשירים ניידים. זה צורך משאבים מיותרים ומגדיל את משך הטעינה של האתר במכשירים ניידים/חלשים.

  בקיצור, יש יתרונות ויש חסרונות. אני אישית בעד עיצוב הרספונסיבי, אבל מומלץ להכיר גם את החסרונות ואת ההשפעה שלהם.

  הגב
  • 
    אבי כהן 18 בדצמבר 2011 בשעה 13:32

    רמי,
    הערה נכונה תודה! 🙂

    הגב
  • 
    רוני 15 בנובמבר 2012 בשעה 9:55

    רמי, ההערות שלך נכונות רק אם ניגשים לעיצוב רספונסיבי לאחר מעשה, כשיש אתר מוכן שעוצב לדסקטופ.
    הגישה הרווחת "Mobile First" מציעה להתחיל מאתר המובייל – גם בתהליך החשיבה והעיצוב וגם בפועל, בכתיבת הקוד. ככה מכשירים ניידים יקבלו תמונות באיכות מתאימה, מינימום סקריפטים וכו', ודפדפני דסקטופ עם יותר יכולות ימשכו עוד קבצים ותמונות לפי הצורך.

    אפשר עוד לדון בפרקטיות של התאמת אותו האתר ל*הקשרי שימוש* שונים, אבל אם בגדול אתה מעוניין באותו תוכן/פונקציונליות בכל המכשירים, עיצוב רספונסיבי שמתחיל ממובייל זאת גישה טובה.

    הגב
• 
  מירי 18 בדצמבר 2011 בשעה 14:50

  לאחרונה אני קוראת יותר ויותר על אתרים שמעוצבים מראש על פי אותם עקרונות שמנחים עיצוב למובייל.

  ההנחה / טענה היא: שעם הזמן רוב הצפיות באתרים תהיינה דרך המובייל. (ועוד ארגומנטים כמו: המובייל קובע סטנדרטי שימוש חדשים ש"מרגילים" את המשתמשים לשימושיות קלה ומהירה והציפייה היא שהאתרים יתחילו ל"התיישר" לפי זה).

  מה דעתך על תכנון אתרי אינטרנט כך שמראש יכילו רק את התוכן שיוצג גם על המובייל?

  הגב
  • 
    אבי כהן 18 בדצמבר 2011 בשעה 15:13

    מירי,
    לא חושב שזו גישה נכונה,
    כי אל תשכחי כמו שצריך לעשות אופטימיזציה צריך לבצע גם מקסימיזציה (הגדלה), היום גם מסכי המחשב + הטלוויזיה הולכים ונהים גדולים יותר, ואין התאמה גם לכך.

    לסיכום,
    אני כרגע רואה המון ליקויים באופטימיזציה וגם במקסימיזציה.

    הגב
• 50 דוגמאות לאתרים מבוססי עיצוב מגיב/גמיש « כשעיצוב וטכנולוגיה נפגשים 20 בדצמבר 2011 בשעה 1:51

  […] שעבר פירסמתי פוסט שעוסק בנושא עיצוב מגיב / עיצוב גמיש מה זה? ואיך משתמשים בזה? , למי שטרם שמע על המונח עיצוב גמיש/מגיב אני ממליץ לבקר […]

  הגב
• אינפוגרפיקה: רזולוציות מסך ושימוש בדפדפנים « כשעיצוב גרפי וטכנולוגיה נפגשים 14 במאי 2012 בשעה 2:14

  […] שאלת מיליון הדולר בהנחה ואתם לא מתכננים לעצב אתר עם עיצוב רספונסיבי לאיזה רזולוציה לעצב את האתר, או ליתר דיוק באיזה רוחב […]

  הגב