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

ה-codelab הזה הוא חלק מקורס ההדרכה בנושא פיתוח Progressive Web Apps, שפותח על ידי צוות ההדרכה של Google Developers. כדי להפיק את המרב מהקורס הזה, מומלץ לעבוד על ה-codelabs לפי הסדר.

פרטים מלאים על הקורס זמינים במאמר סקירה כללית על פיתוח Progressive Web Apps.

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

מבוא

ב-Labs הזה נסביר איך לעצב את התוכן באתר כדי שיהיה רספונסיבי.

מה תלמדו

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

מה חשוב לדעת

• HTML ו-CSS בסיסיים

מה צריך

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

מורידים או משכפלים את מאגר pwa-training-labs מ-GitHub ומתקינים את גרסת ה-LTS של Node.js, אם צריך.

אם אין לכם שרת מועדף לפיתוח מקומי, אתם יכולים להתקין את חבילת http-server של Node.js:

npm install http-server -g

מנווטים לספרייה responsive-design-lab/app/ ומפעילים את השרת:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

אפשר להפסיק את השרת בכל שלב באמצעות Ctrl-c.

פותחים את הדפדפן ועוברים אל localhost:8080/.

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

אם יש לכם כלי לעריכת טקסט שמאפשר לפתוח פרויקט, פותחים את התיקייה responsive-design-lab/app/. כך יהיה לכם קל יותר לשמור על סדר. אחרת, פותחים את התיקייה במערכת הקבצים של המחשב. בתיקייה app/ תבנו את המעבדה.

התיקייה הזו מכילה:

• ‫index.html הוא דף ה-HTML הראשי של האתר או האפליקציה לדוגמה
• ‫modernizr-custom.js הוא כלי לזיהוי תכונות שמפשט את הבדיקה של תמיכה ב-Flexbox
• ‫styles/main.css הוא גיליון הסגנונות מדורג של האתר לדוגמה

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

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

מחליפים את TODO 3 בקובץ index.html בתג הבא:

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

הסבר

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

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

אפשר לקבל מידע נוסף

• הגדרת אזור התצוגה – עקרונות הבסיס של עיצוב אתר רספונסיבי
• שימוש במטא תג של אזור התצוגה כדי לשלוט בפריסה בדפדפנים לנייד – MDN

מחליפים את TODO 4 בקוד styles/main.css בקוד הבא:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

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

הסבר

כדי לוודא שהטקסט קריא, אנחנו משתמשים בשאילתת מדיה כשהרוחב של הדפדפן הופך ל-48rem (768 פיקסלים בגודל הגופן שמוגדר כברירת מחדל בדפדפן, או 48 פעמים גודל הגופן שמוגדר כברירת מחדל בדפדפן של המשתמש). במאמר מתי להשתמש ב-Em לעומת Rem מוסבר למה rem היא בחירה טובה ליחידות יחסיות. כשמתבצעת הפעלה של שאילתת המדיה, אנחנו משנים את הפריסה משלוש עמודות לעמודה אחת על ידי שינוי הערך width של כל אחד משלושת התגים div כך שימלא את הדף.

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

הוספת הערות לכללים קיימים ב-CSS

מוסיפים הערה לכל הכללים ב-styles/main.css על ידי הוספת /* ו-*/ מסביב לכל כלל. נשתמש בהן ככללי ברירת מחדל במקרים שבהם Flexbox לא נתמך, כמו שמוסבר בקטע Flexbox כשיפור הדרגתי.

הוספת פריסת Flexbox

מחליפים את TODO 5.2 בקוד styles/main.css בקוד הבא:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

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

הסבר

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

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

אפשר לקבל מידע נוסף

• מדריך מלא ל-Flexbox – CSS Tricks
• ‫CSS Flexible Box Layout Module Level 1 – W3C
• אילו כללי CSS צריך להוסיף להם קידומת?
• שימוש ב-Flexbox – CSS Tricks

אופציונלי: הגדרת רוחבים יחסיים שונים

משתמשים בפסאודו-מחלקת nth-child כדי להגדיר את הרוחב היחסי של שתי העמודות הראשונות ל-1 ושל העמודה השלישית ל-1.5. צריך להשתמש במאפיין flex כדי להגדיר את הרוחב היחסי של כל עמודה. לדוגמה, הבורר של העמודה הראשונה ייראה כך:

.container .col:nth-child(1)

שימוש בשאילתות מדיה עם Flexbox

מחליפים את TODO 5.4 בקובץ styles/main.css בקוד הבא:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

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

הסבר

כשמתבצעת הפעלה של שאילתת המדיה, אנחנו משנים את הפריסה משלוש עמודות לעמודה אחת על ידי הגדרת המאפיין flex-flow לערך column. התוצאה זהה לזו של שאילתת המדיה שהוספנו בשלב 5. ‫Flexbox מספק הרבה מאפיינים אחרים כמו flex-flow שמאפשרים לכם לבנות את התוכן, לשנות את הסדר שלו וליישר אותו בקלות, כך שהוא יגיב היטב בכל הקשר.

‫Flexbox היא טכנולוגיה חדשה יחסית, ולכן כדאי לכלול חלופות ב-CSS.

הוספת Modernizr

‫Modernizr הוא כלי לזיהוי תכונות שמפשט את הבדיקה של תמיכה ב-Flexbox.

מחליפים את TODO 6.1 בקובץ index.html בקוד שכולל את הגרסה המותאמת אישית של Modernizr:

<script src="modernizr-custom.js"></script>

הסבר

בראש הקובץ index.html כללנו Modernizr build, שבודק אם יש תמיכה ב-Flexbox. הבדיקה מופעלת בטעינת הדף, ואם הדפדפן תומך ב-Flexbox, המחלקה flexbox מצורפת לרכיב <html>. אחרת, היא מוסיפה את המחלקה no-flexbox לרכיב <html>. בקטע הבא אנחנו מוסיפים את המחלקות האלה ל-CSS.

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

שימוש ב-Flexbox באופן הדרגתי

נשתמש במחלקות flexbox ו-no-flexbox ב-CSS כדי לספק כללים חלופיים כש-Flexbox לא נתמך.

עכשיו, ב-styles/main.css, מוסיפים .no-flexbox לפני כל כלל שהוספנו לו הערה:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

באותו קובץ, מוסיפים את .flexbox לפני שאר הכללים:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

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

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

אפשר לקבל מידע נוסף

• מעבר ל-Flexbox – Cutting the Mustard
• מסמכי תיעוד של Modernizr

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

מה נכלל

• הגדרת אזור התצוגה החזותי
• Flexbox
• שאילתות מדיה

משאבים

מידע נוסף על עקרונות הבסיס של עיצוב רספונסיבי

• עקרונות הבסיס של עיצוב אתר רספונסיבי – הגדרת אזור התצוגה
• סיפור על שני אזורי תצוגה

מידע נוסף על Flexbox כשיפור הדרגתי

• שיפור הדרגתי: איך להתחיל להשתמש ב-CSS בלי לשבור דפדפנים ישנים
• העברה ל-Flexbox באמצעות Cut the Mustard
• Modernizr

מידע על ספריות ל-CSS רספונסיבי

• Bootstrap
• Sass
• פחות
• Material Design

מידע נוסף על השימוש בשאילתות מדיה

• שימוש בשאילתות מדיה

כדי לראות את כל ה-codelabs בקורס ההדרכה בנושא PWA, אפשר לעיין ב-codelab המבוא לקורס.