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

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

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

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

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

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

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

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

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

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

אתר שעושה שימוש ייחודי בעיצוב רספונסיבי – כנס לאתר

תיק עבודות רספונסיבי ומרשים – כנס לאתר

גם כאן תמצאו אתר רספונסיבי שנראה מצוין – כנס לאתר

אתר רספונסיבי של סטודיו לעיצוב אינטראקטיבי – כנס לאתר

כלי לבדיקת אתרים רספונסיביים