עיצוב רספונסיבי מול עיצוב אדפטיבי – מה כל הסיפור?

עיצוב רספונסיבי מול עיצוב אדפטיבי – בואו נעשה קצת סדר בעניין

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

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

ההסבר הקצר

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

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

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

ההסבר הארוך יותר

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

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

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

האם העיצוב הרספונסיבי עדיף על העיצוב האדפטיבי?

אני אפילו לרגע אחד לא אלך לשם (: אני מאמין שבסופו של יום אנחנו משתמשים בכלים שאנחנו צריכים בהתאם לפרויקט נתון. אתם חייבים לבחור באחד מהם? הבחירה תהיה קלה יותר אם תדעו מראש באילו גדלי מסך אתם תומכים. אתם יכולים להגיע להבנה ש-90% מהיוזרים שלכם יכנסו מאייפון 6 למשל ושזה הגודל מובייל האולטימטיבי מבחינתכם. מצד שני עיצוב רספונסיבי חשוב כדי לתמוך ברזולוציות עתידיות.

מקווה שמאמר זה עזר לכם להגיע להבנה בסיסית. לשאלות נוספות תוכלו לפנות לסטודיו קריאייטיבה: cre8iva@gmil.com.