אתר רספונסיבי זהו אתר בעל תצוגה המותאמת לכל גודל מסך. כלומר אתר שנראה טוב על מחשב, פלאפון, וטאבלט.
הערה: בצילום למעלה הדגמתי איך אתר רספונסיבי לא צריך להיראות.
תוכן עניינים
פירוש המילה רספונסיבי
המילה רספונסיבי מגיעה מאנגלית (Responsive) ופירושה להגיב במהירות. כאשר מדובר על מחשבים הכוונה לעמודי אתרים בהם העיצוב מתאים את עצמו בהתאם לרזולוציה של המסך עליו נפתח העמוד.
איך לבדוק שהאתר רספונסיבי?
הדרך הישירה ביותר היא לפתוח את האתר על מחשב, טאבלט ופלאפון. ועל כל אחד אחד מן המכשירים לעבור על דפים עם תבניות שונות.
אבל רוב האנשים לא יבדקו על מכשירים שונים (למרות שזה תמיד מומלץ), אלה יבדקו רק דרך הסימולציות של הדפדפן.
ברוב הדפדפנים אפשר לפתוח developer tools ע"י לחיצה על F12. לצורך ההדגמה אני אשתמש ב-chrome ואחד הבלוגים שלי.
בצילום מסך ניתן לראות את ה-developer tools מצד ימין וכאשר נשנה את הרוחב של העמודה הימנית נראה איך האתר מתאים את עצמו.
מצ"ב צילום מסך בו הרחבנו את ה-developer tools (והוספתי חץ שחור המראה איך משנים את הרוחב).
ניתן לראות שמספר דברים השתנו באתר. קודם כל התפריט העליון במקום להיות לרוחב, הפך לגובה (כמו רשימה שניתן לפתוח ולסגור ע"י לחיצה).
בנוסף כל מה שהיה בעמודה ימנית (חיפוש, שפות וקטגוריות) עבר לתחתית המאמר. והשינוי האחרון זה ההתאמה של הטקסט והתמונות לרוחב העמוד (שימו לב שלא מתווסף בר גלילה בתחתית העמוד).
אפשרות נוספת לראות איך האתר יראה על מכשירים שונים היא על ידי לחיצה על כפתור Toggle device toolbar (מסומן בחץ שחור בצילום מסך הבא).
אחרי שעוברים למצב תצוגה של פלאפון/טאבלט, ניתן לבחור את דגם המכשיר או הרזולוציה (החץ האדום) ולצפות התוצאה.
האם חשוב שהאתר יהיה רספונסיבי?
הבנו איך לבדוק שהאתר רספונסיבי אבל צריך גם לענות על שאלה בסיסית יותר. עד כמה חשוב שהאתר יהיה רספונסיבי?
מכיוון שיש לי אתרים כבר הרבה שנים, ראיתי את המגמה בה רוב המבקרים הפכו ממשתמשי מחשב לגולשים בטלפון. מצ"ב נתונים רלוונטיים עבור דצמבר 2021 מאחד האתרים שלי.
הנתונים כוללים כ-30 אלף משתמשים וכפי שניתן לראות למרות שמדובר על שנת קורונה, עדיין הרוב המכריע הם משתמשי פלאפון.
כמובן שהמספרים תלויים בקטגוריה, אבל עדיין ברוב התחומים עיקר הגולשים משתמשים הפלאפונים. גם Google מכירים בעובדה זו ולכן ב-2019 עברו ל-Mobile-first indexing. לפיכך, כל אתר חייב להיות רספונסיבי.
מה זה אתר מותאם לסלולר?
כאשר טלפונים חכמים התחילו להיכנס לשימוש חלק מבעלי אתרים לא רצו להשקיע הרבה בשינוי האתר (צריך לזכור שגם הטכנולוגיה הייתה אחרת). לכן היו בונים אתר נוסף, בדרך כלל גרסה מצומצמת המותאמת לסלולר.
כפי שראינו, מכיוון שרוב המשתמשים גולשים בטלפון, לא הייתי מציע ללכת בגישה זו. אפשר לשקול אתר מותאם לסלולר במקרים מאוד מסוימים כאשר יש קושי טכנולוגי בהמרת אתר ישן והמשתמשים מחפשים משהו מאוד ספציפי (ואין צורך להמיר הרבה תוכן). אבל כל אתר חדש חייב להיות רספונסיבי.
CSS
בחלק זה אנו נדבר בקצרה על איך הופכים אתר לרספונסיבי.
יוצרים מספר תצורות בקובץ CSS המתאימות לכל רוחב מסך. וזה נעשה ע"י שימוש בתגית media@ עם פרמטרים min-width ו-max-width.
אם נמשיך עם הדוגמה הקודמת, אז למחלקה של התפריט (nav-menu.) יש שני הגדרות. אחד למסכים בעלי רזולוציה של מעל 1200 פיקסלים ("media (min-width: 1200px)@") ואחד לכל השאר. במידה ויש צורך, ניתן ליצור יותר משני תצורות בצורה הבאה:
media screen and (max-width: 900px) and (min-width: 600px)@
באותה צורה אפשר לשלוט גם על גודל פונט, מספר עמודות, להחביא אלמנטים ועוד. דוגמאות נוספות ניתן למצוא כאן.
סיכום
כפי שראינו, היום מרבית הגולשים משתמשים בטלפונים. לכן כל אתר חייב להיות רספונסיבי. רוב תבניות עיצוב במערכות ניהול תוכן (CMS) שונות יהיו מותאמות לגדלים שונים של מסכים. אבל חשוב לבדוק את נראות האתר על מסכים שונים.
