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