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

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

Una Kravets

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

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

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

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

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

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

זה קורה בערך כל 10 שנים. לפני 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, כדי להתאים באופן דינמי לעיצוב החדש בשאילתת המדיה.

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

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

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

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

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

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

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

רספונסיבי למאגר

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

סגנונות מוגדרים

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

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

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

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

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

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

רספונסיבי לגורם הצורה

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

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

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

סיכום

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

זה העיצוב הרספונסיבי החדש.

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

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

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

web.dev/learnCSS

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

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

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