רספונסיבי או אדפטיבי מי עדיף?

רספנסיבי או אדטפטיבי מה עדיף?

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

בואו נסביר:

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

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

גם אתרים רספונסיבים וגם אדפטיבים בסופו של דבר מציגים אתרים מותאמים לרזולציות שונות.

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

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

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

הנה דוגמא להבדל בין רספונסיבי לאדפטיבי

 

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

לגבי ההבדלים בבניה מדובר בשינויי מהותי בין 2 האופציות.

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

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

אז במה כדאי לבנות?

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

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

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

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

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

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

לדעתי האישית, ניתן גם לשלב בין הגישות כדרך ביניים.

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

בניית אתרים מהנה.