רספונסיביות באתרי וויקס

מה זה רספונסיביות בכלל?

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

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

איך בונים אתר וויקס רספונסיבי?

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

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

איך האתר שלי נראה בגדלי מסך שונים?

כדי לבדוק איך האתר שלכם נראה בכל מסך שהוא, גם בניידים וגם בטאבלטים ואייפדים, אתם יכולים להכנס לאחד מאינספור האתרים החינמיים בהם ניתן לבדוק זאת, הנה דוגמא לאתר כזה. כדי לראות אילו גדלי מסך לבדוק, פשוט חפשו בגוגל Average screen size resolution או Average tablet resolution ותקבלו את כל המספרים הרלוונטיים.