עיצוב רספונסיבי – מה זה?

אם בעבר בעיצוב אתרים חשבנו רק על הנראות של האתר, וברמת התכנות האתגר היה ברובו התאמת האתר למגוון דפדפנים שונים – היום לא די בכך. הדרישה כיום היא לעצב ולייצר חוויה זהה בכל סוגי הפלטפורמות המוצעות בשוק, והמגוון רחב מאד! בין אם הגולש מגיע לאתר מהטלפון החכם שלו, מהטאבלט או דרך מסך רחב במחשב המשרדי, התנהגות האתר צריכה להתאים את עצמה למגבלות הפלטפורמה ולהנגיש את התוכן של האתר בהתאם, בצורה האופטימלית לגולש באותו רגע נתון. המסר ברור: "אנחנו מזהים אותך וכך אנו רוצים שתראה ותחווה את האתר שלנו".
בתחילת דרכם של הטלפונים החכמים השיטה הרווחת היתה עיצוב ותכנות אתר נפרד מותאם למובייל. אתרים אלה ישבו בכתובת נפרדת (לעיתים סאב דומיין של האתר, לדוגמא אתר Ynet המותאם http://m.ynet.co.il), ותוכנתו כך שיציגו את התוכן באופן גמיש (עיצוב באחוזים אשר נתמח לרוחב המסך, בלי קשר לרזולוציית המסך). הדפדפן מזהה את הפלטמפורמה ממנה מגיע הגולש (באמצעות Javascript) ומפנה אותו לאתר המותאם במידה ונדרש. אפשרות זו גררה שתי בעיות עיקריות: התאמת האתר לריבוי פלטפורמות וגדלי מסכים היתה מוגבלת למדי, וכן נוצרו כפילויות של כתובת האתר, תכונה לא אהודה על מנועי החיפוש. מאז נוספו עוד ועוד פלטפורמות. בתחום הטלפונים החכמים בלבד ישנן עשרות רבות של רזולוציות מסך שונות, שלא לדבר על מכשירים בעלי רזולוציה כפולה (רטינה) בה על כל פיקסל במסך מוצגים בפועל שני פיקסלים. בנוסף השוק הוצף במכשירי טאבלט רבים המציגים טווחים חדשים של גדלי מסכים. וקחו בחשבון – כל אחד מהמכשירים האלה לבד מציג תמיד שתי רזולוציות שונות לחלוטין, מסך ניצב ומסך שוכב! (ראו אתר זה להמחשה של כמות הרזולוציות השונות בשוק בהתאם למכשירים הקיימים). לסיכום: עיצוב רספונסיבי זו אינה טכנולוגיה, אלא מגוון כלים וטכניקות לעיצוב המשתנה בהתאם לגודל ורזולוציה של הדפדפן. רכיבי האתר יתאימו את עצמם בגודל ובמיקום שלהם במסך הגולש, כדי לספק את החוויה העשירה ביותר לגולשים. עיצוב רספונסיבי מאפשר לנו להתאים את האתר לאין סוף רזולוציות ופלטפורמות, ללא צורך בשכפול האתר ותחזוקתו בנפרד. כל מה שנדרש זה הגדרת טווח רזולוציה נוסף (break point) בהגדרות העיצוב של האתר. בגלישה ממחשב שולחני לאתר רספונסיבי, נסו להקטין לאט את רוחב חלונית הדפדפן, ותראו איך בנקודות מסויימות האתר פתאום משתנה, ומתאים עצמו מחדש בהתאם לרוחב החדש המוצע לו. אתר חכם ומתוחכם מספיק בשביל להתאים עצמו לסביבת הגולש.