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

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

Una Kravets

Responsive Design Today

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

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

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

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

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

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

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

מקור: Web Design Museum.

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

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

תגובה למשתמש

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

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

• 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 לאמולציה במקום לפתוח את העדפות המערכת בכל פעם.

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

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

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

ב-Material Design יש הנחיות מצוינות לעיצוב של עיצובים כהים.

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

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

מומלץ לספק למשתמשים תמיד עיצוב כהה, בכל הזדמנות.

בהתאם למאגר

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

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

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

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

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

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

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

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

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

  .time {
    font-size: 1.25rem;
  }

  /* ... */
}

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

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

כרטיסים של שאילתות בנוגע למאגר

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שימוש בשאילתות בנוגע למאגר היום

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

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

סגנונות בהיקף מוגבל

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

האיור עוצב במקור על ידי Miriam Suzanne.

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

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

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

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

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

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

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

תרשים מתוך Microsoft Edge Explainers.

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

שאילתת מדיה ניסיונית שמתפרסת על המסך יכולה לעזור לנו במקרה הזה. בשלב הזה, המערכת מתנהגת כך: @media (spanning: <type of fold>). ההדגמה מגדירה פריסת רשת עם שתי עמודות: אחת עם רוחב של ‎--sidebar-width, שהוא 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 כדי לנפות באגים וליצור אב טיפוס של מסכים רחבים ישירות בדפדפן.

סיכום

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

זה העיצוב החדש שמותאם למכשירים שונים.

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

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

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

web.dev/learnCSS

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

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

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