בדרכים רבות, עיצוב אינטרנט רספונסיבי היה תגובה לטלפונים ניידים. לפני שסמארטפונים הופיעו, מעט מאוד אנשים שקלו ברצינות איך אתרים צריכים להיראות ולהרגיש במכשירים ניידים. המצב הזה השתנה עם העלייה המטאורית של טלפונים ניידים עם דפדפני אינטרנט מובנים.
עיצוב אינטרנט רספונסיבי עודד הלך הרוח המטיל ספק בהנחות. בעבר היה מקובל להניח שאתר יוצג רק במחשבים נייחים, אך כיום השימוש המקובל הוא לעצב את אותו האתר גם לטלפונים ולטאבלטים. למעשה, השימוש בניידים ירד היום בתדירות גבוהה יותר מהמחשב באינטרנט.
סוג החשיבה הזה ישרת אותך היטב גם בעתיד. ייתכן מאוד שהאתרים שלכם יוצגו במכשירים ובמסכים שאנחנו אפילו לא יכולים לדמיין כיום. דפוס החשיבה הזה הוא גם מעבר למסכים. גם עכשיו, אנשים משתמשים במכשירים ללא מסכים כדי לגשת לתוכן שלכם. האסיסטנטים הקוליים יכולים להשתמש באתרים שלך אם אתה משתמש בבסיס חזק של 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 מאפשרים לכם לשקלל פריצות מביכות למכשירים בסגנונות שלכם. לדוגמה, אפשר לעצב סביב ה-"notch" ב-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">
עכשיו פריסת הדף תמלא את כל אזור התצוגה ותציב במסמך באופן בטוח ערכים מוטמעים שסופקו על ידי המכשיר.
עבור מסכים מתקפלים, מוצעים שישה משתני סביבה חדשים: 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)