עיצוב אתר רספונסיבי היה תגובות רבות לטלפונים ניידים מבחינות רבות. לפני שהסמארטפונים הופיעו, מעט מאוד אנשים חשבו ברצינות איך אתרים ייראו ותחושות במכשירים ניידים. הדבר השתנה בעקבות העלייה המטאורית של הטלפונים הניידים הכוללים דפדפני אינטרנט מובנים.
עיצוב אינטרנט רספונסיבי, מעודד דפוס חשיבה שמטיל ספק בהנחות. בעבר היה נהוג לחשוב שהאתר ניתן לצפייה רק במחשב, אבל עכשיו מקובל לעצב את אותו אתר גם לטלפונים ולטאבלטים. למעשה, השימוש במכשירים ניידים היה נמוך יותר מהשימוש במחשבים באינטרנט.
דפוס רספונסיבי זה יעזור לכם להצליח בעתיד. ייתכן מאוד שהאתרים שלך יצפו במכשירים ובמסכים שאנחנו אפילו לא יכולים לדמיין היום. ודפוס החשיבה הזה מתפרש גם מעבר למסכים. גם עכשיו אנשים משתמשים במכשירים ללא מסכים כדי לגשת לתוכן שלך. העוזרים הקוליים יכולים להשתמש באתרים שלכם אם אתם משתמשים בבסיס חזק של HTML סמנטי.
יש ניסויים גם בעולם המסכים. כיום יש בשוק מכשירים עם מסכים מתקפלים. זה מציג כמה אתגרים בעיצובים שלכם.
שני מסכים
משתמשים במכשירים מתקפלים יכולים לבחור אם הם רוצים שדפדפן האינטרנט יתפוס רק אחד מהמסכים או יתפרס על שני המסכים. אם הדפדפן מתפרס על שני המסכים, האתר שמוצג יפוצל לפי הציר שבין שני המסכים. זה לא נראה מעולה.
פלחים של אזור התצוגה
יש תכונת מדיה ניסיונית שנועדה לזהות אם האתר שלכם מוצג במכשיר עם שני מסכים. השם המוצע של תכונת המדיה הוא viewport-segments. יש שתי שיטות: horizontal-viewport-segments וvertical-viewport-segments.
אם תכונת המדיה horizontal-viewport-segments מדווחת על הערך 2 ו-vertical-viewport-segments מדווח על הערך 1, המשמעות היא שציר המכשיר פועל מלמעלה למטה, והתוכן מתחלק לשני חלוניות זה לצד זה.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
// Styles for side-by-side screens.
}
אם תכונת המדיה vertical-viewport-segments מדווחת על הערך 2 והערך horizontal-viewport-segments מדווח על הערך 1, הציר פועל מצד לצד ומחלק את התוכן לשני לוחות, אחד על גבי השני.
@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
// Styles for stacked screens.
}
אם גם ב-vertical-viewport-segments וגם ב-horizontal-viewport-segments מדווח הערך 1, המשמעות היא שהאתר מוצג במסך אחד בלבד, גם אם במכשיר יש יותר ממסך אחד. הפעולה הזו מקבילה לאי-שימוש בשאילתת מדיה.
משתני סביבה
תכונת המדיה viewport-segments כשלעצמה לא תעזור לכם לעצב סביב הציר המעצבן הזה. צריכה להיות לכם דרך לדעת את גודל הציר. כאן תוכלו להיעזר במשתני סביבה.
משתני סביבה ב-CSS מאפשרים לשקלל חדירות מביכות של מכשירים בסגנונות שלכם. לדוגמה, תוכלו לעצב סביב ה"חריץ" ב-iPhone X באמצעות ערכי הסביבה safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom ו-safe-area-inset-left. מילות המפתח האלה תחומות בתוך הפונקציה env().
body {
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
}
משתני סביבה פועלים כמו מאפיינים מותאמים אישית. כלומר, אפשר להעביר אפשרות חלופית במקרה שמשתנה הסביבה לא קיים.
body {
padding-top: env(safe-area-inset-top, 1em);
padding-right: env(safe-area-inset-right, 1em);
padding-bottom: env(safe-area-inset-bottom, 1em);
padding-left: env(safe-area-inset-left, 1em);
}
כדי שמשתני הסביבה האלה יפעלו ב-iPhone X, צריך לעדכן את הרכיב meta שמציין את המידע viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
עכשיו פריסת הדף תכסה את כל אזור התצוגה ותמלא בבטחה את המסמך בעזרת ערכי in-set של המכשיר.
למסכים מתקפלים מוצעים שישה משתני סביבה חדשים: viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right.
בהמשך מוצגת דוגמה לפריסה עם שתי עמודות, אחת רחבה יותר מהשנייה.
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
בשני מסכים עם ציר אנכי, צריך להגדיר את העמודה הראשונה כרוחב המסך הראשון ואת העמודה השנייה כרוחב של המסך השני.
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
main article {
flex: 1 1 env(viewport-segment-width 0 0);
}
main aside {
flex: 1;
}
}
מתייחסים לשני מסכים כהזדמנות. אולי אפשר להשתמש במסך אחד כדי להציג תוכן טקסט שניתן לגלול, והשני מציג רכיב קבוע, כמו תמונה או מפה.
העתיד
האם מסכים מתקפלים יהפכו לדבר הגדול הבא? מי יודע. אף אחד לא יכול היה לחזות את מידת הפופולריות של מכשירים ניידים, לכן כדאי לחשוב על גורמי צורה עתידיים.
מעל הכול, חשוב לוודא שהאתרים יכולים להגיב בהתאם למקרה העתידי. זה מה שעיצוב רספונסיבי מעניק לך: לא רק אוסף של טכניקות מעשיות, אלא גם דפוס חשיבה שישרת אותך וגם את הדרך ליצירת האינטרנט של מחר.
בדיקת ההבנה
בוחנים את הידע שלכם לגבי הגדרות מסך
איזו שאילתת מדיה מטרגטת למכשיר מתקפל בפריסה לרוחב מפוצלת?
@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1)@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 2)@media (vertical-viewport-segments: 1) and (horizontal-viewport-segments: 1)מהם משתני סביבה? למשל env(safe-area-inset-top)