מהו Responsive Design והאם כדאי ליישר קו עם הטרנד העולמי ולהשקיע בו כאשר בונים אתר חדש?

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

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

דוגמא להמחשת ממשק משתמש רספונסיבי...

בואו נתבונן על דוגמה חיה מאתר UP (חברת ה- Low Cost של אל על) וננסה להבין כיצד עובד הרספונסיב הלכה למעשה. משתמש שייכנס לאתר ממחשבו האישי (או הנייד) לדף הבית של אתר UP יראה את דף הבית באופן הבא:

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

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

מה נדרש לעשות כדי לתכנן ממשק משתמש רספונסיבי?

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

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

מהם היתרונות של הרספונסיב ביחס לאתר מותאם למובייל?

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

	אתר מותאם למובייל	Responsive Design
התאמה למספר רזולוציות (מכשירים שונים)	נדרש לבנות באופן גמיש כדי שיתאים למספר רזולוציות של מכשירים שונים. לא תמיד מתאים באופן אופטימלי וברוב המקרים לא מתאים לטאבלט.	מתאים לכל המכשירים, כולל תמיכה בסיבוב (היפוך) המכשיר/ המסך
תחזוקה	יש לעדכן כל שינוי בכל אחד מן האתרים (אינטרנט ומותאם)	העדכון מתבצע במקום אחד בלבד
הזנת תוכן	הזנה לאתר האינטרנט ולאתר המובייל בנפרד (כולל תמונות כפולות, אייקונים וכדומה)	הזנת תוכן במקום אחד
עלות הפרויקט	תוספת של עד כ- 50% לעלות הפרויקט. האפיון, העיצוב הגרפי וה- HTML מתאימים לרזולוציה אחת בלבד. יש לבצע התאמות עבור כל רזולוציה נדרשת.	תוספת של כ- 20%-25% לעלות הפרויקט עבור ההתאמה לכל הרזולוציות.

כיצד נראה קוד ה- HTML5 (CSS3) של אתר רספונסיבי לעומת אתר רגיל?

אז בשורה התחתונה, כדאי לעבור לממשק רספונסיבי?

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