דף זה תורגם על ידי Cloud Translation API.

עקרונות בסיסיים של עיצוב אתר רספונסיבי

Pete LePage

Rachel Andrew

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

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

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

הגדרת אזור התצוגה

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

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

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

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

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

אין תג <meta name="viewport"> עם width או initial-scale בדיקה של Lighthouse יכולה לעזור להפוך את תהליך בדיקת ה-HTML לאוטומטי מסמכים משתמשים בצורה נכונה במטא תג של אזור התצוגה.

להתאים את גודל התוכן לאזור התצוגה

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

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

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

תמונות

תמונה במידות קבועות גורמת לגלילה בדף אם הוא גדול מ אזור התצוגה. מומלץ לתת לכל התמונות max-width של 100%, כדי להתכווץ תמונות שיתאימו לשטח הזמין ובמקביל ימנעו מהן להתמתח מעבר בגודל הראשוני שלהם.

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

img {
  max-width: 100%;
  display: block;
}

צריך להוסיף את מידות התמונה לאלמנט img

גם אם מגדירים את max-width: 100%, עדיין מומלץ להוסיף את width height מאפיינים לתגי <img> שלך, כדי שהדפדפן יוכל לשריין מקום לפני שהן נטענות. כך ניתן למנוע שינויי פריסה.

פריסה

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

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

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

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

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

Flexbox

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

.items {
  display: flex;
  justify-content: space-between;
}

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

מידע נוסף על Flexbox

פריסת רשת CSS

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

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

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

מידע נוסף על פריסת רשת של CSS

פריסה של עמודות מרובות

בסוגי פריסה מסוימים ניתן להשתמש בפריסה של עמודות מרובות (ריבוי עמודות), שמאפשר ליצור מספרים רספונסיביים של עמודות עם המאפיין column-width. בהדגמה הבאה, הדף מוסיף עמודות כשיש מקום נוסף לעמודה 200px.

מידע נוסף על Multicol

שימוש בשאילתות מדיה של CSS לשיפור הרספונסיביות

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

אפשר גם להשתמש בשאילתת מדיה כדי לכלול סגנונות הדפסה בגיליון הסגנונות הראשי:

@media print {
  /* print styles go here */
}

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

שאילתות מדיה שמבוססות על גודל אזור התצוגה

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

width ‏(min-width‏, max-width)
height ‏(min-height‏, max-height)
orientation
aspect-ratio

בכל התכונות האלה יש תמיכה מעולה בדפדפן. לפרטים נוספים, כולל מידע על תמיכה בדפדפן, width, height, כיוון, וגם יחס גובה-רוחב ב-MDN.

שאילתות מדיה על סמך יכולת המכשיר

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

hover
pointer
any-hover
any-pointer

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

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

שימוש ב-`any-hover` וב-`any-pointer`

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

איך בוחרים נקודות עצירה (breakpoint)

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

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

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

הדוגמה הבאה ממחישה את הדוגמה לווידג'ט של תחזית מזג האוויר ב- תחילת הדף הזה. השלב הראשון הוא בדיקת התחזית מסך קטן:

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

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

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

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

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

לבסוף, משנים את קוד ה-CSS. בתוך שאילתת המדיה עבור max-width מתוך 600px, להוסיף את ה-CSS, שמיועד למסכים קטנים בלבד. בתוך שאילתת המדיה של min-width מתוך 601px מוסיפים שירות CSS למסכים גדולים יותר.

בחירת נקודות עצירה קלות במקרה הצורך

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

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

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

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

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

אופטימיזציה של הטקסט לקריאה

תיאוריית הקריאות הקלאסית מציעה שעמודה אידיאלית צריכה להכיל 70 עד 80 תווים בכל שורה (כ-8 עד 10 מילים באנגלית). כדאי להוסיף נקודת עצירה (breakpoint) בכל פעם שהרוחב של גוש טקסט גדול מ-10 מילים.

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

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

בדוגמה זו, הגופן Roboto ב-1em יפיק 10 מילים בכל שורה קטן יותר, אבל במסכים גדולים יותר נדרש נקודת עצירה (breakpoint). במקרה הזה, אם רוחב הדפדפן גדול מ-575px, רוחב התוכן האידיאלי הוא 550px.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

הימנעות מהסתרת תוכן (:#aדחיית-הסתרה-תוכן)

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

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

אחרי שמגדירים נקודות עצירה (breakpoint) של שאילתות מדיה, בודקים איך הן משפיעות על המראה שלו. אפשר לשנות את הגודל של חלון הדפדפן כדי להפעיל את נקודות העצירה (breakpoint), אבל בכלי הפיתוח ל-Chrome יש תכונה מובנית שמראה איך דף נראה נקודות עצירה שונות.

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

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

כדי להציג את הדף בנקודות עצירה שונות:

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