העיצוב החדש והרספונסיבי: עיצוב אינטרנט בעולם המבוסס על רכיבים

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

Una Kravets

עיצוב רספונסיבי כבר היום

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

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

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

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

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

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

אנחנו רואים את זה קורה בערך פעם ב-10 שנים. לפני עשר שנים, בסביבות 2010-2012, ראינו שינוי עצום כשמדובר בניידים, בעיצוב רספונסיבי ועם ההופעה של CSS3.

מקור: מוזיאון לעיצוב אתרים.

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

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

בהתאם לדרישות של המשתמש

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

תכונות המדיה האלה של העדפות המשתמש כוללות:

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• ועוד

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

prefers-reduced-motion

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

עם prefers-reduced-motion תוכלו לעצב דפים עם התמקדות בתנועה מופחתת, וליצור חוויה משופרת מתנועה של אלה שלא הגדירו את ההעדפה הזו.

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

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

prefers-color-scheme

מאפיין מועדף נוסף למדיה הוא prefers-color-scheme. התכונה הזו עוזרת להתאים אישית את ממשק המשתמש לעיצוב המועדף על המשתמש. במערכת ההפעלה של המשתמשים, גם אם מדובר במחשב וגם בנייד, הם יכולים להגדיר העדפה לעיצוב בהיר, לעיצוב כהה או לעיצוב אוטומטי, שמשתנה בהתאם לשעה ביום.

אם הגדרתם את הדף באמצעות מאפיינים מותאמים אישית של CSS, החלפת ערכי הצבעים קלה ופשוטה. ניתן לעדכן במהירות את הערכים של עיצוב הצבעים, כמו backgroundColor ו-textOnPrimary, כדי שיתאימו באופן דינמי לעיצוב החדש בשאילתת המדיה.

כדי שיהיה קל יותר לבדוק חלק משאילתות ההעדפות האלה, תוכלו להשתמש ב-DevTools for אמולציה במקום לפתוח את העדפות המערכת בכל פעם.

עיצוב לעיצוב כהה

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

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

עיצוב חדשני תלת-ממדי מספק הדרכה מצוינת לעיצוב של עיצובים כהים.

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

מחקר בנושא Android משנת 2018 בנושא עיצובים כהים הראה חיסכון של עד 60% בצריכת החשמל, בהתאם לבהירות המסך ולממשק המשתמש הכולל. מקור הנתונים הסטטיסטיים של 60% הוא השוואה בין מסך ההפעלה של YouTube לבין סרטון מושהה בבהירות המסך של 100%, תוך שימוש בעיצוב כהה בממשק המשתמש של האפליקציה לעומת עיצוב בהיר.

תמיד חשוב לספק למשתמשים חוויה של עיצוב כהה ככל האפשר.

רספונסיבית למאגר התגים

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

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

לצפייה בהדגמה ב-Codepen (מאחורי הדגל ב-Canary).

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

רמת הגמישות הזו בלתי אפשרית בשאילתות מדיה בלבד.

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

לשם כך צריך את הכלל @container. הפעולה הזו דומה לשאילתת מדיה עם @media, אבל במקום זאת, @container שולח שאילתה במאגר ההורה כדי לקבל מידע ולא את אזור התצוגה ואת סוכן המשתמש.

.card {
  container-type: inline-size;
}

@container (max-width: 850px) {
  .links {
    display: none;
  }

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

קודם כול, מגדירים את ההגבלה על רכיב ההורה. לאחר מכן, כותבים שאילתת @container כדי לסגנן רכיב כלשהו מהקונטיינר בהתאם לגודל שלו, באמצעות min-width או max-width.

בקוד שלמעלה נעשה שימוש ב-max-width ומגדיר את הקישורים ל-display:none, וכן מקטין את גודל גופן הזמן אם הקונטיינר קטן מ-850px ברוחב.

כרטיסי שאילתות של קונטיינרים

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

לצפייה בהדגמה ב-Codepen (מאחורי הדגל ב-Canary).

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

.product {
  container-type: inline-size;
}

@container (min-width: 350px) {
  .card-container {
    padding: 0.5rem 0 0;
    display: flex;
  }

  .card-container button {
    /* ... */
  }
}

כשיש ברשת לפחות 350px מקום, פריסת הכרטיסים עוברת לרוחב על ידי הגדרה לערך display: flex, שם ברירת המחדל של הכיוון הגמיש הוא 'row'.

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

שילוב שאילתות קונטיינר עם שאילתות מדיה

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

לצפייה בהדגמה ב-Codepen (מאחורי הדגל ב-Canary).

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

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

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

אנחנו משתמשים כיום בשאילתות של קונטיינרים

ההדגמות האלה זמינות עכשיו להפעלה עם דגל ב-Chrome Canary. נכנסים אל about://flags ב-Canary ומפעילים את הדגל #enable-container-queries. כך תאפשר תמיכה בערכים של @container, inline-size ו-block-size בנכס contain ובהטמעה של LayoutNG Grid.

הדגל גם מפעיל את התכונות המתאימות של כלי הפיתוח ל-Chrome. איך בודקים שאילתות של קונטיינרים ומנפות באגים בכלי הפיתוח

סגנונות לפי היקף

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

דמות שתוכננה במקור על ידי מרים סוזן.

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

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

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

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

התאמה לגורם הצורה

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

תרשים מ-Microsoft Edge Explainers.

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

שאילתת מדיה ניסיונית לפריסת מסכים יכולה לעזור לנו כאן. כרגע הוא פועל כך: @media (spanning: <type of fold>). בהדגמה מוגדרת פריסת רשת עם שתי עמודות: באחת מהן יש רוחב של --סרגל צד, שהוא 5rem כברירת מחדל, והשנייה היא 1fr. כשמציגים את הפריסה במסך כפול עם קיפול אנכי אחד, הערך של --sidebar-width מתעדכן בהתאם לערך הסביבה של החלק השמאלי.

:root {
  --sidebar-width: 5rem;
}

@media (spanning: single-fold-vertical) {
  --sidebar-width: env(fold-left);
}

main {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
}

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

אפשר לבדוק מסכים מתקפלים באמולטור Chrome DevTools כדי לעזור בניפוי באגים ובאב-טיפוס של מסך שמופיע ישירות בדפדפן.

סיכום

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

זו הגרסה הרספונסיבית החדשה.

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

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

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

web.dev/learnCSS

בינתיים, אם אתם רוצים לשדרג את משחק ה-CSS שלכם ואולי לחזור ליסודות, הצוות שלי משיק קורס CSS חדש לגמרי בחינם וחומר עזר בנושא web.dev. ניתן לגשת אליו דרך web.dev/learnCSS.

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

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