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



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


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


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


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


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


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


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


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




103 צפיות

מה מעניין אתכם היום?

נעים מאוד, אני אלכס

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

רוצים להשאר מעודכנים?

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

@Alechka 2019