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

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

בשונה מהמחשב, הטלפון תמיד איתנו – בכל מקום שבו נהיה אם זה בעבודה, בבית, ברכב או בכל מקום אחר. אם בשנת 2013 רק 16.2% מנפח הגלישה באינטרנט היה דרך טלפונים סלולריים, הרי שבשנת 2017 לראשונה עקפה הגלישה הסלולרית את הגלישה ממחשבים (50.3%). בשנת 2018  כבר עומד נפח הגלישה מטלפונים סלולריים על 52.2%. המגמה ברורה: כבר היום היקפי הגלישה דרך הטלפון גבוהים יותר מהיקפי הגלישה דרך מחשבים.

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

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

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

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

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

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

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

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

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