תוכן הוא כמו מים, הסביר בעבר מעצב המובייל ג'וש קלארק. אותו תוכן יכול "להימזג" למגוון של "מיכלים". לכן עלינו להפסיק לחשוב על בניית כלים שונים ולהתחיל לבנות את התוכן שלנו באופן רספונסיבי (תגובתי) כך שיתאים לכל "מיכל".
אך מה הכוונה בעיצוב תגובתי (Responsive), או כפי שנהוג לקרוא לו בשמו הלועזי- עיצוב רספונסיבי? תפיסה זו בעולם עיצוב האתרים דוגלת ביצירת ממשק גרפי המתאים את עצמו אוטומטית לגודל המסך (של מחשב, טאבלט או נייד), תוך שמירה על תצורתו המלאה של האתר, ועל חווית משתמש רציפה.
העיצוב הרספונסיבי מבוסס על שלושה עיקרים:
מבנה של רשת (grid) גמישה – חלוקת המסך לרשת של חלקים. מאפשר שימוש בגדלים יחסיים לעימוד רכיבים שונים; לדוגמא הגדרת רוחב רכיב מסוים כאחוז מגודל הדף (ולא כמספר פיקסלים). כך, כאשר המסך צר יותר (למשל בטלפון נייד לעומת מחשב נייח), גובה הרכיב משתנה בהתאם. מאפשר גם הגדרה משתנה של מיקום רכיבי הרשת, כאשר גודל המסך משתנה (למשל, הצגת שני פריטים לרוחב המסך ולא שלושה).
תמונות גמישות – גם עבור תמונות יש להגדיר גודל יחסי, הן ביחס לדף ולהן ביחס לרכיב בו הן נמצאות כדי לוודא חריג שלהן מגבולות הרכיב.
שימוש במודול "Media queries" (שאילתות מדיה) – כלי של שפת העיצוב CSS3 ש"מתרגם" את התוכן כך שיותאם לרזולוציית המסך.
ישנם אתרים המציעים אלמנטים מתקדמים יותר: סיבוב התמונה בהתאם למסך, שינוי צבע הגופן בהתאמה לשינוי בצבע הרקע, מעבר מתבנית של מספר עמודות לעמודה אחת, הסתרת איורים לא חיוניים. ניתן לקרוא סקירה של אתרים רספונסיביים מוצלחים בבלוג של ג'ס קירקווד ב-"Inside Design".
הגרסאות הרספונסיביות של אתר Dropbox
אם אתם מעוניינים לקרוא עוד כמה טיפים טכניים, אתם מוזמנים לקרוא את הסקירה באתר המפתחים של גוגל, או להירשם לקורס חינמי בנושא ב-Udacity .
מה שהחל כרעיון חדשני לפני כשמונה שנים, הפך היום כמעט לנורמה. ולמה "כמעט"? משום שיש עדיין גופים מסחריים וציבוריים המעדיפים ליצור – בנפרד מהאתר הראשי שלהם – אתר מותאם למובייל. מדובר בגרסה מצומצמת המציגה תכנים מהאתר "הראשי" שמותאמים לצרכיי הגולש ומניעים לפעולה. ניתן לקרוא עוד על ההבדלים בין אתר רספונסיבי לאתר מותאם למובייל במאמר של יעל פייציץ'. ועם זאת, נראה שמדובר בעניין של זמן, ובעוד מספר שנים, כל האתרים יהיו תגובתיים, ואולי אפילו לא נצטרך לתת לזה שם ייעודי, כי זה יהיה הסטנדרט היחיד המקובל.
מקורות
Responsive web design, Wikipedia; retrieved on 20/02/18 Seven Deadly Mobile Myths: Josh Clark Debunks the Desktop Paradigm and More, Forbes, May 3, 2012; retrieved on 20/02/18 11 powerful examples of responsive web design, Inside Design, February 26, 2018; retrieved on 20/02/18 אתר רספונסיבי או אתר מותאם תוכן למובייל? הדילמה ומה שביניהם..., ירחון 2know, יוני 2017; אוחזר ב - 20/02/18