איך ליצור אתרים המגיבים לצרכים וליכולות של המכשיר שבו הם צופים.
השימוש במכשירים ניידים לגלישה באינטרנט ממשיך לגדול בקצב אסטרונומי, ומכשירים אלה מוגבלים בדרך כלל על ידי גודל התצוגה ודורשים גישה שונה לגבי אופן פריסת התוכן על המסך.
עיצוב אינטרנט דינמי, שהוגדר במקור על ידי איתן מרקוט ב-A List Apart, מגיב לצרכים של המשתמשים והמכשירים שבהם הם משתמשים. הפריסה משתנה בהתאם לגודל וליכולות של המכשיר. לדוגמה, בטלפון, משתמשים יראו תוכן שמוצג בתצוגת עמודה אחת. בטאבלט עשוי להציג את אותו התוכן בשתי עמודות.
קיימים הרבה גדלים שונים של מסכים לטלפונים, מחשבים, טאבלטים, מחשבים, קונסולות משחקים, טלוויזיות ואפילו גאדג'טים לבישים. גודלי המסכים משתנים כל הזמן, לכן חשוב שהאתר שלכם יוכל להתאים את עצמו לכל גודל מסך, היום או בעתיד. בנוסף, למכשירים יש תכונות שונות שאיתם אנחנו מקיימים אינטראקציה. לדוגמה, חלק מהמבקרים ישתמשו במסך מגע. בעיצוב רספונסיבי ומודרני, המערכת מביאה בחשבון את כל הגורמים האלה כדי לשפר את החוויה של כולם.
הגדרת אזור התצוגה
דפים שעברו אופטימיזציה עבור מגוון מכשירים חייבים לכלול מטא תג של אזור תצוגה בראש המסמך. תג מטא של אזור תצוגה מספק לדפדפן הוראות לשליטה במידות ובקנה המידה של הדף.
כדי לספק את החוויה הטובה ביותר, דפדפנים לנייד מעבדים את הדף ברוחב מסך של מחשב (בדרך כלל כ-980px, אם כי המצב הזה משתנה בין מכשירים), ולאחר מכן מנסים לשפר את מראה התוכן על ידי הגדלת גודל הגופן והתאמת התוכן למסך.
לכן, גדלים של גופנים עשויים להיראות לא עקביים למשתמשים, שאולי יצטרכו להקיש הקשה כפולה או לשנות את מרחק התצוגה שלהם כדי לראות את התוכן ולקיים איתו אינטראקציה.
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
השימוש בערך המטא של אזור התצוגה width=device-width מורה לדף להתאים לרוחב המסך בפיקסלים שלא תלויים במכשיר. פיקסל עצמאי של מכשיר (או צפיפות) הוא ייצוג של פיקסל בודד, שיכול להיות במסך עם צפיפות גבוהה שכולל פיקסלים פיזיים רבים. זה מאפשר לדף להזרים מחדש את התוכן כדי להתאים לגודלי מסך שונים, גם אם הוא מוצג בטלפון נייד קטן או במסך מחשב גדול.
דפדפנים מסוימים שומרים על רוחב דף קבוע כשהוא מסובב את הדף לפריסה לרוחב, ומשנים את מרחק התצוגה במקום לבצע הזרמה חוזרת כדי למלא את המסך. הוספת הערך initial-scale=1 מנחה את הדפדפנים ליצור קשר 1:1 בין פיקסלים ב-CSS לבין פיקסלים שלא תלויים במכשיר, ללא קשר לכיוון המכשיר, ומאפשרת לדף לנצל את הרוחב המלא לרוחב.
אין תג <meta name="viewport"> עם הביקורת width או initial-scale
הביקורת של Lighthouse יכולה לעזור לכם להפוך את התהליך לאוטומטי כדי לוודא שמסמכי ה-HTML משתמשים בצורה נכונה במטא תג של אזור התצוגה.
הבטחת אזור תצוגה נגיש
בנוסף להגדרת initial-scale, אפשר גם להגדיר את המאפיינים הבאים באזור התצוגה:
minimum-scalemaximum-scaleuser-scalable
אחרי ההגדרות האלה, יכול להיות שהמשתמשים לא יוכלו לשנות את מרחק התצוגה של אזור התצוגה, מה שעלול לגרום לבעיות נגישות. לכן, לא מומלץ להשתמש במאפיינים האלה.
התאמת גודל התוכן לאזור התצוגה
במחשבים וגם בניידים, המשתמשים רגילים לגלול אתרים בצורה אנכית אבל לא אופקית. כך הם מאלצים את המשתמשים לגלול לרוחב או להתרחק כדי לראות את כל הדף, וכך חוויית המשתמש לא טובה.
כשמפתחים אתר לנייד עם מטא תג של אזור תצוגה, קל ליצור בטעות תוכן דף שלא מתאים לאזור התצוגה שצוין. לדוגמה, תמונה שמוצגת ברוחב רחב יותר מאזור התצוגה, עלולה לגרום לגלילה אופקית באזור התצוגה. יש להתאים את התוכן הזה לרוחב של אזור התצוגה, כך שהמשתמש לא יצטרך לגלול לרוחב.
הבדיקה של התוכן לא הוגדר כראוי עבור אזור התצוגה יכולה לעזור לכם לבצע אוטומציה של תהליך זיהוי התוכן שגולש.
תמונות
לתמונה יש מידות קבועות, ואם היא גדולה מאזור התצוגה, סרגל גלילה יופיע.
דרך נפוצה לטיפול בבעיה הזו היא לתת לכל התמונות max-width של 100%.
בעקבות זאת התמונה תתכווץ בהתאם לשטח שיש בה, אם אזור התצוגה יהיה קטן יותר מהתמונה.
עם זאת, בגלל שה-max-width, במקום width הוא 100%,
התמונה לא תימתח יותר מגודלה הטבעי.
בדרך כלל אפשר להוסיף את הפרטים הבאים לגיליון הסגנונות, כך שלעולם לא תהיה בעיה עם תמונות שגורמות לסרגל גלילה.
img {
max-width: 100%;
display: block;
}
הוספת המידות של התמונה לרכיב img
כשמשתמשים ב-max-width: 100%, צריך לשנות את המידות הטבעיות של התמונה, אבל עדיין צריך להשתמש במאפיינים width ו-height בתג <img>.
הסיבה לכך היא שדפדפנים מודרניים ישתמשו במידע הזה כדי לשריין מקום לתמונה לפני שהיא תיטען, וכך למנוע שינויים בפריסה בזמן שהתוכן נטען.
פריסה
מכיוון שהמידות והרוחב של המסך בפיקסלים של CSS משתנים במידה רבה בין מכשירים (לדוגמה, בין טלפונים וטאבלטים ואפילו בין טלפונים שונים), אין להסתמך על רוחב מסוים של אזור התצוגה כדי לעבד את התוכן כראוי.
בעבר, ההגדרה הזאת דורשת רכיבים ששימשו ליצירת פריסה באחוזים. בדוגמה הבאה אפשר לראות פריסה של שתי עמודות עם אלמנטים צפים, שגודלם נקבע באמצעות פיקסלים. ברגע שאזור התצוגה נעשה קטן יותר מהרוחב הכולל של העמודות, עלינו לגלול לרוחב כדי לראות את התוכן.
אם משתמשים באחוזים במידות הרוחב, העמודות תמיד נשארות כאחוז מסוים מהמאגר. כלומר, העמודות יצטמצמו ולא ייווצרו סרגל גלילה.
שיטות מודרניות לפריסת CSS כמו Flexbox, Grid Layout ו-Multicol, מאפשרות ליצור רשתות גמישות כאלה הרבה יותר בקלות.
Flexbox
שיטת הפריסה הזו אידיאלית כשיש קבוצה של פריטים בגדלים שונים ורוצים שהם ישתלבו בצורה נוחה בשורה או בשורות, כך שפריטים קטנים יותר תופסים פחות מקום ופריטים גדולים יותר מקבלים יותר מקום.
.items {
display: flex;
justify-content: space-between;
}
בעיצוב רספונסיבי, ניתן להשתמש ב-Flexbox כדי להציג פריטים בשורה אחת או כדי להתפרס על שורות מרובות כשהשטח הזמין הולך ופוחת.
פריסת רשת CSS
פריסת רשת של CSS מאפשרת יצירה ישירה של רשתות גמישות.
לפי הדוגמה הצפה הקודמת, במקום ליצור עמודות עם אחוזים, אפשר להשתמש בפריסת רשת וביחידה fr, שמייצגת חלק מהשטח הזמין בקונטיינר.
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
אפשר להשתמש ברשת גם כדי ליצור פריסות רשת רגילות, עם כמה פריטים שרוצים.
מספר הטראקים הזמינים יצטמצם ככל שגודל המסך יתכווץ.
בהדגמה שלמטה, יש לנו מספר הכרטיסים שמתאים לכל שורה, בגודל מינימלי של 200px.
פריסת עמודות
בסוגים מסוימים של פריסה אפשר להשתמש בפריסה מרובת עמודות (Multicol), וליצור מספרים רספונסיביים של עמודות באמצעות המאפיין column-width.
בהדגמה שלמטה אפשר לראות שהעמודות מתווספות אם יש מקום לעמודה 200px נוספת.
שימוש בשאילתות מדיה של 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)orientationaspect-ratio
לכל התכונות האלה יש תמיכה מצוינת בדפדפן. לפרטים נוספים, כולל מידע על התמיכה בדפדפן, אפשר לעיין ברוחב, גובה, כיוון ויחס גובה-רוחב ב-MDN.
שאילתות מדיה המבוססות על יכולות המכשיר
בהתחשב במגוון המכשירים הזמינים, אנחנו לא יכולים להניח שכל מכשיר גדול הוא מחשב שולחני או מחשב נייד רגיל, או שאנשים משתמשים רק במסך מגע במכשיר קטן. עם תוספות חדשות למפרט של שאילתות המדיה, אנחנו יכולים לבדוק תכונות כמו סוג המצביע המשמש לאינטראקציה עם המכשיר והאם המשתמש יכול להעביר את העכבר מעל רכיבים.
hoverpointerany-hoverany-pointer
נסו לצפות בהדגמה הזו במכשירים שונים, כמו מחשב רגיל וטלפון או טאבלט.
תכונות חדשות אלה כוללות תמיכה טובה בכל הדפדפנים המודרניים. מידע נוסף זמין בדפי MDN לגבי hover, כל ריחוף, מצביע וכל נקודה.
שימוש ב-any-hover וב-any-pointer
התכונות any-hover ו-any-pointer בודקות אם למשתמש יש יכולת להעביר את העכבר, או להשתמש בסוג הסמן הזה גם אם זו לא הדרך העיקרית שבה הוא משתמש במכשיר.
צריך להיות זהירים מאוד בעת השימוש בתכונות האלה.
לא כל כך ידידותי לאלץ את המשתמש לעבור לעכבר בזמן שהוא משתמש במסך המגע.
עם זאת, any-hover ו-any-pointer יכולים להיות שימושיים אם חשוב להבין איזה סוג מכשיר יש למשתמש.
לדוגמה, מחשב נייד עם מסך מגע ומשטח מגע צריך להתאים למצביעים לא גסים או דקים, בנוסף ליכולת להעביר את העכבר מעליו.
איך בוחרים נקודות עצירה (breakpoint)
אין להגדיר נקודות עצירה (breakpoint) על סמך סיווגי מכשירים. הגדרה של נקודות עצירה (breakpoint) על סמך מכשירים, מוצרים, שמות מותגים או מערכות הפעלה שמשתמשים בהם כיום יכולה לגרום לסיוט מבחינת התחזוקה. במקום זאת, התוכן עצמו צריך לקבוע איך הפריסה מתאימה את עצמה למאגר שלו.
בוחרים נקודות עצירה עיקריות: מתחילים בקטן ואז עובדים
קודם צריך לעצב את התוכן כך שיתאים למסך קטן, ואז להרחיב את המסך עד שתהיה צורך בנקודת עצירה. כך אפשר לבצע אופטימיזציה של נקודות עצירה (breakpoint) בהתאם לתוכן ולשמור על מספר מינימלי של נקודות עצירה (breakpoint).
נבחן את הדוגמה שהוצגה בהתחלה: תחזית מזג האוויר. השלב הראשון הוא לגרום לתחזית להיראות טוב על מסך קטן.
לאחר מכן, משנים את גודל הדפדפן עד שיש יותר מדי רווח לבן בין הרכיבים, והתחזית פשוט לא נראית טוב.
ההחלטה סובייקטיבית במידה מסוימת, אבל מעל 600px היא בהחלט רחבה מדי.
כדי להוסיף נקודת עצירה (breakpoint) ב-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 מילים, כדאי לשקול להוסיף נקודת עצירה (breakpoint).
נבחן עכשיו את הדוגמה שלמעלה לפוסט בבלוג.
במסכים קטנים יותר, הגופן Roboto ב-1em פועל בצורה מושלמת עם 10 מילים בשורה, אבל במסכים גדולים יותר נדרשת נקודת עצירה (breakpoint).
במקרה הזה, אם רוחב הדפדפן גדול מ-575px, רוחב התוכן האידאלי הוא 550px.
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
נמנעים מהסתרת תוכן
כדאי להיזהר כשבוחרים איזה תוכן להסתיר או להציג, בהתאם לגודל המסך. אל תסתירו תוכן רק כי לא ניתן להציג אותו במסך. גודל המסך הוא לא אינדיקציה מוחלטת למה שהמשתמש עשוי לרצות. לדוגמה, הסרת ספירת האבקנים מתחזית מזג האוויר עלולה להיות בעיה חמורה לסובלים מאלרגיה באביב שצריכים את המידע כדי להחליט אם הם יכולים לצאת החוצה או לא.
הצגת נקודות עצירה של שאילתת מדיה בכלי הפיתוח ל-Chrome
אחרי שתגדירו את נקודות העצירה בשאילתת המדיה, תרצו לראות איך האתר שלכם נראה איתן. אתם יכולים לשנות את הגודל של חלון הדפדפן כדי להפעיל את נקודות העצירה (breakpoint), אבל לכלי הפיתוח ל-Chrome יש תכונה מובנית שמאפשרת לראות בקלות איך הדף נראה בנקודות עצירה שונות.
כדי להציג את הדף בנקודות עצירה שונות:
פותחים את כלי הפיתוח ומפעילים את מצב המכשיר. התפריט הזה נפתח כברירת מחדל במצב רספונסיבי.
כדי לראות את שאילתות המדיה, פותחים את התפריט 'מצב מכשיר' ובוחרים באפשרות Show media queries (הצגת שאילתות מדיה) כדי להציג את נקודות העצירה כפסים צבעוניים מעל הדף.
לוחצים על אחד מהסרגלים כדי להציג את הדף בזמן ששאילתת המדיה הזו פעילה. ניתן ללחוץ לחיצה ימנית על סרגל כדי לעבור להגדרה של שאילתת המדיה.