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

Pete LePage

Rachel Andrew

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

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

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

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

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

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

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

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

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

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

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

הבדיקה Does not have a <meta name="viewport"> tag with width or initial-scale (אין תג <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 משתנים מאוד בין מכשירים שונים (לדוגמה, בין טלפונים לטאבלטים, ואפילו בין טלפונים שונים), התוכן לא צריך להסתמך על רוחב מסוים של אזור התצוגה כדי להציג את עצמו בצורה טובה.

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

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

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

טכניקות מודרניות של פריסת CSS, כמו flexbox, פריסת grid ו-multicol, מקלות מאוד על יצירת רשתות גמישות כאלה.

Flexbox

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

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

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

מידע נוסף על Flexbox

פריסת רשת CSS

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

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

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

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

פריסה מרובת-עמודות

בסוגים מסוימים של פריסות, אפשר להשתמש בפריסת עמודות (Multicol), שיוצרת מספרים רספונסיביים של עמודות באמצעות המאפיין 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

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

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

hover
pointer
any-hover
any-pointer

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

יש תמיכה טובה בתכונות החדשות האלה בכל הדפדפנים המודרניים. מידע נוסף זמין בדפי MDN בנושאים hover,‏ any-hover,‏ pointer ו-any-pointer.

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

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

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

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

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

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

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

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

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

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

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

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

הימנעות מהסתרת תוכן (:#avoid-hiding-content)

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

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

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

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

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

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

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